GrBadge

dark переключает мягкую тонированную подложку на плотную заливку.

Заливка идёт через покомпонентный слой --gr-badge-{tone}-bg/-fg, а не прямо из роли тона, потому что нужный вес у тем разный. В светлой теме --gr-{tone} — это яркая заливка под тёмный текст, и filled-бейдж читался тяжёлой почти чёрной плашкой; там слой уводит его на -solid/-solid-fg — заливку кнопочного веса под светлый текст, ту же, что у solid-кнопок. В тёмной теме пастельная заливка с тёмным текстом — штатная конвенция пакета, и слой оставляет прежние роли.

Значения слоя лежат в темах компонента (GrBadge/themes/{light,dark}.css), поэтому перекрасить бейдж можно, не трогая роли тонов целиком.

Насыщенный тон как цвет текста на своей же светлой подложке даёт 2.24:1, роль -text — 6.78:1. Поэтому мягкий вес красит текст только -text-ролями.

Обе гарантии закреплены гейтом grBadgeContrast.test.ts, и обе не формальные:

• контраст текста — порог AA 4.5:1. Послаблений для крупного текста здесь нет: кегль бейджа 11–14px;
• видимость самой плашки меряется перцептивным расстоянием до фона страницы (ΔE, порог заметности 2.3). Контрастного правила для этого мало: 3:1 из WCAG 1.4.11 не проходит даже штатная пара --gr-muted/--gr-brd, и бейдж мог оказаться неотличимым от страницы, формально не нарушив ничего.

Про роли тонов и суффиксы — ../theming.md.

radius — round (по умолчанию), semi или square. У semi своя лестница по ступеням размера — 3/3/5/7 px через --gr-badge-semi-radius-*: бейдж скругляется медленнее, чем растёт, иначе на lg он превращается в пилюлю раньше, чем этого хочет макет.

<GrBadge radius="semi" size="lg">
SKU-14920
</GrBadge>

Высоту бейджа держит внутренняя обёртка (min-height: 1lh — высота line-box при leading-none), а сам текст обрезается до cap-height (text-box-trim) и центрируется внутри этой высоты. Так подпись стоит ровно независимо от того, есть ли в ней выносные элементы: «Оплачено» и «Ждём оплаты» садятся одинаково.

Обрезка живёт на вложенном узле, а не на самом тексте, и это не стилистика: text-box-trim уменьшает line-box, и повешенный прямо на текст он просадил бы вместе с ним высоту всего бейджа.

<GrBadge tone="neutral" dot="success">
  Активен
</GrBadge>

<GrBadge tone="success" dot>
  Оплачено
</GrBadge>

dot ставит кружок перед подписью. Имя тона красит маркер отдельно от плашки — ради этой пары паттерн и нужен: в списке из десятка строк цветные плашки соревнуются за внимание, а серая плашка с цветной точкой читается построчно. Булево значение берёт тон самого бейджа.

Маркер декоративен (aria-hidden): смысл несёт слово рядом. Точки без подписи здесь нет намеренно — она сообщала бы состояние одним цветом. Метка поверх чужого контрола — это GrBadgeWrap, статус на аватаре — GrAvatar.

Почему маркер красится слоем бейджа, а не ролью тона

Роль тона напрямую не работает ни в одном виде, и обе ветки измерены гейтом:

Причина в том, что --gr-{tone} в светлой теме — яркая заливка под тёмный текст, а не цвет для мелкой графики. Покомпонентный слой --gr-badge-{tone}-bg как раз и означает «насыщенный вес, который читается в этой теме», и на нём проходят все 128 пар «тон маркера × тон бейджа × тема».

Порог для маркера — 3:1 (WCAG 1.4.11), а не 4.5:1: кружок опознаётся формой и положением, а не начертанием.

На заливке (dark) маркер всегда цвета текста. Подложка filled-бейджа берётся из того же слоя, поэтому маркер названного тона слился бы с ней в один цвет; названный тон там игнорируется с предупреждением в dev.

Маркер и слот icon занимают одно место, поэтому исключают друг друга: переданы оба — рисуется иконка, она несёт больше, чем цвет.

Статус часто состоит не только из слова: «идёт разбор» без спиннера читается как окончательное состояние, а не как работа.

<GrBadge tone="warning">
  <template #icon>
    <IconLoader class="h-full w-full animate-spin" />
  </template>
  На распознании
</GrBadge>

Размер держит обёртка слота, а содержимое тянется до неё (h-full w-full) — тот же приём, что у GrChip, и по той же причине: шкала иконки обязана следовать за size бейджа, а не за разметкой места вызова. Растёт она медленнее кегля: на нижних ступенях иконка «один в один с текстом» разогнала бы узкую плашку.

Иконка — сосед обрезанного текста, а не его содержимое: text-box-trim живёт на вложенном узле подписи и до иконки не дотягивается, поэтому высоту плашки она не тянет.

Не кладите сюда GrProgressCircle: у кругового индикатора шкала виджетная, нижняя ступень — 2rem, и в строку бейджа он не помещается — дуга уезжает за подложку, вынося текст наружу. Спиннер здесь — обычная иконка с animate-spin.

Слот не делает бейдж интерактивным: он по-прежнему метка. Нужен снимаемый или выбираемый тег — это GrChip, у него своя роль и своя клавиатура.

size берёт кегль из контрольной шкалы --gr-control-text-*, а не из контентной: бейдж чаще стоит в одном ряду с кнопками и полями, чем внутри абзаца. Шкалы и их разница — ../sizes.md.

tone, size и radius читаются из GrConfigProvider, поэтому вид бейджей задаётся один раз на приложение.