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

Дизайн-токены ↗ — это набор базовых переменных, задающих отступы, цвета, типографику и анимации. 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).

Рекомендуемым способом переопределения токенов является создание собственной темы (можно на основе уже существующей). Подробнее можно узнать на отдельной странице токенов в разделе Документация ↗.

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

Темы