Surfaces

ChatGPT öffnen

Es gibt drei Ebenen von Oberflächen, die verwendet werden, um die UI-Hierarchie zu organisieren, oft kombiniert mit Schatten. Alle Farben der Palette werden getestet, um einen ausreichenden Kontrast gegen diese Oberflächen zu bieten.

Beispiel

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

Variablen

Variable	Verwendung	Beispiel
--dwc-surface-1	Die dunkelste Oberfläche. Wird für den Hintergrund des Körpers verwendet.
--dwc-surface-2	Wird für Komponenten (z. B. Karten) verwendet.
--dwc-surface-3	Die hellste und höchste Oberfläche. Wird für Menüs, Popovers, Dialoge ...