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>
5.7 KiB
5.7 KiB
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 на телефоне). - Движение:
--motion180 ms ease; нажатие 100 ms;prefers-reduced-motionгасит анимацию.