Color — светлая тема
Источник:
ds-docs/component-contracts/foundations/color-light-mode.md
Источник: коллекция color файла Astra DS, режим light-mode ·
tokens/color-light-mode.tokens.json ·
id сверены с tokens/variable-ids.json.
Только факты. Находки — в конце. Тёмная тема — color-dark-mode.
Устройство
Цвет — одна коллекция color на 426 переменных с двумя режимами, light-mode
и dark-mode. Светлая и тёмная тема — это не два набора имён, а два значения одной
переменной: имена и id общие, различаются только значения.
Из 426 переменных 409 ссылаются на примитив, и только 17 держат
собственное значение. Примитивы (коллекция primitives, 132 переменные) сами почти целиком
алиасы: 129 из 132 ведут в подключённую библиотеку, и настоящие числа лежат там. Своё
значение в примитивах только у трёх — white, black, transparent. Значит, hex в файле
не хранится вовсе; он приходит из библиотеки, и в экспортах записан уже разрешённым.
Группы
components/components | 219 | 49 | 13 |
colors/additional | 64 | 2 | — |
colors/text | 32 | 22 | — |
colors/background | 26 | 17 | — |
colors/foreground | 22 | 14 | — |
other/skeleton | 10 | 5 | — |
other/gradient | 10 | 4 | — |
colors/border | 9 | 5 | — |
other/blur | 7 | 0 | — |
state-layer-colors/select | 6 | 4 | — |
other/shadow | 6 | 0 | — |
state-layer-colors/focus | 5 | 2 | — |
state-layer-colors/dev | 4 | 2 | 4 |
state-layer-colors/hover | 2 | 2 | — |
other/overlay | 2 | 1 | — |
state-layer-colors/press | 2 | 2 | — |
Между темами различаются только 131 переменных из 426. У остальных 295
в обоих режимах стоит одна и та же ссылка — цвет не зависит от темы. Больше всего таких
среди components/components (219 переменных, различаются 49): слой компонентных цветов
почти целиком одинаков в светлой и тёмной теме.
Код и описания
codeSyntax WEB задан у 399 переменных из 426 — единственная коллекция файла, где
имена для кода проставлены почти везде. Описание есть у 110 (26%). Имена уникальны:
все 426 имён-листьев различны, двойников внутри коллекции нет.
База ссылается на 56 цветовых токенов из 426.
Примеры (светлая)
text-primary | #171A1C | colors/gray/gray-950 |
border-brand | #1CCB01 | colors/brand/brand-500 |
Бренд — brand-500, зелёный #1CCB01.
Находки
- Две трети палитры не зависят от темы. У 295 переменных из 426 в обоих режимах стоит одна и та же ссылка. Формально коллекция двухрежимная, фактически тему меняет треть.
- Настоящих значений в файле почти нет. 409 переменных — алиасы в примитивы, а примитивы на 129 из 132 — алиасы в библиотеку. Без библиотеки файл цвета не знает.
- Семнадцать переменных держат значение сами, и четыре из них — не цвет:
state-layer-colors/dev/value-hoverиvalue-pressedхранят строки4%и8%,components/basic/theme— словоLight/Dark. Это настройки, лежащие в коллекции цвета.
См. также: color-dark-mode, README.