Accesible de verdad
Contraste AA medido en cada personalidad, foco visible con 3:1, teclado completo y movimiento reducido respetado.
contrast.yml · eui-focus · aria
Inicio
Principios
Lo que hace que todo se alinee: una base común y la personalidad de cada estudio.
Un eclipse pasa cuando tres cuerpos quedan en una sola línea. Eclipse UI alinea tres cosas: la base, la luz que no cambia y garantiza la calidad en cualquier marca; la personalidad, la forma que cada marca le da a esa luz; y la experiencia de quien la usa. Cuando las tres coinciden, la interfaz deja de notarse y lo que se siente es la marca.
Los componentes nunca deciden la personalidad: la leen. Por eso un mismo botón suena distinto en un box que en un spa, y en los dos funciona igual de bien.
Cómo se alinea
Cuatro capas en línea, de lo que decide la marca a lo que ve su cliente. Cada una solo habla con la siguiente.
- 1 Personalidad Cinco rasgos en tu theme.css: voz, forma, color, aire y ritmo. Personalidades →
- 2 Tokens El motor deriva de ahí superficies, texto, bordes, radios, sombras, duraciones y alturas, en claro y oscuro. Fundamentos →
- 3 Componentes 42 piezas en ViewComponent + Stimulus que solo leen tokens. Catálogo →
- 4 Vistas Las pantallas de Eclipse componen piezas; no inventan colores, tamaños ni márgenes. Convenciones →
Lo que garantiza la base
La luz que no cambia: lo mismo en cualquier personalidad. Si un componente nuevo rompe uno de estos, se sale de línea y no está terminado.
Solo tokens y escalas
Ningún componente escribe un color, un tamaño o un radio suelto: los lee de la personalidad. Unas pruebas lo vigilan.
bg-card · text-compact · rounded-xl
Estructura por capas
La jerarquía sale de apilar superficies y separarlas con bordes; las sombras son para lo que flota.
bg-raised · border-border
Movimiento físico
Lo que se arrastra, sigue al cursor o cambia de forma se mueve con resortes, no con duraciones fijas.
eclipse_ui/spring
Tactilidad
Lo interactivo responde al toque: cede al presionar, se ilumina bajo el cursor, avisa cuando algo cambia.
eui-press · eui-spotlight
Integrado con Rails
Los controles mandan su valor con name:, se arman con el form builder y funcionan con Turbo.
Ui::FormBuilder · Turbo
Adaptable por diseño
Nada fija una personalidad: cambia la voz, la forma, el color, el aire o el ritmo y todo lo sigue.
theme.css
El código es tuyo
Cada componente es un par de archivos legibles; el catálogo los muestra todos.
app/components/ui
Lo que decide cada personalidad
La forma que cada marca le da a la luz, en cinco rasgos. Detrás de cada uno hay unos cuantos diales en tu theme.css, pero se piensan así: ¿cómo habla?, ¿qué forma tiene?, ¿de qué color es?, ¿cuánto aire deja?, ¿a qué ritmo se mueve?
Voz
Las tipografías y cómo hablan: el peso de los títulos, si van en cursiva, en mayúsculas o condensados, y la voz de los botones.
- --eui-font-*
- --eui-display-*
- --eui-control-case
Forma
Qué tan redondo es todo, si los botones y campos son pastilla o rectos y qué tan marcados son los bordes.
- --eui-roundness
- --eui-control-radius
- --eui-line
Color
La marca, la tinta y el papel; cuánto tiñe la marca los grises. El contraste del texto se ajusta solo.
- --eui-brand
- --eui-ink
- --eui-paper
- --eui-tint
Aire
Qué tan compacta o aireada es la interfaz y qué tanta sombra lleva lo que flota.
- --eui-density
- --eui-depth
Ritmo
Qué tan rápido se mueve todo y cuánto brilla lo importante.
- --eui-motion
- --eui-halo
Personalidades de partida
6 para arrancar, no un catálogo cerrado: cada marca elige la que más se le parece en Personalidades, la pega en su theme.css y la hace suya. El catálogo se ve en Carbón.
Qué hay en el sistema
| Parte | Qué contiene |
|---|---|
| Fundamentos | Color, Tipografía, Espaciado y layout, Forma, Profundidad, Movimiento y Íconos. |
| Componentes | Admin (8), Comercio (1), Botones (4), Gestos (3), Datos vivos (2), Avisos (3), Capas (6), Navegación (2), Formularios (13). |
| Convenciones | Componentes, Accesibilidad, Contenido y Calidad. |
| Personalidades | 6 de partida sobre la página de un estudio, y cómo hacer la tuya. |