🎨 Tipografía

El sistema está basado en la tipografía Poppins, utilizando principalmente los pesos Regular (400) y Bold (700).
También se incluyen pesos adicionales como Light, Medium, SemiBold y ExtraBold para lograr mayor flexibilidad.

✨ Fuente tipográfica: Poppins

La tipografía se carga de manera local mediante archivos .woff2 y se expone globalmente a través de variables SCSS.

Variantes de fuente cargadas

@font-face {
  font-family: 'Poppins';
  src: url('../../fonts/poppins/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
...

🌐 Variables globales de tipografía

Todas las variables tipográficas se definen en :root para garantizar consistencia en todos los microfrontends.

:root {
  --alp-font-family-base: 'Poppins', sans-serif;
  --alp-font-weight-light: 300;
  --alp-font-weight-bold: 700;
 ...
}

🔠 Escala tipográfica

A continuación se muestra el conjunto completo de categorías tipográficas definidas en el Sistema de Diseño de Alpura.
Cada estilo cuenta con variaciones Baseline y Énfasis.

📊 Tabla de tipografía

Categoría	Variante	Clase Baseline	Clase Énfasis	Tamaño	Line Height
Display	Large	`.alp-text-display-large-baseline`	`.alp-text-display-large-emphasized`	57px	64px
	Medium	`.alp-text-display-medium-baseline`	`.alp-text-display-medium-emphasized`	45px	52px
	Small	`.alp-text-display-small-baseline`	`.alp-text-display-small-emphasized`	36px	44px
Headline	Large	`.alp-text-headline-large-baseline`	`.alp-text-headline-large-emphasized`	32px	40px
	Medium	`.alp-text-headline-medium-baseline`	`.alp-text-headline-medium-emphasized`	28px	36px
	Small	`.alp-text-headline-small-baseline`	`.alp-text-headline-small-emphasized`	24px	32px
Title	Large	`.alp-text-title-large-baseline`	`.alp-text-title-large-emphasized`	22px	28px
	Medium	`.alp-text-title-medium-baseline`	`.alp-text-title-medium-emphasized`	16px	24px
	Small	`.alp-text-title-small-baseline`	`.alp-text-title-small-emphasized`	14px	20px
Label	Large	`.alp-text-label-large-baseline`	`.alp-text-label-large-emphasized`	14px	20px
	Medium	`.alp-text-label-medium-baseline`	`.alp-text-label-medium-emphasized`	12px	16px
	Small	`.alp-text-label-small-baseline`	`.alp-text-label-small-emphasized`	11px	16px
Body	Large	`.alp-text-body-large-baseline`	`.alp-text-body-large-emphasized`	16px	24px
	Medium	`.alp-text-body-medium-baseline`	`.alp-text-body-medium-emphasized`	14px	20px
	Small	`.alp-text-body-small-baseline`	`.alp-text-body-small-emphasized`	12px	16px

🧩 Uso en microfrontends

Como las variables se definen globalmente:

font-family: var(--alp-font-family-base);

Cada microfrontend puede utilizar la tipografía sin necesidad de importar nuevamente los archivos.

✨ Crear tus propias clases tipográficas personalizadas

El sistema de tipografía está diseñado para ser extensible, lo que significa que cada desarrollador puede crear fácilmente nuevas clases tipográficas reutilizando el mismo patrón que ya usa el Design System.

Esto se logra mediante el mixin:

@include type-style(size, line-height, letter-spacing, font-weight);

y utilizando las variables globales definidas en :root.

📌 Ejemplo explicado

La siguiente clase es un ejemplo de cómo crear una variante tipográfica personalizada:

.alp-text-body-medium-extra-light-baseline {
  @include type-style(
    var(--alp-text-body-medium-size),
    var(--alp-text-body-medium-lh),
    var(--alp-text-body-medium-ls),
    var(--alp-text-font-weight-extra-light)
  );
}

¿Qué está haciendo esta clase?

Usa el mixin type-style
Aplica el tamaño, line-height y letter-spacing del estilo Body Medium
Pero cambia el peso de la fuente por Extra Light (200) usando la variable:

var(--alp-text-font-weight-extra-light)

Esto te permite mantener coherencia visual pero crear variantes más finas, ligeras o específicas según las necesidades del diseño.

📐 Ejemplo de uso (clases)

<h1 class="alp-text-display-large-baseline">
  Welcome to the Dashboard
</h1>

<p class="alp-text-body-medium-baseline">
  This section shows your recent activity and key metrics.
</p>

<span class="alp-text-label-small-emphasized">
  REQUIRED FIELD
</span>

📘 Ejemplos prácticos de uso de la tipografía global

▶️ Clase básica usando la fuente global

.texto-general {
  font-family: var(--alp-font-family-base);
  color:#00ccee;
}

<p class="texto-general">
  Este es un texto usando la fuente global del sistema.
</p>

📬 Soporte

Para dudas o mantenimiento contactar al equipo de arquitectura.

✨ Fuente tipográfica: Poppins​

Variantes de fuente cargadas​

🌐 Variables globales de tipografía​

🔠 Escala tipográfica

📊 Tabla de tipografía​

🧩 Uso en microfrontends​

✨ Crear tus propias clases tipográficas personalizadas​

📌 Ejemplo explicado​

¿Qué está haciendo esta clase?​

📐 Ejemplo de uso (clases)​

📘 Ejemplos prácticos de uso de la tipografía global​

📬 Soporte​