Tokens · Familias de tokens
Tipografía
Las tres pilas de fuentes, la escala tipográfica en rem y el tamaño mínimo que puede usar cada tipo de texto.
-
--luz-font-sansSans del sistema 400 600 700 cursiva -
--luz-font-serifET Book 400 600 700 cursiva -
--luz-font-monoMono del sistema 400 700 cursiva
-
--luz-text-xs0.75rem · 12px Ligero, útil y sin dependencias -
--luz-text-sm0.875rem · 14px Ligero, útil y sin dependencias -
--luz-text-md0.9375rem · 15px Ligero, útil y sin dependencias -
--luz-text-base1rem · 16px Ligero, útil y sin dependencias -
--luz-text-lg1.25rem · 20px Ligero, útil y sin dependencias -
--luz-text-xl1.5625rem · 25px Ligero, útil y sin dependencias -
--luz-text-2xl1.9375rem · 31px Ligero, útil y sin dependencias -
--luz-text-3xl2.4375rem · 39px Ligero, útil y sin dependencias -
--luz-text-4xl3.0625rem · 49px Ligero, útil y sin dependencias
--luz-type-base1rem · 16pxEl tamaño de--luz-text-basey la base a partir de la cual se calculan los demás pasos--luz-type-ratio1.25El multiplicador entre dos pasos por encima de la base y el divisor por debajo
Dos parámetros determinan el tamaño de toda la escala. Defínelos en rem en :root, dentro de tu CSS; definirlos en body o en una sección no cambia nada. Los componentes leen los pasos --luz-text-*, nunca los parámetros.
Funciones de las fuentes
--luz-font-bodyvar(--luz-font-serif)Texto corrido: la serif. Los controles, etiquetas, tablas y navegación usan la sans--luz-font-headingvar(--luz-font-serif)Familia tipográfica de los encabezados--luz-text-bodycalc(var(--luz-text-base) * 1.0625)Texto corrido, 17px con los valores predeterminados: un paso por encima de la base porque la altura x de ET Book es pequeña. Sigue el parámetro base--luz-text-controlvar(--luz-text-md)Texto de campos de formulario; al menos 16px (max(1rem, --luz-text-base)) a 768px o menos y en pantallas táctiles
Los tres primeros se incluyen en tokens, con el cambio a la sans en un elemento marcado lang="ar"; --luz-text-control se incluye en core.
Escala tipográfica y tamaños mínimos
Todos los tamaños se expresan en rem, así que el texto sigue el tamaño de fuente que se configure en el navegador, no solo el zoom de página (WCAG 1.4.4). La escala es igual para todos los anchos de ventana: ningún punto de ruptura reduce el texto. Por encima de la base de 16px, cada paso es el anterior multiplicado por 1.25 y redondeado a 1/16 rem (un píxel entero con el valor predeterminado); por debajo están los mínimos de legibilidad. La columna Fórmula muestra la cadena tal como la escribe la hoja de estilos; un navegador compatible con round() redondea cada paso a 1/16 rem y obtiene el valor de la columna Valor.
| Token | Fórmula | Valor | Con raíz de 16px | Uso |
|---|---|---|---|---|
--luz-text-xs | max(0.75rem, calc(var(--luz-text-sm) / var(--luz-type-ratio))) | 0.75rem | 12px | Mínimo absoluto. Solo microtexto: insignias, etiquetas, contadores y versiones. Nunca para texto corrido. |
--luz-text-sm | max(0.875rem, calc(var(--luz-text-base) / var(--luz-type-ratio))) | 0.875rem | 14px | Mínimo para texto secundario y de interfaz: ayudas y errores, pies de foto, encabezados de tabla, migas de pan y tooltips. |
--luz-text-md | calc((var(--luz-text-sm) + var(--luz-text-base)) / 2) | 0.9375rem | 15px | Texto predeterminado de la interfaz: botones, etiquetas, celdas de tabla, pestañas y navegación. |
--luz-text-base | var(--luz-type-base) | 1rem | 16px | La base de la escala y el texto de interfaz en un tamaño mayor. Campos de formulario en pantallas táctiles. El texto corrido usa --luz-text-body, un paso por encima. |
--luz-text-lg | calc(var(--luz-text-base) * var(--luz-type-ratio)) | 1.25rem | 20px | Párrafos introductorios y títulos de diálogo. |
--luz-text-xl | calc(var(--luz-text-lg) * var(--luz-type-ratio)) | 1.5625rem | 25px | Encabezados. |
--luz-text-2xl | calc(var(--luz-text-xl) * var(--luz-type-ratio)) | 1.9375rem | 31px | Encabezados. |
--luz-text-3xl | calc(var(--luz-text-2xl) * var(--luz-type-ratio)) | 2.4375rem | 39px | Títulos de página. |
--luz-text-4xl | calc(var(--luz-text-3xl) * var(--luz-type-ratio)) | 3.0625rem | 49px | Texto de exhibición. |
- El texto del cuerpo usa
--luz-text-body(17px con los valores predeterminados), con una altura de línea de 1.6. - El texto secundario y de interfaz nunca es inferior a
--luz-text-sm(14px). - Nada baja de
--luz-text-xs(12px). Los tamaños relativos a su contexto (kbd,time,output, código en línea y pies) se limitan conmax()para que no bajen del mínimo dentro de texto pequeño. - Los campos de formulario usan
--luz-text-control(configuración de core):--luz-text-mden ordenadores;max(1rem, var(--luz-text-base))a 768px o menos y en pantallas táctiles, nunca por debajo de 16px, porque iOS Safari amplía la página al enfocar cualquier campo más pequeño.