Renkler

Renkler

Hiçbir bileşen bir renk adı vermez. Renk paletinde bulunur; açık ve koyu yüz için verilen on iki ton ölçeği olarak; renk şeması, sayfanın hangi yüzü okuyacağını seçer; bir bileşen bir rol okur — bir yüzey, bir kenar, bir metin — bu ölçek üzerinde bir yerdir. Cilt asla bir renk söylemez. Şemayı başlıktan değiştirin ve aşağıdaki her örnek, yeniden tanımlanmadan hareket eder.

Ölçekler

Bir palet, nötr, bir vurgu — marka — ve her biri on iki tonun ölçeği olan dört durum, Radix Temaları ve Material 3'ün bir rengi düzenleme şekline göre yerleştirilmiştir. Bir ölçek üzerindeki bir yer, her ölçek ve her iki yüz için de aynıdır: aşağıdaki numaraların ne için olduğu. Bir uygulama, vurgusunu vererek paletini getirir; her ölçek bunu takip eder.
--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 bir çalışma bölgesinin zemin
  2. 2 sayfanın zemin, bölgeler etrafında ve arasında
  3. 3 bir alanın zemini; bir durumun oturduğu hafif zemin
  4. 4 yükseltilmiş bir kontrol; üzerine gelmiş bir zemin
  5. 5 bir kart, bir blok — ve onun belirgin kenarı
  6. 6 bir kenar
  7. 7 iki bölge arasındaki bir kenar
  8. 8 güçlü bir kenar, odak halkası
  9. 9 rengin bütünlüğü, işaretlediği şeyi doldurur
  10. 10 aynısı, üzerine gelmiş
  11. 11 renk mürekkep olarak, zeminler üzerinde okunabilir
  12. 12 güçlü mürekkep — nötr için, metnin kendisi

Yüzeyler

Alanlar, bölgeden dışarıya — her biri nötr ölçeğinde bir yer. Gösterge panelinin açık yüzü, bunları beyaza kadar açık olma durumuna göre sıralar, koyu yüz ise her birinin yerden ne kadar yüksekte olduğunu gösterir.
--surface-zoneBir sayfa bölgesinin üzerinde durduğu zemin
--surface-pageSayfanın kendisi ve bölgeler arasındaki gösterim
--surface-shellMenü, başlık, alt bilgi
--surface-1Girişler ve alanlar
--surface-2Düğmeler, araç çubukları
--surface-3Bloklar, kartlar, modallar
--surface-invertMetnin rengini alarak öne çıkan bir kontrol

Metin

Üç dikkat seviyesi — nötr 12, 11 ve 9: okunan, onu nitelendiren ve yalnızca bakıldığında bulunan şey.

--text-color-default — Okunan metin

--text-color-muted — Etiketler, meta, alt başlıklar

--text-color-subtle — Ayrıcılar ve boş durumlar

Kenarlar

Ayrım yaptıkları şeylerle ayırt edilen dört ağırlık — nötr 5'ten 8'e: bir bölge içindeki iki şey, arkasındakinden bir alan, bir sayfanın iki bölgesi ve odaklanan şeyin halkası.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong

Kategoriler

Yanındaki "değil" anlamına gelen on üç renk: bir grafiğin serisi, bir dağılımın segmentleri, bir iş akışının aşamaları. İsimlendirilmiş, numaralandırılmamış — bir uygulama `cat-mint` seçer çünkü nane gibi görünür — ve her biri diğerleri gibi bir ölçek, bu nedenle bir kategori, bir durum gibi giyilir: zemini 3, mürekkebi 11, dolu 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