Warna

Warna

Tidak ada nama komponen yang menunjukkan warna. Warna ada di palet, sebagai skala dua belas nada yang diberikan untuk wajah terang dan gelap; skema warna memilih wajah mana yang dibaca halaman; sebuah komponen membaca peran — permukaan, batas, teks — yang merupakan satu tempat pada skala. Kulit tidak pernah menyebutkan warna. Ubah skema dari header dan setiap swatch di bawahnya bergerak tanpa satu pun yang didefinisikan ulang.

Skala

Sebuah palet adalah netral, aksen — merek — dan empat keadaan, masing-masing skala dua belas nada, disusun seperti Radix Themes dan Material 3 menyusun warna. Sebuah tempat pada skala berarti sama di setiap skala dan di kedua wajah: apa yang dimaksud dengan angka di bawahnya. Sebuah aplikasi membawa paletnya dengan memberikan aksennya; setiap skala mengikuti.
--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 dasar dari wilayah kerja
  2. 2 dasar dari halaman, di sekitar dan antara wilayah
  3. 3 dasar sebuah bidang; dasar samar yang dijadikan tempat sebuah keadaan
  4. 4 kontrol yang terangkat; dasar yang dihover
  5. 5 sebuah kartu, sebuah blok — dan batasnya yang halus
  6. 6 sebuah batas
  7. 7 batas antara dua wilayah
  8. 8 batas yang kuat, cincin fokus
  9. 9 warna keseluruhan, mengisi apa yang ditandainya
  10. 10 sama, dihover
  11. 11 warna sebagai tinta, terbaca di dasar
  12. 12 tinta kuat — untuk netral, teks itu sendiri

Permukaan

Dasar, dari wilayah ke luar — masing-masing adalah tempat pada skala netral. Wajah terang dari dasbor mengurutkannya berdasarkan kecerahan hingga putih, wajah gelap berdasarkan seberapa tinggi masing-masing diangkat dari tanah.
--surface-zoneLatar tempat sebuah wilayah halaman berdiri
--surface-pageHalaman itu sendiri, dan apa yang muncul di antara zona-zona
--surface-shellMenu, header, footer
--surface-1Input dan bidang
--surface-2Tombol, toolbar
--surface-3Blok, kartu, modal
--surface-invertSebuah kontrol yang menonjol dengan mengambil warna teks

Teks

Tiga tingkat perhatian — netral 12, 11 dan 9: apa yang sedang dibaca, apa yang memenuhi syarat, dan apa yang hanya ada untuk ditemukan ketika dicari.

--text-color-default — Apa yang sedang dibaca

--text-color-muted — Label, meta, subtitle

--text-color-subtle — Pemisah dan keadaan kosong

Batas

Empat bobot, dibedakan oleh apa yang mereka pisahkan — netral 5 hingga 8: dua hal di dalam satu wilayah, sebuah bidang dari apa yang ada di belakangnya, dua wilayah pada halaman, dan cincin dari apa yang memiliki fokus.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong

Kategori

Tiga belas warna yang tidak berarti apa-apa kecuali "bukan yang di sampingnya": rangkaian dari sebuah grafik, segmen dari distribusi, tahap dari alur kerja. Dinamai, bukan dinomori — sebuah aplikasi memilih `cat-mint` karena terlihat seperti mint — dan masing-masing adalah skala seperti yang lainnya, sehingga sebuah kategori dikenakan seperti sebuah keadaan: dasarnya di 3, tintanya di 11, diisi di 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