Saltar al contenido
Alea0.1
Pro
  1. Alea
  2. Diseño
  3. Fundamentos
  4. Espacio y tamaños

Fundamentos

Espacio y tamaños

Espacio en una escala de 4 px, alturas de controles que se alinean, radios generosos y tres sombras.

Espacio

--alea-space-00px
--alea-space-0-52px
--alea-space-14px
--alea-space-28px
--alea-space-312px
--alea-space-416px
--alea-space-520px
--alea-space-624px
--alea-space-728px
--alea-space-832px
--alea-space-1040px
--alea-space-1248px
--alea-space-1664px
--alea-space-2080px
--alea-space-2496px

Radio

--alea-radius-xs8px
--alea-radius-sm12px
--alea-radius-field16px
--alea-radius-md20px
--alea-radius-lg28px
--alea-radius-xl36px
--alea-radius-full9999px

Tamaños de controles

--alea-size-control-sm32px
--alea-size-control-md40px
--alea-size-control-lg48px
--alea-size-field44px
--alea-size-icon-sm16px
--alea-size-icon-md20px
--alea-size-icon-lg24px

Sombras

--alea-shadow-card
--alea-shadow-pop
--alea-shadow-glow

Capas

--alea-z-dropdown1000
--alea-z-sticky1100
--alea-z-overlay1200
--alea-z-modal1300
--alea-z-toast1400
--alea-z-tooltip1500
--alea-breakpoint-sm640px
--alea-breakpoint-md768px
--alea-breakpoint-lg1024px
--alea-breakpoint-xl1280px

Espacio que encaja

El padding y los gaps salen de la escala, así los componentes se alinean sin medir.

4
3
padding: var(--alea-space-4); /* 16px */
gap: var(--alea-space-3); /* 12px */

Esquinas anidadas

8
outer 28px − space 8px = inner 20px

Las esquinas anidadas se ven paralelas cuando el radio interior es el radio exterior menos el espacio entre ellas.

Densidad

brandVariables({ density: 'compact' }) ajusta las alturas de los controles y el espacio para pantallas con muchos datos; la escala sigue igual.