Стилизация темы
Frame использует систему дизайн-токенов на основе CSS-переменных. Все цвета, типографика, скругления и тени определены как токены в файле theme.css пакета @frame/core. Вы можете переопределить любой из них в CSS вашего проекта — без пересборки библиотеки.
Как это работает
При подключении Frame в вашем CSS-файле импортируется тема:
@import 'tailwindcss' source(none);
@import '../../node_modules/@frame/core/styles/theme.css';
@import '../../node_modules/@frame/vue/dist/vue.css';
@config '../../node_modules/@frame/core/dist/tailwind.config.js';
@source '../../node_modules/@frame/{core,vue,vue-table,vue-charts,vue-forms,vue-uploader}';
Файл theme.css регистрирует токены через директиву @theme (Tailwind CSS 4), а компоненты используют семантические переменные (--primary, --border, --card и т.д.). Эти семантические токены ссылаются на палитру (--color-primary-600), которую можно подменить.
Переопределение токенов
Добавьте свои значения после импорта темы в вашем CSS-файле:
@import '../../node_modules/@frame/core/styles/theme.css';
@import '../../node_modules/@frame/vue/dist/vue.css';
/* Ваши переопределения */
:root {
/* Бренд-цвет */
--color-primary-500: #7c3aed;
--color-primary-600: #6d28d9;
/* Шрифт */
--font-family: 'Inter', sans-serif;
/* Скругления */
--radius-lg: 1rem;
--radius-xl: 1.25rem;
}
Переопределение тёмной темы
Тёмная тема активируется классом .dark на корневом элементе <html>. Переключение происходит автоматически через компонент ThemeSelector в навбаре.
Чтобы настроить цвета тёмной темы:
.dark {
--background: #1a1a2e;
--card: rgba(255, 255, 255, 0.03);
--primary: #8b5cf6;
--border: #2d2d44;
}
Архитектура токенов
Система состоит из трёх слоёв:
- Палитра — базовые цвета с оттенками 50–950 (
--color-primary-500,--color-neutral-200). Это «сырые» значения. - Семантические токены — назначение цвета в интерфейсе (
--primary,--border,--card). Ссылаются на палитру. Именно их используют компоненты. - Tailwind-алиасы (
@theme inline) — мост между семантическими токенами и утилитами Tailwind (bg-primary,text-muted-foreground,border-border).
| Палитра | Семантика | Tailwind |
|---|---|---|
--color-primary-600 | --primary | bg-primary |
--color-neutral-200 | --border | border-border |
--color-neutral-950 | --foreground | text-foreground |
--color-danger-500 | --destructive | bg-destructive |
--color-success-500 | --success | bg-success |
--color-neutral-300 | --input | border-input |
--color-primary-50 | --accent | bg-accent |
Чтобы сменить бренд-цвет во всём приложении, достаточно переопределить палитру primary. Чтобы точечно изменить, например, цвет рамок — переопределите семантический токен --border.
Шрифт
Шрифт задаётся переменной --font-family в :root:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
:root {
--font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
По умолчанию используется Onest.