Skip to main content

Кастомизатор тем

Визуальный инструмент для настройки внешнего вида маркетплейса в реальном времени.

Обзор​

Theme Customizer позволяет администраторам и дизайнерам настраивать цвета, шрифты, отступы и другие визуальные элементы маркетплейса без знания CSS.

Архитектура​

interface ThemeCustomizer {
  design_tokens: DesignTokenSystem;
  visual_editor: VisualEditor;
  preview_system: LivePreview;
  export_system: ThemeExporter;
  preset_manager: PresetManager;
}

Система дизайн-токенов​

Базовые токены​

interface DesignTokens {
  colors: ColorTokens;
  typography: TypographyTokens;
  spacing: SpacingTokens;
  borders: BorderTokens;
  shadows: ShadowTokens;
  animations: AnimationTokens;
}

interface ColorTokens {
  primary: ColorScale;
  secondary: ColorScale;
  accent: ColorScale;
  neutral: ColorScale;
  semantic: SemanticColors;
}

Цветовые шкалы​

interface ColorScale {
  50: string;   // Самый светлый
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;  // Основной цвет
  600: string;
  700: string;
  800: string;
  900: string;  // Самый темный
}

interface SemanticColors {
  success: ColorScale;
  warning: ColorScale;
  error: ColorScale;
  info: ColorScale;
}

Визуальный редактор​

Панель настроек​

interface CustomizerPanel {
  sections: CustomizerSection[];
  search: SearchFunction;
  favorites: FavoriteTokens;
  history: ChangeHistory;
}

interface CustomizerSection {
  id: string;
  title: string;
  icon: string;
  controls: CustomizerControl[];
  expanded: boolean;
}

Типы контролов​

type CustomizerControl = 
  | ColorPicker
  | FontSelector
  | SpacingSlider
  | BorderEditor
  | ShadowEditor
  | ToggleSwitch;

interface ColorPicker {
  type: 'color';
  token: string;
  label: string;
  palette?: ColorPalette;
  opacity?: boolean;
  gradient?: boolean;
}

interface FontSelector {
  type: 'font';
  token: string;
  label: string;
  fonts: FontOption[];
  preview_text: string;
}

Типографическая система​

Настройки шрифтов​

interface TypographyTokens {
  font_families: FontFamilyTokens;
  font_sizes: FontSizeTokens;
  font_weights: FontWeightTokens;
  line_heights: LineHeightTokens;
  letter_spacing: LetterSpacingTokens;
}

interface FontFamilyTokens {
  heading: string;
  body: string;
  mono: string;
  display?: string;
}

interface FontSizeTokens {
  xs: string;     // 12px
  sm: string;     // 14px
  base: string;   // 16px
  lg: string;     // 18px
  xl: string;     // 20px
  '2xl': string;  // 24px
  '3xl': string;  // 30px
  '4xl': string;  // 36px
}

Типографические стили​

interface TypographyStyle {
  font_family: string;
  font_size: string;
  font_weight: string;
  line_height: string;
  letter_spacing?: string;
  text_transform?: TextTransform;
}

Система отступов​

Spacing токены​

interface SpacingTokens {
  0: string;      // 0px
  1: string;      // 4px
  2: string;      // 8px
  3: string;      // 12px
  4: string;      // 16px
  5: string;      // 20px
  6: string;      // 24px
  8: string;      // 32px
  10: string;     // 40px
  12: string;     // 48px
  16: string;     // 64px
  20: string;     // 80px
  24: string;     // 96px
  32: string;     // 128px
}

Компонентные отступы​

interface ComponentSpacing {
  padding: SpacingValue;
  margin: SpacingValue;
  gap: SpacingValue;
}

type SpacingValue = 
  | string 
  | {
      top?: string;
      right?: string;
      bottom?: string;
      left?: string;
    };

Границы и тени​

Border токены​

interface BorderTokens {
  width: BorderWidthTokens;
  style: BorderStyleTokens;
  radius: BorderRadiusTokens;
}

interface BorderRadiusTokens {
  none: string;    // 0px
  sm: string;      // 2px
  base: string;    // 4px
  md: string;      // 6px
  lg: string;      // 8px
  xl: string;      // 12px
  '2xl': string;   // 16px
  '3xl': string;   // 24px
  full: string;    // 9999px
}

Shadow токены​

interface ShadowTokens {
  xs: string;
  sm: string;
  base: string;
  md: string;
  lg: string;
  xl: string;
  '2xl': string;
  inner: string;
}

Живой превью​

Режимы предварительного просмотра​

interface PreviewMode {
  id: string;
  name: string;
  viewport: ViewportSize;
  device_frame?: boolean;
  orientation?: 'portrait' | 'landscape';
}

interface ViewportSize {
  width: number;
  height: number;
  scale?: number;
}

Интерактивный превью​

interface LivePreview {
  iframe_url: string;
  sync_scroll: boolean;
  hover_highlight: boolean;
  click_navigate: boolean;
  performance_monitor: boolean;
}

Готовые пресеты​

Цветовые схемы​

interface ColorPreset {
  id: string;
  name: string;
  category: PresetCategory;
  colors: ColorTokens;
  preview: string;
  author?: string;
}

type PresetCategory = 
  | 'modern'
  | 'classic'
  | 'vibrant'
  | 'minimal'
  | 'dark'
  | 'nature'
  | 'corporate';

Типографические пресеты​

interface TypographyPreset {
  id: string;
  name: string;
  font_pairings: FontPairing[];
  use_case: TypographyUseCase[];
}

interface FontPairing {
  heading: string;
  body: string;
  accent?: string;
}

Адаптивный дизайн​

Breakpoint система​

interface ResponsiveTokens {
  breakpoints: BreakpointTokens;
  responsive_values: ResponsiveValueMap;
}

interface BreakpointTokens {
  sm: string;     // 640px
  md: string;     // 768px
  lg: string;     // 1024px
  xl: string;     // 1280px
  '2xl': string;  // 1536px
}

interface ResponsiveValue<T> {
  default: T;
  sm?: T;
  md?: T;
  lg?: T;
  xl?: T;
  '2xl'?: T;
}

Темная тема​

Автоматическое переключение​

interface DarkModeConfig {
  enabled: boolean;
  auto_switch: boolean;
  user_preference: boolean;
  system_preference: boolean;
  color_adjustments: DarkModeAdjustments;
}

interface DarkModeAdjustments {
  invert_colors: boolean;
  adjust_brightness: number;
  increase_contrast: boolean;
  custom_overrides: ColorOverride[];
}

Экспорт и импорт​

Форматы экспорта​

type ExportFormat = 
  | 'css_variables'
  | 'scss_variables'
  | 'js_tokens'
  | 'json_config'
  | 'figma_tokens';

interface ThemeExport {
  format: ExportFormat;
  tokens: DesignTokens;
  metadata: ExportMetadata;
  timestamp: string;
}

Импорт из дизайн-систем​

  • Figma Design Tokens
  • Adobe XD
  • Sketch
  • Style Dictionary
  • Custom JSON

Анимации и переходы​

Animation токены​

interface AnimationTokens {
  duration: DurationTokens;
  easing: EasingTokens;
  transitions: TransitionTokens;
}

interface DurationTokens {
  fast: string;     // 150ms
  base: string;     // 300ms
  slow: string;     // 500ms
  slower: string;   // 700ms
}

interface EasingTokens {
  linear: string;
  ease: string;
  'ease-in': string;
  'ease-out': string;
  'ease-in-out': string;
  bounce: string;
}

Компонентная кастомизация​

Настройка компонентов​

interface ComponentTheme {
  component_id: string;
  variants: ComponentVariant[];
  default_props: ComponentProps;
  style_overrides: StyleOverride[];
}

interface ComponentVariant {
  name: string;
  props: VariantProps;
  styles: VariantStyles;
}

Глобальные стили​

interface GlobalStyles {
  reset: boolean;
  normalize: boolean;
  custom_css: string;
  font_loading: FontLoadingStrategy;
  image_optimization: boolean;
}

Производительность​

Оптимизация CSS​

  • Удаление неиспользуемых стилей
  • Минификация CSS
  • Группировка медиа-запросов
  • Critical CSS extraction

Загрузка ресурсов​

interface ResourceOptimization {
  css_splitting: boolean;
  font_preloading: string[];
  image_optimization: ImageOptimizationConfig;
  cache_strategy: CacheStrategy;
}

API кастомизатора​

Theme API​

// Получение текущей темы
GET /api/themes/current

// Сохранение изменений
PUT /api/themes/current
{
  "tokens": {...},
  "metadata": {...}
}

// Применение пресета
POST /api/themes/apply-preset
{
  "preset_id": "modern-blue"
}

Webhook уведомления​

  • Изменение темы
  • Применение пресета
  • Публикация изменений
  • Откат к предыдущей версии