Surfaces

In ChatGPT öffnen

DWC definiert drei Ebenen von Flächen, die verwendet werden, um die UI-Hierarchie zu organisieren, kombiniert mit shadows. Alle palette colors sind getestet, um sicherzustellen, dass sie ausreichend Kontrast mit diesen Flächen bieten.

Flächen nehmen einen subtilen Farbton aus dem primären Farbton auf und passen sich automatisch an helle und dunkle Modi an.

Beispiel

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

Variablen

Variable	Verwendung
--dwc-surface-1	Hintergrund von Seite und Body.
--dwc-surface-2	Toolbars, Menübars, Karten.
--dwc-surface-3	Fenster, Menüs, Popovers, Dialoge.