# Badge: Стилизация

## Обзор

Стилизация `Badge` сосредоточена в одной компактной поверхности с переменными размера, внешнего вида и семантического варианта.

## Публичные CSS-переменные

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--badge-size` | `Badge` | Высота и минимальная ширина. |
| `--badge-font-size` | `Badge` | Размер текста. |
| `--badge-background-color` | `Badge` | Цвет фона. |
| `--badge-border-color` | `Badge` | Цвет обводки. |
| `--badge-color` | `Badge` | Цвет текста. |
| `--badge-chroma-ratio` | `Badge` | Насыщенность, добавляемая к акцентному цвету в тонированном фоне. |

## Переменные частей

- `Badge`: отвечает за всю поверхность бейджа.

## Взаимодействие состояний и вариантов

- `size` меняет высоту и размер шрифта.
- `appearance` переключает оформление: заливка, поверхность, обводка или ghost.
- `variant` меняет семантическую цветовую группу.

## Примеры

```css
.compactBadge {
  --badge-size: 18px;
}
```

```css
.brandBadge {
  --badge-border-radius-ratio: 0.5;
}
```

## Не переопределяйте

- Не растягивайте бейдж до контейнера для абзаца.
- Не полагайтесь только на цвет для передачи смысла.
- Не придумывайте собственные варианты без соответствующих стилей.