Couleurs
Couleurs
Aucun nom de composant n'indique une couleur. La couleur réside dans la palette, sous forme d'échelles de douze teintes données pour le ton clair et le ton foncé ; le schéma de couleur choisit quel ton la page lit ; un composant remplit un rôle — une surface, une bordure, un texte — qui est un emplacement sur une échelle. La peau ne dit jamais une couleur. Changez le schéma depuis l'en-tête et chaque échantillon ci-dessous se déplace sans qu'aucun ne soit redéfini.
Échelles
Une palette est un neutre, un accent — la marque — et les quatre états, chacun une échelle de douze teintes, disposées comme Radix Themes et Material 3 le font pour une couleur. Un emplacement sur une échelle signifie la même chose sur chaque échelle et sur les deux faces : à quoi servent les nombres ci-dessous. Une application apporte sa palette en donnant son accent ; chaque échelle suit.
--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 le fond d'une région de travail
- 2 le fond de la page, autour et entre les régions
- 3 le fond d'un champ ; le fond léger sur lequel un état repose
- 4 un contrôle surélevé ; un fond survolé
- 5 une carte, un bloc — et sa bordure discrète
- 6 une bordure
- 7 une bordure entre deux régions
- 8 une bordure forte, un anneau de focus
- 9 la couleur entière, remplissant ce qu'elle marque
- 10 la même chose, survolée
- 11 la couleur comme encre, lisible sur les fonds
- 12 encre forte — pour le neutre, le texte lui-même
Surfaces
Les fonds, de la région vers l'extérieur — chacun un emplacement sur l'échelle neutre. La face claire du tableau de bord les ordonne par légèreté jusqu'au blanc, la face foncée par la distance à laquelle chacun est élevé du sol.
--surface-zoneLe sol sur lequel une région d'une page se tient--surface-pageLa page elle-même, et ce qui montre entre les zones--surface-shellMenu, en-tête, pied de page--surface-1Champs de saisie--surface-2Boutons, barres d'outils--surface-3Blocs, cartes, modales--surface-invertUn contrôle qui se distingue en prenant la couleur du texteTexte
Trois niveaux d'attention — neutre 12, 11 et 9 : ce qui est lu, ce qui le qualifie, et ce qui n'est là que pour être trouvé lorsqu'on le cherche.
--text-color-default — Ce qui est lu
--text-color-muted — Étiquettes, méta, sous-titres
--text-color-subtle — Séparateurs et états vides
Bordures
Quatre poids, distingués par ce qu'ils séparent — neutre 5 à 8 : deux choses à l'intérieur d'une région, un champ de ce qui est derrière, deux régions d'une page, et l'anneau de ce qui a le focus.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
Catégories
Treize couleurs qui ne signifient rien d'autre que "pas celui à côté" : la série d'un graphique, les segments d'une distribution, les étapes d'un flux de travail. Nommées, pas numérotées — une application choisit `cat-mint` parce que cela ressemble à de la menthe — et chacune une échelle comme les autres, donc une catégorie est portée de la manière dont un état l'est : son fond à 3, son encre à 11, rempli à 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