Surfaces

Avaa ChatGPT:ssä

On kolme tasoa pintoja, joita käytetään UI-hierarkian järjestämiseen, usein yhdistettynä varjoihin. Kaikki palettivärit testataan, jotta ne tarjoavat riittävän kontrastin näitä pintoja vastaan.

Esimerkki

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

Muuttujat

Muuttuja	Käyttö	Esimerkki
--dwc-surface-1	Tummenin pinta. Käytetään taustan taustana.
--dwc-surface-2	Käytetään komponenteissa (esim. korteissa).
--dwc-surface-3	Vaalein ja korkeimmalla oleva pinta. Käytetään valikoissa, popovereissa, dialogeissa ...