Aller au contenu principal

Surfaces

Ouvrir dans ChatGPT

Il existe trois niveaux de surfaces utilisés pour organiser la hiérarchie de l'interface utilisateur, souvent combinés avec ombres. Toutes les couleurs de palette sont testées pour fournir un contraste suffisant par rapport à ces surfaces.

Exemple

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

Variables

VariableUtilisationExemple
--dwc-surface-1La surface la plus sombre. Utilisée pour le fond du corps.
--dwc-surface-2Utilisée pour les composants (par exemple, les cartes).
--dwc-surface-3La surface la plus claire et la plus élevée. Utilisée pour les menus, popovers, dialogues ...