Большинство тем дают вам таблицу стилей с жёстко заданными значениями. Измените брендовый цвет, и вы вынуждены искать по десяткам файлов. Fastry работает иначе — одно изменение распространяется мгновенно везде, включая светлый и тёмный режим.
Причина — трёхуровневая архитектура токенов. Понимание её занимает десять минут. Использование делает каждую настройку быстрее и согласованнее.
Трёхуровневая архитектура
Уровень 1 — Референсные токены
Референсные токены — это сырые значения: конкретные цвета, размеры, радиусы. У них нет семантического значения — они просто определяют палитру.
--color-lime-500: oklch(0.768 0.233 130.85);
--color-lime-600: oklch(0.702 0.213 130.85);Уровень 2 — Семантические токены
Семантические токены связывают намерение с референсными значениями. --color-brand-500 не знает, какое hex-значение содержит — он знает, какую роль играет.
:root {
--color-brand-500: var(--color-lime-500);
--color-brand-600: var(--color-lime-600);
}Уровень 3 — Компонентные токены
Компонентные токены ограничены конкретными элементами UI. Кнопка не обращается к --color-brand-500 напрямую — она использует --btn-primary-bg, который указывает на --color-brand-500.
--btn-primary-bg: var(--color-brand-500);Почему OKLCH
Fastry использует OKLCH для всех цветовых значений вместо hex или HSL.
OKLCH описывает цвет в трёх измерениях: светлота (L), хрома (C) и оттенок (H). Ключевое преимущество — перцептивная равномерность: два цвета с одинаковым значением L выглядят одинаково яркими для человеческого глаза.
Тёмный режим через токены
Тёмный режим в Fastry — это не отдельная таблица стилей. Это та же система токенов с другими значениями, применяемыми под селектором .dark.
.dark {
--color-background: oklch(0.10 0.02 265);
--color-foreground: oklch(0.95 0 0);
}Когда класс dark переключается на <html>, каждый семантический токен переназначается одновременно. Без JavaScript. Без каскада пересчёта стилей.
Изменение брендового цвета
Базовая шкала брендового цвета находится в src/styles/tokens/primitives.css. Чтобы переключиться с lime на violet:
1. Добавьте или проверьте референсные токены:
--color-violet-500: oklch(0.606 0.258 292.72);2. Переназначьте семантические токены бренда:
:root {
--color-brand-500: var(--color-violet-500);
}Это полное изменение. Каждая кнопка, ссылка, бейдж и выделенный текст по всему сайту теперь использует фиолетовый — в светлом и тёмном режиме — без изменения единого файла компонента.
Связь с Tailwind
Fastry использует Tailwind CSS v4, который читает CSS-кастомные свойства напрямую. Utility-класс text-brand-500 сопоставляется с --color-brand-500 — без необходимости в tailwind.config.js.
Что это значит на практике
Система токенов даёт три конкретных преимущества:
- Единый источник истины — брендовый цвет, шкала отступов, радиус границ и размеры типографики определяются один раз
- Безопасная кастомизация компонентов — можно изменить стиль конкретного компонента на уровне компонентных токенов без риска побочных эффектов
- Тёмный режим бесплатно — каждый новый компонент наследует тёмный режим автоматически