first commit

design/mockups/dark/README.md

@@ -0,0 +1,188 @@
+# 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`, тот же
+  янтарь, что и в комнате).
+- Палитра пастельная (мята/роза/янтарь той же светлоты, что уже утверждена
+  для комнаты), неоновых/кислотных акцентов не вводилось.