/* * design-system/tokens/colors.css * Editorial Calm — палитра. * См. ТЗ редизайна v1.0 раздел 3.1. * * Активируется через: ... * чтобы не конфликтовать с существующей Tailwind-палитрой проекта. */ [data-theme="editorial"] { /* Поверхности */ --paper: #FBFAF7; --paper-2: #F4F1EA; --paper-3: #ECE7DA; --paper-edge: #FFFFFF; /* Чернила */ --ink: #1A1A1A; /* заголовки, max-contrast */ --ink-2: #3D3D3D; /* основной body-текст */ --ink-3: #5A5A55; /* §7.2: подписи — WCAG AA даже на тонированных фонах (5.8:1); было #6B6B66 (4.46:1 на тинте, провал) */ --ink-4: #9B978C; /* деактивированный, decorative-only — НЕ AA */ /* Линейки */ --rule: #D9D3C5; --rule-2: #E6E1D4; --rule-strong: #1A1A1A; /* Акцент — приглушённая зелень "охранной грамоты" */ --accent: #1F3D2B; --accent-ink: #FBFAF7; --accent-tint: #E8EEEA; /* Семантика */ --good: #2E5E3E; --good-tint: #EAF1EC; --warn: #8C5A1A; --warn-tint: #F5EBDA; --bad: #8B2A1F; --bad-tint: #F4E3DF; /* Подложки для слоёв карты */ --map-base: #EEE9DC; --map-water: #DDE4DD; --map-stroke: #C9C2B0; /* Поверхность по умолчанию */ background: var(--paper); color: var(--ink-2); } /* * Тёмный вариант Editorial-палитры (ТЗ Часть 7 §5). * Дашборды несут и используют --paper/--ink/--rule * НАПРЯМУЮ. app.css :root[data-theme="dark"] переопределяет только legacy * --bg-… и --text-… (НЕ писать здесь звёздочку сразу перед слэшем — это * закрывает CSS-комментарий и роняет следующее правило, Anti-pattern #2), * поэтому без этого блока тёмная тема не доходила до Editorial-компонентов * (визуальная проверка Chromium 2026-07-21: фон дашборда оставался * «бумажным» #FBFAF7 под data-theme="dark"). Селектор * :root[data-theme="dark"] [data-theme="editorial"] (специфичность 0,3,0) * перекрывает светлый [data-theme="editorial"] (0,1,0). Значения зеркалят * тёмные поверхности/текст из app.css для консистентности. */ :root[data-theme="dark"] [data-theme="editorial"] { /* Поверхности */ --paper: #1A1A1A; --paper-2: #242422; --paper-3: #2E2E2C; --paper-edge: #333331; /* Чернила (инверсия) */ --ink: #E8E6E1; --ink-2: #C9C6C0; --ink-3: #A8A6A1; --ink-4: #6B6A66; /* Линейки */ --rule: rgba(255, 255, 255, 0.12); --rule-2: rgba(255, 255, 255, 0.06); --rule-strong: #E8E6E1; /* Акцент — осветлённая «охранная» зелень для контраста на тёмном */ --accent: #6FA382; --accent-ink: #14211A; --accent-tint: #24352B; /* Семантика (осветлённая под тёмный фон) */ --good: #5FB37A; --good-tint: #1E2E23; --warn: #D9A25A; --warn-tint: #33291A; --bad: #E08A7D; --bad-tint: #33211E; /* Подложки карты */ --map-base: #242422; --map-water: #1E2A24; --map-stroke: #3A3A38; background: var(--paper); color: var(--ink-2); }