/* Общие токены. Подключаются первыми и в публичной форме, и в кабинете. ДВА СЛОЯ, И ЭТО НЕ УКРАШЕНИЕ. Оболочка — SHTAB. Шапка, меню, подвал: чернила, слоновая кость, латунь. Она одинакова у всех школ и не настраивается. Лист — школа. Всё внутри рамы. Здесь живёт акцент арендатора (`School.accent`), и здесь одна школа отличается от другой. Отсюда следует то, ради чего деление и заведено: чтобы продать систему второй школе, надо поменять один цвет и логотип, а не перерисовать интерфейс. Светлая тема — бумага: тёплый лист, прямая отсылка к бумажному журналу, который система заменяет. Тёмная — чернила: полный брендбук SHTAB. Рама и латунь общие для обеих, поэтому переключатель темы меняет освещение, а не личность продукта. ТЁМНАЯ ПАЛИТРА ОПИСАНА РОВНО ОДИН РАЗ — в блоке [data-theme="dark"]. Системная тема применяется не медиазапросом, а скриптом в , который проставляет data-theme до первой отрисовки. Раньше блоков было три (медиазапрос, ручной тёмный, ручной светлый), и правка одного из них дважды приводила к тому, что при ручном переключении оставались цвета от светлой темы и текст переставал читаться. Не возвращать медиазапрос. Контраст каждой пары «текст на подложке» посчитан, а не оценён на глаз, — scripts/check_contrast.py. Журнал отмечают с телефона в классе при разном свете люди разного возраста; «вроде читается» здесь не критерий. */ :root{ /* Тема для НАТИВНЫХ элементов: выпадающий список select, календарь у input[type=date], стрелки у number, полосы прокрутки. Их рисует браузер, и наши токены до них не дотягиваются — без этой строки в тёмной теме открывался белый список с чёрным текстом. */ color-scheme:light; /* ---- оболочка SHTAB: одна на все школы ---- Латунь — единственный акцент оболочки, и её мало намеренно. Чем реже акцент, тем он дороже выглядит; это правило из брендбука, а не вкус. Латунь живёт в трёх ролях, и они не взаимозаменяемы — та же ошибка, на которой уже обожглись с зелёным и янтарным ниже: --brass ЗАЛИВКА кнопки и знака --on-brass текст ПОВЕРХ заливки --brass-ink латунь как ТЕКСТ на бумаге (светлее — не читается) */ --brass:#C9A24B; --on-brass:#12130F; --brass-ink:#7A5C12; --rail:#1A1915; /* рама: шапка, меню, подвал */ --rail-fg:#F4F1EA; --rail-dim:#B6B0A2; --rail-line:#332F27; /* Контролы внутри рамы. Раньше это были пять rgba(255,255,255,…) прямо в teach.css: работали, но мимо системы — и граница давала 2.04 при норме 3.0, то есть у переключателя языка не было видимого края. Значения подсветки и заливки — точные развёртки прежних полупрозрачных, вид не изменился; граница осветлена до нормы. */ --rail-hi:#353531; /* подсветка пункта меню */ --rail-fill:#2C2B28; /* заливка контрола */ --rail-edge:#6E6A61; /* граница контрола — 3:1 к раме */ /* ---- акцент школы ---- Приходит из School.accent. Значения ниже — Знание, они же запасные. Красный школы в интерфейсе НЕ используется: красный здесь означает «особые сведения о ребёнке» и «происшествие», и школа, выбравшая красный акцентом, получила бы интерфейс, где тревога неотличима от кнопки. Логотипу это не мешает. */ --navy:#243C84; --navy-deep:#16255A; --blue:#3A50A0; /* ---- бумага ---- Тёплый нейтральный, а не белый: лист, а не экран. Насыщенность низкая — иначе тёплый фон начинает спорить с холодным синим школы. */ --ink:#1A1915; --muted:#57534A; --faint:#6B665B; --line:#D7D2C5; --hair:#E5E1D6; /* Граница ЭЛЕМЕНТА УПРАВЛЕНИЯ, а не край карточки. Разные требования: WCAG просит 3:1 от границы кнопки или поля — по ней человек понимает, где заканчивается кликабельное, — и ничего не просит от декоративной линии между карточкой и фоном. Один токен на двоих означал бы выбор между «кнопка не читается» и «карточки обведены жирным». Проверено на фоне страницы, а не на карточке: фон темнее, контраст там ниже, и норму надо брать на худшем из двух. */ --edge:#8A816A; --paper:#F8F6F0; --ground:#E9E5DB; --wash:#FCFBF7; /* ---- семантика состояний ---- Проверено scripts/validate_palette.js из skill dataviz и расчётом контраста, а не на глаз. Красный с янтарным неразличимы по нормальному зрению (ΔE 14.6) — это свойство светофорной тройки, а не ошибка подбора. Отсюда правило: статус НИКОГДА не передаётся одним цветом, рядом всегда число или слово. Не «улучшать» эти значения на глаз. Три роли одного цвета, и они не взаимозаменяемы: --ok заливка и рамка индикатора --on-ok текст ПОВЕРХ заливки (белое на янтарном давало 3.96) --ok-ink цвет статуса как ТЕКСТА на бумаге или на плашке */ --ok:#0F7050; --ok-bg:#E6F3EC; --ok-ink:#0F7050; --on-ok:#FFFFFF; --warn:#C06A00; --warn-bg:#FBF0E0; --warn-ink:#9C5600; --on-warn:#FFFFFF; /* Затемнить сам --warn нельзя: он уедет к красному и плашки перестанут различаться. Поэтому у залитой кнопки своя, более тёмная заливка. */ --warn-fill:#9C5600; --bad:#C2141F; --bad-bg:#FCEAEB; --bad-ink:#B01018; --on-bad:#FFFFFF; /* Графики: одна серия — легенда не нужна. Заливка и сетка замешаны ОТ БУМАГИ с долей школьного синего, а не взяты готовым холодным тоном. На белом фоне разницы не было; на тёплом листе холодная лавандовая заливка читалась как чужой островок посреди страницы, и глаз спотыкался о неё раньше, чем о саму линию. Линия остаётся насыщенной — она и должна быть заметной. */ /* Недельный график со сводки снят до тех пор, пока за ним не наберётся история, — отсюда и `--chart-soft` с `--grid` сейчас никто не красит. Оставлены намеренно: это палитра, а не разметка, и они проверяются на контраст, чтобы к возвращению графика не выяснилось, что линия на бумаге не читается. Сам `--chart` в работе и без графика: им залита дорожка посещаемости в таблицах. */ --chart:#3A50A0; --chart-soft:#DCDEE2; --grid:#D6D8DF; --track:#D5D4D2; /* Рама и чипы держат свой цвет в обеих темах: иначе текст на них слепнет при переключении. Шапка ссылается на оболочку, а не задаёт цвет сама. */ --head-bg:var(--rail); --head-fg:var(--rail-fg); --head-dim:var(--rail-dim); --chip-bg:#243C84; --chip-fg:#FFFFFF; /* Главная кнопка была красной — тем же красным, каким помечены особые сведения о ребёнке (--bad ниже, разница между ними 4 единицы по каждому каналу). То есть «отправить заявку» и «тревога» выглядели одинаково. Теперь главная кнопка латунная: у акцента оболочки появилась работа, а у красного осталась одна. */ --cta-bg:var(--brass); --cta-fg:var(--on-brass); /* Тени короткие и мягкие. Раньше было 0 24px 60px -34px — такой размах читается как объявление «я карточка», и на плотном экране двадцать карточек объявляют это одновременно. Приподнять край достаточно. */ --shadow:0 1px 2px rgba(26,25,21,.05), 0 8px 24px -14px rgba(26,25,21,.20); --shadow-sm:0 1px 2px rgba(26,25,21,.05), 0 3px 10px -6px rgba(26,25,21,.16); /* ---- три гарнитуры, у каждой одна работа ---- Подробности и вес файлов — static/css/fonts.css. --display Unbounded. Заголовки, названия разделов, бренд. Широкий: в текст его нельзя, только короткие строки в 2–4 слова. --sans Onest. Весь интерфейс, включая имена учеников. --num Literata, подрезанная до цифр. ТОЛЬКО крупные числа сводки. БУКВ В ФАЙЛЕ НЕТ — строка с буквами покажет Georgia. */ --display:'Unbounded', ui-sans-serif, system-ui, sans-serif; --sans:'Onest', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif; --num:'Literata Numerals', ui-serif, Georgia, 'Times New Roman', serif; /* ---- типографическая шкала ---- До неё в проекте жило двадцать девять разных размеров, из них восемь втиснуто между 0.66 и 0.82rem. Глазом такие соседи неразличимы, но складываются в дрожь: текст «прыгает» от блока к блоку, и читающий тратит внимание на то, чтобы понять, одного ли уровня две подписи. Ступеней семь, шаг примерно 1.2. Правило простое: если нужного размера в шкале нет — берётся ближайший, а не добавляется новый. Крупные заголовки набираются Unbounded, всё остальное — Onest. Смена гарнитуры сама по себе создаёт иерархию, поэтому размеры заголовков можно держать скромнее, чем при одной гарнитуре. */ --t-xs:.75rem; /* 12px — подписи осей, мелкие метки */ --t-sm:.8125rem; /* 13px — заголовки колонок, вторичный текст */ --t-base:.9375rem; /* 15px — основной текст интерфейса */ --t-md:1.0625rem; /* 17px — имя ученика, крупная строка списка */ --t-lg:1.25rem; /* 20px — подзаголовок блока */ --t-xl:1.5rem; /* 24px — заголовок раздела */ --t-2xl:2rem; /* 32px — заголовок страницы */ /* Заголовок страницы тянется с шириной экрана: на телефоне 2rem великоват, на мониторе 2rem мелковат. Значение одно на весь проект — раньше здесь было три разных clamp'а, и заголовки «Сводка», «Заявки» и «Кто был в школе» имели три разные высоты. */ --t-hero:clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); /* Крупное число в плитке — своя роль, а не «тот же размер, что заголовок». Общий токен на двоих означал бы, что попытка увеличить заголовок страницы молча раздувает цифры на сводке. */ --t-num:clamp(1.9rem, 1.4rem + 2vw, 2.6rem); /* Интерлиньяж отдельно: у плотных таблиц и у читаемого текста он разный, и подбирать его каждый раз заново — тот же источник дрожи. */ --lh-tight:1.2; /* заголовки */ --lh-snug:1.35; /* строки таблиц, карточки */ --lh-base:1.55; /* абзацы */ --doc:46rem; --app:60rem; /* ---- шкала скруглений ---- Раньше радиус был один (3px) и рядом с ним двадцать один захардкоженный 2px — то есть шкалы не было вовсе, а разнобой был. Формы разного размера не могут скругляться одинаково: на крупной панели 8px незаметны, на бейдже 16px превращают его в пилюлю. --r остаётся именем панели, чтобы не переписывать двадцать одно обращение к нему в шести файлах. */ --r-xs:6px; /* бейдж, полоска прогресса, мелкая плашка */ --r-sm:10px; /* кнопка, поле ввода, селект */ --r:16px; /* панель, карточка */ --r-lg:22px; /* крупная панель, модальное окно */ --r-pill:999px;/* чип, статус, вкладка-таблетка */ --bar-h:53px; } :root[data-theme="dark"]{ color-scheme:dark; /* ---- чернила: полный брендбук SHTAB ---- Рама здесь почти сливается с фоном, поэтому её отделяет волосяная линия, а не перепад светлоты. В светлой теме линия не нужна: там рама тёмная на бумаге и видна сама по себе. */ --rail:#0E0F12; --rail-fg:#F2EFE8; --rail-dim:#9BA1AB; --rail-line:#282C33; --rail-hi:#2B2C2E; --rail-fill:#212225; --rail-edge:#666B76; /* Латунь на чернилах читается как текст и без затемнения — в отличие от бумаги, где для текста нужен --brass-ink потемнее. */ --brass:#C9A24B; --on-brass:#0E0F12; --brass-ink:#D4B268; /* Акцент школы поднимается по светлоте: #243C84 на чернилах даёт 1.6 при норме 4.5 и превращается в чёрное пятно. Тон и узнаваемость сохранены, изменена только светлота. */ --navy:#8FA5E8; /* Единственная работа этого токена — ссылка под курсором. В светлой теме он темнее --navy (13.43 против 9.46), в тёмной обязан быть СВЕТЛЕЕ: здесь #0A0D16 давал 1.15 на --paper, и ссылка под курсором пропадала совсем. Наведение должно приподнимать, а не гасить. */ --navy-deep:#B7C6F5; --blue:#A3B5EE; --ink:#F2EFE8; --muted:#9BA1AB; --faint:#8A919C; --line:#2B2F36; /* Линовка фона рисуется этим цветом. На посветлевшем перепаде она начинала читаться как полосы; убавлено до едва заметного. */ --hair:#16181D; --edge:#616977; /* Три ступени, а не две. Фон страницы ТЕМНЕЕ рамы намеренно: шапка публичного документа красится цветом рамы, и пока фон был ровно таким же (#0E0F12 на #0E0F12), шапка с фоном сливались в одно чёрное поле — документ начинался там, где становилось светлее, то есть с середины. Теперь фон #07080B, рама #0E0F12, карточка #1A1D22: документ лежит на столе, а не растворяется в нём. */ --paper:#1A1D22; --ground:#07080B; --wash:#15171B; /* В тёмной теме все три заливки светлее текста, поэтому текст поверх них тёмный, а не белый: белое давало 3.15–3.84 при норме 4.5 на всех трёх. */ --ok:#2E9E6D; --ok-bg:#11251C; --ok-ink:#4FC48F; --on-ok:#0E0F12; --warn:#CE7F1C; --warn-bg:#271F12; --warn-ink:#E5A03A; --on-warn:#0E0F12; --warn-fill:#CE7F1C; --bad:#E44C55; --bad-bg:#2E1719; --bad-ink:#FF7A80; --on-bad:#0E0F12; --chart:#8FA5E8; --chart-soft:#1E2740; --grid:#242832; /* Дорожка индикатора посещаемости. Была #1E222A — 1.06 к карточке, то есть невидима: полоса «95%» и полоса «100%» выглядели одинаково, потому что незаполненного хвоста просто не было видно. */ --track:#2B313B; /* --head-*, --cta-* здесь не повторяются: они объявлены через var() в :root, а var() разворачивается в момент использования — то есть уже подхватывает тёмные --rail и --brass. Повтор давал пять лишних мест, где можно забыть поправить. Чипу своё значение нужно: он держит цвет в обеих темах, иначе текст на нём слепнет. */ --chip-bg:#3D5299; --chip-fg:#F2F5FE; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 26px -14px rgba(0,0,0,.75); --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 3px 12px -6px rgba(0,0,0,.65); } /* Переключатель языка и темы стоят парой в шапке: оба меняют вид страницы, и разносить их по углам значило бы, что человек ищет второй, найдя первый. */ .masthead__tools{display:flex;align-items:center;gap:8px} .lang{margin:0} .lang button{ min-height:44px;min-width:44px;padding:0 10px; background:none;border:1px solid var(--edge);border-radius:var(--r-sm); color:inherit;font:inherit;font-size:var(--t-sm);cursor:pointer; } .lang button:hover{border-color:currentColor}