# VidConf — тёмные варианты оболочки

Обязательный референс для разработки.

Тёмная тема для экранов «оболочки» (auth/лобби/календарь/join/«мои
конференции»/админка), реализована **поверх** дизайн-системы, а не взамен
неё. `design/tokens.css` и `design/DESIGN_SYSTEM.md` — единственный
источник истины по значениям (см. §0 `DESIGN_SYSTEM.md`: «светлая тема —
оболочка (со светлым/тёмным вариантом), тёмная — комната конференции
всегда»). Реализация во frontend — `frontend/src/hooks/useTheme.ts` и
`frontend/src/components/ui/ThemeToggle.tsx` (см. `frontend/README.md`,
раздел «Темы оболочки»).

## Что здесь

Разметка, контент и русские данные каждого файла — 1:1 копия
соответствующего светлого макета из `design/mockups/`. Меняется только
цветовая схема: вместо индиго-на-белом (`referens.png`) — графит-мята-роза-
янтарь той же гаммы, что уже утверждена для комнаты конференции
(`collor_ico.png`, токены `[data-theme="room"]` в `tokens.css`).

| Файл | Светлый прообраз | Экран |
|---|---|---|
| `login.html` | `../auth.html` | Вход / регистрация / подтверждение email |
| `lobby.html` | `../lobby.html` | Лобби — хаб действий 2×2 |
| `calendar.html` | `../calendar.html` | Календарь-менеджер конференций (+ создание/редактирование/отмена) |
| `join.html` | `../join.html` | Подключение по ссылке/номеру → представиться (гость) → пароль |
| `my-conferences.html` | `../my-conferences.html` | Мои конференции |
| `admin.html` | `../admin.html` | Админка (конференции, пользователи, рассылка приглашений) |

`room.html` и `email-summary.html` в комплект не входят: комната уже тёмная
(эталон гаммы), а письмо-саммари по правилам проекта всегда светлое
(почтовые клиенты не гарантируют поддержку тёмной темы/CSS-переменных).
Ссылки на «Войти»/«Создать» из `lobby.html`/`my-conferences.html` ведут на
уже существующий `../room.html`; ссылка «Открыть саммари» — на
`../email-summary.html`.

Каждый файл самодостаточен: встроенный `<style>`, инлайн-SVG-иконки
(lucide-совместимые контуры), без CDN и внешних сетевых зависимостей —
открывается двойным кликом. Единственная локальная зависимость —
`<link rel="stylesheet" href="../../tokens.css">` (тот же приём, что и в
светлых макетах: используются базовые не-цветовые токены — spacing, радиусы,
типографика, тени-заготовки, шрифты).

## Переключатель темы

В шапке каждого макета — сегментированный переключатель ☀ / 🌙 (иконки
`Sun`/`Moon`, lucide-стиль), «Тёмная» — активный сегмент. Элемент
статичный (демонстрирует точку входа в реальный toggle, не переключает
тему по клику в макете) и размещён:
- `login.html` — плавающей плашкой в правом верхнем углу (у экрана нет
  общего топбара, панель бренда/форма — раздельные колонки);
- `lobby.html`, `calendar.html`, `my-conferences.html` — внутри правой
  группы топбара, рядом с меню пользователя;
- `join.html` — в топбаре, справа от логотипа;
- `admin.html` — в шапке сайдбара, рядом с логотипом.

## Как получена палитра

### Принцип

Тёмная схема **не изобретает новых цветов**, а переиспользует уже
утверждённые токены комнаты конференции (`tokens.css`, блок
`[data-theme='room']`, см. `DESIGN_SYSTEM.md` §1.2) в новых ролях — так
оболочка и комната читаются как одна система, когда пользователь входит
из тёмного лобби в тёмную комнату. Все переопределения делаются одним
блоком `:root { … }` в начале `<style>` каждого файла — он перекрывает
одноимённые переменные `:root` из `tokens.css` (та же специфичность,
позже в источнике — выигрывает), поэтому весь остальной CSS ниже —
дословная копия светлого макета и автоматически перекрашивается.

### Токены, переиспользованные из комнаты 1:1 (без изменения hex)

| Токен оболочки (dark) | = токен комнаты | Hex | Новая роль в оболочке |
|---|---|---|---|
| `--color-bg` | `--color-room-bg` | `#1E1E1E` | фон страницы |
| `--color-surface` | `--color-room-surface` | `#2A2A2A` | карточки, топбар, поля |
| `--color-border` | `--color-room-tile-border` | `#3F3F3F` | базовая обводка |
| `--color-ink-900` | `--color-room-text-primary` | `#E8E8E8` | основной текст |
| `--color-ink-500` | `--color-room-text-secondary` | `#B0B0B0` | вторичный текст |
| `--color-ink-300` | `--color-room-text-tertiary` | `#7A7A7A` | плейсхолдеры/disabled |
| `--color-ink-700`, `--color-accent`, `--color-border-pill`, `--color-success`, `--color-success-dot` | `--color-room-mic-on` | `#7FDDA8` | мята: бренд/заголовки/ссылки/CTA/«успех» — единый пастельно-зелёный вектор (см. ниже) |
| `--color-danger`, `--color-danger-dot` | `--color-room-mic-off` | `#EB93A1` | розово-красный: текст/иконки/обводка статуса «отменена»/ошибки |
| `--color-warning`, `--color-warning-dot` | `--color-room-speaker-ring` | `#D6A83D` | янтарь: статус «запланирована» |
| `--color-focus-ring` | `--color-room-focus-ring` | `#D6A83D` | кольцо `:focus-visible` — то же значение, что и в комнате |
| `--color-danger-solid` | `--color-room-danger-bg` | `#B85468` | заливка **сплошных** danger-кнопок (см. ниже, почему это отдельный токен) |
| `--color-danger-solid-hover` | `--color-room-danger-bg-hover` | `#B9495F` | hover сплошной danger-кнопки |

**Одна мята — три роли.** В светлой оболочке бренд-индиго (`--color-ink-700`,
заголовки/ссылки/обводка pill-кнопок) и мятный CTA (`--color-accent`) — два
разных токена с разными hex. В комнате пастельная мята уже одна на всё
«позитивное» (`--color-room-mic-on` = «микрофон включён» + активная
демонстрация экрана + счётчик участников + кнопка отправки в чате). Чтобы
не завозить в тёмную оболочку новый, ничем не подкреплённый в комнате
оттенок, `--color-ink-700` и `--color-accent` в тёмной оболочке **сведены
к одному и тому же** `#7FDDA8` — бренд, заголовки, ссылки, обводка
secondary-кнопок и заливка CTA используют один и тот же «фирменный» зелёный.
Различие ролей (бренд-текст vs интерактивная заливка) остаётся читаемым за
счёт контекста (текст vs заливка с тёмным текстом поверх), а не за счёт
второго оттенка — это соответствует прецеденту самой комнаты.

**Почему заливка danger-кнопок — отдельный токен, а не `--color-danger`.**
В светлой теме один hex (`#C7364F`) одинаково хорошо работает и как текст на
белом, и как заливка кнопки с белым текстом (тёмный, насыщенный тон). В
тёмной теме эти две роли расходятся: `--color-room-mic-off` (`#EB93A1`) —
светлый пастельный тон, читаемый как **текст на тёмном фоне** (6.30:1 на
`#2A2A2A`), но слишком светлый, чтобы на нём читался белый текст кнопки
(≈1.9:1, провал). Поэтому для сплошных danger-кнопок (`.btn-danger` —
«Отменить все повторения» в календаре, «Удалить» в админке) заведена
отдельная пара `--color-danger-solid` / `--color-danger-solid-hover`,
переиспользующая уже готовые `--color-room-danger-bg(-hover)` (`#B85468` /
`#B9495F`, задокументированы в `DESIGN_SYSTEM.md` §1.2 с контрастом
4.66:1/5.02:1 для белого текста).

### Новые токены (введены только там, где у комнаты нет готового аналога)

Комната — экран без брендинга, форм и многошаговых карточек, поэтому под
нужды оболочки понадобилось несколько новых значений. Все получены
подмешиванием уже утверждённых цветов комнаты к графитовому фону/друг к
другу (не независимо придуманные тона), проверены по WCAG 2.1 (см. расчёт
ниже, тот же метод, что в `design/tools/contrast.py`):

| Токен | Hex | Как получен | Контраст | Роль |
|---|---|---|---|---|
| `--color-bg-alt` | `#242424` | между `--color-room-bg` (`#1E1E1E`) и `--color-room-surface` (`#2A2A2A`) | — | альт-фон секций, инпуты, disabled-поля |
| `--color-border-strong` | `#585858` | осветление `--color-border` | 2.02:1 на surface (нетекст, декоративный hover-акцент — дублируется тенью/курсором, не единственный носитель состояния) | обводка при hover |
| `--color-ink-400` | `#5D9A78` | мята `#7FDDA8` × фон `#1E1E1E`, смешение 35% | 5.05:1 на bg / 4.35:1 на surface | эйбрау-подписи `[ В СКОБКАХ ]`, крупные подписи (аналог ⚠︎ large-text-only из светлой темы, но с запасом) |
| `--color-accent-hover` | `#75CA9A` | мята × фон, смешение 10% | текст `#10331F` на заливке: 7.04:1 | hover CTA |
| `--color-accent-active` | `#6CB78C` | мята × фон, смешение 20% | текст `#10331F` на заливке: 5.80:1 | active/pressed CTA |
| `--color-accent-text` | `#10331F` | **не новый** — переиспользован буквальный hex, уже встречающийся инлайн в `room.html` (`.chat-input-row button`, `.tb-btn.is-positive-active`, `.badge-count`) как цвет текста на заливке `--color-room-mic-on` | 8.45:1 на мяте | текст на CTA/бренд-заливках мятой |
| `--color-success-bg` | `rgba(127,221,168,.14)` | мята с низкой непрозрачностью поверх тёмной поверхности | — | подложка бейджей «идёт сейчас»/«свободна»/«активен» |
| `--color-danger-bg` | `rgba(235,147,161,.14)` | розовый (mic-off) с низкой непрозрачностью | — | подложка бейджей «отменена» |
| `--color-warning-bg` | `rgba(214,168,61,.16)` | янтарь (speaker-ring) с низкой непрозрачностью | — | подложка бейджей «запланирована» |
| `--shadow-sm/md/lg/glass` | `rgba(0,0,0,.35–.5)` | по образцу `--shadow-room-panel` комнаты (тёмные тени вместо индиго-тонированных) | — | тени карточек/модалок/glass-панелей |

Контраст всех текстовых пар проверен по формуле WCAG 2.1 — пары, использованные
в макетах (основной текст, вторичный текст, мята/роза/янтарь как текст на
`bg`/`surface`/`tile`, белый текст на `--color-danger-solid`), все дают
≥ 4.5:1 (текст) либо ≥ 3:1 (декоративные элементы, статус которых также
задублирован иконкой/текстом — см. правило §5 `DESIGN_SYSTEM.md`). Регрессия
этих пар — в `design/tools/contrast.py`.

## Точечные правки поверх скопированного CSS

Для каждого файла CSS светлого макета скопирован дословно (все `.class`
правила без изменений) — перекраска идёт только через блок `:root`. Ручных
точечных правок пять видов, во всех случаях — потому что исходное правило
использовало **литеральный hex/rgba**, а не `var()`, и не могло
перекраситься автоматически:

1. **Аватары и `.weekday-chip.is-selected`/`.badge-role-admin`** — в
   светлой теме заливка `var(--color-ink-700)` (тёмный индиго) сочеталась с
   жёстким `color: #fff`. Так как `--color-ink-700` теперь = мята (светлый
   тон), белый текст перестаёт читаться (≈1.9:1) — заменено на
   `var(--color-accent-text)` (`#10331F`, 8.45:1 на мяте).
2. **`.btn-danger`** (`calendar.html`, `admin.html`) — добавлена отдельная
   заливка `var(--color-danger-solid)` вместо `var(--color-danger)` (см.
   таблицу выше); белый текст кнопки не менялся.
3. **`.copy-toast`** (`my-conferences.html`) — фон был `var(--color-ink-900)`
   (тёмный в светлой теме → стал бы светло-серым в тёмной, ломая тёмный
   тултип); заменён на буквальный `#333333` (= `--color-room-surface-raised`),
   текст остаётся `var(--color-ink-900)` (теперь светлый) — тултип снова
   тёмный чип со светлым текстом.
4. **Декоративные градиенты/rgba-подложки** (`login.html`
   `.brand-panel`/`.brand-panel::after`, `lobby.html` фон `body`,
   `calendar.html` `.day-col.is-today`/`.cancel-alert`, `login.html`/
   `join.html`/`calendar.html` box-shadow фокуса и ошибки, glass-обводка
   `rgba(255,255,255,.7)` в `login.html`/`admin.html`, disabled-заливка
   кнопок) — старые rgba были построены на индиго/старом danger-hex;
   заменены на тональные аналоги новой палитры (мятное свечение вместо
   индигового/мятного на белом, янтарный focus-glow вместо индигового,
   розовый error-glow, `rgba(255,255,255,.08)` вместо `.7` для тёмного
   стекла).
5. **`color-scheme: dark`** добавлен в блок `:root`, чтобы нативные
   элементы форм (скроллбар, чекбоксы без кастомной стилизации) тоже
   рендерились в тёмной палитре браузера.

## Доступность (проверено при подборе палитры)

- Текст ≥ 4.5:1 везде, кроме крупных/декоративных элементов (аналогично
  правилу §5 `DESIGN_SYSTEM.md` для светлой темы, порог 3:1).
- Статус не передаётся только цветом: бейджи конференций — иконка + текст
  (как в светлой теме), «скопировано» — смена иконки `Copy → Check` +
  текстовый тултип, ошибки полей — иконка `AlertCircle` + текст под полем,
  `:focus-visible` — везде видимое кольцо (`--color-focus-ring`, тот же
  янтарь, что и в комнате).
- Палитра пастельная (мята/роза/янтарь той же светлоты, что уже утверждена
  для комнаты), неоновых/кислотных акцентов не вводилось.