69 lines
2.6 KiB
Markdown
69 lines
2.6 KiB
Markdown
|
# 03. Тема и дизайн-система
|
|||
|
|
|
|||
|
|
## Назначение
|
|||
|
|
Тема задает визуальные токены бренда tenant: цвета, типографику, радиусы, тени и базовые параметры визуальной консистентности.
|
|||
|
|
|
|||
|
|
## Поведение системы
|
|||
|
|
- Theme токены загружаются из bootstrap.json.
|
|||
|
|
- Frontend применяет токены через CSS-переменные.
|
|||
|
|
- Компоненты и виджеты используют только токены, а не hardcoded brand-значения.
|
|||
|
|
|
|||
|
|
## Обязательные свойства JSON
|
|||
|
|
- theme.themeId
|
|||
|
|
- theme.palette.primary
|
|||
|
|
- theme.palette.textPrimary
|
|||
|
|
- theme.palette.backgroundPrimary
|
|||
|
|
- theme.typography.primaryFontFamily
|
|||
|
|
- theme.typography.baseFontSize
|
|||
|
|
|
|||
|
|
## Опциональные свойства JSON
|
|||
|
|
- theme.palette.secondary
|
|||
|
|
- theme.palette.accent
|
|||
|
|
- theme.borderRadiusScale
|
|||
|
|
- theme.shadows
|
|||
|
|
- theme.iconSet
|
|||
|
|
- theme.mode
|
|||
|
|
|
|||
|
|
## Строгие правила
|
|||
|
|
- Нельзя хардкодить tenant-цвета в компонентах.
|
|||
|
|
- Нельзя задавать типографику вне theme токенов для брендовых элементов.
|
|||
|
|
- Нельзя смешивать несколько themeId одновременно для одной витрины.
|
|||
|
|
- При отсутствии опционального токена используется системный fallback.
|
|||
|
|
|
|||
|
|
## Пример theme JSON
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"theme": {
|
|||
|
|
"themeId": "novo-light",
|
|||
|
|
"mode": "light",
|
|||
|
|
"palette": {
|
|||
|
|
"primary": "#2F6E5D",
|
|||
|
|
"secondary": "#8FA9A2",
|
|||
|
|
"accent": "#B9D9CF",
|
|||
|
|
"textPrimary": "#1F322D",
|
|||
|
|
"backgroundPrimary": "#FFFFFF"
|
|||
|
|
},
|
|||
|
|
"typography": {
|
|||
|
|
"primaryFontFamily": "DM Sans, sans-serif",
|
|||
|
|
"headingFontFamily": "DM Sans, sans-serif",
|
|||
|
|
"baseFontSize": 16
|
|||
|
|
},
|
|||
|
|
"borderRadiusScale": {
|
|||
|
|
"sm": "8px",
|
|||
|
|
"md": "12px",
|
|||
|
|
"lg": "16px"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Ответственность Frontend
|
|||
|
|
- Маппить токены в CSS custom properties.
|
|||
|
|
- Применять fallback токены для опциональных полей.
|
|||
|
|
- Обеспечивать визуальную консистентность между страницами и виджетами.
|
|||
|
|
|
|||
|
|
## Ответственность Backend
|
|||
|
|
- Выдавать валидный theme объект для каждого tenant.
|
|||
|
|
- Контролировать полноту обязательных токенов.
|
|||
|
|
- Поддерживать совместимость theme-контракта между версиями.
|