'/%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}
Extras
Degradados y orbes
Los toques de Alea: texto con degradado, el punto con degradado y el fondo de orbes que flotan.
import { GradientText, GradientDot, OrbBackground } from '@alea/ui';
Ejemplos
Texto y punto con degradado
El degradado de acento en palabras y como el punto de Alea.
Design that plays
Live in the Figma Community
Fondo de orbes
El brillo que flota detrás de las páginas de Alea, aquí dentro de una tarjeta.
Props
GradientText props
Texto relleno con el degradado de acento de morado a amarillo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Define un texto que etiqueta al elemento actual. @see aria-labelledby. (heredada) |
autoFocus | boolean | - | (heredada) |
className | string | - | (heredada) |
defaultValue | string | number | readonly string[] | - | (heredada) |
id | string | - | (heredada) |
inputMode | "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | - | Sugiere el tipo de datos que se pueden ingresar al editar el elemento o su contenido @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (heredada) |
onChange | ChangeEventHandler<HTMLElement, Element> | - | (heredada) |
onSubmit | SubmitEventHandler<HTMLElement> | - | (heredada) |
role | AriaRole | - | (heredada) |
style | CSSProperties | - | (heredada) |
GradientDot props
El punto de Alea: un círculo pequeño con el degradado de acento. Decorativo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
pulse | boolean | - | Late suavemente, para "en vivo" o "nuevo". |
size | number | 14 | Diámetro en px. Por defecto 14. |
OrbBackground props
El brillo morado, violeta y amarillo que flota detrás de las páginas de Alea. Decorativo y no captura el puntero.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
grid | boolean | true | Agrega encima la grilla tenue de puntos. |
position | "fixed" | "absolute" | 'absolute' | fixed cubre el viewport detrás de la página; absolute llena el padre posicionado más cercano. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
GradientText
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-gradient-text
GradientDot
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-gradient-dot- Atributos data
data-pulse
OrbBackground
- Variantes
positionfixedabsolute- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-orbs.alea-orb.alea-orbs-grid- Atributos data
data-position=fixeddata-position=absolutedata-n=1data-n=2data-n=3
Accesibilidad
- Los tres son decorativos; los orbes se frenan y dejan de moverse con movimiento reducido.
Qué hacer y qué evitar
Hacer
- Usa orbes detrás de heroes y estados vacíos, una vez por pantalla.
- Limita el texto con degradado a una o dos palabras.
Evitar
- No pongas orbes detrás de texto largo.
- No uses texto con degradado para el cuerpo del texto.