diff --git a/docs/nubes-design-system.md b/docs/nubes-design-system.md new file mode 100644 index 0000000..1aaa733 --- /dev/null +++ b/docs/nubes-design-system.md @@ -0,0 +1,112 @@ +# Дизайн-система платформы Nubes + +> Извлечено из сохранённой страницы `h.h` (deck-test.ngcloud.ru) + +--- + +## Сетка и контейнеры + +| Элемент | Класс | Описание | +|---|---|---| +| Страница | `navigation:flex`, `services:grid` | Flex/grid на всём | +| Карточка | `ui-kit:bg-card ui-kit:rounded-xl ui-kit:border ui-kit:shadow-sm` | Белая карточка, border-radius 12px | +| Заголовок карточки | `ui-kit:bg-brand-grey-light ui-kit:px-3 ui-kit:py-3` | Серый фон `#f3f4f6`, padding 12px | +| Тело карточки | `ui-kit:px-3 ui-kit:py-3` | padding 12px | + +--- + +## Цвета (переменные) + +| Переменная | Назначение | Примерный HEX | +|---|---|---| +| `--brand-primary` | Основной цвет | `#2563eb` (синий) | +| `--brand-gray` | Цвет границ | `#d1d5db` | +| `--brand-grey-light` | Фон заголовков | `#f3f4f6` | +| `--brand-primary-dark` | Ховер ссылок | `#1d4ed8` | + +--- + +## Формы + +``` +form-table (класс services:): + grid-template-columns: fit-content(200px) minmax(200px, 1fr) 0px + gap: 8px 16px +``` + +| Элемент | Класс | Стиль | +|---|---|---| +| Лейбл | `ui-kit:text-sm ui-kit:leading-none ui-kit:font-normal ui-kit:mb-1 ui-kit:ml-1` | 14px, sans-serif, отступ слева | +| Инпут | `ui-kit:h-9 ui-kit:rounded-md ui-kit:border ui-kit:px-3 ui-kit:text-sm` | h=36px, border, padding | +| Текстареа | `ui-kit:rounded-md ui-kit:border ui-kit:px-3 ui-kit:py-2 ui-kit:text-sm` | авто-height | + +--- + +## Кнопки + +| Тип | Стиль | Класс | +|---|---|---| +| Обычная | border, bg-white, hover:bg-accent | `ui-kit:border ui-kit:bg-background ui-kit:h-8 ui-kit:rounded-md` | +| Удалить | bg-destructive, text-white | `ui-kit:bg-destructive ui-kit:text-white` | +| Иконка | size-5 | `ui-kit:size-5 ui-kit:cursor-pointer` | + +Все кнопки: `ui-kit:h-8 ui-kit:rounded-md ui-kit:gap-1.5 ui-kit:px-3`, 14px шрифт. + +--- + +## Таблицы + +| Элемент | Стиль | +|---|---| +| Обёртка | `ui-kit:rounded-md ui-kit:border ui-kit:overflow-hidden` | +| Шапка (th) | `ui-kit:bg-brand-grey-light`, uppercase, `ui-kit:py-1 ui-kit:px-2`, border-right | +| Ячейка (td) | `ui-kit:px-2 ui-kit:py-1`, border-right, border-bottom | +| Строка (tr) | `ui-kit:border-b ui-kit:border-brand-gray-8`, hover: `ui-kit:bg-brand-grey-light/50` | + +--- + +## Иконки + +Используются: **Lucide** (`lucide-*`) + +Часто используемые: +- `lucide-square-pen` — редактировать +- `lucide-rotate-cw` — перезапустить +- `lucide-trash` — удалить +- `lucide-pause` — остановить +- `lucide-play` — запустить +- `lucide-save` — сохранить +- `lucide-x` — закрыть +- `lucide-copy` — копировать +- `lucide-check` — успех (зелёный) +- `lucide-x` — ошибка (красный) + +--- + +## Типографика + +- Основной шрифт: system-ui (Segoe UI, Roboto, etc.) +- Размер: `text-sm` = 14px, `text-base` = 16px +- Межстрочный: `leading-none` (1), `leading-normal` (1.5) +- Цвет текста: `#1a1a1a` +- Muted: `text-muted-foreground` = серый `#6b7280` +- Заголовки карточек: `font-semibold`, 16px + +--- + +## Навигация (слева) + +- Ширина: `var(--sidebar-width)` = 12rem (192px) +- Свёрнуто: `var(--sidebar-width-icon)` = 4.5rem (72px) +- Верхняя панель: h-20 (80px), border-t-4 border-t-blue-500 +- Лого: инлайн SVG, 150px ширина + +--- + +## Состояния + +| Статус | Цвет | +|---|---| +| Успех / running | `text-green-500` + иконка `lucide-check` | +| Ошибка | `text-red-500` + иконка `lucide-x` | +| Предупреждение | `text-amber-500` |