Сланец
Холодные нейтрали шкалы slate, индиго-акцент и контраст, выверенный по AA в обоих режимах.
На этой странице
Тема называется по шкале, на которой построена (--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 · по умолчанию | light | data-theme="slate-light" |
dark | dark | data-theme="slate-dark" |
Роли
Это тема сборки портала, и её роли с контрастом стоят на странице «Цвет» основ. Роли и контраст