Токены

Система
токенов: 8

Полный справочник: все токены, которые публикует пакет, сгруппированные так же, как в источнике. Своя группировка дала бы страницу красивее и бесполезнее — токен не нашёлся бы по имени, увиденному в коде.

Источник: @feugene/granularity 3.7.2, tokens/*.json

На этой странице

Роли навигации
Забрать к себе

Токены публикуются и как типизированные данные: @feugene/granularity-tokens отдаёт тот же список скрипту, а не глазу, а @feugene/granularity/tokens — покомпонентные.

Токен	Светлая	Тёмная	Контраст	Роль
`--gr-sidebar`--gr-sidebar	`#ffffff`	`#1e293b`		Фон sidebar/navigation rail области текущей темы.
`--gr-sidebar-fg`--gr-sidebar-fg	`#0f172a`	`#f8fafc`	17.85 / 13.98против `--gr-sidebar`	Основной текст и иконки внутри sidebar.
`--gr-sidebar-primary`--gr-sidebar-primary	`#4f46e5`	`#6365f0`		Акцентный цвет активных/ключевых элементов внутри sidebar.
`--gr-sidebar-primary-fg`--gr-sidebar-primary-fg	`#ffffff`	`#ffffff`	6.29 / 4.52против `--gr-sidebar-primary`	Контрастный текст поверх sidebar primary-акцентов.
`--gr-sidebar-accent`--gr-sidebar-accent	`#f1f5f9`	`#334155`		Мягкий accent-фон для hover/selected состояний в sidebar.
`--gr-sidebar-accent-fg`--gr-sidebar-accent-fg	`#1e293b`	`#f1f5f9`	13.35 / 9.45против `--gr-sidebar-accent`	Цвет текста поверх sidebar accent-подложек.
`--gr-sidebar-brd`--gr-sidebar-brd	`#e2e8f0`	`#334155`		Бордеры и разделители sidebar-области.
`--gr-sidebar-ring`--gr-sidebar-ring	`#6366f1`	`#818cf8`		Focus-ring для интерактивных элементов внутри sidebar.

Забрать к себе

Те же 229 токенов в трёх чужих форматах: файл на формат, внутри — коллекция на режим. Здесь — тема по умолчанию; любая тема каталога лежит по адресу /api/v1/themes/<тема>/tokens/<формат>.json, список тем и их режимов — /api/v1/themes.json. Файлы порождаются из пакета на каждой сборке — второго списка значений не существует.

Style Dictionaryклассический формат: { категория: { имя: { value } } }. Читают все версии, включая те, что стоят в чужих сборках годами.
W3C Design Tokensформат W3C: $value, $type, коллекция на режим темы. Его читают импортёры переменных Figma.
Tokens Studioнаборы плагина: $themes, $metadata.tokenSetOrder, тип у каждого токена.

Ссылки CSS сняты: var(--gr-danger) за пределами CSS не значит ничего, поэтому в файлах стоит разрешённое значение своего режима. Тени идут без типа намеренно — в форматах это составное значение, а здесь строка, и объявить структуру, которой нет, значит уронить импорт целиком.