🎨 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.