ik/rf4-spotter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add system dark theme foundation

Browse Source
This commit is contained in:
ik
2026-09-13 15:23:33 +07:00
parent b7b49a3a63
commit 8ffbd7f9ec
5 changed files with 130 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/ROADMAP.md
+2 -2
View File
@@ -40,8 +40,8 @@
Реализовывать последовательно: сначала семантическая палитра и системный режим, затем ручное управление и полировка компонентов. Тёмная тема должна сохранять полевую эстетику RF4 Spotter, а не быть механической инверсией светлой.
- [ ] **D01 · Семантическая палитра и color-scheme.** Провести инвентаризацию жёстко заданных цветов во всех CSS-файлах и SVG-компонентах; дополнить токены ролями canvas/surface/elevated/text/border/interactive/status/source для light и dark. Задать `color-scheme: light dark`, проверить нативные form controls и сохранить лаймовый акцент без свечения и кислотного контраста.
- [ ] **D02 · Системный режим без вспышки.** Первый визит следует `prefers-color-scheme`; серверный HTML и CSS сразу отдают правильную тему без inline bootstrap script. До появления ручного выбора не хранить лишнее состояние и не ослаблять CSP.
- [x] **D01 · Семантическая палитра и color-scheme.** Жёсткие цвета и конфликтующая роль исторического `--deep` проинвентаризированы; добавлены независимые canvas/surface/elevated/control, text, border, shadow и контрастные status-роли для light/dark. Базовые public/admin поверхности получили первый dark-layer, нативные controls используют `color-scheme: light dark`; стратегия миграции зафиксирована в [dark-theme.md](dark-theme.md).
- [x] **D02 · Системный режим без вспышки.** Первый визит следует `prefers-color-scheme` полностью через CSS: серверный HTML сразу совместим с системной темой, состояние не хранится, inline bootstrap не добавлен и CSP не ослаблена. Явное переопределение появится только вместе с D03–D04.
- [ ] **D03 · Переключатель темы.** Добавить доступный трёхпозиционный выбор «Системная / Светлая / Тёмная» в header и компактный вариант для мобильной навигации. Управление должно иметь текстовое accessible name, видимый focus, корректные `aria-pressed`/состояние и работать с клавиатуры.
- [ ] **D04 · Сохранение и SSR-согласование.** Хранить явный выбор в cookie с `SameSite=Lax`, безопасным сроком жизни и значениями allowlist; Astro SSR читает cookie и выставляет `data-theme` на `<html>`. Внешний client module мгновенно переключает тему и синхронизирует изменение системной схемы только в режиме «Системная», без localStorage-only flash и без inline-кода.
- [ ] **D05 · Темизация компонентов и графики.** Перевести header/footer, hero, карточки активности, таблицы, формы, provenance/quality badges, состояния, admin-панель, радар, timeline, силуэты, глифы и декоративные водные мотивы на семантические токены. Отдельно проверить фотографии, прозрачные PNG, screenshots, тени, градиенты и режим forced-colors; источники и статусы не должны различаться только цветом.
docs/dark-theme.md
+17
View File
@@ -0,0 +1,17 @@
# Тёмная тема: палитра и ограничения
Базовая ревизия выполнена 13 сентября 2026 года. Старый CSS содержит много жёстких цветов, а исторический `--deep` используется одновременно как фирменный тёмный фон и как текст на светлых карточках. Поэтому менять его значение для dark mode нельзя: роли разделяются постепенно без визуальной инверсии бренда.
## Семантические роли
- `--canvas` — фон страницы;
- `--surface-elevated`, `--surface-raised`, `--surface-control` — карточки, hover и поля;
- `--text-primary`, `--text-secondary`, `--text-tertiary`, `--text-on-dark` — иерархия текста;
- `--border-strong`, `--border-subtle`, `--shadow-color` — разделители и глубина;
- существующие status/source-токены сохраняют смысл, но получают контрастные dark-значения там, где используются как текст.
Первый этап следует `prefers-color-scheme` только через CSS и поэтому не создаёт вспышку неверной темы, не записывает состояние и не требует inline script. Явный выбор появится на этапе D03–D04 и будет согласован с SSR через allowlist-cookie.
## Дальнейшая миграция
Файл `theme.css` временно содержит точечные dark overrides для основных публичных и административных поверхностей. На этапе D05 жёсткие цвета последовательно заменяются семантическими токенами в исходных component styles; source/status различия сохраняют текст или форму и никогда не полагаются только на оттенок.