Цвет

Использование

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

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

Тема на части экрана

Тема объявлена атрибутом и работает на любом поддереве. inst-theme добавляет к атрибуту то, чего одному атрибуту не хватает: color наследуется вычисленным значением, и узел внутри тёмной области без неё унаследовал бы чёрный текст от светлого предка.

<div class="inst-theme" data-theme="dark" style="padding: var(--pad-panel); border-radius: var(--radius-lg)">
  <div class="inst-panel">
    <div class="inst-panel-header"><span class="inst-panel-title">Тёмная область</span></div>
    <div class="inst-panel-body">Светлая страница, тёмная панель. Один атрибут и один класс.</div>
  </div>
</div>

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

Когда использовать

Устройство

Нейтраль — 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>

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

Тон — 250°. Светлота --accent-solid ограничена сверху: светлее 0.56 белая подпись перестаёт держать 4.5:1.

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

<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>                     <!-- по системной настройке -->

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

Потолок светло-серой

dark-light переопределяет больше пяти токенов, и это не исключение из правила «тема — это ручки», а его следствие: ручку глубины докрутили до упора, и дальше на неё отзывается всё, что от глубины зависело.

• --surface-overlay совпадает с --surface-raised. Шаг --n-10 — последняя поверхность, на которой держится текст; на --n-9 даже --text-muted даёт 3.29 при норме 4.5. Это то же, что происходит на светлом конце, где raised и overlay оба сидят на --n-0: когда рампа кончается, слой над панелью отделяется рамкой и подложкой, а не светлотой.
• Подписи статусов уходят на шаг 2. На --n-10 шаг 3 не дотягивает — зелёный бейдж давал 3.70.
• Дорожка становится тёмной. Светлая альфа на приподнятой панели осветляет дорожку быстрее, чем заливку, и заливка тонет: бегунок давал 2.86 при норме 3.0.

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

<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) и от акцента (250): категориальный цвет не должен прочитаться как «упало».
• Светлота внутри палитры разная намеренно — ряды остаются различимыми при дальтонизме и на чёрно-белой печати, где тон исчезает вовсе.
• Шесть — потолок. Седьмой ряд означает, что это не график, а таблица.
• Вне графика и его легенды запрещена. В роли статуса, заливки кнопки или подсветки строки категориального цвета не бывает.

Прочее

Доступность

API

Связанное

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