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

## Обзор

Стилизация `Meter` распределена между корневой поверхностью измерения и видимым заполнением дорожки, а смена цвета по порогам применяется на уровне корня.

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

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--meter-height` | `Meter`, `MeterTrack` | Толщина полосы. |
| `--meter-value` | `MeterTrack` | Текущее значение. |
| `--meter-max` | `MeterTrack` | Максимум диапазона. |
| `--meter-track-color` | `MeterTrack` | Текущий цвет заполнения. |
| `--meter-br-ratio` | `Meter` | Коэффициент радиуса полосы. |
| `--meter-track-height` | `MeterTrack` | Толщина заполнения, по умолчанию равна высоте полосы. |
| `--meter-track-br-ratio` | `MeterTrack` | Коэффициент радиуса заполнения. |
| `--meter-track-even-less-good-color` | `Meter` | Цвет заполнения, когда значение в худшем диапазоне. |

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

- `Meter`: размер корня, фоновая поверхность и сопоставление состояний порогов.
- `MeterTrack`: ширина заполнения и видимый цвет измерения.

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

- `size` меняет высоту полосы.
- `variant` задаёт базовую цветовую группу.
- Вычисленный по порогам `data-state` может переопределить цвет дорожки на хороший, предупреждающий или плохой.

## Примеры

```css
.compactMeter {
  --meter-height: 4px;
}
```

```css
.customMeterStates {
  --meter-track-optimum-color: var(--color-green-500);
  --meter-track-suboptimum-color: var(--color-amber-500);
}
```

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

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