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

## Обзор

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

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

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--alert-background-color` | `Alert` | Фон поверхности. |
| `--alert-color` | `Alert`, дочерние части | Цвет переднего плана. |
| `--alert-border-color` | `Alert` | Оформление рамки. |
| `--alert-chroma-ratio` | `Alert` | Насыщенность, добавляемая к акцентному цвету в тонированном фоне. |

## Переменные уровня частей

- `Alert`: корневая поверхность сообщения.
- `AlertIcon`: наследует семантический цвет.
- `AlertMain`, `AlertTitle`, `AlertContent`: в основном наследуют цвет текста и ритм макета от корня.

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

- `variant` меняет семейство семантических цветов.
- `appearance` определяет, выглядит ли алерт залитой или обрамлённой поверхностью.
- Дочерние части наследуют цвет, а не задают отдельные визуальные системы.

## Примеры

```css
.brandAlert {
  --alert-border-color: var(--border-color);
}
```

```css
.softAlert {
  --alert-background-color: var(--surface-primary);
}
```

## Что не переопределять

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