'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Fundamentos
Tokens de diseño
Cada token, leído de las fuentes: su nombre, la variable CSS con un botón para copiarla, el valor en cada tema y densidad, y una muestra en vivo. Filtra por nombre o valor, o por familia.
312 tokens
Primitivos de color
Las escalas base y algunos colores sueltos. Los colores del tema son alias de estos, así que cambiar una escala cambia todos los temas que la usan. Úsalos para ilustraciones y gráficos; en la interfaz usa los colores del tema.
| Token | CSS variable | Valor | Current | Muestra |
|---|---|---|---|---|
color.purple.50 | --alea-purple-50 | #faf2ff | Cargando | |
color.purple.100 | --alea-purple-100 | #f5e2ff | Cargando | |
color.purple.200 | --alea-purple-200 | #edcaff | Cargando | |
color.purple.300 | --alea-purple-300 | #e1a4ff | Cargando | |
color.purple.400 | --alea-purple-400 | #cd57ff | Cargando | |
color.purple.500 | --alea-purple-500 | #c144f4 | Cargando | |
color.purple.600 | --alea-purple-600 | #ae2ae0 | Cargando | |
color.purple.650 | --alea-purple-650 | #8b2fd6 | Cargando | |
color.purple.700 | --alea-purple-700 | #940dc2 | Cargando | |
color.purple.800 | --alea-purple-800 | #7d01a5 | Cargando | |
color.purple.900 | --alea-purple-900 | #6a068b | Cargando | |
color.purple.950 | --alea-purple-950 | #2f183b | Cargando | |
color.yellow.50 | --alea-yellow-50 | #fff5d9 | Cargando | |
color.yellow.100 | --alea-yellow-100 | #ffe8a9 | Cargando | |
color.yellow.200 | --alea-yellow-200 | #ffce1f | Cargando | |
color.yellow.300 | --alea-yellow-300 | #e9ba00 | Cargando | |
color.yellow.400 | --alea-yellow-400 | #c29b00 | Cargando | |
color.yellow.500 | --alea-yellow-500 | #a98700 | Cargando | |
color.yellow.600 | --alea-yellow-600 | #947600 | Cargando | |
color.yellow.700 | --alea-yellow-700 | #7b6100 | Cargando | |
color.yellow.800 | --alea-yellow-800 | #675100 | Cargando | |
color.yellow.900 | --alea-yellow-900 | #574400 | Cargando | |
color.yellow.950 | --alea-yellow-950 | #2d2200 | Cargando | |
color.violet.50 | --alea-violet-50 | #f5f4ff | Cargando | |
color.violet.100 | --alea-violet-100 | #e9e7ff | Cargando | |
color.violet.200 | --alea-violet-200 | #d8d3ff | Cargando | |
color.violet.300 | --alea-violet-300 | #c0b5ff | Cargando | |
color.violet.400 | --alea-violet-400 | #a189ff | Cargando | |
color.violet.500 | --alea-violet-500 | #8b6cf0 | Cargando | |
color.violet.600 | --alea-violet-600 | #7d5cdf | Cargando | |
color.violet.700 | --alea-violet-700 | #6848c2 | Cargando | |
color.violet.800 | --alea-violet-800 | #573ba4 | Cargando | |
color.violet.900 | --alea-violet-900 | #49328b | Cargando | |
color.violet.950 | --alea-violet-950 | #241f3a | Cargando | |
color.neutral.50 | --alea-neutral-50 | #f6f5f4 | Cargando | |
color.neutral.100 | --alea-neutral-100 | #ebe9e7 | Cargando | |
color.neutral.200 | --alea-neutral-200 | #dbd9d5 | Cargando | |
color.neutral.300 | --alea-neutral-300 | #c3c0ba | Cargando | |
color.neutral.400 | --alea-neutral-400 | #a49f98 | Cargando | |
color.neutral.500 | --alea-neutral-500 | #8c8780 | Cargando | |
color.neutral.600 | --alea-neutral-600 | #7e7972 | Cargando | |
color.neutral.700 | --alea-neutral-700 | #68645e | Cargando | |
color.neutral.800 | --alea-neutral-800 | #57534d | Cargando | |
color.neutral.900 | --alea-neutral-900 | #494641 | Cargando | |
color.neutral.950 | --alea-neutral-950 | #242322 | Cargando | |
color.green.50 | --alea-green-50 | #e5fcec | Cargando | |
color.green.100 | --alea-green-100 | #c7f8d5 | Cargando | |
color.green.200 | --alea-green-200 | #9af0b6 | Cargando | |
color.green.300 | --alea-green-300 | #3ddc84 | Cargando | |
color.green.400 | --alea-green-400 | #00be6a | Cargando | |
color.green.500 | --alea-green-500 | #00a65c | Cargando | |
color.green.600 | --alea-green-600 | #00914f | Cargando | |
color.green.700 | --alea-green-700 | #007941 | Cargando | |
color.green.800 | --alea-green-800 | #006535 | Cargando | |
color.green.900 | --alea-green-900 | #00552c | Cargando | |
color.green.950 | --alea-green-950 | #022c15 | Cargando | |
color.red.50 | --alea-red-50 | #fff2f1 | Cargando | |
color.red.100 | --alea-red-100 | #ffe2e0 | Cargando | |
color.red.200 | --alea-red-200 | #ffcac7 | Cargando | |
color.red.300 | --alea-red-300 | #ffa49f | Cargando | |
color.red.400 | --alea-red-400 | #fc6968 | Cargando | |
color.red.500 | --alea-red-500 | #e5484d | Cargando | |
color.red.600 | --alea-red-600 | #d4363f | Cargando | |
color.red.650 | --alea-red-650 | #c62828 | Cargando | |
color.red.700 | --alea-red-700 | #b6212e | Cargando | |
color.red.800 | --alea-red-800 | #9a1624 | Cargando | |
color.red.900 | --alea-red-900 | #83151e | Cargando | |
color.red.950 | --alea-red-950 | #391817 | Cargando | |
color.amber.50 | --alea-amber-50 | #fff4e6 | Cargando | |
color.amber.100 | --alea-amber-100 | #ffe5c6 | Cargando | |
color.amber.200 | --alea-amber-200 | #ffd095 | Cargando | |
color.amber.300 | --alea-amber-300 | #f5a524 | Cargando | |
color.amber.400 | --alea-amber-400 | #d88e00 | Cargando | |
color.amber.500 | --alea-amber-500 | #bd7b00 | Cargando | |
color.amber.600 | --alea-amber-600 | #a56b00 | Cargando | |
color.amber.700 | --alea-amber-700 | #8a5900 | Cargando | |
color.amber.800 | --alea-amber-800 | #734900 | Cargando | |
color.amber.900 | --alea-amber-900 | #623e00 | Cargando | |
color.amber.950 | --alea-amber-950 | #331f01 | Cargando | |
color.blue.50 | --alea-blue-50 | #f0f6ff | Cargando | |
color.blue.100 | --alea-blue-100 | #deebff | Cargando | |
color.blue.200 | --alea-blue-200 | #c4dbff | Cargando | |
color.blue.300 | --alea-blue-300 | #9cc2ff | Cargando | |
color.blue.400 | --alea-blue-400 | #639eff | Cargando | |
color.blue.500 | --alea-blue-500 | #3b82f6 | Cargando | |
color.blue.600 | --alea-blue-600 | #2c73e6 | Cargando | |
color.blue.700 | --alea-blue-700 | #1b5ec8 | Cargando | |
color.blue.800 | --alea-blue-800 | #124daa | Cargando | |
color.blue.900 | --alea-blue-900 | #104290 | Cargando | |
color.blue.950 | --alea-blue-950 | #14233c | Cargando | |
color.white | --alea-white | #ffffff | Cargando | |
color.black | --alea-black | #111011 | Cargando | |
color.blue-gray.550 | --alea-blue-gray-550 | #33363f | Cargando | |
color.gray.50 | --alea-gray-50 | #f9f8f5 | Cargando | |
color.gray.100 | --alea-gray-100 | #f7f7f7 | Cargando | |
color.gray.300 | --alea-gray-300 | #f7f4f2 | Cargando | |
color.gray.400 | --alea-gray-400 | #dbdbdb | Cargando | |
color.gray.700 | --alea-gray-700 | #1d1c1b | Cargando | |
color.gray.800 | --alea-gray-800 | #121212 | Cargando | |
color.gray.950 | --alea-gray-950 | #020202 | Cargando | |
color.gray.1000 | --alea-gray-1000 | #000000 | Cargando | |
color.transparent | --alea-transparent | #00000000 | Cargando | |
color.warm-gray.350 | --alea-warm-gray-350 | #3c2814 | Cargando |
Colores del tema
Los colores que usan los componentes. Cada uno tiene un valor oscuro y uno claro; el alto contraste reemplaza los que necesitan más (look por defecto: cada look puede ajustar los suyos). La columna Actual se lee de esta página, así que sigue el look, el tema y el alto contraste que elegiste en la cabecera.
| Token | CSS variable | Oscuro | Claro | Alto contraste | Current | Muestra |
|---|---|---|---|---|---|---|
bg.default | --alea-bg | #272625 | #f7f4f2 | Oscuro #000000Claro #ffffff | Cargando | |
bg.deep | --alea-bg-deep | #1f1e1d | #efebe7 | Sin cambios | Cargando | |
surface.default | --alea-surface | #1d1c1b | #ffffff | Sin cambios | Cargando | |
surface.deep | --alea-surface-deep | #121212 | #f3f0ec | Sin cambios | Cargando | |
surface.raised | --alea-surface-raised | #262829 | #ebe7e2 | Sin cambios | Cargando | |
surface.hover | --alea-surface-hover | #242322 | #faf8f6 | Sin cambios | Cargando | |
surface.overlay | --alea-surface-overlay | #000000b8 | #1110115c | Sin cambios | Cargando | |
border.default | --alea-border | #ffffff14 | #11101117 | Oscuro #ffffff5cClaro #11101166 | Cargando | |
border.strong | --alea-border-strong | #ffffff2e | #11101133 | Oscuro #ffffff8cClaro #11101199 | Cargando | |
border.control | --alea-border-control | #ffffff5c | #11101180 | Oscuro #ffffffccClaro #111011e6 | Cargando | |
text.default | --alea-text | #f7f7f7 | #111011 | Oscuro #ffffffClaro #000000 | Cargando | Aa |
text.soft | --alea-text-soft | #f9f8f5 | #1d1c1b | Sin cambios | Cargando | Aa |
text.muted | --alea-text-muted | #dbdbdbd1 | #111011bd | Oscuro #f0f0f0Claro #111011 | Cargando | Aa |
text.faint | --alea-text-faint | #dbdbdb99 | #1110119e | Oscuro #e0e0e0Claro #2a292a | Cargando | Aa |
accent.default | --alea-accent | #cd57ff | #c144f4 | Sin cambios | Cargando | |
accent.strong | --alea-accent-strong | #e1a4ff | #940dc2 | Oscuro #edcaffClaro #6a068b | Cargando | |
accent.second | --alea-accent-second | #ffce1f | #ffce1f | Sin cambios | Cargando | |
accent.third | --alea-accent-third | #8b6cf0 | #8b6cf0 | Sin cambios | Cargando | |
accent.subtle | --alea-accent-subtle | #cd57ff24 | #cd57ff1f | Sin cambios | Cargando | |
accent.on | --alea-accent-on | #111011 | #111011 | Claro #ffffff | Cargando | Aa |
accent.solid | --alea-accent-solid | #cd57ff | #cd57ff | Oscuro #e1a4ffClaro #6a068b | Cargando | |
focus.default | --alea-focus | #cd57ff | #8b2fd6 | Sin cambios | Cargando | |
focus.halo | --alea-focus-halo | #cd57ff33 | #8b2fd62e | Sin cambios | Cargando | |
chip.bg | --alea-chip-bg | #ffffff | #111011 | Sin cambios | Cargando | |
chip.text | --alea-chip-text | #111011 | #f9f8f5 | Sin cambios | Cargando | Aa |
button.ring | --alea-button-ring | #242628 | #e3dfda | Sin cambios | Cargando | |
button.top | --alea-button-top | #33363f | #33363f | Sin cambios | Cargando | |
button.bottom | --alea-button-bottom | #020202 | #020202 | Sin cambios | Cargando | |
button.text | --alea-button-text | #f7f7f7 | #f7f7f7 | Sin cambios | Cargando | Aa |
field.bg | --alea-field-bg | #121212 | #f7f4f2 | Sin cambios | Cargando | |
status.success | --alea-status-success | #3ddc84 | #006535 | Oscuro #9af0b6Claro color-mix(in oklab, #00552c 80%, #000) | Cargando | |
status.success-bg | --alea-status-success-bg | #3ddc841f | #11804a1a | Sin cambios | Cargando | |
status.danger | --alea-status-danger | #ff9595 | #a22020 | Oscuro #ffcac7Claro #83151e | Cargando | |
status.danger-bg | --alea-status-danger-bg | #ff7a7a1f | #c6282814 | Sin cambios | Cargando | |
status.warning | --alea-status-warning | #f5a524 | #7a4e00 | Oscuro #ffd095Claro #623e00 | Cargando | |
status.warning-bg | --alea-status-warning-bg | #f5a5241f | #f5a5241f | Sin cambios | Cargando | |
status.info | --alea-status-info | #9cc2ff | #1752b0 | Oscuro #c4dbffClaro #104290 | Cargando | |
status.info-bg | --alea-status-info-bg | #3b82f61f | #3b82f61a | Sin cambios | Cargando | |
status.on | --alea-status-on | #111011 | #ffffff | Sin cambios | Cargando | Aa |
status.success-solid | --alea-status-success-solid | #3ddc84 | #3ddc84 | Sin cambios | Cargando | |
status.success-on-solid | --alea-status-success-on-solid | #111011 | #111011 | Sin cambios | Cargando | Aa |
status.warning-solid | --alea-status-warning-solid | #f5a524 | #f5a524 | Sin cambios | Cargando | |
status.warning-on-solid | --alea-status-warning-on-solid | #111011 | #111011 | Sin cambios | Cargando | Aa |
status.danger-solid | --alea-status-danger-solid | #e5484d | #d4363f | Oscuro #ffa49fClaro #9a1624 | Cargando | |
status.danger-solid-hover | --alea-status-danger-solid-hover | #fc6968 | #b6212e | Oscuro #fc6968Claro #83151e | Cargando | |
status.danger-on-solid | --alea-status-danger-on-solid | #111011 | #ffffff | Oscuro #111011 | Cargando | Aa |
status.info-solid | --alea-status-info-solid | #1b5ec8 | #1b5ec8 | Oscuro #124daaClaro #124daa | Cargando | |
status.info-on-solid | --alea-status-info-on-solid | #ffffff | #ffffff | Sin cambios | Cargando | Aa |
presence.online | --alea-presence-online | #3ddc84 | #00914f | Sin cambios | Cargando | |
presence.away | --alea-presence-away | #f5a524 | #bd7b00 | Sin cambios | Cargando | |
presence.busy | --alea-presence-busy | #e5484d | #d4363f | Sin cambios | Cargando | |
presence.offline | --alea-presence-offline | #8c8780 | #8c8780 | Sin cambios | Cargando | |
rating.fill | --alea-rating-fill | #ffce1f | #bd7b00 | Sin cambios | Cargando | |
control.thumb | --alea-control-thumb | #ffffff | #ffffff | Sin cambios | Cargando | |
on-media | --alea-on-media | #ffffff | #ffffff | Sin cambios | Cargando | |
media-backdrop | --alea-media-backdrop | #000000 | #000000 | Sin cambios | Cargando | |
media-scrim | --alea-media-scrim | #000000bf | #000000bf | Sin cambios | Cargando | |
chart.2 | --alea-chart-2 | #ffce1f | #bd7b00 | Sin cambios | Cargando | |
chart.3 | --alea-chart-3 | #8b6cf0 | #7d5cdf | Sin cambios | Cargando | |
chart.4 | --alea-chart-4 | #3ddc84 | #00914f | Sin cambios | Cargando | |
chart.5 | --alea-chart-5 | #639eff | #2c73e6 | Sin cambios | Cargando | |
chart.6 | --alea-chart-6 | #fc6968 | #d4363f | Sin cambios | Cargando | |
chart.7 | --alea-chart-7 | #f5a524 | #8a5900 | Sin cambios | Cargando | |
chart.8 | --alea-chart-8 | #8c8780 | #7e7972 | Sin cambios | Cargando | |
reaction.like | --alea-reaction-like | #f43f5e | #e11d48 | Sin cambios | Cargando |
Colores de iconos
Un token por cada contexto en el que está un icono. Cada uno es un alias del token de texto, acento o estado de ese contexto, así que los looks, las marcas y el alto contraste lo siguen.
| Token | CSS variable | Oscuro | Claro | Current | Muestra |
|---|---|---|---|---|---|
icon.default | --alea-icon | #f7f7f7 | #111011 | Cargando | Aa |
icon.muted | --alea-icon-muted | #dbdbdbd1 | #111011bd | Cargando | |
icon.soft | --alea-icon-soft | #f9f8f5 | #1d1c1b | Cargando | |
icon.faint | --alea-icon-faint | #dbdbdb99 | #1110119e | Cargando | |
icon.accent | --alea-icon-accent | #e1a4ff | #940dc2 | Cargando | |
icon.brand | --alea-icon-brand | #cd57ff | #c144f4 | Cargando | |
icon.on-accent | --alea-icon-on-accent | #111011 | #111011 | Cargando | |
icon.button | --alea-icon-button | #f7f7f7 | #f7f7f7 | Cargando | |
icon.chip | --alea-icon-chip | #111011 | #f9f8f5 | Cargando | |
icon.danger | --alea-icon-danger | #ff9595 | #a22020 | Cargando | |
icon.success | --alea-icon-success | #3ddc84 | #006535 | Cargando | |
icon.warning | --alea-icon-warning | #f5a524 | #7a4e00 | Cargando | |
icon.info | --alea-icon-info | #9cc2ff | #1752b0 | Cargando | |
icon.on-danger | --alea-icon-on-danger | #111011 | #ffffff | Cargando | |
icon.on-success | --alea-icon-on-success | #111011 | #111011 | Cargando | |
icon.on-warning | --alea-icon-on-warning | #111011 | #111011 | Cargando | |
icon.on-info | --alea-icon-on-info | #ffffff | #ffffff | Cargando | |
icon.on-status | --alea-icon-on-status | #111011 | #ffffff | Cargando | |
icon.rating | --alea-icon-rating | #ffce1f | #bd7b00 | Cargando | |
icon.control | --alea-icon-control | #ffffff5c | #11101180 | Cargando | |
icon.like | --alea-icon-like | #f43f5e | #e11d48 | Cargando |
Espaciado
La escala de espacio, en rem (1rem = 16 px). Cómodo es el predeterminado; Compacto (data-density="compact") reduce la base a la mitad. Los medios pasos son valores literales para interfaces densas, y 0-25 es el filete de 1 px.
| Token | CSS variable | Comfy | Compacta | Current | Muestra |
|---|---|---|---|---|---|
spacing.base | --alea-spacing-base | 0.25rem · 4 px | 0.125rem · 2 px | Cargando | |
space.0 | --alea-space-0 | 0rem · 0 px | 0rem · 0 px | Cargando | |
space.1 | --alea-space-1 | 0.25rem · 4 px | 0.125rem · 2 px | Cargando | |
space.2 | --alea-space-2 | 0.5rem · 8 px | 0.25rem · 4 px | Cargando | |
space.3 | --alea-space-3 | 0.75rem · 12 px | 0.375rem · 6 px | Cargando | |
space.4 | --alea-space-4 | 1rem · 16 px | 0.5rem · 8 px | Cargando | |
space.5 | --alea-space-5 | 1.25rem · 20 px | 0.625rem · 10 px | Cargando | |
space.6 | --alea-space-6 | 1.5rem · 24 px | 0.75rem · 12 px | Cargando | |
space.7 | --alea-space-7 | 1.75rem · 28 px | 0.875rem · 14 px | Cargando | |
space.8 | --alea-space-8 | 2rem · 32 px | 1rem · 16 px | Cargando | |
space.10 | --alea-space-10 | 2.5rem · 40 px | 1.25rem · 20 px | Cargando | |
space.12 | --alea-space-12 | 3rem · 48 px | 1.5rem · 24 px | Cargando | |
space.16 | --alea-space-16 | 4rem · 64 px | 2rem · 32 px | Cargando | |
space.20 | --alea-space-20 | 5rem · 80 px | 2.5rem · 40 px | Cargando | |
space.22 | --alea-space-22 | 5.5rem · 88 px | 2.75rem · 44 px | Cargando | |
space.24 | --alea-space-24 | 6rem · 96 px | 3rem · 48 px | Cargando | |
space.0-25 | --alea-space-0-25 | 0.0625rem · 1 px | 0.0625rem · 1 px | Cargando | |
space.0-5 | --alea-space-0-5 | 0.125rem · 2 px | 0.0625rem · 1 px | Cargando | |
space.1-5 | --alea-space-1-5 | 0.375rem · 6 px | 0.1875rem · 3 px | Cargando | |
space.2-5 | --alea-space-2-5 | 0.625rem · 10 px | 0.3125rem · 5 px | Cargando | |
space.3-5 | --alea-space-3-5 | 0.875rem · 14 px | 0.4375rem · 7 px | Cargando | |
control-pad.x-2 | --alea-control-pad-x-2 | 0.5rem · 8 px | 0.5rem · 8 px | Cargando | |
control-pad.x-3 | --alea-control-pad-x-3 | 0.75rem · 12 px | 0.75rem · 12 px | Cargando | |
control-pad.x-4 | --alea-control-pad-x-4 | 1rem · 16 px | 1rem · 16 px | Cargando | |
control-pad.x-5 | --alea-control-pad-x-5 | 1.25rem · 20 px | 1rem · 16 px | Cargando | |
control-pad.x-6 | --alea-control-pad-x-6 | 1.5rem · 24 px | 1.25rem · 20 px | Cargando | |
control-pad.x-7 | --alea-control-pad-x-7 | 1.75rem · 28 px | 1.5rem · 24 px | Cargando | |
control-pad.x-8 | --alea-control-pad-x-8 | 2rem · 32 px | 1.5rem · 24 px | Cargando | |
control-pad.x-10 | --alea-control-pad-x-10 | 2.5rem · 40 px | 2rem · 32 px | Cargando |
Radio
La escalera de esquinas, desde una esquina de 1 px hasta la píldora. El look Glass la duplica desde xs. El radio no tiene modos de densidad.
| Token | CSS variable | Valor | Current | Muestra |
|---|---|---|---|---|
radius.3xs | --alea-radius-3xs | 0.0625rem · 1 px | Cargando | |
radius.2xs | --alea-radius-2xs | 0.125rem · 2 px | Cargando | |
radius.xs | --alea-radius-xs | 4px | Cargando | |
radius.sm | --alea-radius-sm | 6px | Cargando | |
radius.field | --alea-radius-field | 8px | Cargando | |
radius.md | --alea-radius-md | 10px | Cargando | |
radius.lg | --alea-radius-lg | 12px | Cargando | |
radius.xl | --alea-radius-xl | 16px | Cargando | |
radius.2xl | --alea-radius-2xl | 1.25rem · 20 px | Cargando | |
radius.3xl | --alea-radius-3xl | 1.5rem · 24 px | Cargando | |
radius.4xl | --alea-radius-4xl | 2rem · 32 px | Cargando | |
radius.full | --alea-radius-full | 9999px | Cargando |
Sombras y efectos
Las sombras de tarjetas y popovers, los brillos y resplandores compartidos, y los degradados. Cambian con el tema, y los resplandores siguen el acento del look.
| Token | CSS variable | Oscuro | Claro | Current | Muestra |
|---|---|---|---|---|---|
effect.top-light | --alea-effect-top-light | #ffffff2e | #ffffff2e | Cargando | |
effect.glow | --alea-effect-glow | #cd57ff8c | #c144f48c | Cargando | |
effect.glow-soft | --alea-effect-glow-soft | #cd57ffb3 | #c144f4b3 | Cargando | |
shadow.card | --alea-shadow-card | inset 0px 0.5px 0px 1px #c6c6c62e, 0px 18px 40px -18px #00000040 | inset 0px 0px 0px 1px #1110110f, 0px 18px 40px -20px #3c281414 | Cargando | |
shadow.pop | --alea-shadow-pop | 0px 24px 60px -24px #000000b3 | 0px 24px 60px -24px #3c281440 | Cargando | |
shadow.glow | --alea-shadow-glow | Sin cambios | Sin cambios | Cargando | |
gradient.accent | --alea-gradient-accent | Sin cambios | Sin cambios | Cargando | |
gradient.accent-linear | --alea-gradient-accent-linear | Sin cambios | Sin cambios | Cargando | |
gradient.text | --alea-gradient-text | radial-gradient(100% 100% at 25% 100%, #cd57ff 0%, #ffce1f 100%) | radial-gradient(100% 100% at 25% 100%, #b83fe6 0%, #b45309 100%) | Cargando | |
gradient.text-linear | --alea-gradient-text-linear | linear-gradient(120deg, #cd57ff 0%, #ffce1f 100%) | linear-gradient(120deg, #b83fe6 0%, #b45309 100%) | Cargando | |
gradient.button | --alea-gradient-button | Sin cambios | Sin cambios | Cargando |
Tipografía
Tres familias, una escala de tamaños, pesos, interlineados y espaciado entre letras.
| Token | CSS variable | Valor | Current | Muestra |
|---|---|---|---|---|
font.family.display | --alea-font-family-display | 'Crimson Pro', Georgia, 'Times New Roman', serif | Cargando | Aa |
font.family.body | --alea-font-family-body | Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif | Cargando | Aa |
font.family.mono | --alea-font-family-mono | 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace | Cargando | Aa |
font.size.2xs | --alea-font-size-2xs | 0.6875rem · 11 px | Cargando | Aa |
font.size.xs | --alea-font-size-xs | 0.75rem · 12 px | Cargando | Aa |
font.size.sm | --alea-font-size-sm | 0.8125rem · 13 px | Cargando | Aa |
font.size.md | --alea-font-size-md | 0.875rem · 14 px | Cargando | Aa |
font.size.base | --alea-font-size-base | 1rem · 16 px | Cargando | Aa |
font.size.lg | --alea-font-size-lg | 1.125rem · 18 px | Cargando | Aa |
font.size.xl | --alea-font-size-xl | 1.25rem · 20 px | Cargando | Aa |
font.size.2xl | --alea-font-size-2xl | 1.5rem · 24 px | Cargando | Aa |
font.size.3xl | --alea-font-size-3xl | 1.75rem · 28 px | Cargando | Aa |
font.size.4xl | --alea-font-size-4xl | 2.25rem · 36 px | Cargando | Aa |
font.size.5xl | --alea-font-size-5xl | 3rem · 48 px | Cargando | Aa |
font.size.6xl | --alea-font-size-6xl | 4rem · 64 px | Cargando | Aa |
font.size.7xl | --alea-font-size-7xl | 5rem · 80 px | Cargando | Aa |
font.weight.light | --alea-font-weight-light | 300 | Cargando | Aa |
font.weight.regular | --alea-font-weight-regular | 400 | Cargando | Aa |
font.weight.medium | --alea-font-weight-medium | 500 | Cargando | Aa |
font.weight.semibold | --alea-font-weight-semibold | 600 | Cargando | Aa |
font.leading.tight | --alea-font-leading-tight | 1.1 | Cargando | Aa Aa |
font.leading.snug | --alea-font-leading-snug | 1.3 | Cargando | Aa Aa |
font.leading.normal | --alea-font-leading-normal | 1.5 | Cargando | Aa Aa |
font.leading.relaxed | --alea-font-leading-relaxed | 1.6 | Cargando | Aa Aa |
font.tracking.display | --alea-font-tracking-display | -0.02em | Cargando | Aleatory |
font.tracking.tight | --alea-font-tracking-tight | -0.01em | Cargando | Aleatory |
font.tracking.normal | --alea-font-tracking-normal | 0em | Cargando | Aleatory |
font.tracking.eyebrow | --alea-font-tracking-eyebrow | 0.08em | Cargando | Aleatory |
Movimiento
Duraciones, curvas de easing (incluido el resorte real), distancias, escalas y desenfoque. Cada animación de Alea se construye con estos, y el movimiento reducido pone a cero las distancias y escalas. Las muestras se repiten en bucle.
| Token | CSS variable | Valor | Current | Muestra |
|---|---|---|---|---|
motion.ease.out | --alea-motion-ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Cargando | |
motion.ease.in-out | --alea-motion-ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | Cargando | |
motion.ease.standard | --alea-motion-ease-standard | cubic-bezier(0.2, 0, 0, 1) | Cargando | |
motion.ease.emphasized | --alea-motion-ease-emphasized | cubic-bezier(0.22, 1.2, 0.36, 1) | Cargando | |
motion.ease.spring | --alea-motion-ease-spring | cubic-bezier(0.22, 1.2, 0.36, 1) | Cargando | |
motion.ease.in | --alea-motion-ease-in | cubic-bezier(0.4, 0, 1, 1) | Cargando | |
motion.duration.instant | --alea-motion-duration-instant | 120ms | Cargando | |
motion.duration.fast | --alea-motion-duration-fast | 200ms | Cargando | |
motion.duration.base | --alea-motion-duration-base | 320ms | Cargando | |
motion.duration.slow | --alea-motion-duration-slow | 480ms | Cargando | |
motion.duration.slower | --alea-motion-duration-slower | 720ms | Cargando | |
motion.distance.sm | --alea-motion-distance-sm | 8px | Cargando | |
motion.distance.md | --alea-motion-distance-md | 12px | Cargando | |
motion.distance.lg | --alea-motion-distance-lg | 24px | Cargando | |
motion.scale.from | --alea-motion-scale-from | 0.92 | Cargando | |
motion.scale.press | --alea-motion-scale-press | 0.96 | Cargando | |
motion.stagger | --alea-motion-stagger | 40ms | Cargando | |
motion.lift | --alea-motion-lift | -4px | Cargando | |
motion.spring | --alea-motion-spring | linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1) | Cargando | |
motion.blur.sm | --alea-motion-blur-sm | 4px | Cargando | Aa |
motion.blur.md | --alea-motion-blur-md | 8px | Cargando | Aa |
motion.blur.lg | --alea-motion-blur-lg | 16px | Cargando | Aa |
Tamaños
Alturas de controles y tamaños de iconos. Los controles mantienen su propia escala en ambas densidades.
| Token | CSS variable | Valor | Current | Muestra |
|---|---|---|---|---|
size.control-sm | --alea-size-control-sm | 2rem · 32 px | Cargando | |
size.control-md | --alea-size-control-md | 2.5rem · 40 px | Cargando | |
size.control-lg | --alea-size-control-lg | 3rem · 48 px | Cargando | |
size.field | --alea-size-field | 2.75rem · 44 px | Cargando | |
size.badge-sm | --alea-size-badge-sm | 1.25rem · 20 px | Cargando | |
size.badge-md | --alea-size-badge-md | 1.5rem · 24 px | Cargando | |
size.badge-lg | --alea-size-badge-lg | 1.75rem · 28 px | Cargando | |
size.icon-sm | --alea-size-icon-sm | 1rem · 16 px | Cargando | |
size.icon-md | --alea-size-icon-md | 1.25rem · 20 px | Cargando | |
size.icon-lg | --alea-size-icon-lg | 1.5rem · 24 px | Cargando |
Capas y puntos de quiebre
El orden de apilado de las capas flotantes y los anchos en los que cambia el diseño.
| Token | CSS variable | Valor | Current | Muestra |
|---|---|---|---|---|
z.dropdown | --alea-z-dropdown | 1000 | Cargando | 1000 |
z.sticky | --alea-z-sticky | 1100 | Cargando | 1100 |
z.overlay | --alea-z-overlay | 1200 | Cargando | 1200 |
z.modal | --alea-z-modal | 1300 | Cargando | 1300 |
z.toast | --alea-z-toast | 1400 | Cargando | 1400 |
z.tooltip | --alea-z-tooltip | 1500 | Cargando | 1500 |
breakpoint.xs | --alea-breakpoint-xs | 480px | Cargando | |
breakpoint.sm | --alea-breakpoint-sm | 640px | Cargando | |
breakpoint.md | --alea-breakpoint-md | 768px | Cargando | |
breakpoint.lg | --alea-breakpoint-lg | 1024px | Cargando | |
breakpoint.xl | --alea-breakpoint-xl | 1280px | Cargando |