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