Superficies
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. |
