Токены

Точка входа пакета packages/tokens/src/index.css импортирует группы токенов, используемые во всём VegaUI:

• colors.css
• typography.css
• radiuses.css
• spacings.css
• animations.css
• shadows.css
• layers.css

Категории токенов

Пакет токенов даёт исходные строительные блоки, а не поведение компонентов.

• colors: шкалы палитры, например --color-blue-500
• typography: токены шрифта, размера, межстрочного интервала и оформления текста
• radiuses: шкалы радиусов скругления
• spacings: шкалы отступов раскладки и размеров элементов управления
• animations: токены таймингов анимации и переходов
• shadows: токены теней для приподнятости и поверхностей
• layers: токены z-index и порядка слоёв

Рекомендации по цвету

Главное правило из packages/tokens/README.md:

• используйте исходные токены палитры только для определения семантики
• внутри компонентов используйте семантические акцентные токены

Не используйте исходные токены в компонентах

Считайте это жёстким правилом для обычных стилей компонентов.

Используйте исходные токены палитры, такие как --color-blue-500 или --color-gray-300, только когда:

• вы определяете семантическую переменную темы
• вы работаете в самом слое токенов или темы
• документация компонента явно описывает хук на исходный токен как публичный API

В обычном CSS компонентов предпочитайте семантические переменные, например:

• --text-color
• --label-primary
• --border-color
• --color-blue-accent-500
• --color-gray-accent-300
• --fills-primary

Хорошо:

color: var(--color-primary-500);
border-color: var(--color-gray-accent-300);

Избегайте в стилях компонентов:

color: var(--color-blue-500);
border-color: var(--color-gray-300);

Почему токены и темы разделены

Токены задают шкалы. Темы решают, как эти шкалы превращаются в семантические переменные приложения. Компоненты обычно должны использовать семантику темы, а не исходные значения токенов, если только контракт компонента явно не описывает хук на исходный токен.