/* * Beat News — токены дизайна (обе темы) и токены движения. * Палитра P2 «Закат на льду» (BN-37, волна Bento): источник значений — канон * Design_Tokens_BeatNews.md ред.2 и макет ред.3 (блок body[data-p="2"]); ступени, которых * макет не заводит (1, 5, 7, 8), добраны интерполяцией В OKLCH между соседними заданными. * Три состояния темы: без выбора — prefers-color-scheme; явный выбор — data-theme на . * * ИМЯ ВТОРОЙ ПОВЕРХНОСТИ. Канон ред.2 зовёт её `--s2`, код с BN-8 зовёт `--surface-2`. * Решено: каноническим именем КОДА остаётся `--surface-2` (переименование тронуло бы * components.css, base.css и чужие зоны ради одной буквы), а `--s2` заведён АЛИАСОМ — * чтобы имя канона было разрешимо и в стилях, и в будущем ките обложек build/covers/. * * ПРАВИЛО В-1 НА НОВОЙ ПАЛИТРЕ (перенос, предложен как правка канона — см. отчёт BN-37). * Было: «синий — навигация/выбор, розовый — голос редакции». Стало: * ЛЁД — навигация и выбор (чипы шапки, наведение, фокус, кнопка действия); * АБРИКОС — голос редакции (дайджест, «Мнение Кеши», бейдж «Новое», цитата). * Снятые токены `--accent`, `--accent-light`, `--ai`, `--ai-light`, `--on-accent` и старые * имена категорий `--c-art/--c-play/--c-sci/--c-gadget/--c-agent` не имеют преемников * один-к-одному: вместо них ниже заведены СЕМАНТИЧЕСКИЕ токены на лёд/абрикос/ink. * Сторож снятых имён — tests/styles/retired-tokens.test.js. * * ТЕКСТ НА ЗАЛИВКЕ. Правило ресёрча (research:16) сильнее макета (§Д-11 п.4): на ступени 9 * и на градиенте белый текст ЗАПРЕЩЁН. Поэтому заведён `--on-fill` — тёмные «чернила» для * текста поверх любой заливки 9 в ОБЕИХ темах (в тёмной теме ступень 9 светлая, и белый * там был бы нечитаем вовсе: --ice-12 на --ice-9 тёмной темы даёт 1.24:1). * Белый текст остаётся ровно на одной паре — `--on-ink` на `--ink` (18.50:1 светлая). */ :root{ /* ── нейтрали светлой темы (канон ред.2) ── */ --bg:#f6f5f2;--surface:#ffffff;--surface-2:#eceff3;--border:#dfe3e9; --text:#15181c;--text-2:#5c6169;--text-3:#8a8f98; --ink:#101418;--on-ink:#ffffff;--on-fill:#101418; --s2:var(--surface-2); /* ── лёд 1..12 (light). 2,3,4,6,9,10,11,12 — макет ред.3; 1,5,7,8 — OKLCH-интерполяция: 1 = половина пути от 2 к белому, 5 = середина 4..6, 7 и 8 = трети 6..9. Роли: 1–2 фон-тинт · 3 фон плашки-soft · 4 hover · 5 активное · 6 граница · 7 линия/ось · 8 контур фокуса · 9 заливка · 10 hover заливки · 11 акцентный текст · 12 заголовок. ЧЕСТНО ПРО СТУПЕНЬ 8: в светлой теме контур фокуса обязан тянуть 3:1 к фону, а --ice-8 даёт 2.48:1 на белом. Ступень НЕ сдвинута (сдвиг порвал бы лестницу 6→9: сама --ice-9 даёт ровно 3.00:1, выше 8-й по определению не прыгнуть), а роль «контур фокуса» в светлой теме отдана ступени 10 через --focus-ring ниже. ── */ --ice-1:#f7fbf9;--ice-2:#eef7fb;--ice-3:#dbeff8;--ice-4:#bfe3f3;--ice-5:#a6d9ee;--ice-6:#8ccfe9; --ice-7:#70bfe0;--ice-8:#52afd8;--ice-9:#2f9fd0;--ice-10:#258cba;--ice-11:#0e6a90;--ice-12:#0b3a4d; /* ── абрикос 1..12 (light), те же роли и тот же способ добора ── */ --apr-1:#fefaf3;--apr-2:#fff3e8;--apr-3:#ffe6d0;--apr-4:#ffd2ad;--apr-5:#ffc493;--apr-6:#ffb679; --apr-7:#fda866;--apr-8:#fa9952;--apr-9:#f78a3d;--apr-10:#e97a2b;--apr-11:#ad5312;--apr-12:#4a2a12; /* ── семантика В-1: лёд = навигация и выбор, абрикос = голос редакции ── */ --nav-soft:var(--ice-3); /* заливка «выбор/наведение» (бывш. --accent-light) */ --nav-fill:var(--ice-9); /* заливка ступени 9 — только с --on-fill */ --nav-text:var(--ice-11); /* акцентный текст льда */ --focus-ring:var(--ice-10); /* кольцо фокуса: ступень 10, см. оговорку про 8 выше */ --voice-soft:var(--apr-3); /* плашка голоса редакции (бывш. --ai-light) */ --voice-text:var(--apr-11); /* цвет голоса редакции (бывш. --ai) */ --voice-strong:var(--apr-12); /* голос редакции на своей же плашке */ /* ЧЕТЫРЕ ТОКЕНА НИЧЕГО НА САЙТЕ НЕ КРАСЯТ СЕГОДНЯ, и это названо, а не забыто: --on-fill и --grad-b/--grad-c — часть КОНТРАКТА палитры для кита обложек (build/covers/, звено BN-36): плашка по спецификации имеет право на заливку 9 и на градиент, и тёмные чернила для них обязаны быть определены здесь, а не сочинены там. --s2 — каноническое имя второй поверхности (см. шапку). Тест контраста проверяет их парами, чтобы «не употреблено» не превратилось в «не посчитано». */ /* ── градиенты (Р-147: стык лёд→абрикос НЕ в sRGB). ВЗЯТ `in oklab`, А НЕ `in oklch` — и вот замер, по которому так решено: у `in oklch` интерполяция идёт по КРАТЧАЙШЕЙ дуге тона, а от льда (~230°) к абрикосу (~60°) кратчайшая дуга проходит через ЗЕЛЁНЫЙ — середина --grad-a выходит #bae5bd. Зелёная полоса в середине хуже серой, которую правило и запрещает. `in oklab` — та же перцептивная шкала OKLab, но прямая, без фантомного тона. Концы оставлены дословно макетными. Поддержка `in oklab` проверена в chromium playwright (BN-37). ТРЕТЬЯ ТОЧКА — ПОЧИНКА ПО ЗАМЕРУ ПИКСЕЛЕЙ (BN-37 круг 3, блокер владельца Р-147). ЧТО БЫЛО НЕ ТАК. Свойство парсилось и применялось: в chromium CSS.supports на `linear-gradient(135deg in oklab,…)` = true, а computed backgroundImage у .hero держит `in oklab` дословно — значит правило НЕ отбрасывалось и ничем не перекрыто. Врал не браузер и не расчёт, а ВЫВОД из расчёта. Двухточечный `#a9ddf6 → #ffd1a6` и правда даёт в середине #d7d8d0 = RGB(215,216,208) — прошлый круг посчитал это верно и назвал «тёплой нейтралью». Замер пикселя говорит иначе: насыщенность там 3.7%, а на таком остатке хромы ТОН НЕУСТОЙЧИВ и гуляет от округления — 68° в точном центре, 94° на 47% ширины, 130° в минимуме хромы, 135° в тёмной теме. Это и есть «грязь» владельца: ни лёд, ни абрикос, а серо-зелёно-хаки. ПРИЧИНА ГЕОМЕТРИЧЕСКАЯ. В OKLab лёд (a≈−.04, b≈−.06) и абрикос (a≈+.04, b≈+.07) стоят почти СИММЕТРИЧНО относительно нуля хромы, поэтому прямая между ними проходит через самый центр — через серое. Ни метод интерполяции, ни насыщенность концов тут не помогают: помогает только третья точка В СТОРОНЕ от этой прямой. ЧТО СДЕЛАНО. Переход ведётся через ЯВНУЮ СВЕТЛУЮ ТЁПЛУЮ промежуточную точку — ступень 3 абрикоса `#ffe6d0` на 45%; в тёмной теме ту же роль несёт ступень 7 `#714d31` (там середина обязана остаться тёмной). Приём прямо разрешён Р-147 и применён в макете подстановкой концов; обе точки — СТУПЕНИ УЖЕ ЗАВЕДЁННОЙ ПАЛИТРЫ, новых цветов звено не придумывает. Середина после правки: светлая RGB(255,229,206), тон 28°, насыщенность 19%; тёмная RGB(112,76,48), тон 26°, 57% — однозначный абрикос в обеих темах. ЧЕСТНЫЙ ПРЕДЕЛ, КОТОРЫЙ ТРЕТЬЯ ТОЧКА НЕ УБИРАЕТ. Любой путь из холодного в тёплое ровно один раз пересекает нулевую хрому — это свойство пространства, а не градиента. Обойти пересечение можно только крюком через ЗЕЛЁНЫЙ или через РОЗОВЫЙ (перебор средней точки по всему охвату даёт максимум остаточной хромы ровно на тоне ≈53° — хаки — и на тоне ≈331° — розовый); оба владельцем не приняты. Поэтому пересечение не убрано, а УВЕДЕНО С СЕРЕДИНЫ и сужено: полоса «тон 55…190° при насыщенности ниже 12%» занимала 21% рампы И НАКРЫВАЛА ЦЕНТР (t 32…53%), стала 10% рампы на t 20…30% — там, где лёд отдаёт плашку теплу, и где это читается кромкой, а не грязью. КОНТРАСТЫ ПО ВСЕМ ТРЁМ ОПОРАМ: светлая --text 12.18 / 14.82 / 12.65, --on-fill 12.65 / 15.40 / 13.14, --text-2 4.26 / 5.19 / 4.43 (ниже 4.5 на ледяной опоре — поэтому .hero p красит --text, см. components.css); тёмная --text 10.49 / 6.44 / 10.58. Белый по-прежнему запрещён: --on-ink на светлых опорах 1.46 / 1.20 / 1.41. Форму закрепляет tests/styles/palette-scales.test.js: возврат к двум точкам и любая грязная середина КРАСЯТ тест. ── */ --grad-a:linear-gradient(135deg in oklab,#a9ddf6,#ffe6d0 45%,#ffd1a6); --grad-b:linear-gradient(135deg in oklab,#ffe3c8,#ffb27a); --grad-c:linear-gradient(160deg in oklab,#2f9fd0,#8ad7ff); /* ── метки категорий: ПРИГЛУШЁННЫЕ, имена по СЛАГАМ (канон ред.2, макет :14). Это ТОЧКА рядом с именем раздела, а не цвет текста (research:21) — порог 3:1. Старое `--c-weird:#f4a261` снято: оно сидело ровно на тоне абрикоса. ОДНО ЗНАЧЕНИЕ СДВИНУТО ОТ МАКЕТА, и вот замер. «Странное» в макете — #c47a2f, самая светлая из девяти; точка этого цвета лежит на плашке чипа --surface-2 (#eceff3) и даёт там 2.95:1 — НИЖЕ порога 3:1 для не-текстового элемента. Значение опущено по светлоте OKLab на 0.02 до #bd7427 (тон и хрома те же): 3.20:1 на --surface-2, 3.38:1 на --bg, 3.69:1 на --surface, 4.31…4.77:1 в тёмной теме. Расхождение с макетом названо в отчёте BN-37 как предложение правки канона. ── */ --c-work:#8f7420;--c-study:#3f7ec2;--c-home:#b45d5d;--c-creative:#9a5f9e;--c-games:#b05a80; --c-science:#2f8c92;--c-gadgets:#6f6cc0;--c-agents:#5a8236;--c-weird:#bd7427;--c-top:#101418; --shadow:0 1px 2px rgba(20,20,40,.06),0 8px 24px rgba(20,20,40,.08); --glass:rgba(255,255,255,.72);--glass-edge:rgba(255,255,255,.55); --r-s:10px;--r-m:14px;--r-l:18px;--r-xl:24px;--r-bento:26px; --display:'Unbounded',system-ui,sans-serif;--body:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* Токены движения (§2): .12–.15s, именованные свойства; prefers-reduced-motion — в base.css */ --dur-fast:.12s; --dur-base:.15s; --ease-pop:cubic-bezier(.22,.72,.24,1); --pop-in:.56s; --pop-out:.21s; --overlay:.28s; } /* ── ТЁМНАЯ ТЕМА ────────────────────────────────────────────────────────────── Нейтрали — Radix slate-dark (1,2,3,6,10,11,12). Лёд-dark и абрикос-dark — ДОСЛОВНО лестницы схемы B ресёрча §2 (research:19), все двенадцать ступеней. `--ink` в тёмной теме НЕ чёрный: чёрная плашка на фоне #111113 не видна вовсе, а роль у неё — якорь контраста. Её несёт глубокий лёд #002d37 (ступень 3 тёмной лестницы), белый на нём — 14.7:1. `--on-fill` в обеих темах один и тот же тёмный: в тёмной теме ступень 9 светлая (#7be2fc / #d78541), и тёмные чернила дают 12.44:1 / 6.45:1. */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#111113;--surface:#18191b;--surface-2:#212225;--border:#363a3f; --text:#edeef0;--text-2:#b0b4ba;--text-3:#777b84; --ink:#002d37;--on-ink:#ffffff;--on-fill:#101418; --ice-1:#06171b;--ice-2:#081d22;--ice-3:#002d37;--ice-4:#003b4a;--ice-5:#004a5b;--ice-6:#005a6d; --ice-7:#006d83;--ice-8:#00839e;--ice-9:#7be2fc;--ice-10:#a8eeff;--ice-11:#68cce4;--ice-12:#c2f3ff; --apr-1:#161210;--apr-2:#1c1612;--apr-3:#2f2015;--apr-4:#3e2612;--apr-5:#4c2e17;--apr-6:#5b3b22; --apr-7:#714d31;--apr-8:#91633f;--apr-9:#d78541;--apr-10:#e29454;--apr-11:#eaab7b;--apr-12:#f9e1cf; --focus-ring:var(--ice-8); --grad-a:linear-gradient(135deg in oklab,#003b4a,#714d31 45%,#4c2e17); --grad-b:linear-gradient(135deg in oklab,#2f2015,#5b3b22); --grad-c:linear-gradient(160deg in oklab,#004a5b,#006d83); --c-top:#edeef0; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--glass:rgba(24,25,27,.72);--glass-edge:rgba(255,255,255,.12);}} [data-theme="dark"]{ --bg:#111113;--surface:#18191b;--surface-2:#212225;--border:#363a3f; --text:#edeef0;--text-2:#b0b4ba;--text-3:#777b84; --ink:#002d37;--on-ink:#ffffff;--on-fill:#101418; --ice-1:#06171b;--ice-2:#081d22;--ice-3:#002d37;--ice-4:#003b4a;--ice-5:#004a5b;--ice-6:#005a6d; --ice-7:#006d83;--ice-8:#00839e;--ice-9:#7be2fc;--ice-10:#a8eeff;--ice-11:#68cce4;--ice-12:#c2f3ff; --apr-1:#161210;--apr-2:#1c1612;--apr-3:#2f2015;--apr-4:#3e2612;--apr-5:#4c2e17;--apr-6:#5b3b22; --apr-7:#714d31;--apr-8:#91633f;--apr-9:#d78541;--apr-10:#e29454;--apr-11:#eaab7b;--apr-12:#f9e1cf; --focus-ring:var(--ice-8); --grad-a:linear-gradient(135deg in oklab,#003b4a,#714d31 45%,#4c2e17); --grad-b:linear-gradient(135deg in oklab,#2f2015,#5b3b22); --grad-c:linear-gradient(160deg in oklab,#004a5b,#006d83); --c-top:#edeef0; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--glass:rgba(24,25,27,.72);--glass-edge:rgba(255,255,255,.12);}