Tokens · Familias de tokens

Espaciado y tamaños

La escala de espaciado para separaciones y rellenos, y las alturas de botones y campos.

Archivos: tokens.json → spacing

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Obtén de esta escala todas las separaciones, rellenos y márgenes para que el espaciado sea coherente entre componentes. Usa los pasos pequeños dentro de un componente y los grandes entre secciones.

--luz-space-3xs unit × ½ · 2px
--luz-space-2xs unit × 1 · 4px
--luz-space-xs unit × 2 · 8px
--luz-space-sm unit × 3 · 12px
--luz-space-md unit × 4 · 16px
--luz-space-lg unit × 6 · 24px
--luz-space-xl unit × 8 · 32px
--luz-space-2xl unit × 12 · 48px
--luz-space-3xl unit × 16 · 64px
--luz-space-4xl unit × 24 · 96px

--luz-space-unit0.25rem · 4pxLa cuadrícula de la que son múltiplos todos los pasos; se expresa en rem para que el espaciado siga el tamaño de fuente de quien lee

Una línea fina de 2px y, después, la unidad --luz-space-unit (0.25rem, 4px con una raíz de 16px) multiplicada por 1, 2, 3, 4, 6, 8, 12, 16 y 24: cada potencia de dos y el paso intermedio de 1,5×. La unidad se expresa en rem, así que el espaciado sigue, como el texto, el tamaño de fuente que se configura en el navegador. Defínela en :root para cambiar toda la escala; los componentes usan los pasos, nunca la unidad.

Alturas de los controles

tokens.json → control

--luz-control-sm · 28px

--luz-control-md · 36px

--luz-control-lg · 44px

--luz-control-xl · 56px

44px es el tamaño objetivo de WCAG 2.5.5; los demás pasos distan aproximadamente 1,25× en la cuadrícula de 4px.

--luz-control-sm: botones de cierre y otros objetivos pequeños para iconos.
--luz-control-md: botones pequeños.
--luz-control-lg: botones y campos; es el valor predeterminado.
--luz-control-xl: botones grandes.