Surfaces
DWC définit trois niveaux de surfaces qui sont utilisés pour organiser la hiérarchie de l'interface utilisateur combinée avec shadows. Toutes les palette colors sont testées pour avoir un contraste suffisant avec ces surfaces.
Les surfaces prennent une teinte subtile de la couleur primaire et s'adaptent automatiquement aux modes clair et sombre.
Exemple
.element {
background: var(--dwc-surface-2);
}
Variables
| Variable | Usage |
|---|---|
--dwc-surface-1 | Arrière-plan de la page et du corps. |
--dwc-surface-2 | Barres d'outils, barres de menus, cartes. |
--dwc-surface-3 | Fenêtres, menus, popovers, dialogues. |