Design System — MyHoreca Pay

Modern fintech operations workspace для бухгалтера, оператора импорта, matching, allocation, posting и reconciliation.

Методологический референс: MyHoreca POS docs/ui (адаптирован под desktop accounting, не под restaurant POS).

Product principles

1. Ясность выше декоративности.
2. Предотвращение ошибок выше визуальной эффектности.
3. Предсказуемость выше оригинальности.
4. Скорость работы выше количества функций на экране.
5. Правила Шнейдермана обязательны.

Визуальная иерархия: объект → состояние → важные данные → действие → результат.

Visual identity

• Светлая тема (основная); tokens допускают dark theme позже.
• Canvas: нейтральный slate (semanticColors.canvas).
• Sidebar: navy/slate без декоративного gradient.
• Accent: blue.
• Success / warning / danger / info — только семантически.
• Тени: только overlays / raised surfaces (shadows.surface|floating|dialog).
• Скругления: control / panel / dialog / pill.
• Плотность data-heavy: compact по умолчанию.

Tokens

Путь: frontend/src/shared/ui/tokens/

Файл	Содержимое
colors.ts	Semantic color roles
spacing.ts	4–40 scale
typography.ts	Roles + fontWeights 400/500/600/700
radius.ts	control / panel / dialog / pill
shadows.ts	none / surface / floating / dialog
density.ts	compact / comfortable
layout.ts	shell / page metrics
zIndex.ts	stacking
statusColorMap.ts	StatusTone → Mantine color

Theme: frontend/src/shared/ui/theme/appTheme.ts.

Component hierarchy

@/shared/ui
  theme/ + tokens/
  icons/          — Tabler registry only
  layout/         — AppShell, Sidebar, TopBar
  components/     — Button, forms, table, feedback, MoneyAmount…
  domain/         — status resolvers + domain badges
  index.ts        — barrel only

Wrappers оправданы, если фиксируют variants, semantics, a11y или financial contract.

Buttons

Variants: primary | secondary | subtle | ghost | danger.

• Одно primary на контекст.
• Financial actions — с текстовой подписью.
• Danger отделён от primary.
• Loading не меняет ширину (Mantine loading).

Forms

Input, Select (+ facade SearchableSelect, ToggleField до полной миграции).

Правила: видимый label, единый error placement, единая высота controls.

Tables

Canonical: AppDataTable (alias DataTable).

Поддержка: density, sticky actions column, empty/loading/error, optional row click + keyboard, truncation via TableCellText, fillHeight for workspace layout.

Typography: header Text size="xs" uppercase; body fz="sm"; money via MoneyAmount (size="sm", tabular); status via StatusBadge (prefer size="xs" in dense tables).

Tree catalogs: ReferenceTreeTable — same token sizes (--mantine-font-size-xs/sm), shared Button for expand/collapse.

Text left / money & numbers right.

Filters

FilterBar, FilterChipGroup, ClearFiltersAction.

Search предсказуем; clear единый; toolbar actions отделены от filters.

Statuses

Резолверы в domain/statusResolvers.ts — страница не выбирает цвет по enum вручную.

Domain badges: PaymentStatusBadge, PostingStatusBadge, AllocationStatusBadge, ReconciliationStatusBadge, ImportStatusBadge, RecognitionStatusBadge, плюс существующие CounterpartyMatchStatusBadge, SyrveDocumentTypeBadge, ConfidenceIndicator.

Status = label + tone (+ icon).

Feedback

LoadingState, ErrorState (что / к чему / retry), EmptyState, NoPermissionState, InlineAlert.

Не full-page loader, если данные уже читаемы.

Page layout

PageShell (layout: scroll | workspace)
  PageHeader
  optional FilterBar / status strip
  PageSection / Data workspace
  optional sticky actions

Scroll contract (mandatory)

• Document (html/body) never scrolls.
• AppShell.Main does not wrap the whole page in a global scrollbar.
• PageShell layout="scroll" (default): the main work area scrolls.
• PageShell layout="workspace": chrome (header/tabs) stays fixed; only nested tables/panels scroll (AppDataTable fillHeight, tree fillHeight, etc.).

Desktop data pages with side-by-side panels (e.g. Syrve references) use workspace + CSS grid that stacks below ~992px.

Financial actions

Показывать объект, сумму, валюту, состояние, ожидаемый результат, warnings, primary action, итог.

Risky → ConfirmDialog с business summary.

Recognition workspace

Сохранить 55/45 desktop split, independent scroll, confidence, sticky confirm. Унифицировать toolbar/icon buttons через shared UI (миграция in progress).

Accessibility

Visible focus, labels, tooltip+aria-label для icon-only, status не только цветом, keyboard для row click, modal focus.

Responsive

Desktop 1280–1920 primary. Mobile: filters stack/drawer, tables horizontal scroll, recognition tabs preserved.

Prohibited

Glassmorphism, decorative gradients, emoji icons, page-local button systems, raw Mantine/Tabler в pages, card вокруг каждого блока, decorative KPI без действия.

Adding a component

1. Есть ли уже с той же ответственностью?
2. Можно ли расширить canonical?
3. Это system rule или локальный exception?
4. Обновить codegraph/manifest.yaml и docs при structural change.