Brand (default)
vars.color.brand
createTheme docs example — blue
Vanilla Extract
3 официальных семантических токенов
Всего 3 цветов
Обзор Vanilla Extract
Vanilla Extract — это CSS-in-TypeScript без рантайма. Темы пишутся через createGlobalTheme, а дизайн-токены становятся типизированными, изолированными CSS-переменными.
Как использовать
Пишите токены в файле .css.ts и ссылайтесь на них в стилях. Используйте createTheme, чтобы переключать светлые и тёмные варианты без дублирования правил.
Brand (alternate)
vars.color.brand
Second createTheme variant — pink
Brand (contract)
vars.color.brand
Theme contract variant — red
Подходящих цветов нет
Источник: vanilla-extract · createTheme docs example