d2b4ff2018
Скилл переносится из ~/.claude/skills/aura-design в репозиторий обвязки: SKILL.md, справочники reference/ и набор kit/ (токены, base.css, компоненты React, оболочка AppShell, тест токенов, test-setup, примеры входа). install.sh ставит его в ~/.claude/skills/aura-design, --check его видит. tests/test-aura-design.sh проверяет структуру и инварианты набора. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
63 lines
5.7 KiB
Markdown
63 lines
5.7 KiB
Markdown
# AURA — основы
|
||
|
||
Значения — в `kit/styles/tokens.css`; здесь — какая роль для чего. Источник: `tokens.json` AURA 29.09.2026
|
||
(handoff AURA-xlsx-tool) и Figma «Универсалки»; расширения помечены *(расш.)*.
|
||
|
||
## Цветовые роли
|
||
|
||
| Токен | Светлая / тёмная | Для чего |
|
||
|---|---|---|
|
||
| `--color-bg-canvas` | `#f8f8f6` / `#181818` | фон окна (`body`) — тёплый серый, не белый |
|
||
| `--color-bg-surface` | `#fdfdfc` / `#1f1f1f` | панели, карточки, боковая панель, окна, поля ввода |
|
||
| `--color-bg-subtle` | `#fafaf8` / `#272727` | приглушённые зоны внутри панели, `Notice info`, боковые колонки карточки |
|
||
| `--color-bg-selected` | `#f4faf5` / `#272727` | выбранный пункт навигации, нажатый переключатель, плашка фильтра |
|
||
| `--color-bg-hover` *(расш.)* | `#f2f2f0` / `#272727` | hover строк, пунктов меню, иконок-кнопок |
|
||
| `--color-bg-track` *(расш.)* | `#eeeeeb` / `#272727` | трек `Segmented`, выключенная основная кнопка, нейтральный `Badge` |
|
||
| `--color-text-primary` | `#17171a` / `#f2f4f2` | основной текст |
|
||
| `--color-text-secondary` | `#818190` / `#d6dcd7` | подписи колонок, подзаголовки, счётчики, иконки в покое |
|
||
| `--color-text-placeholder` | `#5c6260` / `#aab2ac` | плейсхолдер |
|
||
| `--color-text-disabled` | `#737d76` / `#aab2ac` | недоступное |
|
||
| `--color-text-on-primary` | `#fff` / `#112016` | текст на зелёной и опасной кнопке (в тёмной — тёмный!) |
|
||
| `--color-border-default` | `#e5e5e0` / белый 10% | границы панелей, строк, полей |
|
||
| `--color-border-strong` | `#cfcfc8` / белый 17% | hover поля, вторичная кнопка, трек переключателя темы |
|
||
| `--color-border-selected` | `#568d32` / `#69a93d` | граница выбранного |
|
||
| `--color-action-primary` | `#568d32` / `#69a93d` | **единственный акцент**: основная кнопка, ссылки, активный раздел, фокус поля, ключи |
|
||
| `--color-action-primary-hover` | `#477729` / `#83c657` | hover акцента |
|
||
| `--color-action-danger(-hover)` | `#b42318` / `#ffaea5` | опасная кнопка (удалить) |
|
||
| `--color-status-success(-bg)` | зелёный / `#f4faf5` | успех: `Notice`, `Badge`, точка «на связи» |
|
||
| `--color-status-error(-bg)` | `#b42318` / `#e26c67`, фон `#fff1f0` / `#402725` | ошибка, просрочка, невалидное поле |
|
||
| `--color-status-warning(-bg, -border)` | `#d89614` / `#e8c17a` | предупреждение — только `Notice`, `Badge`, текст состояния; у полей ввода его нет |
|
||
| `--color-focus-ring` | зелёный 35% / голубой 55% | кольцо `:focus-visible` 2 px с отступом 2 px |
|
||
| `--color-overlay` *(расш.)* | чёрный 45% | подложка окна и выезжающей панели |
|
||
| `--shadow-popover`, `--shadow-dialog` *(расш.)* | | меню/выпадашки; окно |
|
||
| `--color-cat-1…6` *(расш.)* | терракота, охра, морская волна, фиолет, малиновый, серый | категории, метки, серии графиков; в тёмной — светлее |
|
||
|
||
Текст предупреждения на светлом фоне (`#d89614` нечитаем): `color-mix(in srgb, var(--color-status-warning) 55%,
|
||
var(--color-text-primary))`.
|
||
|
||
## Типографика
|
||
|
||
Шрифт `--font-ui`: **Mulish** (`@fontsource/mulish` 400/600/700, кириллица) — свободная замена Proxima Nova из AURA;
|
||
не Inter, не Montserrat (шире, съедает таблицы). Моно `--font-mono`: IBM Plex Mono 500/600 — ключи, код, суммы в коде.
|
||
Веса только **400 / 600 / 700**.
|
||
|
||
| Роль | Размер / строка | Вес | Токены |
|
||
|---|---|---|---|
|
||
| Заголовок страницы (`h1`) | 20/28 | 700 | `--fs-section` `--lh-section` |
|
||
| Заголовок блока, название приложения | 16/24 | 700 | `--fs-lg` `--lh-lg` |
|
||
| Текст, контролы | 14/20 | 400 | `--fs-body` `--lh-body` |
|
||
| Подпись поля, кнопка, активный пункт | 14/20 | 600 | |
|
||
| Мелкий: шапка таблицы, подсказка, бейдж, ошибка поля | 12/16 | 400/600 | `--fs-caption` `--lh-caption` |
|
||
|
||
Числа в таблицах — `font-variant-numeric: tabular-nums`, по правому краю.
|
||
|
||
## Геометрия
|
||
|
||
- Шаг 4 px: `--space-1…8` = 4, 8, 12, 16, 20, 24, 28, 32.
|
||
- Контрол **32 px** (`--control-h`), крупный 40 (`--control-h-lg`); радиус поля/иконки-кнопки **10** (`--control-radius`).
|
||
- Кнопки, сегменты, бейджи, плашки — «таблетка» `--radius-round`.
|
||
- Флажок/радио 16×16, радиус 4, точка радио 8; зона нажатия ≥ 24.
|
||
- Радиусы: 4 мелочь · 8 пункт меню · 12 меню, `Notice`, карточка · **16 панель** · 20 окно.
|
||
- Панель: отступ 16 (`md`) или 24 (`lg`). Страница: до 1440 px по центру, поля 24 (16 на телефоне).
|
||
- Движение: `--motion` 180 ms ease; нажатие 100 ms; `prefers-reduced-motion` гасит анимацию.
|