Surfaces

Avaa ChatGPT:ssä

DWC määrittelee kolme tasoa pintoja, joita käytetään käyttöliittymän hierarkian järjestämiseen yhdessä varjojen kanssa. Kaikki väripaletin värit on testattu siten, että niiden ja näiden pintojen välillä on tarpeeksi kontrastia.

Pinnat saavat hienovaraisen sävyn pääväristä ja mukautuvat automaattisesti vaaleisiin ja tummiin tiloihin.

Esimerkki

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

Muuttujat

Muuttuja	Käyttö
--dwc-surface-1	Sivun ja kehon tausta.
--dwc-surface-2	Työkalurivit, valikkorivit, kortit.
--dwc-surface-3	Ikkunat, valikot, popoverit, dialogit.