Цвет

Контракт

Компонент обращается к семантике, и только к ней. Рампа — сырьё, из которого семантика сделана, и в разметке ей делать нечего.

.my-thing {
  color: var(--text-primary);
  background: var(--surface-raised);
  border: var(--hairline) solid var(--border);
}

Доступность

Устройство

Нейтраль — 15 шагов

<div class="ramp">
  <span class="ramp-step" style="--c: var(--n-0)"></span>
  <span class="ramp-step" style="--c: var(--n-1)"></span>
  <span class="ramp-step" style="--c: var(--n-2)"></span>
  <span class="ramp-step" style="--c: var(--n-3)"></span>
  <span class="ramp-step" style="--c: var(--n-4)"></span>
  <span class="ramp-step" style="--c: var(--n-5)"></span>
  <span class="ramp-step" style="--c: var(--n-6)"></span>
  <span class="ramp-step" style="--c: var(--n-7)"></span>
  <span class="ramp-step" style="--c: var(--n-8)"></span>
  <span class="ramp-step" style="--c: var(--n-9)"></span>
  <span class="ramp-step" style="--c: var(--n-10)"></span>
  <span class="ramp-step" style="--c: var(--n-11)"></span>
  <span class="ramp-step" style="--c: var(--n-12)"></span>
  <span class="ramp-step" style="--c: var(--n-13)"></span>
  <span class="ramp-step" style="--c: var(--n-14)"></span>
</div>
<div class="ramp ramp-scale">
  <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span>
  <span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
  <span>10</span><span>11</span><span>12</span><span>13</span><span>14</span>
</div>

Переключите тему стола: рампа не изменится. Она сырая и не знает о темах — меняется только то, какие её шаги берёт семантика.

Одна ручка задаёт направление уклона: --hue-neutral: 75 — тёплый, 250 — холодный. Цветность 0.002–0.006: ниже порога осознанного замечания, и в этом её работа. Пятнадцатый шаг существует потому, что тёмному концу нужно четыре различимые поверхности подряд, а на четырнадцати их помещалось три.

Шаги без семантики — резерв под приложение и графики.

Акцент — один тон

<div class="ramp">
  <span class="ramp-step" style="--c: var(--a-1)"></span>
  <span class="ramp-step" style="--c: var(--a-2)"></span>
  <span class="ramp-step" style="--c: var(--a-3)"></span>
  <span class="ramp-step" style="--c: var(--a-4)"></span>
  <span class="ramp-step" style="--c: var(--a-5)"></span>
  <span class="ramp-step" style="--c: var(--a-6)"></span>
</div>
<div class="ramp ramp-scale">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>

Второй акцентный тон не заводится. Это не запрос фичи, а сигнал, что смысл должно нести что-то другое.

Тон — 215°. Светлота --accent-solid ограничена сверху белой подписью, и предел ХЬЮ-ЗАВИСИМЫЙ: 0.545 на 215°, 0.568 на 250°, 0.576 на 275°, 0.580 на 45°. Единого числа тут быть не может — «светлее 0.56 подпись не держит 4.5:1» это измерение одного синего. Каждый набор держит свой предел сам, проверяет гейт.

Кольцо фокуса стоит на шагах 6 и 2, а не 4 и 3, и это не третий синий по недосмотру: кольцо обводит заливку, и в светлых темах шаг 4 — это РОВНО --accent-solid. Кольцо вокруг сплошной кнопки было того же цвета, что кнопка, контраст 1.00.

Статусы — три зарезервированных тона

<div class="ramp">
  <span class="ramp-step" style="--c: var(--ok-1)"></span>
  <span class="ramp-step" style="--c: var(--ok-2)"></span>
  <span class="ramp-step" style="--c: var(--ok-3)"></span>
  <span class="ramp-step" style="--c: var(--ok-4)"></span>
  <span class="ramp-step" style="--c: var(--ok-5)"></span>
  <span class="ramp-step" style="--c: var(--ok-6)"></span>
</div>
<div class="ramp">
  <span class="ramp-step" style="--c: var(--warn-1)"></span>
  <span class="ramp-step" style="--c: var(--warn-3)"></span>
  <span class="ramp-step" style="--c: var(--warn-4)"></span>
  <span class="ramp-step" style="--c: var(--warn-5)"></span>
  <span class="ramp-step" style="--c: var(--warn-6)"></span>
</div>
<div class="ramp">
  <span class="ramp-step" style="--c: var(--err-1)"></span>
  <span class="ramp-step" style="--c: var(--err-3)"></span>
  <span class="ramp-step" style="--c: var(--err-4)"></span>
  <span class="ramp-step" style="--c: var(--err-5)"></span>
  <span class="ramp-step" style="--c: var(--err-6)"></span>
</div>
<div class="ramp ramp-scale">
  <span>1</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>

Шага 2 в статусных рядах нет — он не понадобился ни одной роли.

ok — 150°, warn — 85°, err — 25°. Никогда не используются как украшение или как «четвёртая серия на графике».

Шаг 5 существует именно потому, что шаг 4 не проходит порог на самом себе. Пока его не было, жёлтый бейдж жил на контрасте 3.02.

Шкала

Одно объявление на токен через light-dark(). Второй темы как отдельного блока не существует — значит, и расходиться нечему.

Поверхности

<div class="swatches">
  <div class="sw"><div class="sw-chip" style="--c: var(--surface-sunken)"></div><div class="sw-cap">--surface-sunken</div></div>
  <div class="sw"><div class="sw-chip" style="--c: var(--surface-page)"></div><div class="sw-cap">--surface-page</div></div>
  <div class="sw"><div class="sw-chip" style="--c: var(--surface-raised)"></div><div class="sw-cap">--surface-raised</div></div>
  <div class="sw"><div class="sw-chip" style="--c: var(--surface-overlay)"></div><div class="sw-cap">--surface-overlay</div></div>
  <div class="sw"><div class="sw-chip" style="--c: var(--surface-field)"></div><div class="sw-cap">--surface-field</div></div>
</div>

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

Читаются как стопка. Глубина передаётся порядком светлоты и никогда тенью.

Текст

Рамки

Несущая и декоративная — разные токены, потому что к ним разные требования.

Тоны

У смыслового тона три токена: текст, метка и фон.

Текст и метка разошлись по той же причине, что у акцента. Шаг 5 рассчитан на чтение, и пока тон стоял в подписи бейджа, разницы не было. На заливке во всю строку — полоса истории, дуга кольца, лента меры — он читается темнее и глуше, чем акцентная метка рядом, и палитра распадается на два регистра. Метке довольно 3:1, и на шаге 4 все минимальные метки библиотеки стоят в одном.

Третьего — «заливки» между текстом и фоном — нет. Он жил на шаге 4 и не проходил там, где под ним оказывалась дорожка: жёлтая заливка меры давала 2.49 при норме 3.0.

У акцента есть случай, которого нет у статусов, — заливка под белой подписью (--accent-solid и --accent-on).

Тон как атрибут

data-tone ставится один раз на группу; вложенные элементы читают --tone-ink, --tone-mark и --tone-bg и больше ничего о тоне не знают.

Словарь закрыт. Шестое значение не заводится.

Варианты

Тема — это три независимых ручки: тон нейтрали, сила уклона и глубина тёмных поверхностей. Седьмая тема стоит одну строку.

Светлые различаются уклоном, тёмные — глубиной, и это не небрежность. На светлом фоне глаз ловит температуру: тёплая бумага и холодная бумага читаются как разные. На тёмном температуру почти не видно, зато сразу заметно, насколько панель отделяется от страницы. Ручки разные, потому что в светлом и тёмном замечают разное.

--tint — множитель, а не абсолютная величина: шаги рампы сохраняют свои доли уклона (у светлого конца он слабее, у тёмного сильнее), и при нуле весь ряд одновременно становится серым. Нейтральная тема — не третий тон, а его отсутствие: любой --hue-neutral при нулевой цветности даёт один и тот же серый.

<html data-theme="dark">   <!-- принудительно -->
<html>                     <!-- по системной настройке -->

Светлая глубина не регулируется. Сверху рампы шаги идут плотно, и «менее светлая» светлая тема даёт просто серый фон.

Потолок глубины

Тёмных тем две, и третьей вверх не будет. Выше «серой» рампа перестаёт быть тёмной: на --n-10 даже --text-muted даёт 3.29 при норме 4.5, а прозрачная тоновая заливка, сквозь которую просвечивает панель, роняет подпись бейджа ещё раньше. Ровно поэтому dark-soft кроме четырёх поверхностей переопределяет и подписи статусов — они уходят на шаг 2 рампы.

Категориальная палитра

<div class="ramp">
  <span class="ramp-step" style="--c: var(--chart-1)"></span>
  <span class="ramp-step" style="--c: var(--chart-2)"></span>
  <span class="ramp-step" style="--c: var(--chart-3)"></span>
  <span class="ramp-step" style="--c: var(--chart-4)"></span>
  <span class="ramp-step" style="--c: var(--chart-5)"></span>
  <span class="ramp-step" style="--c: var(--chart-6)"></span>
</div>
<div class="ramp ramp-scale">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
</div>

Светлота внутри ряда разная. Так ряды различимы и при дальтонизме, и на чёрно-белой печати, где тон исчезает вовсе. Прищурьтесь — порядок по светлоте всё ещё читается.

Здесь цвет кодирует ряд, а не состояние, — единственное такое место в библиотеке. Отсюда и отдельные правила.

• Порядок — часть контракта. Ряд №1 всегда --chart-1, иначе один и тот же показатель меняет цвет от экрана к экрану.
• Минимум 25° от каждого статусного тона (25, 85, 150): категориальный цвет не должен прочитаться как «упало». С акцентом угловой гарантии нет — он ручка на четыре положения (215, 250, 275, 45), и глина стоит в 10° от ряда №4. Вместо неё разделение областей: акцент не заходит внутрь графика, категориальный цвет не выходит наружу.
• Светлота внутри палитры разная намеренно — ряды остаются различимыми при дальтонизме и на чёрно-белой печати, где тон исчезает вовсе.
• Шесть — потолок. Седьмой ряд означает, что это не график, а таблица.
• Вне графика и его легенды запрещена. В роли статуса, заливки кнопки или подсветки строки категориального цвета не бывает.

Прочее

Правила

Что брать, а что нет

API

Связанное

Токены Высота и поверхности Бейдж Легенда графика Метрика