Fundamentos
Forma y sombra.
Regla cerradaSolar usa seis radios y dos sombras. El radio depende de qué es el elemento, no de su tamaño: una superficie o un botón llevan 15 px; lo que va dentro de una superficie, 8 px. Con poco espacio entre ambas (hasta 8 px), el radio de adentro es el de afuera menos ese espacio.
01 · Radios
Radios
| Clase | Valor | Para qué |
|---|---|---|
| rounded-ccs | 15 px | Superficies (cards, diálogos, menús, avisos, tablas, paneles) y botones con texto. |
| rounded-xl | 12 px | Solo el contenedor de un grupo con opciones de 8 px y 4 px de espacio (Grupo segmentado): 8 + 4 = 12. |
| rounded-lg | 8 px | Campos y piezas dentro de una superficie: ítems de menú y de navegación, teclas, chips cuadrados, botón copiar, skeletons. |
| rounded-full | círculo | Círculos y píldoras: avatares, badges, contadores, botones de solo ícono redondos, interruptores. |
| rounded | 4 px | Solo casillas (con ccs-check). |
| rounded-none | 0 | Muestras de color. |
No uses rounded-sm, rounded-md, rounded-2xl ni valores sueltos. El build avisa cualquier radio fuera de esta tabla.
02 · Sombras
Sombras
| Clase | Valor | Para qué |
|---|---|---|
| shadow-ccs | 1px 3px 20px -2px rgba(0,0,0,.15) | Cards elevadas, menús y diálogos. |
| shadow-ccs-sm | 0 1px 4px rgba(11,27,61,.06) | Controles y superficies planas. |