138 lines
4.1 KiB
Markdown
138 lines
4.1 KiB
Markdown
# Frontend Guide: Geometry
|
||
|
||
## Целевая шкала радиусов
|
||
|
||
Это нормативная target-scale для frontend UI:
|
||
|
||
- `rounded-lg` для controls
|
||
- `rounded-xl` для secondary cards и grouped blocks
|
||
- `rounded-2xl` для primary panels, page sections и modal shells
|
||
- `rounded-full` для pills, avatar, search capsules и похожих капсул
|
||
|
||
Эта шкала обязательна для новых экранов и перерабатываемых блоков.
|
||
|
||
## Целевая шкала вертикального ритма
|
||
|
||
Радиусы сами по себе не делают систему согласованной. Если блоки одного веса выглядят похоже, у них должен быть одинаковый spacing.
|
||
|
||
Нормативная шкала:
|
||
|
||
- `gap-2` для compact control clusters и плотных inline actions
|
||
- `space-y-2` для плотного стека внутри одного secondary/detail block
|
||
- `space-y-3` для стека однотипных rows или peer secondary cards внутри одной primary panel
|
||
- `space-y-4` для стека крупных grouped blocks или major subsections внутри одной primary panel
|
||
- `space-y-6` для page-level section stack
|
||
|
||
Правило:
|
||
|
||
- spacing выбирается по весу блока и уровню иерархии, а не по конкретному экрану
|
||
- одинаковые `app-surface-muted rounded-xl` блоки не должны жить на `space-y-2` в одной зоне и на `space-y-4` в другой без явной UX-причины
|
||
|
||
## Controls
|
||
|
||
К controls относятся:
|
||
|
||
- input
|
||
- textarea
|
||
- select
|
||
- shared select trigger
|
||
- небольшие action buttons
|
||
- small menu buttons
|
||
|
||
Норма:
|
||
|
||
- `rounded-lg`
|
||
|
||
## Secondary cards
|
||
|
||
К secondary cards относятся:
|
||
|
||
- вложенные блоки внутри primary panel
|
||
- grouped filter blocks
|
||
- компактные detail sections
|
||
- utility cards среднего веса
|
||
|
||
Норма:
|
||
|
||
- `rounded-xl`
|
||
|
||
## Primary panels
|
||
|
||
К primary panels относятся:
|
||
|
||
- основные секции страниц
|
||
- большие feature containers
|
||
- modal shells
|
||
- крупные empty / detail / state containers
|
||
|
||
Норма:
|
||
|
||
- `rounded-2xl`
|
||
|
||
## Специальные случаи
|
||
|
||
Допустимо:
|
||
|
||
- `rounded-full` для capsules, chips, avatars
|
||
- редкое отдельное решение для hero/media container, если оно согласовано как special case
|
||
|
||
Недопустимо по умолчанию:
|
||
|
||
- новый “авторский” радиус без системной причины
|
||
|
||
## Legacy-геометрия
|
||
|
||
Считаются legacy:
|
||
|
||
- `rounded-md` у новых карточек и полей
|
||
- `rounded-[...]` без отдельного обоснования
|
||
|
||
Практический смысл:
|
||
|
||
- такое решение нельзя копировать в новые места
|
||
- при изменении существующего блока нужно оценить возможность перевода на базовую шкалу
|
||
|
||
## Таксономия карточек
|
||
|
||
### Primary container card
|
||
|
||
Признаки:
|
||
|
||
- основной контейнер feature-секции
|
||
- главный визуальный уровень страницы
|
||
|
||
Норма:
|
||
|
||
- `app-surface`
|
||
- `rounded-2xl`
|
||
|
||
### Secondary grouped block
|
||
|
||
Признаки:
|
||
|
||
- вложенный блок внутри primary panel
|
||
- объединяет несколько связанных элементов
|
||
|
||
Норма:
|
||
|
||
- `app-surface-muted`
|
||
- `rounded-xl`
|
||
|
||
### Inline utility / feedback block
|
||
|
||
Признаки:
|
||
|
||
- helper
|
||
- warning
|
||
- state summary
|
||
- selected or feedback fragment внутри карточки или формы
|
||
|
||
Норма:
|
||
|
||
- `app-selected`, `app-feedback-*` или `app-surface-muted`
|
||
- `rounded-lg` или `rounded-xl` в зависимости от веса блока
|
||
|
||
Правило:
|
||
|
||
- не превращать маленький helper в ещё одну primary-card конструкцию
|