Библиотека компонентов

Черновой набор элементов для прототипов holodilnik.ru. Правь токены в components.css — здесь и во всех прототипах, которые их подключают, стиль обновится сам.

2026-09-09 — первый заход интеграции реальной дизайн-системы компании, 2026-09-11 — добавлены вторичные палитры Violet/Flamingo/Mint. Цвета и часть кнопок ниже сверены со скриншотами ДС (папка «Дизайн система» на рабочем столе пользователя) — HEX-значения сняты пиксельно с образцов, не подобраны на глаз. Взято только то, что уже соответствует ролям, существующим в проекте; полная сетка размеров/тёмной темы и состояний Hover/Pressed/Loading из скриншотов пока не перенесена — подробности в комментарии к :root в components.css.

Цвета
primary (ДС «Accent»)
primary hover
primary tint
accent (Brand Orange)
bg
success
success deep
success tint
danger
danger deep
danger tint
attention (новый)
attention deep
attention tint
btn dark (ДС «Primary»)
btn light (ДС «Secondary»)
violet (новый)
violet deep
flamingo (новый)
flamingo deep
mint (новый)
mint deep

Violet/Flamingo/Mint — декоративные вторичные палитры без закреплённой семантики (в отличие от Success/Danger/Attention), заведены 2026-09-11 под хаб «Заработать бонусы» (6 разных механик заработка бонусов).

Градиенты сняты из ДС, но пока никуда не подключены — готовы для будущих промо-баннеров (--gradient-sky-1/2, --gradient-orange-1/2).

Кнопки — уже было
Кнопки — новое из дизайн-системы

По правилу ДС не смешивайте в одной группе несколько «сплошных» (solid) кнопок разного назначения — используйте одну основную и second­ary/light-варианты рядом с ней.

Поля формы
Необязательное поле
Карточка
Заголовок карточки

Любое содержимое: текст, поля, кнопки.

Выбираемая карточка (радио)