Kolory

Kolory

Żaden komponent nie nazywa koloru. Kolor żyje w palecie, jako skale dwunastu odcieni, które są przypisane do jasnej i ciemnej twarzy; schemat kolorów wybiera, którą stronę czyta strona; komponent odczytuje rolę — powierzchnię, obramowanie, tekst — które są jednym miejscem na skali. Skórka nigdy nie mówi koloru. Zmień schemat z nagłówka, a każdy wzornik poniżej przesuwa się, nie definiując ani jednego z nich.

Skale

Paleta to neutralny, akcent — marka — i cztery stany, każdy to skala dwunastu odcieni, ułożona tak, jak Radix Themes i Material 3 układają kolor. Miejsce na skali oznacza to samo na każdej skali i obu twarzach: do czego służą liczby poniżej. Aplikacja przynosi swoją paletę, nadając swój akcent; każda skala podąża za tym.
--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 podłoże regionu roboczego
  2. 2 podłoże strony, wokół i pomiędzy regionami
  3. 3 podłoże pola; słabe podłoże, na którym siedzi stan
  4. 4 podniesiona kontrola; podłoże najeżone
  5. 5 karta, blok — i jego dyskretne obramowanie
  6. 6 obramowanie
  7. 7 obramowanie między dwoma regionami
  8. 8 mocne obramowanie, obręcz fokusa
  9. 9 kolor całkowity, wypełniający to, co oznacza
  10. 10 to samo, najeżone
  11. 11 kolor jako tusz, czytelny na podłożach
  12. 12 mocny tusz — dla neutralnego, sam tekst

Powierzchnie

Podłoża, od regionu na zewnątrz — każde z nich to miejsce na neutralnej skali. Jasna twarz pulpitu porządkuje je według jasności do bieli, ciemna według tego, jak daleko każde z nich jest uniesione nad ziemią.
--surface-zoneTło, na którym stoi region strony
--surface-pageStrona sama w sobie i to, co pokazuje się między strefami
--surface-shellMenu, nagłówek, stopka
--surface-1Elementy wejściowe i pola
--surface-2Przyciski, paski narzędzi
--surface-3Bloki, karty, modale
--surface-invertKontrola wyróżniająca się przez przyjęcie koloru tekstu

Tekst

Trzy poziomy uwagi — neutralny 12, 11 i 9: co jest czytane, co to kwalifikuje, a co jest tylko tam, aby zostać znalezionym, gdy się go szuka.

--text-color-default — Co jest czytane

--text-color-muted — Etykiety, meta, napisy

--text-color-subtle — Separatory i puste stany

Krawędzie

Cztery grubości, odróżniane przez to, co oddzielają — neutralny 5 do 8: dwie rzeczy w jednym regionie, pole od tego, co jest za nim, dwa regiony strony i obręcz tego, co ma fokus.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong

Kategorie

Trzynaście kolorów, które nie znaczą nic poza "nie tym obok": seria wykresu, segmenty rozkładu, etapy przepływu pracy. Nazwane, nie ponumerowane — aplikacja wybiera `cat-mint`, ponieważ wygląda jak mięta — i każdy z nich jest skalą jak inne, więc kategoria jest noszona tak, jak stan: jej podłoże na 3, jej tusz na 11, wypełnione na 9.
--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