Токены

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

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

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

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

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

Токены публикуются и как типизированные данные: @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.

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

Те же 216 токенов в трёх чужих форматах, по одному файлу на формат и по коллекции на тему. Файлы порождаются из пакета на каждой сборке — второго списка значений не существует.

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

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