Сланец

  • Темы
  • light
  • dark

Холодные нейтрали шкалы slate, индиго-акцент и контраст, выверенный по AA в обоих режимах.

Значения — из пакета @feugene/granularity-tokens

На этой странице

Тема называется по шкале, на которой построена (--gr-slate-*), и в конфиге ({ theme: 'slate' }) с тоном tone="slate" не встречается.

Образец

РольСветлыйТёмный
--gr-bg#f8fafc#0f172a
--gr-card#ffffff#1e293b
--gr-fg#0f172a#f8fafc
--gr-muted-fg#556275#aab6c7
--gr-primary#4f46e5#9d8bfa
--gr-accent#eef2ff#1e1b4b
Одна разметка в острове каждого режима: разница только в паре на поддереве.

Для чего

Базовая тема дизайн-системы: продуктовые интерфейсы, админки, инструменты — плотные экраны, где таблица, форма, алерт и ряд кнопок стоят рядом. С ней компоненты выпускаются и показываются в доке, и её значения пакет держит полными для каждого компонента. Другая тема начинается от неё наследованием (extends, вариация, которая идёт за её правками) или копией (theme:copy, самостоятельный язык).

Правила использования

  • Цвет текста — из роли -text, а не из тона: насыщенный тон проваливает AA хотя бы в одном режиме (гейт toneContrast).
  • Заливка кнопочного веса — -solid со своим -solid-fg: кнопки всех тонов выглядят одной семьёй.
  • Граница переключаемого контрола — --gr-control-brd, а не --gr-brd: только она держит 3:1 к странице, карточке и --gr-muted.
  • Ошибка валидации — роли --gr-invalid-*, а не danger-тон: по умолчанию это ссылка на danger, но разные сообщения тема вправе развести.

Режимы

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

Пары на корне

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

Идентификатор
slate
РежимСхемаПара на корне
light · по умолчаниюlightdata-theme="slate-light"
darkdarkdata-theme="slate-dark"

Роли

Это тема сборки портала, и её роли с контрастом стоят на странице «Цвет» основ. Роли и контраст