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

## Обзор

Стили `Avatar` сосредоточены на корневой поверхности, а дочерние части наследуют от неё размер и цветовой контекст.

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

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--avatar-size` | `Avatar` и дочерние части | Общие размеры аватара. |
| `--avatar-br-ratio` | `Avatar` | Коэффициент скругления углов. |

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

- `Avatar`: размер корня, цвет и поверхность обрезки.
- `AvatarImage`: изображение, обрезанное по форме корня.
- `AvatarFallback`: запасной текст, размер которого рассчитывается от корня.
- `AvatarIcon`: запасная иконка, выровненная по размеру корня.

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

- `size` напрямую сопоставляется с токенами отступов.
- `variant` меняет оформление фона и переднего плана.
- Читаемость запасного текста сильно зависит от выбранного размера.

## Примеры

```css
.roundedAvatar {
  --avatar-br-ratio: 0.5;
}
```

```css
.compactAvatar {
  --avatar-size: 20px;
}
```

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

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