/* ============================================================ «Слово дня» — слой токенов. Этап 1: переход на дизайн-систему. Значения по таблице §3.1 docs/slovo-dnya-dev-brief.md, сверены с живой библиотекой 🎨 Colors (файл vnxF78nsitgTGMyWeujTbe): макеты «Версии 2» привязаны к ней, и цифры в брифе совпали с ней до символа. Геометрия окна — по docs/slovo-dnya-design-spec.md. Условие приёмки этапа: переключение темы меняет только значения переменных, ни одного цвета в коде компонентов. Файл подключается ПЕРВЫМ на каждой странице игры и не содержит ничего, кроме переменных и @font-face: ни одного правила на элемент или класс. Благодаря этому его можно грузить в отрыве от старой вёрстки — так и делает песочница компонентов. ⚠️ Краски витрины живут отдельно, в zen.css, под именами --zen-*. Раньше они назывались --legacy-*, и готовность редизайна мерялась командой `grep -c 'var(--legacy-' public/zen.css → 0`. Имя обещало миграцию — и обещало неверно: это палитра Дзена, чужой страницы, в которую игра встроена, а не наша старая. Переводить её на нашу систему значит перестать изображать Дзен. Мигрировать оттуда было что, и это сделано: виджет игры, мини-поле и плашка баланса — наши элементы в чужой шапке — переехали сюда. Метрика после этого измеряет то, что и должна: краски витрины не протекают в игру. Проверяется поиском обращений к переменным витрины во всех наших файлах, кроме самого zen.css, — их должно быть ноль. Обратное, обращения к нашим токенам из zen.css, наоборот норма: наши элементы в чужой шапке есть, и красятся они нашим. ⚠️ Прозрачности здесь настоящие, а не сведённые к плотному хексу (§3.2 брифа). Text/Secondary — это чёрный на 60 %, и на зелёной карточке победы или на тёмной плашке снэкбара он обязан взять их оттенок. Отсюда следствие для проверки контраста: сначала композитинг fg·α + bg·(1−α) на фактическую подложку, потом WCAG. Сравнивать значение переменной с фоном напрямую больше нельзя. ============================================================ */ /* Stella Sans Text — вариативный, одна ось wght 300…700. Один файл закрывает все начертания из спеки, поэтому отдельных @font-face на вес не нужно: вес задаётся числом. SemiBold в семействе нет — DemiBold из спеки это 600. */ @font-face { font-family: "Stella Sans Text"; src: url("fonts/StellaSansText-VF.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; } /* ===================== Светлая тема ===================== */ :root { color-scheme: light; --font-sans: "Stella Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Текст. Три имени на один системный токен — это не дубли: они означают разное (основной текст, подпись, недоступное состояние) и разойдутся, если система разведёт их обратно. */ --ink: rgb(6 6 15 / 87%); /* Text/Primary */ --text-secondary: rgb(6 6 15 / 60%); /* Text/Secondary */ --text-muted: var(--text-secondary); --text-success: #00845b; /* Text/Success — состоявшееся действие */ /* Поверхности */ --paper: #ffffff; /* BG/Primary — окно игры, карточки */ --surface: #eff0f2; /* BG/Secondary — фон страницы, колодцы */ --modal: #ffffff; /* BG/Modal */ --line: rgb(6 6 15 / 10%); /* Stroke/Primary */ --line-2: rgb(0 11 33 / 6%); /* BG/Tertiary — клавиши, плашка баланса */ --stroke-image: rgb(0 0 0 / 8%); /* Stroke/Image */ /* Алфавит статусов — один и тот же на поле и на клавиатуре. Буква на цветной клетке больше не статичный чёрный: она следует теме (§3.3 брифа). Прежний --on-status удалён — в тёмной теме Pastel/Frog темнеет до #459261, и чёрная буква на нём тонула. --status-absent-text прежде был отдельным значением с полом по контрасту: отыгранная клавиша теряет и заливку, и контур, буква стоит прямо на фоне и обязана пройти 4.5 на обеих поверхностях. Системный Text/Secondary это условие держит: 5.34 на бумаге, 4.71 на surface. Поэтому отдельное значение больше не нужно. */ --status-correct: #72cc93; /* Pastel/Frog — буква на месте */ --status-present: var(--surface); /* BG/Secondary — буква есть в слове */ --status-absent-border: var(--line); --status-absent-text: var(--text-secondary); /* Победа и серии */ --correct-soft: #e1fae9; /* Pastel/Frog Shallow — фон блока победы */ --correct-line: #4d9468; /* Pastel/Frog Deep — обводка ступени */ --accent-soft: #faf4e0; /* Pastel/Shine Shallow — блоки про стеллы */ --chart-bar: #d1cccb; /* Pastel/Smoke — столбик в статистике */ /* Число внутри пастельного столбика. Text/Static Black Primary — то же значение, что Text/Primary в светлой, но без режимов, и в обеих темах остаётся тёмным. Это исключение из правила §3.3 («статичные Static Black допустимы только там, где подложка не меняется по теме»), и оно посчитано, а не на глаз. Подложка меняется, но остаётся пастелью, а на пастели работает только тёмный текст: на Pastel/Smoke светлая 10.19 тёмная 5.86 на Pastel/Frog светлая 8.59 тёмная 4.75 белым (--ink) светлая 1.59 тёмная 2.99 — провал Клеток это не касается: буква на них крупная и жирная, порог 3.0, и белая проходит. Здесь текст 14 px, порог 4.5, и белого не хватает ни на одном из двух цветов столбика. Тёмной статистики в макетах нет — вопрос ими не закрыт, число выведено из порога контраста. */ --chart-ink: rgb(6 6 15 / 87%); /* Text/Static Black Primary */ /* Кнопки и переключатели */ --btn-primary: #202022; /* Button/Primary */ --btn-primary-disabled: #808080; /* Button/Primary Disabled */ --btn-secondary: #e8eaed; /* Button/Secondary */ --segmented-bg: #e8eaed; /* Segmented Control/Default */ --segmented-active: #ffffff; /* Segmented Control/Active Tab */ /* Инверсный текст — на тёмной плашке в светлой теме и наоборот. Им набраны подпись первичной кнопки и текст снэкбара. */ --ink-inverse: #ffffff; /* Text/Inverse Primary */ --ink-inverse-3: rgb(255 255 255 / 40%); /* Text/Inverse Tertiary */ /* Снэкбар: инверсная плашка, инверсный текст. Красного в нём нет — сбой обозначается местом и текстом, а не цветом. */ --snackbar-bg: #202022; /* BG/Inverse */ --snackbar-ink: var(--ink-inverse); /* Осознанное исключение из системы: оранжевый для «Такого слова нет в словаре». Системный Text/Accent (#ff5317) на белом даёт 3.4 и не проходит порог для текста 15 px, поэтому значение локальное (§3.1). Рядом стоял --error, красный для сбоев. Он удалён: сбои переехали в снэкбар (этап 7), а там инверсная плашка и инверсный текст — сбой обозначен местом, а не цветом. Красного в интерфейсе игры не осталось нигде. */ --status: #8f5000; /* сообщение по правилам игры */ /* Золото стеллы. Третье исключение, и самое стойкое: акцент системы оранжевый (#ff5317), а метка стеллы золотая. Красить фон вокруг золотой иконки в оранжевый нельзя, поэтому подложки берутся из Pastel/Shine, а само золото живёт здесь. По теме не меняется: это фирменный знак, одинаковый в светлой и тёмной. */ --stella-line: #ffda87; /* обводка капсулы */ --stella-from: #ffd168; /* градиент капсулы, верх */ --stella-to: #ffb100; /* градиент капсулы, низ */ --stella-glow: rgb(255 182 15 / 25%); --stella-count-from: #ffffff; /* градиент числа в чипе, верх */ --stella-count-to: #fff1c1; /* градиент числа в чипе, низ */ /* Радиусы дизайн-системы. В библиотеке они названы по диапазону высоты — «16 · 52-68 pt», «12 · 44-48 pt», — поэтому размер элемента и его скругление меняются только вместе. Капсул (999) в системе нет: кнопки скруглённые прямоугольники (§4 брифа). */ --radius-l: 16px; /* элементы 52–68: кнопка Large, сегментированный контрол */ --radius-m: 12px; /* элементы 44–48: кнопка Medium, сегмент */ --radius-s: 8px; /* тап-иконка */ --radius-snackbar: 20px; --radius-dropdown: 24px; /* Геометрия окна: радиус 24 и две тени, копия значений из спеки. */ --window-radius: 24px; --window-shadow: 0 8px 28px -4px rgba(28, 22, 14, 0.10), 0 1px 3px rgba(28, 22, 14, 0.06); } /* ===================== Тёмная тема ===================== Механика прежняя (§1 брифа — темы не трогаем): data-theme ставится на , «system» слушает систему, «dark» включает принудительно. Два блока дублируются осознанно — @media нельзя внести в список селекторов, а препроцессора в проекте нет. Перечислены только те токены, что меняются. Псевдонимы (--text-muted, --status-present, --status-absent-*) не повторяются: они ссылаются на переменную, а не на значение, и подхватывают тёмное сами. Золото стеллы не меняется по определению. */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --ink: #ffffff; --text-secondary: rgb(255 255 255 / 70%); --text-success: #00b87f; --paper: #18181a; --surface: #29292b; --modal: #202022; --line: rgb(255 255 255 / 10%); --line-2: rgb(255 255 255 / 12%); --stroke-image: rgb(255 255 255 / 8%); --status-correct: #459261; --correct-soft: #2d3931; --correct-line: #6fad86; --accent-soft: #39352d; --chart-bar: #999493; --btn-primary: #ffffff; --btn-primary-disabled: #858585; --btn-secondary: #29292b; --segmented-bg: #29292b; --segmented-active: rgb(255 255 255 / 12%); --snackbar-bg: #eff0f2; --ink-inverse: rgb(6 6 15 / 87%); --ink-inverse-3: rgb(6 6 15 / 38%); --status: #f0b840; } } :root[data-theme="dark"] { color-scheme: dark; --ink: #ffffff; --text-secondary: rgb(255 255 255 / 70%); --text-success: #00b87f; --paper: #18181a; --surface: #29292b; --modal: #202022; --line: rgb(255 255 255 / 10%); --line-2: rgb(255 255 255 / 12%); --stroke-image: rgb(255 255 255 / 8%); --status-correct: #459261; --correct-soft: #2d3931; --correct-line: #6fad86; --accent-soft: #39352d; --chart-bar: #999493; --btn-primary: #ffffff; --btn-primary-disabled: #858585; --btn-secondary: #29292b; --segmented-bg: #29292b; --segmented-active: rgb(255 255 255 / 12%); --snackbar-bg: #eff0f2; --ink-inverse: rgb(6 6 15 / 87%); --ink-inverse-3: rgb(6 6 15 / 38%); --status: #f0b840; }