Profundidad

En Eclipse UI la jerarquía no sale de sombras: sale de apilar superficies apenas distintas y separarlas con bordes de 1px. Las sombras quedan para lo único que de verdad está encima de algo: lo que flota. Así la interfaz se ve plana y ordenada en claro y en oscuro, y lo que flota se nota de inmediato.

La escalera de capas

Cuatro peldaños, de abajo hacia arriba. Cada uno es un paso de tinta sobre el anterior, así que la escalera funciona en cualquier personalidad. En claro la tarjeta es blanca y el elevado se lee un poco hundido; en oscuro todo sube hacia la luz.

Bordes de 1px

El borde es la separación principal del sistema. Una tarjeta se distingue del fondo por su borde, no por su sombra; las filas dentro de ella, por un borde más tenue; lo que está bajo el cursor, por uno más firme.

• border border-border en todo contorno: tarjetas, campos, tablas, paneles.
• border-border-subtle para dividir dentro de una pieza (filas, pie de tarjeta, encabezado de un menú).
• hover:border-border-hover para lo interactivo bajo el cursor; con transition-colors duration-quick.
• Siempre 1px. El único contorno de 2px es el anillo de foco.

Sombras: solo lo que flota

Tres sombras, teñidas de tinta (nunca negro puro en claro) y siguiendo el dial de profundidad. Cada una dice quién la usa hoy en el catálogo.

Cuándo sí

• Lo que flota sobre el contenido: menús, popovers, tooltips, toasts, modales y hojas (shadow-elevated, con su borde de 1px).
• La barra que flota con vidrio sobre la página, como la navegación de este catálogo. (El encabezado de página fijo usa vidrio y una línea, sin sombra: está pegado, no flota.)
• Lo que se mueve encima de su carril: la pastilla de unas pestañas, el pulgar de un interruptor (shadow-subtle).
• Lo elegido o la acción principal de la vista, una sola vez: shadow-glow.

Cuándo no

• Tarjetas en una rejilla, filas de una tabla, campos de formulario, botones: borde de 1px y capa, sin sombra.
• Para separar dos zonas de una pieza: eso es border-border-subtle.
• Las shadow-sm/shadow-lg de Tailwind: no siguen el dial ni el modo. Si de verdad hace falta otra, shadow-[var(--shadow-md)].

Vidrio

eui-glass es el fondo al 78% con un desenfoque de 12px: deja ver que debajo sigue el contenido. Solo para barras fijas y paneles que flotan sobre algo que se desplaza (el encabezado de página, la navegación y la barra de personalidad de esta misma página), siempre con su borde de 1px. Nunca en una tarjeta quieta: sin nada que pase por detrás, solo baja el contraste.

El dial de profundidad

--eui-depth (de 0 a 2) multiplica la opacidad de todas las sombras derivadas: 0 las apaga, 2 las duplica. En oscuro el motor la multiplica otra vez (una sombra negra casi no se ve sobre un fondo casi negro). Las personalidades lo traen ajustado: Alba (0.7) es casi plana, Umbra (1.4) más marcada. La muestra pone el mismo menú con el dial en 0, 1 y 2 sobre la personalidad de la barra.

En los componentes

Las mismas reglas en piezas del catálogo. La tarjeta de clase es capa y borde (la reservada, además, brilla); el menú de acciones y el modal flotan, así que llevan borde y shadow-elevated, y el modal agrega un velo con desenfoque detrás.