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

## Обзор

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

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

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--surface-primary` | `DrawerContent` | Основная поверхность панели. |
| `--surface-shadow` | `DrawerContent` | Тень приподнятой панели. |
| `--overlay` | `DrawerContent::backdrop` | Затемнение подложки. |

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

- `DrawerContent` опирается на токены поверхностей темы и локальные правила размеров и раскладки.
- Подложка — это `::backdrop` у `DrawerContent`. Она использует `--overlay`, размытие при `blurred`, равном `true`, и не имеет фона при `overlay`, равном `false`. Стилизуйте её через класс `DrawerContent` (`.my-drawer::backdrop`).
- Заголовки и кнопки закрытия внутри `DrawerContent` обычно должны наследовать поверхность панели, а не вводить отдельные цвета.

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

- `overlay={false}` и `blurred={false}` на `DrawerContent` меняют внешний вид подложки, но не модальное поведение.
- Длинное содержимое требует решений по раскладке больше, чем переопределений темы.
- Если панель ведёт себя как плавающий инспектор, сохраняйте контраст и тень достаточно выраженными, чтобы отделить её от содержимого страницы.

## Примеры

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

### Шапка в стиле Apple

Шапка с небольшим заголовком и круглой кнопкой закрытия 24px в углу — обычная композиция: `Heading` с `size={4}` и `fontWeight={600}` и `DrawerClose asChild` вокруг `IconButton`, абсолютно позиционированного в верхнем конечном углу (`position: absolute`, `insetBlockStart: 16`, `insetInlineEnd: 16`); его содержащим блоком служит открытый модальный `<dialog>`. У `IconButton` нет для этого опции размера или формы; круглая кнопка 24px получается из двух CSS-переменных, заданных на ней, — `--icon-button-size: 24px` и `--icon-button-br-ratio: 0.5`, — с `Icon size='xs'` внутри.

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

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