Surfaces
On kolme pinta-aluetta, joita käytetään käyttöliittymän hierarkian järjestämiseen, usein yhdistettynä varjoihin. Kaikki palettivärit on testattu tarjoamaan riittävää kontrastia näitä pintoja vastaan.
Esimerkki
.element {
background: var(--dwc-surface-2);
}
Muuttujat
| Muuttuja | Käyttö | Esimerkki |
|---|---|---|
--dwc-surface-1 | Tummain pinta. Käytetään rungon taustana. | |
--dwc-surface-2 | Käytetään komponenteissa (esim. korteissa). | |
--dwc-surface-3 | Vaalein ja korkein pinta. Käytetään valikoissa, ponnahdusikkunoissa, dialogeissa ... |