Värit

Värit

Yksikään komponentti ei nimeä väriä. Väri elää paletissa, jossa on kaksitoista sävyä vaalealle ja tummalle pinnalle; väriteema valitsee, kummasta puolesta sivu luetaan; komponentti lukee roolin — pinta, reuna, teksti — joka on yksi paikka asteikolla. Ihon väriä ei koskaan sanota. Vaihda teema yläosasta ja jokainen näyte alapuolella liikkuu ilman, että yhtäkään määritellään uudelleen.

Asteikot

Paletti on neutraali, aksentti — brändi — ja neljä tilaa, jokainen kaksitoista sävyä sisältävä asteikko, aseteltuna kuten Radix-teemat ja Material 3 asettelevat värejä. Paikka asteikolla tarkoittaa samaa joka asteikolla ja molemmilla puolilla: mitä numerot alla tarkoittavat. Sovellus tuo palettinsa antamalla aksenttinsa; jokainen asteikko seuraa.
--neutral-*
1
2
3
4
5
6
7
8
9
10
11
12
--accent-*
1
2
3
4
5
6
7
8
9
10
11
12
--info-*
1
2
3
4
5
6
7
8
9
10
11
12
--success-*
1
2
3
4
5
6
7
8
9
10
11
12
--warning-*
1
2
3
4
5
6
7
8
9
10
11
12
--error-*
1
2
3
4
5
6
7
8
9
10
11
12
  1. 1 työalueen pohja
  2. 2 sivun pohja, alueiden ympärillä ja niiden välissä
  3. 3 kentän pohja; vaalea pohja, jota tila istuu päällä
  4. 4 kohotettu ohjaus; leijuva pohja
  5. 5 kortti, lohko — ja sen huomaamaton reuna
  6. 6 reuna
  7. 7 reuna kahden alueen välillä
  8. 8 vahva reuna, keskittymisen kehys
  9. 9 kokonaisväri, täyttäen sen, mitä se merkitsee
  10. 10 sama, leijuvana
  11. 11 väri musteena, luettavissa pinnoilla
  12. 12 vahva muste — neutraalille, itse teksti

Pinnat

Pinnat, alueelta ulospäin — jokainen paikka neutraalilla asteikolla. Hallintapaneelin vaalea puoli järjestää ne vaaleuden mukaan valkoiseen asti, tumma puoli sen mukaan, kuinka korkealla kukin on maasta.
--surface-zoneAlusta, jolla alue sijaitsee
--surface-pageSivu itse ja se, mikä näkyy alueiden välillä
--surface-shellValikko, yläosa, alaosa
--surface-1Syötteet ja kentät
--surface-2Painikkeet, työkalupalkit
--surface-3Loitsut, kortit, modaalit
--surface-invertOhjaus, joka erottuu ottamalla tekstin värin

Teksti

Kolme huomiotason — neutraali 12, 11 ja 9: mitä luetaan, mikä sitä määrittää, ja mikä on vain löydettävissä, kun sitä etsitään.

--text-color-default — Mitä luetaan

--text-color-muted — Otsikot, meta, alaotsikot

--text-color-subtle — Erottaijat ja tyhjät tilat

Reunat

Neljä painoarvoa, erotettuna siitä, mitä ne erottavat — neutraali 5–8: kaksi asiaa yhdessä alueessa, kenttä siitä, mikä on sen takana, kaksi aluetta sivulla ja keskittymisen kehys.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong

Kategoriat

Kolmetoista väriä, jotka tarkoittavat vain "ei se, joka on vieressä": kaavion sarja, jakautumisen segmentit, työnkulun vaiheet. Nimetty, ei numeroitu — sovellus valitsee `cat-mint` koska se näyttää mintulta — ja jokainen asteikko kuin muut, joten kategoriaa käytetään kuten tilaa: sen pohja 3:lla, sen muste 11:llä, täytetty 9:llä.
--cat-ruby-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grapefruit-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-bittersweet-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-sunflower-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-straw-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grass-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-mint-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-teal-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-aqua-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-blue-jeans-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-plum-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-lavender-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-pink-rose-*
1
2
3
4
5
6
7
8
9
10
11
12
v1.0.29