marketplaces/docs/platform/03-theme-system.md

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

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