feat: adapt raster media to dark theme
CI / backend-and-migrations (push) Canceled after 0s
CI / astro-build (push) Canceled after 0s
CI / dependency-audit (push) Canceled after 0s
CI / compose-e2e (push) Canceled after 0s

This commit is contained in:
ik
2026-09-13 16:20:40 +07:00
parent aed541c70c
commit bb8040d6fb
3 changed files with 11 additions and 1 deletions
+6
View File
@@ -51,6 +51,7 @@
--tackle-teal: light-dark(#34777a, #78bec1); --tackle-teal: light-dark(#34777a, #78bec1);
--tackle-violet: light-dark(#845787, #c795ca); --tackle-violet: light-dark(#845787, #c795ca);
--tackle-red: light-dark(#a95041, #ed8e7c); --tackle-red: light-dark(#a95041, #ed8e7c);
--hero-image-filter: light-dark(saturate(.92) contrast(1.02), brightness(.78) saturate(.82) contrast(1.08));
} }
:root[data-theme="light"] { color-scheme: light; } :root[data-theme="light"] { color-scheme: light; }
@@ -173,8 +174,13 @@
.admin-dashboard-grid > section, .admin-kpis > a, .admin-kpis > article, .admin-dashboard-grid > section, .admin-kpis > a, .admin-kpis > article,
.source-health-grid article { background: var(--surface-elevated); border-color: var(--border-subtle); } .source-health-grid article { background: var(--surface-elevated); border-color: var(--border-subtle); }
.admin-history li small, .source-health-grid p, .health-state { color: var(--text-secondary); } .admin-history li small, .source-health-grid p, .health-state { color: var(--text-secondary); }
.lake-card { background: var(--surface-raised); box-shadow: 0 24px 70px var(--shadow-color); }
.lake-card img { filter: var(--hero-image-filter); }
.moderation-proof { border-radius: 11px; background: var(--surface-raised); }
.moderation-proof img { background: var(--surface-raised); }
@media print { @media print {
:root { color-scheme: light; } :root { color-scheme: light; }
.lake-card img { filter: none; }
} }
@media (forced-colors: active) { @media (forced-colors: active) {
+1 -1
View File
@@ -44,7 +44,7 @@
- [x] **D02 · Системный режим без вспышки.** Первый визит следует `prefers-color-scheme` полностью через CSS: серверный HTML сразу совместим с системной темой, состояние не хранится, inline bootstrap не добавлен и CSP не ослаблена. Явное переопределение появится только вместе с D03–D04. - [x] **D02 · Системный режим без вспышки.** Первый визит следует `prefers-color-scheme` полностью через CSS: серверный HTML сразу совместим с системной темой, состояние не хранится, inline bootstrap не добавлен и CSP не ослаблена. Явное переопределение появится только вместе с D03–D04.
- [x] **D03 · Переключатель темы.** В header добавлен доступный трёхпозиционный выбор «Системная / Светлая / Тёмная»; на узких экранах он сохраняет три понятные иконки и доступные названия. Кнопки работают с клавиатуры, имеют видимый focus и синхронизируют `aria-pressed`. - [x] **D03 · Переключатель темы.** В header добавлен доступный трёхпозиционный выбор «Системная / Светлая / Тёмная»; на узких экранах он сохраняет три понятные иконки и доступные названия. Кнопки работают с клавиатуры, имеют видимый focus и синхронизируют `aria-pressed`.
- [x] **D04 · Сохранение и SSR-согласование.** Выбор хранится год в allowlist-cookie `rf4-theme` с `SameSite=Lax` и `Secure` на HTTPS; Astro SSR выставляет `data-theme` до отрисовки, а системный режим оставляет выбор браузеру. Собранный Astro client script переключает тему без inline-кода, localStorage и ослабления CSP. - [x] **D04 · Сохранение и SSR-согласование.** Выбор хранится год в allowlist-cookie `rf4-theme` с `SameSite=Lax` и `Secure` на HTTPS; Astro SSR выставляет `data-theme` до отрисовки, а системный режим оставляет выбор браузеру. Собранный Astro client script переключает тему без inline-кода, localStorage и ослабления CSP.
- [ ] **D05 · Темизация компонентов и графики.** На семантические light/dark-токены переведены базовые и admin-поверхности, header, каталог, breadcrumb-леска, ссылки сущностей, таблицы, формы, moderation-карточки, provenance/quality/status badges, паспорта данных, pagination, empty/loading-состояния, радар, timeline, силуэты и глифы; добавлен базовый forced-colors layer. Осталась визуальная проверка фотографий, прозрачных PNG, screenshots, теней и градиентов в обеих темах. Источники и статусы сохраняют текстовые подписи и не различаются только цветом. - [ ] **D05 · Темизация компонентов и графики.** На семантические light/dark-токены переведены базовые и admin-поверхности, header, каталог, breadcrumb-леска, ссылки сущностей, таблицы, формы, moderation-карточки, provenance/quality/status badges, паспорта данных, pagination, empty/loading-состояния, радар, timeline, силуэты и глифы; добавлен forced-colors layer. Инвентаризированы публичные растры и alpha-каналы PWA-иконок, hero получил dark/print treatment, screenshots — семантическую подложку. Осталась браузерная приёмка теней и градиентов в обеих темах. Источники и статусы сохраняют текстовые подписи и не различаются только цветом.
- [x] **D06 · Метаданные браузера и CSP.** Добавлены парные `theme-color` для системной light/dark схемы; явный cookie-выбор согласуется с SSR и мгновенно переключает активный meta-тег. PWA manifest использует устойчивый тёмный brand chrome и splash background. Production build сохраняет `inlinedScripts: []`; новые inline script/style/attributes не появились, ослабление CSP не потребовалось. - [x] **D06 · Метаданные браузера и CSP.** Добавлены парные `theme-color` для системной light/dark схемы; явный cookie-выбор согласуется с SSR и мгновенно переключает активный meta-тег. PWA manifest использует устойчивый тёмный brand chrome и splash background. Production build сохраняет `inlinedScripts: []`; новые inline script/style/attributes не появились, ослабление CSP не потребовалось.
- [ ] **D07 · Визуальная и accessibility-приёмка.** Проверить light/dark/system на 320/390/768/1280 px для главной, каталогов, detail, records, report, status и всех admin-экранов; покрыть normal/hover/focus/disabled/error/loading/empty и длинные данные. Для обеих тем обеспечить WCAG AA, отсутствие горизонтального scroll и CLS, корректную печать, reduced motion и переключение без потери введённых данных; сохранить эталонные screenshots и краткий отчёт. - [ ] **D07 · Визуальная и accessibility-приёмка.** Проверить light/dark/system на 320/390/768/1280 px для главной, каталогов, detail, records, report, status и всех admin-экранов; покрыть normal/hover/focus/disabled/error/loading/empty и длинные данные. Для обеих тем обеспечить WCAG AA, отсутствие горизонтального scroll и CLS, корректную печать, reduced motion и переключение без потери введённых данных; сохранить эталонные screenshots и краткий отчёт.
+4
View File
@@ -14,6 +14,10 @@
Цвет browser chrome задаётся двумя `theme-color` meta-тегами с media query в системном режиме. При явном выборе Astro активирует нужный meta-тег на SSR, а переключатель синхронизирует его без перезагрузки. Manifest использует тёмный фирменный цвет как стабильный fallback для splash screen и установленного PWA. Цвет browser chrome задаётся двумя `theme-color` meta-тегами с media query в системном режиме. При явном выборе Astro активирует нужный meta-тег на SSR, а переключатель синхронизирует его без перезагрузки. Manifest использует тёмный фирменный цвет как стабильный fallback для splash screen и установленного PWA.
## Растровые материалы
Публичный runtime использует один контентный растр `lake-dawn.webp` (1774×887, без alpha), OG-изображение и набор PWA/favicon-иконок. Hero-фотография получает отдельный dark-фильтр яркости, насыщенности и контраста, а при печати фильтр отключается. Скриншоты модерации показываются на семантической подложке; прозрачные media-pipeline assets не публикуются до ручного review и поэтому не участвуют в theme-контракте. PWA-иконки проверены по dimensions и channel model: обычные иконки поддерживают alpha, maskable-варианты имеют сплошной фон.
## Дальнейшая миграция ## Дальнейшая миграция
Файл `theme.css` временно содержит точечные dark overrides для основных публичных и административных поверхностей. На этапе D05 жёсткие цвета последовательно заменяются семантическими токенами в исходных component styles; source/status различия сохраняют текст или форму и никогда не полагаются только на оттенок. Файл `theme.css` временно содержит точечные dark overrides для основных публичных и административных поверхностей. На этапе D05 жёсткие цвета последовательно заменяются семантическими токенами в исходных component styles; source/status различия сохраняют текст или форму и никогда не полагаются только на оттенок.