Переменные оформления

Версия набора токенов — 0.6.0. Всего переменных 188: публичных 84, выводимых из --brand 9, остальные внутренние или не отдаются школе.

Как этим пользоваться #

Переопределение переменной меняет вид везде, где она используется, и переживает любую нашу перевёрстку. В этом и смысл: мы обязуемся не переименовывать публичные переменные, а внутреннее устройство разметки меняем свободно.

Минимальная настройка школы — одна строка:

:root { --brand: #C2185B; }

Из --brand выводятся акцент, наведение, нажатие, бледная подложка, рамка, цвет ссылки и кольцо фокуса — отдельно для светлой и тёмной темы. Поэтому малиновая школа остаётся малиновой и в тёмной теме, а не превращается в бурую.

Куда это писать — в разделе Темы школы.

Что означают пометки #

Главная переменная #

Она одна. Всё остальное на этой странице — уточнения к ней.

Было / стало:

:root { --brand: #C2185B; }   /* было синее, стало малиновое — везде */

Где это видно:

• --brand — Кнопки главного действия, ссылки, выделенный пункт меню, прогресс, кольцо фокуса.

Публичные переменные #

Их 84. Имя каждой — обязательство: мы не переименовываем их никогда, поэтому переопределение переживает любую нашу перевёрстку.

Цвета: фоны, границы, текст #

Было / стало:

:root { --bg-canvas: #FFFFFF; }   /* было серым, стало белым: интерфейс «плоский» */
:root { --bg-surface: #FFFDF7; }  /* карточки чуть тёплого оттенка */
:root { --border: transparent; }  /* было в рамках, стало без рамок */
:root { --text-primary: #000000; }

Где это видно:

• --bg-canvas — Подложка всех экранов кабинета и админки.
• --bg-surface — Карточка курса, таблица, боковая панель, модальное окно.
• --bg-surface-muted — Заголовочная строка таблиц, полоса вкладок, блок кода.
• --bg-inverse — Всплывающая подсказка, панель управления видео.
• --bg-media — Плеер урока, обложка курса до загрузки.
• --border — Карточки, таблицы, поля, вкладки.
• --border-strong — Поля ввода, флажки, переключатели, выпадающие списки.
• --text-primary — Названия курсов и уроков, заголовки разделов, суммы.
• --text-body — Содержимое урока, описание курса, текст в диалогах.
• --text-secondary — Дата заказа, счётчик уроков, подпись под полем.
• --text-muted — Подсказки в полях, «ничего не найдено», сноски.
• --skeleton — Список курсов и таблицы в первые доли секунды после открытия.
• --overlay — Любое диалоговое окно, нижний лист на телефоне.

Шрифты и размеры текста #

Было / стало:

:root { --font-sans-brand: "PT Sans"; }
:root { --fs-body: 17px; }   /* было 15 — стало крупнее во всей школе */

Где это видно:

• --font-sans — Весь интерфейс.
• --font-mono — Блоки кода в уроке, ключи API в настройках.
• --fs-body — Тело урока, описания, диалоги.
• --lh-relaxed — Содержимое урока.

Отступы, скругления, размеры, тени, переходы #

Было / стало:

:root { --space-4: 12px; }   /* было просторно — стало плотнее по всей школе */
:root { --radius-control: 0; }   /* острые углы вместо скруглённых */
:root { --radius-card: 0; }
[data-lms="rail"] { width: 200px; }   /* якорь; см. раздел «Якоря» */
:root { --shadow-card: none; }   /* было с тенью — стало плоско */

Где это видно:

• --space-4 — Поля внутри карточек и диалогов.
• --radius-control — Все кнопки и поля ввода.
• --radius-card — Карточка курса, карточка заказа, панель.
• --size-panel — Панель фильтров, панель сведений о заказе.
• --size-nav-rail — Левое меню админки.
• --size-readable — Тело урока, длинные страницы документации.
• --shadow-card — Карточки курсов, панели.

Кольцо фокуса #

Где это видно:

• --focus-width — Любой элемент, на который встал фокус.

Производные от бренда #

Считаются из --brand сами, отдельно для светлой и тёмной темы. Переопределить по одной можно, но обычно не нужно: задав --brand, вы уже получили всю цепочку — и с проверенным контрастом.

Где это видно:

• --accent — Заливка главной кнопки, активный пункт меню, заполненная часть прогресса.

Не отдаются школе #

Эти переменные существуют, но менять их не следует. Цвета состояний — потому что зелёное «оплачено» и красное «отказ» должны выглядеть одинаково во всех школах: иначе ученик и куратор перестают понимать экран с первого взгляда. Пороги попадания пальцем — потому что 44 пикселя это не вкус, а размер пальца.

Внутренние #

Их 69: примитивы палитры --p-*, номера слоёв, безопасные отступы телефона, метрики оболочки редактора. Мы меняем их свободно и без предупреждения. Опираться на них нельзя — правило, написанное по внутренней переменной, однажды перестанет применяться, молча и при обновлении.

Перечислены здесь ровно затем, чтобы было видно: это не забытые переменные, а намеренно закрытые.

Чего здесь ещё нет #

Деление на публичные и внутренние ещё не закреплено в коде. По 02-architecture/customization.md §2 внутренние переменные должны отличаться префиксом в самом tokens.css; сейчас префикс --p- есть только у примитивов, а «статусы школе не отдаются» написано комментарием, который машина читать не обязана. До тех пор признак живёт в data/tokens.yml рядом с описаниями, и приведённое деление — предложение документации, а не принятое решение.

Не у всех переменных есть «где видно» и пример «было / стало». customization.md §6 требует и то и другое у каждой записи: голый список имён бесполезен — за ним всё равно лезут в инспектор браузера. Чего не хватает по именам — в reports/tokens-gaps.md репозитория документации.

Переменная --font-sans-brand в tokens.css не объявлена. Она названа настройкой школы в комментарии и используется как запасное значение внутри --font-sans, но своей строки объявления у неё нет — значит машинно в справочник она не попадает, и её приходится называть словами здесь.