Дизайн-токены

Дизайн-токены ↗ — это набор базовых переменных, задающих отступы, цвета, типографику и анимации. VKUI использует токены вместо конкретных значений, чтобы компоненты было легко подстраивать под конкретные платформы и цветовые режимы.

VKUI использует пакет @vkontakte/vkui-tokens ↗ с готовыми наборами дизайн-токенов.

Токены поставляются в форматах css, scss, less, pcss, styl, js, json. VKUI использует формат css.

Каждый набор токенов объявлен в CSS-классе вида vkui--<themeName>--<colorScheme>. По умолчанию поддерживаются темы vkBase/vkBaseDark, vkIOS/vkIOSDark и vkCom/vkComDark.

Например, для тёмного режима темы vkBase класс выглядит так — vkui--vkBase--dark (CSS-файл ↗).

Все токены начинаются с префикса --vkui--.

В приложении вы можете ссылаться на любые токены подключённой темы из CSS-файлов или через свойство style.

Например:

<div style={{ color: `var(--vkui--color_accent_lime)` }}>
  Я использую цветовой токен цвета лайма.
</div>

Переопределение токенов

Иногда нужно переопределить значения отдельных токенов. Например, так:

app-styles.css

.forceColorRed {
  --vkui--color_text_primary: red;
}

Теперь все потомки компонента с классом forceColorRed получат red для токена --vkui--color_text_primary.

Такой способ не рекомендуется: он подвержен проблемам специфичности — придётся следить, чтобы чанк с переопределениями подключался после CSS-стилей VKUI.

Лучше создать собственную тему, возможно на основе существующей. Подробнее — на странице токенов ↗.

Серверный рендеринг

Темы