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

## Обзор

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

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

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--surface-primary` | `PopoverContent` | Поверхность поповера. |
| `--surface-shadow` | `PopoverContent` | Приподнятость плавающего слоя. |

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

- `PopoverContent` использует семантику плавающих поверхностей темы, а не большой набор переменных `--popover-*`.

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

- Плотность содержимого часто влияет сильнее, чем изменения токенов, поэтому отступы и ширина важны не меньше цвета.

## Примеры

```css
.brand-theme {
  --surface-primary: oklch(99.2% 0.006 80);
  --surface-shadow: 0 20px 60px oklch(20% 0.02 60 / 0.14);
}
```

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

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