# 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-контракта между версиями.