Урок 06. Старый vs Новый: HEX против токенов

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Раньше цвета были HEX-константами в CSS и в конфиге. Теперь это токены в OKLCH, доступные и утилитам, и вашему CSS. Класс градиента переименован: bg-gradient-to-r → bg-linear-to-r.

Цвет в проекте

❌ Было: константы в двух местах

:root { --brand: #4f46e5; --brand-dark: #4338ca; }
.button { background: var(--brand); }
.button:hover { background: var(--brand-dark); }

// tailwind.config.js — то же значение, но отдельно
theme: { extend: { colors: { brand: "#4f46e5" } } }

✅ Стало: один токен на всё

@theme {
  --color-brand-500: oklch(0.55 0.21 264);
  --color-brand-600: oklch(0.48 0.22 264);
}

<button class="bg-brand-500 hover:bg-brand-600">Кнопка</button>

Токен доступен и как утилита, и как var(--color-brand-500) в любом вашем правиле.

RGB против OKLCH

Признак	HEX / RGB	OKLCH
Равномерность ступеней	на глаз, вручную	математически ровная светлота
Осветлить цвет	подобрать новый HEX	увеличить первое число
Охват экрана	только sRGB	шире, вплоть до P3
Читаемость значения	`#0ea5e9` — ни о чём	`oklch(0.7 0.15 240)` — светлота, насыщенность, тон

Переименования и новинки

v3	v4	Комментарий
`bg-gradient-to-r`	`bg-linear-to-r`	появились `bg-radial`, `bg-conic`
`bg-opacity-50`	`bg-black/50`	прозрачность модификатором
`text-opacity-70`	`text-slate-900/70`	то же для текста
Палитра в RGB	Палитра в OKLCH	значения слегка изменились визуально

Если переносите старый проект, проверьте макеты: цвета той же ступени в v4 могут выглядеть чуть иначе — это следствие перехода на OKLCH, а не ошибка.