Цвета
Цвета
Названия компонентов не указывают на цвет. Цвет живет в палитре, как шкалы из двенадцати тонов для светлого и темного фонов; цветовая схема определяет, каким образом читается страница; компонент выполняет роль — поверхность, граница, текст — что является одним местом на шкале. Кожа никогда не говорит о цвете. Переключите схему из заголовка, и каждый образец ниже переместится, не определяя ни один из них заново.
Шкалы
Палитра — это нейтральный, акцентный цвет — бренд — и четыре состояния, каждое из которых является шкалой из двенадцати тонов, расположенной так, как это делает Radix Themes и Material 3. Место на шкале означает одно и то же на каждой шкале и на обеих сторонах: для чего нужны приведенные ниже числа. Приложение приносит свою палитру, задавая свой акцент; каждая шкала следует за этим.
--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 основание рабочей области
- 2 основание страницы, вокруг и между регионами
- 3 основание поля; слабое основание, на котором сидит состояние
- 4 поднятый элемент управления; наведенное основание
- 5 карточка, блок — и его сдержанная граница
- 6 граница
- 7 граница между двумя регионами
- 8 сильная граница, кольцо фокуса
- 9 цвет в целом, заполняя то, что он обозначает
- 10 то же самое, наведенное
- 11 цвет как чернила, читаемые на основаниях
- 12 сильные чернила — для нейтрального, самого текста
Поверхности
Основания, от области наружу — каждое из них является местом на нейтральной шкале. Светлая сторона панели упорядочивает их по светлоте до белого, темная сторона — по тому, насколько высоко каждое из них приподнято над землей.
--surface-zoneЗемля, на которой стоит область страницы--surface-pageСама страница и то, что находится между зонами--surface-shellМеню, заголовок, нижний колонтитул--surface-1Вводы и поля--surface-2Кнопки, панели инструментов--surface-3Блоки, карточки, модальные окна--surface-invertЭлемент управления выделяется, принимая цвет текстаТекст
Три уровня внимания — нейтраль 12, 11 и 9: что читается, что это квалифицирует, и что присутствует только для поиска.
--text-color-default — Что читается
--text-color-muted — Ярлыки, метаданные, подзаголовки
--text-color-subtle — Разделители и пустые состояния
Границы
Четыре веса, различающиеся тем, что они разделяют — нейтраль 5 до 8: две вещи внутри одной области, поле от того, что за ним, две области страницы и кольцо того, что имеет фокус.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
Категории
Тринадцать цветов, которые ничего не значат, кроме "не тот, что рядом": серия графика, сегменты распределения, этапы рабочего процесса. Названы, а не пронумерованы — приложение выбирает `cat-mint`, потому что он выглядит как мята — и каждая является шкалой, как и другие, так что категория носится так же, как состояние: ее основание на 3, ее чернила на 11, заполненные на 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