Fundamentos
Forma
Radios que siguen el dial de redondez y cuándo usar cada uno.
Un solo dial, --eui-roundness, multiplica todos los radios. Tailwind compila
rounded-lg como var(--radius-lg), así que no solo los componentes: toda la app
se redondea o se endereza con la marca. Alba (—) es casi una piedra de río; Umbra
(—) es casi recta.
La escala de radios
Seis radios, de lo más chico a lo que envuelve. El radio crece con el tamaño de la pieza: una
pastilla dentro de una tarjeta nunca tiene más radio que la tarjeta (salvo rounded-full).
sm
—
md
—
lg
—
xl
—
2xl
—
full
—
Cada radio en las seis personalidades, con su fórmula tal como está en tokens.css:
| Clase | Carbón | Eclipse | Alba | Brisa | Umbra | Terra |
|---|---|---|---|---|---|---|
--eui-roundnessel dial |
— | — | — | — | — | — |
rounded-sm
—
|
— | — | — | — | — | — |
rounded-md
—
|
— | — | — | — | — | — |
rounded-lg
—
|
— | — | — | — | — | — |
rounded-xl
—
|
— | — | — | — | — | — |
rounded-2xl
—
|
— | — | — | — | — | — |
rounded-full
fijo de Tailwind
|
— | — | — | — | — | — |
roundedfijo de Tailwind |
— | — | — | — | — | — |
rounded sin sufijo es el de Tailwind y no sigue el dial: en un componente
nuevo usa rounded-sm. Hoy quedan 2 en
app/components/ui.
Y rounded-xl y rounded-2xl comparten hoy la misma fórmula: un panel se
distingue de una tarjeta por su sombra y su tamaño, no por el radio.
Cuándo usar cada uno
El radio crece con la pieza: los elementos chicos, los controles, las tarjetas y los
paneles. En Carbón (redondez
—)
la escala mide rounded-sm —, rounded-md —,
rounded-lg —, rounded-xl — y
rounded-2xl —. Lo que no cambia de una personalidad a otra es
qué radio lleva cada pieza:
| Radio | Para | Usos |
|---|---|---|
rounded-sm |
Elementos chicos dentro de un control: teclas, marcas de un calendario, código en línea, esqueletos de texto. | 10 |
rounded-md |
Controles chicos: botones, ítems de menú, pestañas, botones de ícono, insignias. | 35 |
rounded-lg |
Controles: campos, selects, grupos segmentados, filas que se resaltan. | 30 |
rounded-xl |
Tarjetas, popovers, menús, avisos: lo que agrupa. | 21 |
rounded-2xl |
Paneles: modales, hojas, estados vacíos, la tarjeta destacada. | 7 |
rounded-full |
Pastillas, avatares, interruptores, contadores y puntos de estado. | 47 |
Reservar clase
De afuera hacia adentro: el panel en rounded-2xl, la tarjeta de la maestra en
rounded-xl, el campo en rounded-lg, el botón en rounded-md, la tecla en
rounded-sm; la pastilla y el avatar en rounded-full.
Radios anidados
Cuando una superficie con radio va dentro de otra con poco relleno (una foto en una tarjeta, el panel de créditos en su cartera), las curvas deben ser concéntricas: radio interior = radio exterior − relleno. Con el mismo radio adentro, la esquina interior se ve gorda y el borde parece más grueso en las esquinas.
Mi paquete
8
Sí Concéntrico
exterior — − relleno — → interior —
Mi paquete
8
No Mismo radio
exterior — − relleno — → interior —
En código: rounded-xl p-2 afuera y
rounded-[max(0px,calc(var(--radius-xl)-0.5rem))] adentro. El max(0px, …) importa:
con poca redondez (Umbra) la resta queda negativa. Si el relleno es grande (más que el radio), el
interior va con su propio radio de la escala y la regla deja de aplicar.
Bordes de 1px
La profundidad de Eclipse UI sale de capas apenas distintas separadas por bordes de 1px, no de sombras ni de bordes gruesos. El color del borde dice su papel:
border-border
grosor —
border-border-hover
grosor —
border-dashed
grosor —
divide-border-subtle
- 07:00Vinyasa Flow
- 11:15Meditación guiada
- Siempre 1px (
border). El único trazo de 2px es el anillo de foco (eui-focus), que es un contorno y no ocupa lugar. - Divisiones con
border-border-subtle, no con el mismo gris del contorno: adentro se separa menos que afuera. - Sin bordes de color para decorar: el tono de un aviso va en su ícono, no en el marco.
- Sin sombra en lugar de borde:
shadow-elevatedes para lo que flota (menús, modales, toasts), y ya trae su propia línea de 1px.