Sistema de Elevación y Profundidad

¿Qué hace Sistema de Elevación y Profundidad?

Propósito

El Sistema de Elevación y Profundidad proporciona una metodología para gestionar la dimensión vertical (eje Z) de una interfaz web. Utiliza señales visuales como sombras, tratamientos superficiales y órdenes de apilamiento para establecer una jerarquía clara de capas. Este sistema garantiza que los usuarios comprendan la relación entre elementos superpuestos, puedan identificar superficies interactivas y experimenten un entorno táctil predecible que imita la profundidad del mundo real.

Casos de Uso

• Definir una escala de sombras consistente para un sistema de diseño.
• Diseñar interfaces complejas con múltiples capas, como paneles de control o IDE.
• Establecer estándares de orden de apilamiento (z-index) para evitar "choques" visuales en la UI.
• Proporcionar retroalimentación táctil para estados interactivos (por ejemplo, un botón que se eleva al pasar el ratón).
• Distinguir entre contenido de página persistente y superposiciones temporales.

Cuándo NO Usar

• Diseños planos/brutalistas: Cuando la estética intencional es 2D y carece de profundidad o sombras percibidas.
• Contenido puramente textual: Artículos o documentos simples sin capas superpuestas ni superficies interactivas.
• Dispositivos de bajo rendimiento crítico: Donde el uso intensivo de filtros CSS o sombras complejas pueda causar ralentizaciones significativas en el renderizado.

Entradas

1. Estética de la Marca: ¿La profundidad es "Física/Material" (sombras realistas) o "Gráfica" (desplazamientos sólidos)?
2. Inventario de Componentes: Una lista de todos los elementos de UI que requieren elevación (Tarjetas, Barras de navegación, Modales, Botones).
3. Fuente de Luz Principal: Generalmente se asume que proviene de arriba o del centro superior.
4. Sistema de Espaciado: El sistema-de-espaciado-fluido para alinear las expansiones de sombra con los márgenes del diseño.

Salidas

1. Escala de Elevación (Sombras): Un conjunto de 5-6 tokens de sombra estandarizados (por ejemplo, elevación-sm a elevación-xl).
2. Mapa de Contexto de Apilamiento (Z-Index): Una escala definida de valores z-index categorizados por función de capa.
3. Paleta de Superficies: Definiciones de colores de fondo que cambian según la elevación (por ejemplo, superficies más oscuras "se hunden", superficies más claras "se elevan").
4. Especificación de Interacción: Reglas sobre cómo cambia la elevación durante los estados de Hover, Activo y Foco.

Flujo de Trabajo

1. Establecer los Niveles de Apilamiento

Divide la interfaz en capas funcionales de abajo arriba:

• Nivel 0 (Base): El fondo/lienzo de la página.
• Nivel 1 (Plano): Contenido que se asienta sobre la base (por ejemplo, tarjetas planas, divisores).
• Nivel 2 (Elevado): Elementos interactivos o tarjetas principales que "flotan" sutilmente.
• Nivel 3 (Fijo/Flotante): Encabezados globales, FABs (Botones de Acción Flotante).
• Nivel 4 (Superposición): Modales, Paneles laterales y sus fondos.
• Nivel 5 (Sistema): Tooltips, Toasts y alertas críticas.

2. Definir la Escala de Sombras

Crea una progresión de sombras que corresponda a la distancia desde la base:

• Pequeña (2dp): Separación sutil para botones o tarjetas pequeñas.
• Mediana (4dp-8dp): Elevación estándar para menús desplegables y navegación.
• Grande (12dp-24dp): Elevación alta para modales y capas flotantes.
• Muy Grande (32dp+): Profundidad dramática para foco temporal o alertas del sistema.

Nota: Usa múltiples capas de sombra (por ejemplo, una sombra "nítida" y una "suave") para un efecto más realista y de alta calidad.

3. Asignar Colores de Superficie

La profundidad no solo se trata de sombras; también de la reflexión de la luz:

• Modo Claro: Los elementos de mayor elevación suelen volverse ligeramente más claros o mantener un blanco puro mientras la base es blanca rota.
• Modo Oscuro: Los elementos de mayor elevación DEBEN volverse más claros (usando superposiciones de blanco semitransparente) para simular estar más cerca de la fuente de luz.
• Implementación: Usa color-mix(in oklch, var(--surface-base) 100%, white X%) (o una función de token equivalente basada en OKLCH) para generar programáticamente el color superficial de cada nivel de elevación, en lugar de elegir manualmente un nuevo valor hexadecimal por nivel. OKLCH mantiene escalones de luminosidad percibida uniformes en todos los tonos, lo que los ajustes hexadecimales planos no garantizan.

4. Crear "Levantamientos" de Interacción

Aplica el sistema-de-estados-interactivos al eje Z:

• Hover: Aumenta el desenfoque y la expansión de la sombra para simular que el elemento se levanta hacia el usuario.
• Activo (Click): Disminuye o elimina la sombra para simular que el elemento se presiona contra la superficie.

5. Documentar la Estrategia de Apilamiento (Z-Index)

Prevén las "Guerras de Z-Index" usando una escala de 10 o 100 pasos:

• 0: Predeterminado
• 100: Navegación/Encabezado
• 500: Fondos de superposición
• 600: Modales/Paneles laterales
• 1000: Tooltips/Toasts

Reglas de Decisión

• La Regla de la Fuente de Luz: Todas las sombras del sistema DEBEN compartir la misma fuente de luz implícita (generalmente de arriba abajo) para mantener la lógica visual.
• Elevación igual a Importancia: La información temporal más importante (por ejemplo, una Alerta) debe tener la elevación más alta y la sombra más dramática.
• Sombra vs. Borde: Usa bordes para estructura (Nivel 0-1) y sombras para profundidad (Nivel 2+). No uses ambos intensamente en el mismo elemento a menos que la marca sea altamente "esqueuomórfica".
• Elevación en Modo Oscuro: En modo oscuro, nunca uses sombras oscuras sobre fondos oscuros. Usa el aclarado del color superficial (cambios de luminosidad) como señal principal de profundidad.

Restricciones

• Accesibilidad: Las señales de elevación (sombras) deben complementar, no reemplazar, las señales estructurales. Asegúrate de que los elementos tengan suficiente contraste o bordes para ser identificables sin la sombra. Las superposiciones elevadas (modales, menús desplegables) nunca deben renderizarse sobre un indicador de foco de una manera que lo recorte o lo oculte (WCAG 2.2 SC 2.4.11).
• Rendimiento: Evita box-shadow en elementos que se animan con frecuencia o están dentro de contenedores de desplazamiento de alta frecuencia.
• Responsividad: Las sombras grandes pueden "sangrar" fuera de la pantalla en móviles; reduce la expansión de la sombra o cambia a bordes en pantallas pequeñas.

Patrones de Falla Comunes

• Fuentes de Luz Inconsistentes: Tener algunas sombras que van a la derecha y otras que van hacia abajo, creando una interfaz "borracha" o fragmentada.
• "Números Mágicos" de Z-Index: Usar z-index: 99999 para resolver un problema, lo que eventualmente lleva a código no mantenible.
• Sombras Embarradas: Usar negro puro (#000) para las sombras en lugar de una versión transparente del color superficial o un neutro oscuro.
• Superposiciones Planas: Diseñar un modal sin sombra ni fondo, haciendo que se mezcle con el contenido detrás.
• Sobre-Elevación: Dar a cada tarjeta una sombra pesada, lo que aplana la jerarquía porque nada destaca.

Criterios de Validación

• Se define y utiliza una escala de elevación consistente de 5 a 6 pasos.
• Todas las sombras comparten una única fuente de luz consistente.
• Los valores de z-index se agrupan en niveles lógicos y documentados.
• El modo oscuro utiliza cambios de luminosidad superficial para indicar profundidad.
• Los estados de interacción (Hover/Activo) incluyen movimiento vertical o cambios de sombra.
• Las sombras no causan desbordamiento horizontal o vertical en móvil.
• Los elementos se pueden distinguir incluso si se eliminan las sombras (verificación de accesibilidad).
• Las capas de mayor elevación nunca oscurecen los indicadores de foco en elementos debajo o dentro de ellas (WCAG 2.2 SC 2.4.11).