Superficies

Abrir en ChatGPT

DWC define tres niveles de superficies que se utilizan para organizar la jerarquía de la interfaz de usuario combinada con shadows. Todos los palette colors se prueban para tener suficiente contraste con estas superficies.

Las superficies adquieren un sutil matiz del tono primario y se adaptan automáticamente a los modos claro y oscuro.

Ejemplo

.element {
  background: var(--dwc-surface-2);
}

Variables

Variable	Uso
--dwc-surface-1	Fondo de página y cuerpo.
--dwc-surface-2	Barras de herramientas, menús, tarjetas.
--dwc-surface-3	Ventanas, menús, popovers, diálogos.