Отображение данных
Бейдж
Состояние объекта, названное словом из фиксированного словаря кита. Пять значений, и добавить шестое случайно нельзя.
Разметка
<span class="inst-badge"><span class="inst-dot"></span>в очереди</span>
<span class="inst-badge" data-tone="running"><span class="inst-dot"></span>идёт</span>
<span class="inst-badge" data-tone="ok"><span class="inst-dot"></span>готово</span>
<span class="inst-badge" data-tone="warn"><span class="inst-dot"></span>с замечаниями</span>
<span class="inst-badge" data-tone="error"><span class="inst-dot"></span>упало</span>
Использование
<span class="inst-badge" data-tone="ok"><span class="inst-dot"></span>готово</span>
| Что | Обязательно | Почему |
|---|---|---|
| Слово внутри бейджа | да | Цвет не имеет права быть единственным носителем состояния |
data-tone из закрытого словаря |
да, у статуса | Пять значений. Выдуманное шестое не покрасится вовсе |
inst-dot внутри |
да, у статуса | Второй носитель признака рядом со словом |
data-tone на точке |
нет | Точка наследует тон от бейджа: атрибут ставится один раз на группу |
Когда использовать
| Используйте | Возьмите другое |
|---|---|
| Состояние из перечислимого набора: идёт, готово, упало | Произвольный текст, заведённый пользователем — тег. Бейдж — словарь кита, тег — слова пользователя, и снять его можно |
| Короткая неизменяемая метка объекта | Счётчик рядом с пунктом навигации — inst-nav-count |
| Статус строки таблицы или карточки | Сообщение с объяснением — сноска или баннер: у бейджа нет места для предложения |
Устройство
Точка — не украшение. Она носитель второго признака: цвет не имеет права быть единственным носителем состояния, поэтому статус ходит с точкой и словом. Бейдж без точки применяется там, где он не статус, а метка объекта.
Разметка
<span class="inst-badge" data-tone="ok"><span class="inst-dot"></span>готово</span>
<span class="inst-badge" data-tone="ok">готово</span>
<span class="inst-badge">terrain_chunk_04</span>
Бейдж читает --tone-ink и --tone-bg и больше ничего о тоне не знает.
Варианты
Тон — это data-tone, один словарь на весь кит. Тот же атрибут с теми же
значениями работает на сноске, баннере, точке и строке лога.
| Тон | Значит |
|---|---|
| без атрибута | Нейтральное, ещё не начавшееся |
data-tone="neutral" |
Явно нейтральное. Оно же исполняет роль info — синий в этом ките занят акцентом |
data-tone="running" |
Идёт сейчас. Точка внутри пульсирует |
data-tone="ok" |
Успешно завершено |
data-tone="warn" |
Завершено с замечаниями |
data-tone="error" |
Упало |
Композиции
Счётчик в навигации
Разметка
<a class="inst-nav-item" href="#">Очередь
<span class="inst-badge inst-nav-count">7</span></a>
В шапке панели
Разметка
<div class="inst-panel">
<div class="inst-panel-header">
<span class="inst-panel-title">Прогон</span>
<span class="inst-badge" data-tone="running"><span class="inst-dot"></span>идёт</span>
</div>
<div class="inst-panel-body">worldgen-01 · 4 файла</div>
</div>
Правила
Так Статус — точка и слово
Два носителя признака. Читатель, не различающий тон, читает подпись.
Не так Тон без слова
Цветной прямоугольник без текста не сообщает состояния — ни в дальтонизме, ни в печати, ни на скриншоте.
Так Тон один раз на группу
data-tone на бейдже; точка внутри наследует. Дублировать атрибут не нужно.
Не так Бейдж для пользовательской метки
Слова пользователя — тег: его можно снять, и тона у него нет намеренно.
Доступность
| Цвет не единственный носитель | Статус несёт точку и слово. Читатель, не различающий тон, читает подпись |
| Контраст | Подпись каждого тона проверена на 4.5:1 против собственного тонированного фона в шести темах. Ради этого у тона есть отдельный шаг рампы под текст: шаг заливки не вытягивает 4.5:1 на самом себе |
| Уменьшенное движение | Пульсация точки running замедляется, а не гаснет: кит, вся работа которого — показывать занятость машины, обязан показывать её всегда |
| Режим принудительных цветов | Точка переживает сброс (forced-color-adjust: none), потому что несёт значение |
| Кегль | --text-2xs — 11px, пол кита. Ниже не опускаемся |
Настройка
Если строите на тоне свой компонент: у тона два передних плана, и брать надо тот, что по работе.
| Переменная | Для чего | Порог |
|---|---|---|
--tone-ink |
Текст | 4.5:1 |
--tone-mark |
Метка без подписи: точка, каретка, заливка меры | 3:1, и ещё против дорожки |
У статусов они совпадают, у акцента расходятся.
API
| Имя | Значение | Что делает |
|---|---|---|
| класс | ||
inst-badge | — | Базовый |
inst-dot | — | Точка состояния внутри. Наследует тон от бейджа |
inst-nav-count | — | Модификатор положения для счётчика в навигации |
| атрибут | ||
data-tone | — | neutral running ok warn error. Закрыт |
| токен | ||
--control-h-xs | 20px | |
--radius-xs | 3px | |
--text-2xs | 0.6875rem | |
--weight-medium | 500 | |
--space-2 | 4px | |
--space-3 | 6px | |
--size-dot | 6px | |
--tone-ink | var(--accent-text) | |
--tone-bg | var(--surface-sunken) | |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument