UI-система
Зачем нужно
Документ задаёт общую UI-систему для всех frontend-приложений экосистемы. Один источник дизайн-токенов, один UI Kit, единые правила доступности и тем.
Состав
| Слой | Что входит | Где живёт |
|---|---|---|
| Design tokens | цвет, типографика, spacing, radius, shadow, motion | packages/ui-kit/tokens |
| Иконки | единый icon set (SVG) | packages/ui-kit/icons |
| Базовые компоненты | Button, Input, Select, Checkbox, Radio, Switch, Tabs, Modal, Drawer, Toast, Tooltip, Popover, Menu, Avatar, Badge, Card, Table, Pagination, Stepper, ProgressBar, Skeleton, EmptyState, Alert, FormField | packages/ui-kit/components |
| Доменные компоненты | специфичные для домена | в проекте домена, поверх UI Kit |
| Темы | light, dark, контрастная | packages/ui-kit/themes |
| Локали | i18n-ключи интерфейса | packages/ui-kit/i18n |
MVP набора для шага 0
До старта доменов должны быть готовы и опубликованы в Storybook:
- tokens: color, typography, spacing, radius, shadow, motion;
- Button, IconButton, Input, Textarea, Select, Checkbox, Radio, Switch;
- Tabs, Modal, Drawer, Toast, Tooltip, Popover, Menu;
- Table, Pagination, FormField, Alert, Skeleton, EmptyState, Badge;
- базовые layout primitives: Stack, Inline, Grid, PageHeader.
Storybook живёт в packages/ui-kit/storybook и входит в CI visual smoke. Figma library ведётся design-командой; ссылки на Figma-файлы фиксируются в packages/ui-kit/README.md и не являются runtime dependency.
Дизайн-токены
Все токены определяются как CSS variables и TypeScript-константы. Токены делятся на:
Цвет
- семантические:
--color-bg-page,--color-bg-surface,--color-text-primary,--color-text-secondary,--color-border-default,--color-action-primary,--color-action-danger,--color-status-success,--color-status-warning,--color-status-error,--color-status-info; - палитра: оттенки заводятся как
--color-<hue>-<step>(50…900), но используются только через семантические алиасы.
Типографика
--font-family-base,--font-family-display,--font-family-mono;--font-size-xs|sm|md|lg|xl|2xl|3xl|4xl;--line-height-*;--font-weight-regular|medium|semibold|bold.
Spacing
--space-0|1|2|3|4|5|6|7|8|10|12|16|20|24 (базовая единица 4px).
Radius
--radius-sm|md|lg|xl|full.
Shadow, motion
--shadow-sm|md|lg, --motion-fast|normal|slow, --ease-standard|ease-emphasized.
Темы
light— по умолчанию;dark— переключатель в шапке;high-contrast— для accessibility.
Тема назначается через атрибут data-theme на <html>. Кодовое имя темы — стабильный ключ.
Доступность
- Минимальный контраст 4.5:1 для текста по WCAG 2.2 AA.
- Поддержка клавиатурной навигации во всех интерактивных компонентах.
- Корректные ARIA-атрибуты.
- Все формы имеют
<label>. - Уважение
prefers-reduced-motion. - Не полагаемся на цвет как единственный способ сообщения статуса.
Локализация
- Базовый язык: русский.
- Все строки — через i18n-ключи; никакого хардкода.
- Числа, даты, валюта — через
Intl.
Используется всеми frontend
| Frontend | Темы | UI Kit |
|---|---|---|
storefront-web | light + light-эмоциональные акценты в лендингах | UI Kit + расширенный набор лендинг-блоков |
lms-web | light + dark + high-contrast | UI Kit |
crm-web | light + dark | UI Kit |
competitions-web | light + dark | UI Kit |
task-bank-web | light + dark | UI Kit |
management-web | light + dark + dashboard-тема | UI Kit |
identity-admin-web | light + dark | UI Kit |
Storefront может использовать собственные расширенные блоки, но базовые компоненты — из UI Kit.
Запрещено
- Использовать собственные токены, пересекающиеся с общими.
- Хардкодить hex-цвета и пиксели в доменных компонентах.
- Изобретать собственный Button/Input в домене.
- Реализовывать свои модалки/тултипы при наличии в UI Kit.
- Игнорировать accessibility в новых компонентах.