Tokens · @luz-ds/tokens
Tokens
Propiedades personalizadas de CSS para todos los valores de color, espacio, tamaño y tipografía. Usa los semánticos: cambian según el modo de color.
Dos capas
- Los primitivos contienen valores sin procesar:
--luz-blue-60,--luz-space-md. Son iguales en todos los modos. - Los tokens semánticos asignan una función a un color:
--luz-text-primary,--luz-surface-page. En cada modo apuntan a distintos primitivos. - Las escalas de espacio, tamaño, radio, sombra y tipografía, los roles tipográficos, los puntos de ruptura y el movimiento son primitivos que los componentes usan directamente: no cambian según el modo.
packages/tokens/tokens.json the source of the primitives
packages/tokens/src/semantic.css the semantic colours, per mode
dist/luz-tokens.css both layers, and the ET Book font
dist/tokens.css both layers, no fontUsa colores semánticos, nunca primitivos
Un componente que usa un color primitivo se ve bien en un modo y mal en los demás.
/* Do: semantic tokens follow the mode */
.panel {
color: var(--luz-text-primary);
background: var(--luz-surface);
border: 1px solid var(--luz-divider);
padding: var(--luz-space-md);
}
/* Don't: a primitive colour stays the same in dark mode */
.panel {
color: var(--luz-gray-100);
background: var(--luz-blue-10);
}Texto sobre un relleno sólido
Con --luz-text-on-fill, usa un token de relleno, no el color de marca ni el de estado.
- Los rellenos:
--luz-brand-fill,--luz-brand-fill-hover,--luz-brand-fill-activey--luz-color-danger-fill. - En los modos claro y de alto contraste, equivalen a los colores de marca y de peligro. En el modo oscuro son un nivel más oscuros: el color oscuro de marca es lo bastante claro para leerse como texto, y el texto blanco sobre él no alcanza 4,5:1.
Familias de tokens
-
Color
Todos los colores que puede usar un componente, con nombres según su función y sus valores en claro, oscuro y alto contraste, uno junto al otro.
-
Espaciado y tamaños
La escala de espaciado para separaciones y rellenos, y las alturas de botones y campos.
-
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.
-
Modos de color y temas
Cambia entre claro, oscuro y alto contraste con un solo atributo, o crea tu propio aspecto.
-
Radio
La escala de radios de esquina: cuadrado, 2px, como máximo 4px, y redondo.
-
Sombras
La escala de elevación: cuánto parece flotar una superficie sobre la página.
-
Movimiento
Las duraciones y funciones de aceleración de cada transición, que pasan a cero cuando quien lee prefiere reducir el movimiento. Incluido en @luz-ds/tokens.
-
Capas
Qué capa queda encima: el z-index de cada elemento superpuesto, en orden. Incluido en @luz-ds/core.
-
Maquetación y puntos de ruptura
El ancho del contenido y dónde cambia la maquetación. Los anchos se incluyen en @luz-ds/core y los puntos de ruptura en @luz-ds/tokens.
-
Paleta de colores
Las escalas de colores primitivos. Solo para quienes crean temas: los componentes nunca las usan.
-
Tokens en Figma
Los tokens en un único archivo design-tokens para las variables de Figma y otras herramientas de diseño, con los mismos nombres y los tres modos.
-
Comprobador de contraste
Comprueba tus propias sobrescrituras de color frente al contraste que promete LUZ, con un comando o en la página, antes de que lleguen a quien la use.
-
Crea tu propio tema
LUZ incluye un aspecto en tres modos de color. Tu propio tema es un archivo de tokens semánticos: parte de la plantilla, compruébalo y cárgalo.