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

Контракт

Ряд назначается через --series, инлайном, как канал данных: номер ряда приходит вместе с данными и не может быть известен статическому CSS.

<svg class="inst-sparkline" viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true" style="--series:var(--chart-3)">
  <path class="inst-sparkline-area" d="M0,20 24,14 48,18 72,9 96,12 120,5 120,32 0,32Z"/>
  <path class="inst-sparkline-line" d="M0,20 24,14 48,18 72,9 96,12 120,5"/>
</svg>

Компоненты, читающие --series:

Кольцо и мера --series не читают: они показывают одну величину и берут --tone-mark.

/* Именованный ряд приложения — привязка номера к показателю в одном месте */
.chart-render  { --series: var(--chart-1); }
.chart-physics { --series: var(--chart-2); }

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

Доступность

Варианты

Значения записаны в OKLCH через light-dark(): тон и насыщенность держатся, а светлота переворачивается по теме. От статусных тонов палитра отстоит минимум на 25°: коридоры 25 (ошибка), 85 (предупреждение) и 150 (успех) закреплены навсегда, и ряд, попавший в них, читается как «упало» или «готово».

Ряд №3 стоит на 355, то есть в 30° от ошибочного 25: это ближайшее сближение со статусным тоном во всей палитре, и дальше её расширять нельзя не только из-за различимости, но и потому, что свободных коридоров не осталось.

От акцента такой гарантии нет и быть не может. Акцент — ручка на четыре положения: петроль 215, графит 250, индиго 275, глина 45. Четыре положения закрывают слишком много круга: глина стоит в 10° от ряда №4 (55). Вместо угловой гарантии здесь работает разделение ОБЛАСТЕЙ — акцент не заходит внутрь графика, категориальный цвет не выходит наружу. Единственное место, где они встречаются на одном экране, — легенда многорядного графика рядом с интерфейсом, и там их различает светлота.

API

Связанное