CSS-переменные

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

С помощью переменных можно управлять внешним видом новых секций в настройках Тема в редакторе сайта.

Примечание

Если вы впервые сталкиваетесь с CSS-переменными, рекомендуем ознакомиться с документацией MDN.

Использование CSS-переменных упрощает разработку секций — в инструменте разработки браузера видно, какой токен темы используется в качестве значения.

Фоновые цвета

Переменная

Описание

Использование

Пример

--ys-background-primary

Основной цвет фона приложения.

Основной фон страниц, модальных окон, карточек.
CSS
body {
  background-color: var(--ys-background-primary);
}

--ys-background-neutral

Нейтральный вторичный фон.

Второстепенные элементы, разделители секций, альтернативные фоны.
CSS
.card-secondary {
  background-color: var(--ys-background-neutral);
}

--ys-background-secondary

Акцентный вторичный фон, содержит оттенок фирменного цвета.

Выделенные блоки, highlighted-секции, активные состояния.
CSS
.featured-block {
  background-color: var(--ys-background-secondary);
}

Цвета текста

Переменная

Описание

Использование

Пример

--ys-color-token-text-primary

Основной цвет текста. Максимальная читаемость на основном фоне.

Заголовки, основной контент, важная информация.
CSS
.heading, .paragraph {
  color: var(--ys-color-token-text-primary);
}

--ys-color-token-text-secondary

Вторичный цвет текста. Пониженная контрастность для визуальной иерархии.

Подписи, метаинформация, вспомогательный текст.
CSS
.caption, .meta-info {
  color: var(--ys-color-token-text-secondary);
}

--ys-color-token-placeholder

Цвет текста placeholder.

Placeholder в полях ввода, пустые состояния.
CSS
input::placeholder {
  color: var(--ys-color-token-placeholder);
}

Границы

Переменная

Описание

Использование

Пример

--ys-color-token-border-primary

Основной цвет границ. Автоматически подстраивается под цвет фона.

Основные разделители, рамки элементов форм, контуры карточек.
CSS
.input, .card {
  border: 1px solid var(--ys-color-token-border-primary);
}

--ys-color-token-border-secondary

Вторичный цвет границ. Более заметный чем --ys-color-token-border-primary.

Менее заметные разделители, hover-состояния, декоративные линии.
CSS
.divider, .table-row:hover {
  border-color: var(--ys-color-token-border-secondary);
}

Обратиться в службу поддержки

Написать в чат

Написать письмо

Предыдущая
Контроллеры
Следующая
Утилиты