237 lines
13 KiB
Markdown
237 lines
13 KiB
Markdown
# Маппинг токенов в Tailwind (для frontend-dev)
|
||
|
||
Источник значений — `design/tokens.css` (единственный источник истины).
|
||
Ниже — как подключить их в `tailwind.config.ts` проекта `frontend/` через
|
||
`tailwind.config` + CSS-переменные, без дублирования значений в JS.
|
||
|
||
## 1. Подключение
|
||
|
||
1. Скопировать (или импортировать) `design/tokens.css` в `frontend/src/styles/tokens.css`,
|
||
подключить в корневом `index.css` до Tailwind-директив:
|
||
```css
|
||
@import './tokens.css';
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
```
|
||
2. В `tailwind.config.ts` **не хардкодить hex** — ссылаться на CSS-переменные,
|
||
чтобы тема комнаты (`[data-theme="room"]`) и тёмная тема оболочки
|
||
(`[data-theme="dark"]` / `prefers-color-scheme: dark`, см. ниже §1a)
|
||
переопределяли значения без пересборки Tailwind:
|
||
|
||
```ts
|
||
import type { Config } from 'tailwindcss'
|
||
|
||
export default {
|
||
darkMode: ['selector', '[data-theme="room"]'], // room-тема — не системная OS dark, а локальный скоуп
|
||
content: ['./src/**/*.{ts,tsx}'],
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
bg: 'var(--color-bg)',
|
||
'bg-alt': 'var(--color-bg-alt)',
|
||
surface: 'var(--color-surface)',
|
||
border: {
|
||
DEFAULT: 'var(--color-border)',
|
||
strong: 'var(--color-border-strong)',
|
||
pill: 'var(--color-border-pill)',
|
||
},
|
||
ink: {
|
||
900: 'var(--color-ink-900)',
|
||
700: 'var(--color-ink-700)',
|
||
500: 'var(--color-ink-500)',
|
||
400: 'var(--color-ink-400)',
|
||
300: 'var(--color-ink-300)',
|
||
},
|
||
// Акцент не обязан быть зелёным — см. DESIGN_SYSTEM.md §1.1.
|
||
accent: {
|
||
DEFAULT: 'var(--color-accent)',
|
||
hover: 'var(--color-accent-hover)',
|
||
active: 'var(--color-accent-active)',
|
||
text: 'var(--color-accent-text)',
|
||
},
|
||
success: { DEFAULT: 'var(--color-success)', bg: 'var(--color-success-bg)', dot: 'var(--color-success-dot)' },
|
||
danger: { DEFAULT: 'var(--color-danger)', bg: 'var(--color-danger-bg)', dot: 'var(--color-danger-dot)' },
|
||
warning: { DEFAULT: 'var(--color-warning)', bg: 'var(--color-warning-bg)', dot: 'var(--color-warning-dot)' },
|
||
focus: 'var(--color-focus-ring)',
|
||
|
||
// Тема комнаты — доступна везде как room-* (реально применяется только
|
||
// внутри [data-theme="room"], т.к. сами переменные там переопределены)
|
||
room: {
|
||
bg: 'var(--color-room-bg)',
|
||
surface: 'var(--color-room-surface)',
|
||
'surface-raised': 'var(--color-room-surface-raised)',
|
||
tile: 'var(--color-room-tile)',
|
||
'tile-border': 'var(--color-room-tile-border)',
|
||
'tile-hover': 'var(--color-room-tile-hover)',
|
||
'text-primary': 'var(--color-room-text-primary)',
|
||
'text-secondary': 'var(--color-room-text-secondary)',
|
||
'text-tertiary': 'var(--color-room-text-tertiary)',
|
||
'mic-on': 'var(--color-room-mic-on)',
|
||
'mic-off': 'var(--color-room-mic-off)',
|
||
'speaker-ring': 'var(--color-room-speaker-ring)',
|
||
danger: 'var(--color-room-danger)',
|
||
'danger-bg': 'var(--color-room-danger-bg)',
|
||
'danger-bg-hover': 'var(--color-room-danger-bg-hover)',
|
||
focus: 'var(--color-room-focus-ring)',
|
||
},
|
||
},
|
||
fontFamily: {
|
||
display: ['Unbounded', 'Arial Rounded MT Bold', '-apple-system', 'Segoe UI', 'sans-serif'],
|
||
body: ['Inter', '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
||
mono: ['JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Consolas', 'monospace'],
|
||
},
|
||
fontSize: {
|
||
'display-2xl': ['64px', { lineHeight: '1.05', fontWeight: '700' }],
|
||
'display-xl': ['48px', { lineHeight: '1.1', fontWeight: '700' }],
|
||
'display-lg': ['34px', { lineHeight: '1.2', fontWeight: '600' }],
|
||
h1: ['28px', { lineHeight: '1.25', fontWeight: '700' }],
|
||
h2: ['22px', { lineHeight: '1.3', fontWeight: '600' }],
|
||
h3: ['18px', { lineHeight: '1.35', fontWeight: '600' }],
|
||
'body-lg': ['16px', { lineHeight: '1.5' }],
|
||
body: ['14px', { lineHeight: '1.5' }],
|
||
caption: ['12px', { lineHeight: '1.4', letterSpacing: '.04em', fontWeight: '600' }],
|
||
'mono-sm': ['13px', { lineHeight: '1.4', fontWeight: '500' }],
|
||
},
|
||
spacing: {
|
||
1: 'var(--space-1)', 2: 'var(--space-2)', 3: 'var(--space-3)',
|
||
4: 'var(--space-4)', 5: 'var(--space-5)', 6: 'var(--space-6)',
|
||
8: 'var(--space-8)', 10: 'var(--space-10)', 12: 'var(--space-12)',
|
||
16: 'var(--space-16)', 20: 'var(--space-20)', 24: 'var(--space-24)',
|
||
},
|
||
borderRadius: {
|
||
sm: 'var(--radius-sm)', md: 'var(--radius-md)', lg: 'var(--radius-lg)',
|
||
xl: 'var(--radius-xl)', '2xl': 'var(--radius-2xl)', '3xl': 'var(--radius-3xl)',
|
||
full: 'var(--radius-full)',
|
||
},
|
||
boxShadow: {
|
||
sm: 'var(--shadow-sm)', md: 'var(--shadow-md)', lg: 'var(--shadow-lg)',
|
||
glass: 'var(--shadow-glass)',
|
||
'speaker-glow': 'var(--shadow-speaker-glow)',
|
||
'room-panel': 'var(--shadow-room-panel)',
|
||
},
|
||
screens: {
|
||
// desktop-first: минимальная поддерживаемая ширина — 1280px
|
||
min: { raw: '(min-width: 1280px)' },
|
||
},
|
||
transitionDuration: {
|
||
fast: '120ms',
|
||
base: '200ms',
|
||
},
|
||
},
|
||
},
|
||
plugins: [],
|
||
} satisfies Config
|
||
```
|
||
|
||
## 1a. Тёмная тема оболочки — контракт для frontend
|
||
|
||
Механизм (детали и обоснование — `design/DESIGN_SYSTEM.md` §0.1/§1.2b,
|
||
реализация значений — `design/tokens.css`):
|
||
|
||
- Атрибут `data-theme="dark"` / `data-theme="light"` на `<html>` — явный
|
||
выбор пользователя (persist в localStorage/профиле); без атрибута — дефолт
|
||
по `@media (prefers-color-scheme: dark)`.
|
||
- Оба триггера переопределяют **те же самые** CSS-переменные, что и светлый
|
||
`:root` (`--color-bg`, `--color-ink-900`, `--color-accent`, …). Так как
|
||
весь маппинг Tailwind-цветов в §1 уже идёт через `var(--color-*)`, а не
|
||
хардкод, **подавляющему большинству компонентов не нужна отдельная
|
||
`dark:`-логика** — те же классы (`bg-bg`, `text-ink-900`, `bg-accent`)
|
||
автоматически перекрашиваются вместе со сменой `data-theme`.
|
||
- Существующий Tailwind `dark:`-вариант (`darkMode: ['selector', '[data-theme="room"]']`)
|
||
остаётся зарезервирован **только за комнатой** (см. комментарий в конфиге
|
||
§1) — не путать с тёмной темой оболочки, у них разный контракт (комната не
|
||
переключается, оболочка — переключается и по умолчанию следует ОС).
|
||
- Для редких мест, где нужен именно Tailwind-вариант под тёмную оболочку
|
||
(например, компонентные исключения §1.2b DESIGN_SYSTEM.md — glass-обводка,
|
||
focus/error-glow, если их проще выразить `class`, а не `var()`) — завести
|
||
отдельный кастомный вариант `shell-dark:` через `addVariant`, с тем же
|
||
двойным условием, что и в `tokens.css`:
|
||
|
||
```ts
|
||
import plugin from 'tailwindcss/plugin'
|
||
|
||
export default {
|
||
// ...
|
||
plugins: [
|
||
plugin(({ addVariant }) => {
|
||
addVariant('shell-dark', [
|
||
'&[data-theme="dark"]',
|
||
'@media (prefers-color-scheme: dark) { &:not([data-theme]) }',
|
||
])
|
||
}),
|
||
],
|
||
} satisfies Config
|
||
```
|
||
|
||
Использование: `shell-dark:border-white/10` и т.п. — только для случаев,
|
||
которые принципиально нельзя выразить через `var()` (см. категории 3–4 в
|
||
§1.2b DESIGN_SYSTEM.md); для всех обычных цветов компонентов — `var()`-токены,
|
||
`shell-dark:` не нужен.
|
||
|
||
## 2. shadcn/ui
|
||
|
||
`components.json` продолжает использовать CSS-переменные (`cssVariables: true`),
|
||
но вместо стандартной shadcn-палитры (`--primary`, `--secondary`, …) — алиасить
|
||
их на токены проекта в `globals.css`:
|
||
|
||
```css
|
||
:root {
|
||
--primary: var(--color-ink-700);
|
||
--primary-foreground: var(--color-surface);
|
||
--secondary: var(--color-bg-alt);
|
||
--destructive: var(--color-danger);
|
||
--destructive-foreground: #FFFFFF;
|
||
--ring: var(--color-focus-ring);
|
||
--radius: 24px; /* соответствует --radius-2xl, база для shadcn radius-cascade */
|
||
}
|
||
|
||
[data-theme='room'] {
|
||
--primary: var(--color-room-mic-on);
|
||
--destructive: var(--color-room-danger-bg);
|
||
--ring: var(--color-room-focus-ring);
|
||
}
|
||
```
|
||
|
||
Тёмную тему оболочки (`[data-theme='dark']`) здесь отдельно объявлять не
|
||
нужно: блок `:root` выше уже целиком построен на `var(--color-*)`, а эти
|
||
переменные сами переопределяются в `tokens.css` под `[data-theme='dark']`/
|
||
`prefers-color-scheme` — shadcn-компоненты перекрашиваются вместе с оболочкой
|
||
автоматически, без дублирования правил.
|
||
|
||
`Button` variant `default` переопределить на pill (`rounded-full`) + `bg-accent
|
||
text-accent-text hover:bg-accent-hover active:bg-accent-active`
|
||
вместо стандартного `bg-primary`. Variant `outline` — `border-border-pill
|
||
text-ink-700 rounded-full`.
|
||
|
||
## 3. Иконки
|
||
|
||
`lucide-react` устанавливается как обычная npm-зависимость (не CDN),
|
||
`stroke-width={2}` по умолчанию через обёртку `<Icon />` в `frontend/src/components/ui/icon.tsx`,
|
||
цвет — через `currentColor` (наследуется от текстового токена родителя).
|
||
Список иконок по экранам — раздел 6 `DESIGN_SYSTEM.md`.
|
||
|
||
## 4. Паттерны динамических конференций — для frontend-dev
|
||
|
||
Макеты `design/mockups/lobby.html`, `calendar.html`, `my-conferences.html`,
|
||
`join.html` вводят компоненты, которых нет в статичном списке комнат (см.
|
||
`DESIGN_SYSTEM.md` §4.12–4.15). При переносе в `frontend/`:
|
||
|
||
- **Раскрытие тумблером («Закрытая по паролю», «Закрепить постоянную
|
||
конференцию») и radio-группа повторений** в HTML-макете сделаны чистым
|
||
CSS через `:has()` (без JS/зависимостей) — во frontend это обычный
|
||
**controlled-компонент** (`useState<boolean>` для тумблера,
|
||
`useState<RecurrenceType>` для radio-группы), `:has()` не переносится.
|
||
- **Пилюли «ссылка/номер» с копированием** (§4.15) — обёртка над
|
||
`navigator.clipboard.writeText`, состояние «скопировано» — таймер
|
||
`setTimeout` ~1.5s (как в статическом макете `my-conferences.html`), плюс
|
||
`aria-live="polite"` для тултипа «Скопировано» (в макете — визуальный
|
||
`opacity`-переход, без `aria-live`, добавить во frontend).
|
||
- **Бейдж статуса конференции** (§4.6) заменяет прежний `Badge` для комнат:
|
||
варианты `scheduled` / `pinned` / `live` / `ended` / `cancelled`; закрытость
|
||
паролем — отдельная иконка `Lock` рядом с заголовком, не вариант `Badge`.
|
||
- **Карточки-действия хаба** (§4.12) — фиксированная высота (не `min-height`)
|
||
обязательна для симметрии сетки 2×2; в CSS-grid Tailwind — `grid-rows-2`
|
||
с явной высотой строки (`grid-template-rows: repeat(2, 340px)` через
|
||
`[grid-template-rows:repeat(2,340px)]` или отдельный `h-[340px]` на карточке).
|