Справочник CSS-переменных

Витрина использует CSS custom properties. Переопредели любую из них в своём CSS через :root{ … } — изменения применятся ко всей витрине.

Цвета

Переменная	Назначение	Дефолт
`--accent`	Акцент (кнопки, цены) — также меняется темой	`#f15a29`
`--accent-h`	Высветленный акцент	из `--accent`
`--accent-soft`	Полупрозрачный акцент (фоны)	из `--accent`
`--bg`	Основной фон	`#0a0a0b`
`--bg2`	Вторичный фон	`#0e0e10`
`--panel`	Фон карточек/панелей	`#141416`
`--panel2`	Панель (hover/вложенная)	`#1a1a1d`
`--panel3`	Панель (активная)	`#222227`
`--text`	Основной текст	`#fafafa`
`--muted`	Приглушённый текст	`#a1a1aa`
`--dust`	Очень приглушённый текст	`#71717a`
`--line`	Тонкие линии/границы	`rgba(255,255,255,.06)`
`--line2`	Линии (контраст)	`rgba(255,255,255,.11)`
`--line3`	Линии (hover)	`rgba(255,255,255,.16)`
`--warn`	Предупреждение	`#fbbf24`
`--ok`	Успех / онлайн	`#4ade80`

Типографика и форма

Переменная	Назначение	Дефолт
`--font`	Семейство шрифта витрины	`'Inter', system-ui, sans-serif`
`--mono`	Моноширинный шрифт	`'JetBrains Mono', monospace`
`--r`	Скругление стандартное	`12px`
`--r-lg`	Скругление крупное	`16px`
`--grid-cols`	Число колонок товаров (если зафиксировано)	`0` (авто)

--grid-cols обычно задаётся не вручную, а через конфиг-переменную productsGrid — см. Конфиг-переменные.

Пример

css

:root{
  --accent: #2bbfae;
  --panel: #101316;
  --r: 8px;
  --font: 'Rubik', sans-serif;
}
.card{ box-shadow: none; border: 1px solid var(--line); }
.card:hover{ border-color: var(--accent); }