Токены

Публичный контракт темы. Имена не меняются без смены version в theme.json, поэтому тема, написанная сегодня, переживёт обновление приложения.

Значения ниже — дефолтная тема «Графит» в тёмной схеме.

Поверхности и текст

bg#16181d

фон приложения

surface#1d2026

карточки, панели

surface-2#22262d

шапки таблиц, вложенные блоки

panel#131519

боковая полоса и нижняя панель

ink#e6e9ee

основной текст

ink-hi#ffffff

заголовки

muted#8b939f

пояснения

muted-2#6d7683

надстрочники, служебное

line#2a2e36

границы

line-hi#343b46

границы под курсором

Акцент

accent#4d8dff

главное действие, активный пункт

accent-wash#1a2432

фон активного состояния

accent-edge#2f4a75

граница активного состояния

on-accent#0f1116

текст на акцентной заливке

Пара accent + on-accent задаётся вместе: если акцент светлый, текст на нём должен быть тёмным. Контраст этой пары проверяйте — на ней стоит главная кнопка.

Статусы

ok#35c07e

проверка пройдена

bad#ff6b7a

расхождение

warn#ffbe5c

предупреждение

sealed-fg#b39aff

скрытые сущности, только у автора

У каждого статуса четыре токена: ok, ok-fg, ok-bg, ok-edge — и так же для bad и warn. Заливка -bg с границей -edge держит блок, -fg идёт на текст, чистый ok — на точки и штрихи полосы прогона.

Тип задания

kind-select-fg / kind-select-bg, kind-dml-fg / kind-dml-bg, kind-ddl-fg / kind-ddl-bg — метка типа SQL у задания. Три разных цвета здесь нужны: студент читает список глазами, а не по буквам.

Код и редактор

code-bg, code-fg, code-kw, code-num, code-str, code-comment — блоки кода и подсветка. editor-gutter, editor-selection, editor-cursor, editor-active-line — редактор.

Подсветка редактора собрана на этих же переменных, поэтому смена схемы перекрашивает её на лету, без пересоздания редактора.

Типографика

font-body, font-display, font-mono — гарнитуры. text-xs, text-sm, text-base, text-lg, text-xl — размеры. lh-tight, lh-normal — интерлиньяж.

Моноширинный шрифт применяется к SQL, идентификаторам и числам в таблицах. Не назначайте сюда пропорциональный: колонки цифр перестанут выравниваться.

Форма и ритм

radius-app, radius-card, radius-ctl, radius-tag, border-width, space-1 … space-8 (шаг 4 пикселя), shadow-app, shadow-card, shadow-pop.

Радиусы задавайте только через токены

Горизонтальные отступы кнопок и меток вычисляются от радиуса: padding растёт вместе со скруглением. Тема с radius-ctl: 999px получит кнопки-пилюли с нормальными полями, а не текст, вжатый в скругление. Если задать padding руками в своём CSS, эта связь потеряется.

Как проверять свою палитру

• Пройдите по парам «текст на фоне»: ink на bg, ink на surface, muted на surface, on-accent на accent, каждый -fg на своём -bg. Для основного текста цельтесь в контраст 4.5:1, для крупных заголовков достаточно 3:1.
• Проверьте обе схемы, если scheme: "auto".
• Сравните с дефолтом на том же экране: ?theme=off рядом в соседней вкладке.