0
# Design System Integration
1

2
The Design System Integration provides global design configuration, component customization, and theming integration across the TinyVue component ecosystem. It enables design token management, component-level configuration overrides, and custom design system integration.
3

4
## Capabilities
5

6
### Design Configuration Core
7

8
Global design configuration system for managing design tokens and component specifications.
9

10
```typescript { .api }
11
/**
12
 * Design configuration system core
13
 */
14
const design: {
15
  /** Symbol key for dependency injection */
16
  configKey: symbol;
17
  /** Global design configuration instance */
18
  configInstance: any;
19
};
20

21
/**
22
 * Provide design configuration to component tree
23
 * @param designConfig - Design configuration object
24
 */
25
function provideDesignConfig(designConfig: DesignConfig): void;
26

27
interface DesignConfig {
28
  /** Component-specific configurations */
29
  components?: Record<string, ComponentConfig>;
30
  /** Design system name */
31
  name?: string;
32
  /** Design system version */
33
  version?: string;
34
}
35

36
interface ComponentConfig {
37
  /** Component-specific props overrides */
38
  props?: Record<string, any>;
39
  /** Renderless function extensions */
40
  renderless?: (props: any, hooks: any, utils: any, sdk: any) => any;
41
  /** Component API extensions */
42
  api?: string[];
43
}
44
```
45

46
**Usage Examples:**
47

48
```typescript
49
import { provideDesignConfig } from "@opentiny/vue-common";
50

51
// Configure design system at application level
52
const designConfig = {
53
  name: 'CustomDesignSystem',
54
  version: '1.0.0',
55
  components: {
56
    Button: {
57
      props: {
58
        size: 'medium',
59
        variant: 'primary',
60
        borderRadius: '8px'
61
      },
62
      api: ['customAction']
63
    },
64
    Input: {
65
      props: {
66
        clearable: true,
67
        validateEvent: true
68
      }
69
    }
70
  }
71
};
72

73
// Provide to component tree
74
provideDesignConfig(designConfig);
75
```
76

77
### Custom Design Configuration
78

79
Support for external design systems and custom theming solutions like MetaERP integration.
80

81
```typescript { .api }
82
/**
83
 * Custom design configuration for external systems
84
 */
85
const customDesignConfig: {
86
  /** Design configuration instance */
87
  designConfig: DesignConfig | null;
88
  /** Tailwind merge function override */
89
  twMerge: (str: string) => string;
90
};
91
```
92

93
**Usage Examples:**
94

95
```typescript
96
import { customDesignConfig } from "@opentiny/vue-common";
97

98
// Configure custom design system (e.g., MetaERP)
99
customDesignConfig.designConfig = {
100
  name: 'MetaERP',
101
  components: {
102
    Button: {
103
      props: {
104
        theme: 'corporate',
105
        elevation: 2
106
      }
107
    }
108
  }
109
};
110

111
// Override Tailwind merge function
112
customDesignConfig.twMerge = (classString) => {
113
  // Custom class merging logic for MetaERP
114
  return customTailwindMerge(classString);
115
};
116
```
117

118
### Component-Level Configuration
119

120
Dynamic component configuration resolution with prop inheritance and override capabilities.
121

122
**Automatic Prop Resolution:**
123

124
```typescript
125
// Component automatically receives design configuration
126
export default {
127
  setup(props, context) {
128
    return setup({
129
      props,
130
      context,
131
      renderless: (props, hooks, utils) => {
132
        // Design configuration is automatically available
133
        const { designConfig, globalDesignConfig } = utils;
134
        
135
        // Component-specific config
136
        const componentConfig = designConfig;
137
        const globalConfig = globalDesignConfig;
138
        
139
        return {
140
          componentConfig,
141
          globalConfig
142
        };
143
      },
144
      api: ['componentConfig', 'globalConfig']
145
    });
146
  }
147
};
148
```
149

150
**Manual Configuration Access:**
151

152
```typescript
153
import { hooks } from "@opentiny/vue-common";
154

155
export default {
156
  setup() {
157
    // Access design configuration through injection
158
    const globalDesign = hooks.inject(design.configKey, {});
159
    const componentName = 'Button'; // Component name without prefix
160
    
161
    const componentConfig = hooks.computed(() => {
162
      const config = globalDesign?.value || globalDesign || {};
163
      return config.components?.[componentName] || {};
164
    });
165
    
166
    return {
167
      componentConfig
168
    };
169
  }
170
};
171
```
172

173
## Advanced Configuration Patterns
174

175
### Multi-Theme Design System
176

177
Design system that supports multiple themes with component-specific overrides.
178

179
```typescript
180
import { provideDesignConfig, resolveTheme } from "@opentiny/vue-common";
181

182
export default {
183
  setup(props, context) {
184
    const currentTheme = resolveTheme(props, context);
185
    
186
    const themeConfigs = {
187
      tiny: {
188
        name: 'TinyDesign',
189
        components: {
190
          Button: {
191
            props: {
192
              borderRadius: '4px',
193
              shadow: 'sm',
194
              fontWeight: 'medium'
195
            }
196
          }
197
        }
198
      },
199
      saas: {
200
        name: 'SaaSDesign',
201
        components: {
202
          Button: {
203
            props: {
204
              borderRadius: '8px',
205
              shadow: 'md',
206
              fontWeight: 'semibold'
207
            }
208
          }
209
        }
210
      }
211
    };
212
    
213
    const designConfig = hooks.computed(() => themeConfigs[currentTheme]);
214
    
215
    hooks.watch(designConfig, (newConfig) => {
216
      provideDesignConfig(newConfig);
217
    }, { immediate: true });
218
    
219
    return {
220
      currentTheme,
221
      designConfig
222
    };
223
  }
224
};
225
```
226

227
### Design Token Management
228

229
Centralized design token management with component integration.
230

231
```typescript
232
import { provideDesignConfig } from "@opentiny/vue-common";
233

234
const designTokens = {
235
  colors: {
236
    primary: {
237
      50: '#eff6ff',
238
      100: '#dbeafe',
239
      500: '#3b82f6',
240
      600: '#2563eb',
241
      900: '#1e3a8a'
242
    },
243
    semantic: {
244
      success: '#10b981',
245
      warning: '#f59e0b',
246
      error: '#ef4444',
247
      info: '#3b82f6'
248
    }
249
  },
250
  spacing: {
251
    xs: '0.25rem',
252
    sm: '0.5rem',
253
    md: '1rem',
254
    lg: '1.5rem',
255
    xl: '2rem'
256
  },
257
  typography: {
258
    fontSizes: {
259
      xs: '0.75rem',
260
      sm: '0.875rem',
261
      base: '1rem',
262
      lg: '1.125rem',
263
      xl: '1.25rem'
264
    },
265
    fontWeights: {
266
      normal: '400',
267
      medium: '500',
268
      semibold: '600',
269
      bold: '700'
270
    }
271
  }
272
};
273

274
const tokenBasedDesignConfig = {
275
  name: 'TokenBasedDesign',
276
  tokens: designTokens,
277
  components: {
278
    Button: {
279
      props: {
280
        primaryColor: designTokens.colors.primary[500],
281
        padding: `${designTokens.spacing.sm} ${designTokens.spacing.md}`,
282
        fontSize: designTokens.typography.fontSizes.sm,
283
        fontWeight: designTokens.typography.fontWeights.medium
284
      }
285
    },
286
    Input: {
287
      props: {
288
        borderColor: designTokens.colors.primary[200],
289
        focusColor: designTokens.colors.primary[500],
290
        fontSize: designTokens.typography.fontSizes.base
291
      }
292
    }
293
  }
294
};
295

296
provideDesignConfig(tokenBasedDesignConfig);
297
```
298

299
### Component Factory with Design Integration
300

301
Create components that automatically integrate with design system configuration.
302

303
```typescript
304
import { defineComponent, setup, hooks } from "@opentiny/vue-common";
305

306
function createDesignAwareComponent(componentName, defaultConfig, renderless) {
307
  return defineComponent({
308
    name: `Tiny${componentName}`,
309
    setup(props, context) {
310
      return setup({
311
        props,
312
        context,
313
        renderless: (props, hooks, utils) => {
314
          // Merge default config with design system config
315
          const { designConfig } = utils;
316
          const componentConfig = {
317
            ...defaultConfig,
318
            ...designConfig?.props || {}
319
          };
320
          
321
          // Enhanced renderless with config
322
          const sdk = renderless(props, hooks, utils, componentConfig);
323
          
324
          // Apply design system API extensions
325
          if (designConfig?.renderless) {
326
            Object.assign(sdk, designConfig.renderless(props, hooks, utils, sdk));
327
          }
328
          
329
          return {
330
            ...sdk,
331
            componentConfig
332
          };
333
        },
334
        api: ['componentConfig', ...(defaultConfig.api || [])]
335
      });
336
    }
337
  });
338
}
339

340
// Usage
341
const SmartButton = createDesignAwareComponent(
342
  'SmartButton',
343
  {
344
    size: 'medium',
345
    variant: 'primary',
346
    api: ['handleClick']
347
  },
348
  (props, hooks, utils, config) => {
349
    const handleClick = () => {
350
      console.log('Button clicked with config:', config);
351
    };
352
    
353
    return {
354
      handleClick,
355
      config
356
    };
357
  }
358
);
359
```
360

361
## Integration with Component Setup
362

363
The design system automatically integrates with the component setup system:
364

365
### Automatic Design Injection
366

367
```typescript
368
import { setup } from "@opentiny/vue-common";
369

370
export default {
371
  setup(props, context) {
372
    return setup({
373
      props,
374
      context,
375
      renderless: (props, hooks, utils) => {
376
        // Design configuration automatically available
377
        const { 
378
          designConfig,      // Component-specific config
379
          globalDesignConfig // Global design config
380
        } = utils;
381
        
382
        // Use design configuration
383
        const buttonSize = designConfig?.props?.size || 'medium';
384
        const theme = globalDesignConfig?.theme || 'default';
385
        
386
        return {
387
          buttonSize,
388
          theme
389
        };
390
      },
391
      api: ['buttonSize', 'theme']
392
    });
393
  }
394
};
395
```
396

397
### Design-Aware Prop Resolution
398

399
Props are automatically resolved with design system overrides:
400

401
```typescript
402
export default {
403
  props: {
404
    size: String,
405
    variant: String
406
  },
407
  setup(props, context) {
408
    return setup({
409
      props,
410
      context,
411
      renderless: (props, hooks, utils) => {
412
        // Props may be overridden by design configuration
413
        // Final props include both user props and design system defaults
414
        
415
        const finalProps = {
416
          size: props.size,      // User prop takes precedence
417
          variant: props.variant // Falls back to design system default
418
        };
419
        
420
        return {
421
          finalProps
422
        };
423
      },
424
      api: ['finalProps']
425
    });
426
  }
427
};
428
```
429

430
## MCP Integration
431

432
### Multi-Component Platform Configuration
433

434
Advanced component platform integration for enterprise scenarios.
435

436
```typescript { .api }
437
/**
438
 * Register MCP (Multi-Component Platform) configuration
439
 * @param mcpConfig - MCP configuration object
440
 * @param defineTool - Tool definition function
441
 */
442
function registerMcpConfig(mcpConfig: any, defineTool: any): void;
443
```
444

445
**Usage Examples:**
446

447
```typescript
448
import { registerMcpConfig } from "@opentiny/vue-common";
449

450
// Register MCP configuration
451
const mcpConfig = {
452
  platform: 'enterprise',
453
  components: {
454
    Button: {
455
      analytics: true,
456
      accessibility: 'enhanced',
457
      permissions: ['read', 'interact']
458
    }
459
  }
460
};
461

462
const defineTool = (vm, config, componentConfig) => {
463
  // Define MCP tools for component
464
  if (componentConfig.analytics) {
465
    vm.trackInteraction = (event) => {
466
      // Analytics integration
467
    };
468
  }
469
};
470

471
registerMcpConfig(mcpConfig, defineTool);
472
```
473

474
## Performance Considerations
475

476
The design system integration is optimized for performance:
477

478
### Lazy Evaluation
479
- Design configurations are computed only when needed
480
- Component-specific configs are cached per component type
481

482
### Memory Efficiency  
483
- Shared design configuration instances across components
484
- Automatic cleanup of unused configurations
485

486
### Build-Time Optimization
487
- Design configurations can be tree-shaken when not used
488
- Static analysis friendly for build tools