Кастомизация
Дизайн-токены
Полный список CSS-переменных, доступных для кастомизации
Все токены определены в @frame/core/styles/theme.css и доступны для переопределения через CSS-переменные.
Список токенов можно извлечь автоматически с помощью скрипта
node scripts/extract-tokens.js --format=md --dark в репозитории frame-ui.Цвета
Каждая группа цветов содержит оттенки от 50 (светлый) до 950 (тёмный). Основной оттенок — 500.
primary
| Токен | Значение |
|---|---|
--color-primary-50 | #eef5ff |
--color-primary-100 | #d9e8ff |
--color-primary-200 | #bbd7ff |
--color-primary-300 | #8cbeff |
--color-primary-400 | #569aff |
--color-primary-500 | #2f73ff |
--color-primary-600 | #1851f8 |
--color-primary-700 | #113ce4 |
--color-primary-800 | #1431b9 |
--color-primary-900 | #173091 |
--color-primary-950 | #131f58 |
secondary
| Токен | Значение |
|---|---|
--color-secondary-50 | #ecfef6 |
--color-secondary-100 | #cffce8 |
--color-secondary-200 | #a4f6d6 |
--color-secondary-300 | #6aecc0 |
--color-secondary-400 | #2edaa7 |
--color-secondary-500 | #09ca97 |
--color-secondary-600 | #019c74 |
--color-secondary-700 | #027d61 |
--color-secondary-800 | #05634f |
--color-secondary-900 | #025141 |
--color-secondary-950 | #002e26 |
neutral
| Токен | Значение |
|---|---|
--color-neutral-0 | #ffffff |
--color-neutral-50 | #fafafa |
--color-neutral-100 | #f3f3f3 |
--color-neutral-200 | #e9e9e9 |
--color-neutral-300 | #d9d9d9 |
--color-neutral-400 | #c4c4c4 |
--color-neutral-500 | #9d9d9d |
--color-neutral-600 | #7b7b7b |
--color-neutral-700 | #555555 |
--color-neutral-800 | #434343 |
--color-neutral-900 | #262626 |
--color-neutral-950 | #0f0f0f |
--color-neutral-1000 | #000000 |
danger
| Токен | Значение |
|---|---|
--color-danger-50 | #fef2f2 |
--color-danger-100 | #ffe1e1 |
--color-danger-200 | #ffc8c8 |
--color-danger-300 | #ffa2a2 |
--color-danger-400 | #fc6c6c |
--color-danger-500 | #f64c4c |
--color-danger-600 | #e31f1f |
--color-danger-700 | #bf1616 |
--color-danger-800 | #9e1616 |
--color-danger-900 | #83191a |
--color-danger-950 | #470808 |
warning
| Токен | Значение |
|---|---|
--color-warning-50 | #fffdea |
--color-warning-100 | #fff6c5 |
--color-warning-200 | #ffed85 |
--color-warning-300 | #ffdd46 |
--color-warning-400 | #ffcb1b |
--color-warning-500 | #ffad0d |
--color-warning-600 | #e27f00 |
--color-warning-700 | #bb5802 |
--color-warning-800 | #984408 |
--color-warning-900 | #7c380b |
--color-warning-950 | #481b00 |
success
| Токен | Значение |
|---|---|
--color-success-50 | #effaf4 |
--color-success-100 | #d8f4e1 |
--color-success-200 | #b4e6c9 |
--color-success-300 | #81d4a9 |
--color-success-400 | #47b881 |
--color-success-500 | #2a9f6a |
--color-success-600 | #1c7f54 |
--color-success-700 | #166645 |
--color-success-800 | #145139 |
--color-success-900 | #114330 |
--color-success-950 | #09251c |
info
| Токен | Значение |
|---|---|
--color-info-50 | #eff5ff |
--color-info-100 | #dbe8fe |
--color-info-200 | #bfd7fe |
--color-info-300 | #93bbfd |
--color-info-400 | #609afa |
--color-info-500 | #3b82f6 |
--color-info-600 | #2570eb |
--color-info-700 | #1d64d8 |
--color-info-800 | #1e55af |
--color-info-900 | #1e478a |
--color-info-950 | #172e54 |
Прозрачности
| Токен | Значение |
|---|---|
--white-50 | rgb(255, 255, 255, 0.05) |
--white-100 | rgb(255, 255, 255, 0.1) |
--white-200 | rgb(255, 255, 255, 0.2) |
--white-300 | rgb(255, 255, 255, 0.3) |
--black-20 | rgb(0, 0, 0, 0.02) |
--black-50 | rgb(0, 0, 0, 0.05) |
--black-100 | rgb(0, 0, 0, 0.1) |
--black-200 | rgb(0, 0, 0, 0.2) |
--black-300 | rgb(0, 0, 0, 0.3) |
Семантические токены
Эти токены определяют назначение цвета в интерфейсе. Компоненты Frame используют именно их. Переопределяя семантические токены, вы меняете внешний вид всех компонентов сразу.
| Токен | Значение по умолчанию | Назначение |
|---|---|---|
--background | var(--color-white) | Фон страницы |
--foreground | var(--color-neutral-950) | Основной цвет текста |
--card | var(--black-20) | Фон карточек |
--card-foreground | var(--color-neutral-950) | Текст в карточках |
--primary | var(--color-primary-600) | Основной акцентный цвет |
--primary-foreground | var(--color-white) | Текст на основном цвете |
--popover | var(--color-white) | Фон всплывающих окон |
--popover-foreground | var(--color-neutral-950) | Текст во всплывающих окнах |
--destructive | var(--color-danger-500) | Деструктивные действия |
--destructive-light | var(--color-danger-200) | Лёгкий фон для деструктивных |
--destructive-foreground | var(--color-white) | Текст на деструктивном фоне |
--success | var(--color-success-500) | Успешные действия |
--success-light | var(--color-success-200) | Лёгкий фон для успешных |
--success-foreground | var(--color-white) | Текст на успешном фоне |
--border | var(--color-neutral-200) | Рамки элементов |
--ring | var(--color-primary-200) | Кольцо фокуса |
--input | var(--color-neutral-300) | Рамка полей ввода |
--input-hover | var(--color-neutral-400) | Рамка полей при наведении |
--input-placeholder | var(--color-neutral-400) | Плейсхолдер |
--muted | var(--color-neutral-300) | Приглушённые элементы |
--muted-foreground | var(--color-neutral-600) | Приглушённый текст |
--accent | var(--color-primary-50) | Акцентный фон (hover) |
--accent-foregorund | var(--color-neutral-900) | Текст на акцентном фоне |
Типографика
| Токен | Значение | Описание |
|---|---|---|
--text-8xl | 6rem | 96px |
--text-7xl | 4.5rem | 72px |
--text-6xl | 3.75rem | 60px |
--text-5xl | 3rem | 48px |
--text-4xl | 2.25rem | 36px |
--text-3xl | 1.875rem | 30px |
--text-2xl | 1.5rem | 24px |
--text-xl | 1.25rem | 20px |
--text-lg | 1.125rem | 18px |
--text-base | 1rem | 16px |
--text-sm | 0.875rem | 14px |
--text-xs | 0.75rem | 12px |
--text-xxs | 0.625rem | 10px |
Каждый размер текста имеет связанные токены --text-{size}--line-height и --text-{size}--font-weight.
Скругления
| Токен | Значение |
|---|---|
--radius-none | 0 |
--radius-sm | 0.125rem |
--radius-DEFAULT | 0.25rem |
--radius-md | 0.375rem |
--radius-lg | 0.5rem |
--radius-xl | 0.75rem |
--radius-2xl | 1rem |
--radius-3xl | 1.5rem |
--radius-4xl | 2rem |
--radius-5xl | 2.5rem |
Тени
| Токен | Значение |
|---|---|
--shadow-lg | 0px 10px 15px -3px #0000001A, 0px 4px 6px -4px #0000001A |
Тёмная тема
При активном классе .dark на <html> следующие токены переопределяются:
| Токен | Значение |
|---|---|
--background | #0f0f0f |
--foreground | #fff |
--card | var(--white-50) |
--card-foreground | #ffffff |
--primary | var(--color-primary-500) |
--primary-foreground | #fff |
--popover | var(--color-neutral-900) |
--popover-foreground | var(--color-white) |
--border | var(--color-neutral-800) |
--accent | var(--color-neutral-800) |
--muted | var(--color-neutral-800) |
--muted-foreground | var(--color-neutral-300) |
--input | var(--color-neutral-600) |
--input-hover | var(--color-neutral-400) |
--input-placeholder | var(--color-neutral-500) |
--ring | var(--color-primary-900) |
--destructive-light | var(--color-danger-900) |
--success | var(--color-success-500) |
--success-foreground | #fff |
--success-light | var(--color-success-900) |