Espaciado y layout

En Eclipse UI hay dos clases de espacio. El aire de componente (rellenos, separación entre piezas y alto de los controles) sigue el dial de densidad de cada marca: una personalidad aireada respira, una compacta aprieta. El aire de composición (cuánto separa un título de su contenido o una sección de otra) es la escala fija de Tailwind, en pasos de —, igual en todas las personalidades.

El dial de densidad

--eui-density (0.85 a 1.2) multiplica rellenos, separaciones y alturas de control. No toca la escala de Tailwind: p-4 siempre es p-4. Por eso un componente que debe respirar con la marca usa los tokens (p-[var(--eui-pad-md)], gap-[var(--eui-gap)], h-control-md) y no un paso fijo.

• --eui-pad-sm: Relleno de piezas compactas: filas, avisos, menús, el botón chico.
• --eui-pad-md: Relleno de tarjetas y del botón mediano.
• --eui-pad-lg: Relleno de paneles, modales y del botón grande.
• --eui-gap: Separación entre piezas de una rejilla o una lista de tarjetas.
• --eui-control-sm: Alto de controles chicos (h-control-sm): filtros, acciones de fila.
• --eui-control-md: Alto de controles (h-control-md): botones y campos de formulario.
• --eui-control-lg: Alto de controles grandes (h-control-lg): la acción principal en el teléfono.

Los mismos tokens en las seis personalidades, calculados aquí mismo con la fórmula de tokens.css:

La escala de aire

Entre piezas y dentro de una composición se usan los pasos de Tailwind. No hacen falta todos: estos nueve cubren la interfaz, y la regla para elegir es la de proximidad: lo que va junto se separa poco, y el espacio entre grupos es al menos el doble del que hay dentro de ellos.

Con densidad, una pieza real: la tarjeta de clase usa --eui-pad-lg por dentro y la rejilla gap-[var(--eui-gap)] entre tarjetas. Prueba Alba (más aireada) y Umbra (más compacta) en la barra de arriba.

Alturas de control

Tres alturas para todo lo que se toca: botones, campos, selects, grupos segmentados. Un botón y un campo de la misma talla miden lo mismo, así se alinean en una fila sin ajustes. Las tres siguen la densidad.

• md es la talla por defecto de botones y campos en formularios y barras.
• sm para acciones dentro de una fila o una tarjeta, y filtros.
• lg para la acción principal en el teléfono: es la única que se acerca a los 44px que pide un dedo.
• Un control nunca define su alto con py-*: el texto cambia de tamaño, la altura no.

Anchos de página

Una página centra su contenido con mx-auto max-w-* y un margen lateral que crece con la pantalla. Esta tabla se arma leyendo las vistas: cada contenedor con mx-auto, un max-w-* y px-*.

• Rejillas y listados (tienda, paquetes, videos, el layout de maestras): el ancho más amplio.
• Una columna de detalle (una clase, un evento, el perfil) y el catálogo: un paso o dos menos.
• Lectura y formularios: max-w-3xl o menos; un párrafo nunca pasa de max-w-2xl (~70 caracteres).
• Margen lateral: px-4 en el teléfono y más a partir de sm:; el contenido nunca toca el borde de la pantalla. El más común en las vistas: px-4 sm:px-6 (14 contenedores).
• El admin no centra: ocupa todo el ancho junto a su barra lateral, y cada tabla se desplaza dentro de su tarjeta.

Breakpoints y container queries

La regla: la página responde a la pantalla; el componente responde a su lugar. Las columnas de una vista, la barra lateral que se vuelve tira, el menú que se esconde: eso es sm:, md:, lg:. Un componente vive en una tarjeta de 330px del catálogo, en una columna del horario o a todo lo ancho, con la misma pantalla: por eso decide su forma con @container y @sm:, @md:… y nunca con el ancho de la ventana.

Hoy usan container queries: Ui::ActivityFeedComponent, Ui::BarChartComponent, Ui::DataTableComponent, Ui::RadioCardsComponent, Ui::ToasterComponent. Para uno nuevo: pon @container en la raíz del componente (con nombre, @container/slot, si hay contenedores anidados) y escribe el diseño angosto primero.

Ritmo vertical

Una vista se lee de arriba abajo en saltos cada vez más grandes: poco entre un título y su descripción, más entre bloques, mucho entre secciones. Usa space-y-* en el contenedor (o mt-* en el que sigue), nunca márgenes inferiores sueltos que se suman.