@mkatogui/uds-tokens 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js ADDED
@@ -0,0 +1,344 @@
1
+ /**
2
+ * Universal Design System -- Design Tokens (CommonJS)
3
+ * Auto-generated by @katonometrica/uds-tokens build script
4
+ */
5
+ "use strict";
6
+
7
+ const tokens = {
8
+ color: {
9
+ primitive: {
10
+ blue: {
11
+ '50': 'var(--color-primitive-blue-50, #EFF6FF)',
12
+ '100': 'var(--color-primitive-blue-100, #DBEAFE)',
13
+ '200': 'var(--color-primitive-blue-200, #BFDBFE)',
14
+ '300': 'var(--color-primitive-blue-300, #93C5FD)',
15
+ '400': 'var(--color-primitive-blue-400, #60A5FA)',
16
+ '500': 'var(--color-primitive-blue-500, #3B82F6)',
17
+ '600': 'var(--color-primitive-blue-600, #2563EB)',
18
+ '700': 'var(--color-primitive-blue-700, #1D4ED8)',
19
+ '800': 'var(--color-primitive-blue-800, #1E40AF)',
20
+ '900': 'var(--color-primitive-blue-900, #1E3A8A)',
21
+ '950': 'var(--color-primitive-blue-950, #172554)',
22
+ },
23
+ purple: {
24
+ '50': 'var(--color-primitive-purple-50, #F3E8FF)',
25
+ '100': 'var(--color-primitive-purple-100, #E9D5FF)',
26
+ '200': 'var(--color-primitive-purple-200, #D8B4FE)',
27
+ '400': 'var(--color-primitive-purple-400, #A78BFA)',
28
+ '500': 'var(--color-primitive-purple-500, #8B5CF6)',
29
+ '600': 'var(--color-primitive-purple-600, #7C3AED)',
30
+ '700': 'var(--color-primitive-purple-700, #6D28D9)',
31
+ '800': 'var(--color-primitive-purple-800, #5B21B6)',
32
+ '900': 'var(--color-primitive-purple-900, #4C1D95)',
33
+ },
34
+ green: {
35
+ '50': 'var(--color-primitive-green-50, #ECFDF5)',
36
+ '100': 'var(--color-primitive-green-100, #D1FAE5)',
37
+ '400': 'var(--color-primitive-green-400, #34D399)',
38
+ '500': 'var(--color-primitive-green-500, #10B981)',
39
+ '600': 'var(--color-primitive-green-600, #059669)',
40
+ '700': 'var(--color-primitive-green-700, #047857)',
41
+ },
42
+ red: {
43
+ '50': 'var(--color-primitive-red-50, #FEF2F2)',
44
+ '100': 'var(--color-primitive-red-100, #FEE2E2)',
45
+ '400': 'var(--color-primitive-red-400, #F87171)',
46
+ '500': 'var(--color-primitive-red-500, #EF4444)',
47
+ '600': 'var(--color-primitive-red-600, #DC2626)',
48
+ '700': 'var(--color-primitive-red-700, #B91C1C)',
49
+ },
50
+ amber: {
51
+ '50': 'var(--color-primitive-amber-50, #FFFBEB)',
52
+ '100': 'var(--color-primitive-amber-100, #FEF3C7)',
53
+ '400': 'var(--color-primitive-amber-400, #FBBF24)',
54
+ '500': 'var(--color-primitive-amber-500, #F59E0B)',
55
+ '600': 'var(--color-primitive-amber-600, #D97706)',
56
+ '700': 'var(--color-primitive-amber-700, #B45309)',
57
+ },
58
+ cyan: {
59
+ '400': 'var(--color-primitive-cyan-400, #22D3EE)',
60
+ '500': 'var(--color-primitive-cyan-500, #06B6D4)',
61
+ '600': 'var(--color-primitive-cyan-600, #00D4FF)',
62
+ },
63
+ 'neon-green': {
64
+ '500': 'var(--color-primitive-neon-green-500, #00FF88)',
65
+ },
66
+ pink: {
67
+ '500': 'var(--color-primitive-pink-500, #EC4899)',
68
+ '600': 'var(--color-primitive-pink-600, #DB2777)',
69
+ },
70
+ neutral: {
71
+ '0': 'var(--color-primitive-neutral-0, #FFFFFF)',
72
+ '50': 'var(--color-primitive-neutral-50, #FBFBFD)',
73
+ '100': 'var(--color-primitive-neutral-100, #F8F8FA)',
74
+ '150': 'var(--color-primitive-neutral-150, #F0F0F5)',
75
+ '200': 'var(--color-primitive-neutral-200, #E8E8F0)',
76
+ '300': 'var(--color-primitive-neutral-300, #C8C8D4)',
77
+ '400': 'var(--color-primitive-neutral-400, #999999)',
78
+ '500': 'var(--color-primitive-neutral-500, #6B6B7B)',
79
+ '600': 'var(--color-primitive-neutral-600, #555566)',
80
+ '700': 'var(--color-primitive-neutral-700, #3A3A4A)',
81
+ '800': 'var(--color-primitive-neutral-800, #1A1A24)',
82
+ '850': 'var(--color-primitive-neutral-850, #111118)',
83
+ '900': 'var(--color-primitive-neutral-900, #0A0A0F)',
84
+ '1000': 'var(--color-primitive-neutral-1000, #000000)',
85
+ },
86
+ navy: {
87
+ '700': 'var(--color-primitive-navy-700, #2B6CB0)',
88
+ '800': 'var(--color-primitive-navy-800, #1A365D)',
89
+ '900': 'var(--color-primitive-navy-900, #1A202C)',
90
+ },
91
+ },
92
+ semantic: {
93
+ bg: {
94
+ primary: 'var(--color-semantic-bg-primary, #FFFFFF)',
95
+ secondary: 'var(--color-semantic-bg-secondary, #F8F8FA)',
96
+ tertiary: 'var(--color-semantic-bg-tertiary, #F0F0F5)',
97
+ inverse: 'var(--color-semantic-bg-inverse, #111118)',
98
+ },
99
+ text: {
100
+ primary: 'var(--color-semantic-text-primary, #111118)',
101
+ secondary: 'var(--color-semantic-text-secondary, #555566)',
102
+ tertiary: 'var(--color-semantic-text-tertiary, #6B6B7B)',
103
+ 'on-brand': 'var(--color-semantic-text-on-brand, #FFFFFF)',
104
+ },
105
+ border: {
106
+ default: 'var(--color-semantic-border-default, #C8C8D4)',
107
+ input: 'var(--color-semantic-border-input, #999999)',
108
+ subtle: 'var(--color-semantic-border-subtle, #E8E8F0)',
109
+ },
110
+ brand: {
111
+ primary: 'var(--color-semantic-brand-primary, #2563EB)',
112
+ secondary: 'var(--color-semantic-brand-secondary, #3B82F6)',
113
+ accent: 'var(--color-semantic-brand-accent, #60A5FA)',
114
+ muted: 'var(--color-semantic-brand-muted, #DBEAFE)',
115
+ },
116
+ success: 'var(--color-semantic-success, #059669)',
117
+ 'success-bg': 'var(--color-semantic-success-bg, #ECFDF5)',
118
+ warning: 'var(--color-semantic-warning, #D97706)',
119
+ 'warning-bg': 'var(--color-semantic-warning-bg, #FFFBEB)',
120
+ error: 'var(--color-semantic-error, #DC2626)',
121
+ 'error-bg': 'var(--color-semantic-error-bg, #FEF2F2)',
122
+ info: 'var(--color-semantic-info, #2563EB)',
123
+ 'info-bg': 'var(--color-semantic-info-bg, #EFF6FF)',
124
+ 'surface-default': 'var(--color-semantic-surface-default, {color.primitive.neutral.white})',
125
+ 'surface-hover': 'var(--color-semantic-surface-hover, #F5F5FA)',
126
+ 'surface-active': 'var(--color-semantic-surface-active, #EDEDF5)',
127
+ 'text-disabled': 'var(--color-semantic-text-disabled, #A0A0B0)',
128
+ 'border-strong': 'var(--color-semantic-border-strong, #6E6E7E)',
129
+ overlay: 'var(--color-semantic-overlay, rgba(0, 0, 0, 0.5))',
130
+ },
131
+ chart: {
132
+ '1': 'var(--color-chart-1, #4F46E5)',
133
+ '2': 'var(--color-chart-2, #0EA5E9)',
134
+ '3': 'var(--color-chart-3, #10B981)',
135
+ '4': 'var(--color-chart-4, #F59E0B)',
136
+ '5': 'var(--color-chart-5, #EF4444)',
137
+ '6': 'var(--color-chart-6, #8B5CF6)',
138
+ '7': 'var(--color-chart-7, #EC4899)',
139
+ '8': 'var(--color-chart-8, #06B6D4)',
140
+ },
141
+ },
142
+ typography: {
143
+ fontFamily: {
144
+ sans: 'var(--font-family-sans, Inter, system-ui, -apple-system, sans-serif)',
145
+ display: 'var(--font-family-display, Inter, system-ui, sans-serif)',
146
+ mono: 'var(--font-family-mono, "JetBrains Mono", Menlo, Consolas, monospace)',
147
+ serif: 'var(--font-family-serif, "Source Serif 4", Georgia, serif)',
148
+ },
149
+ fontWeight: {
150
+ regular: 'var(--font-weight-regular, 400)',
151
+ medium: 'var(--font-weight-medium, 500)',
152
+ semibold: 'var(--font-weight-semibold, 600)',
153
+ bold: 'var(--font-weight-bold, 700)',
154
+ extrabold: 'var(--font-weight-extrabold, 800)',
155
+ },
156
+ fontSize: {
157
+ 'display-xl': 'var(--font-size-display-xl, 4.5rem)',
158
+ 'display-lg': 'var(--font-size-display-lg, 3.75rem)',
159
+ 'display-md': 'var(--font-size-display-md, 3rem)',
160
+ 'heading-lg': 'var(--font-size-heading-lg, 2.25rem)',
161
+ 'heading-md': 'var(--font-size-heading-md, 1.75rem)',
162
+ 'heading-sm': 'var(--font-size-heading-sm, 1.375rem)',
163
+ 'body-lg': 'var(--font-size-body-lg, 1.25rem)',
164
+ 'body-md': 'var(--font-size-body-md, 1rem)',
165
+ 'body-sm': 'var(--font-size-body-sm, 0.875rem)',
166
+ label: 'var(--font-size-label, 0.75rem)',
167
+ },
168
+ lineHeight: {
169
+ display: 'var(--line-height-display, 1.1)',
170
+ heading: 'var(--line-height-heading, 1.25)',
171
+ body: 'var(--line-height-body, 1.6)',
172
+ tight: 'var(--line-height-tight, 1.05)',
173
+ },
174
+ },
175
+ spacing: {
176
+ '1': 'var(--spacing-1, 4px)',
177
+ '2': 'var(--spacing-2, 8px)',
178
+ '3': 'var(--spacing-3, 12px)',
179
+ '4': 'var(--spacing-4, 16px)',
180
+ '5': 'var(--spacing-5, 20px)',
181
+ '6': 'var(--spacing-6, 24px)',
182
+ '8': 'var(--spacing-8, 32px)',
183
+ '10': 'var(--spacing-10, 40px)',
184
+ '12': 'var(--spacing-12, 48px)',
185
+ '16': 'var(--spacing-16, 64px)',
186
+ '20': 'var(--spacing-20, 80px)',
187
+ '24': 'var(--spacing-24, 96px)',
188
+ '32': 'var(--spacing-32, 128px)',
189
+ },
190
+ size: {
191
+ 'container-max': 'var(--size-container-max, 1280px)',
192
+ 'container-narrow': 'var(--size-container-narrow, 768px)',
193
+ 'container-wide': 'var(--size-container-wide, 1440px)',
194
+ 'icon-sm': 'var(--size-icon-sm, 16px)',
195
+ 'icon-md': 'var(--size-icon-md, 20px)',
196
+ 'icon-lg': 'var(--size-icon-lg, 24px)',
197
+ 'icon-xl': 'var(--size-icon-xl, 32px)',
198
+ },
199
+ shadow: {
200
+ xs: 'var(--shadow-xs, 0px 1px 2px 0px rgba(0,0,0,0.05))',
201
+ sm: 'var(--shadow-sm, 0px 2px 4px 0px rgba(0,0,0,0.06), 0px 1px 2px 0px rgba(0,0,0,0.04))',
202
+ md: 'var(--shadow-md, 0px 4px 12px 0px rgba(0,0,0,0.08), 0px 2px 4px 0px rgba(0,0,0,0.04))',
203
+ lg: 'var(--shadow-lg, 0px 12px 32px 0px rgba(0,0,0,0.12), 0px 4px 8px 0px rgba(0,0,0,0.06))',
204
+ xl: 'var(--shadow-xl, 0px 24px 64px 0px rgba(0,0,0,0.16))',
205
+ },
206
+ motion: {
207
+ duration: {
208
+ instant: 'var(--motion-duration-instant, 100ms)',
209
+ fast: 'var(--motion-duration-fast, 150ms)',
210
+ normal: 'var(--motion-duration-normal, 250ms)',
211
+ slow: 'var(--motion-duration-slow, 400ms)',
212
+ slower: 'var(--motion-duration-slower, 600ms)',
213
+ slowest: 'var(--motion-duration-slowest, 1000ms)',
214
+ },
215
+ easing: {
216
+ default: 'var(--motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1))',
217
+ in: 'var(--motion-easing-in, cubic-bezier(0.4, 0, 1, 1))',
218
+ out: 'var(--motion-easing-out, cubic-bezier(0, 0, 0.2, 1))',
219
+ spring: 'var(--motion-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1))',
220
+ },
221
+ },
222
+ opacity: {
223
+ disabled: 'var(--opacity-disabled, 0.4)',
224
+ muted: 'var(--opacity-muted, 0.6)',
225
+ subtle: 'var(--opacity-subtle, 0.8)',
226
+ overlay: 'var(--opacity-overlay, 0.5)',
227
+ },
228
+ breakpoint: {
229
+ sm: 'var(--breakpoint-sm, 640px)',
230
+ md: 'var(--breakpoint-md, 768px)',
231
+ lg: 'var(--breakpoint-lg, 1024px)',
232
+ xl: 'var(--breakpoint-xl, 1280px)',
233
+ '2xl': 'var(--breakpoint-2xl, 1536px)',
234
+ },
235
+ component: {
236
+ tabs: {
237
+ height_md: 'var(--component-tabs-height_md, 44px)',
238
+ height_sm: 'var(--component-tabs-height_sm, 36px)',
239
+ indicator_width: 'var(--component-tabs-indicator_width, 2px)',
240
+ },
241
+ accordion: {
242
+ trigger_height: 'var(--component-accordion-trigger_height, 52px)',
243
+ content_padding: 'var(--component-accordion-content_padding, 16px)',
244
+ },
245
+ tooltip: {
246
+ max_width: 'var(--component-tooltip-max_width, 240px)',
247
+ padding_simple: 'var(--component-tooltip-padding_simple, 6px 12px)',
248
+ padding_rich: 'var(--component-tooltip-padding_rich, 12px 16px)',
249
+ delay: 'var(--component-tooltip-delay, 300ms)',
250
+ },
251
+ toast: {
252
+ min_width: 'var(--component-toast-min_width, 320px)',
253
+ max_width: 'var(--component-toast-max_width, 420px)',
254
+ duration_default: 'var(--component-toast-duration_default, 5000ms)',
255
+ max_visible: 'var(--component-toast-max_visible, 3)',
256
+ },
257
+ avatar: {
258
+ xs: 'var(--component-avatar-xs, 24px)',
259
+ sm: 'var(--component-avatar-sm, 32px)',
260
+ md: 'var(--component-avatar-md, 40px)',
261
+ lg: 'var(--component-avatar-lg, 48px)',
262
+ xl: 'var(--component-avatar-xl, 64px)',
263
+ status_dot_border: 'var(--component-avatar-status_dot_border, 2px)',
264
+ },
265
+ data_table: {
266
+ row_compact: 'var(--component-data_table-row_compact, 36px)',
267
+ row_default: 'var(--component-data_table-row_default, 48px)',
268
+ row_comfortable: 'var(--component-data_table-row_comfortable, 56px)',
269
+ header_height: 'var(--component-data_table-header_height, 44px)',
270
+ },
271
+ pagination: {
272
+ button_size: 'var(--component-pagination-button_size, 36px)',
273
+ },
274
+ skeleton: {
275
+ animation_duration: 'var(--component-skeleton-animation_duration, 1500ms)',
276
+ line_height: 'var(--component-skeleton-line_height, 16px)',
277
+ line_gap: 'var(--component-skeleton-line_gap, 12px)',
278
+ },
279
+ },
280
+ radius: {
281
+ sm: 'var(--radius-sm, 6px)',
282
+ md: 'var(--radius-md, 8px)',
283
+ lg: 'var(--radius-lg, 12px)',
284
+ xl: 'var(--radius-xl, 16px)',
285
+ '2xl': 'var(--radius-2xl, 24px)',
286
+ full: 'var(--radius-full, 9999px)',
287
+ },
288
+ zIndex: {
289
+ dropdown: 'var(--zIndex-dropdown, 100)',
290
+ sticky: 'var(--zIndex-sticky, 200)',
291
+ overlay: 'var(--zIndex-overlay, 300)',
292
+ modal: 'var(--zIndex-modal, 400)',
293
+ toast: 'var(--zIndex-toast, 500)',
294
+ tooltip: 'var(--zIndex-tooltip, 600)',
295
+ system: 'var(--zIndex-system, 9999)',
296
+ },
297
+ 'font-weight': {
298
+ regular: 'var(--font-weight-regular, 400)',
299
+ medium: 'var(--font-weight-medium, 500)',
300
+ semibold: 'var(--font-weight-semibold, 600)',
301
+ bold: 'var(--font-weight-bold, 700)',
302
+ extrabold: 'var(--font-weight-extrabold, 800)',
303
+ },
304
+ 'line-height': {
305
+ tight: 'var(--line-height-tight, 1.2)',
306
+ normal: 'var(--line-height-normal, 1.5)',
307
+ relaxed: 'var(--line-height-relaxed, 1.6)',
308
+ loose: 'var(--line-height-loose, 1.8)',
309
+ },
310
+ border: {
311
+ 'width-thin': 'var(--border-width-thin, 1px)',
312
+ 'width-medium': 'var(--border-width-medium, 2px)',
313
+ 'width-thick': 'var(--border-width-thick, 4px)',
314
+ },
315
+ icon: {
316
+ sm: 'var(--icon-sm, 16px)',
317
+ md: 'var(--icon-md, 20px)',
318
+ lg: 'var(--icon-lg, 24px)',
319
+ xl: 'var(--icon-xl, 32px)',
320
+ },
321
+ layout: {
322
+ breakpoint: {
323
+ sm: 'var(--layout-breakpoint-sm, 640px)',
324
+ md: 'var(--layout-breakpoint-md, 768px)',
325
+ lg: 'var(--layout-breakpoint-lg, 1024px)',
326
+ xl: 'var(--layout-breakpoint-xl, 1280px)',
327
+ '2xl': 'var(--layout-breakpoint-2xl, 1536px)',
328
+ },
329
+ container: {
330
+ sm: 'var(--layout-container-sm, 640px)',
331
+ md: 'var(--layout-container-md, 768px)',
332
+ lg: 'var(--layout-container-lg, 1024px)',
333
+ xl: 'var(--layout-container-xl, 1280px)',
334
+ full: 'var(--layout-container-full, 100%)',
335
+ },
336
+ sidebar: {
337
+ collapsed: 'var(--layout-sidebar-collapsed, 64px)',
338
+ default: 'var(--layout-sidebar-default, 240px)',
339
+ wide: 'var(--layout-sidebar-wide, 320px)',
340
+ },
341
+ },
342
+ };
343
+
344
+ module.exports = { tokens };
package/dist/index.mjs ADDED
@@ -0,0 +1,341 @@
1
+ /**
2
+ * Universal Design System -- Design Tokens (ESM)
3
+ * Auto-generated by @mkatogui/uds-tokens build script
4
+ */
5
+
6
+ export const tokens = {
7
+ color: {
8
+ primitive: {
9
+ blue: {
10
+ '50': 'var(--color-primitive-blue-50, #EFF6FF)',
11
+ '100': 'var(--color-primitive-blue-100, #DBEAFE)',
12
+ '200': 'var(--color-primitive-blue-200, #BFDBFE)',
13
+ '300': 'var(--color-primitive-blue-300, #93C5FD)',
14
+ '400': 'var(--color-primitive-blue-400, #60A5FA)',
15
+ '500': 'var(--color-primitive-blue-500, #3B82F6)',
16
+ '600': 'var(--color-primitive-blue-600, #2563EB)',
17
+ '700': 'var(--color-primitive-blue-700, #1D4ED8)',
18
+ '800': 'var(--color-primitive-blue-800, #1E40AF)',
19
+ '900': 'var(--color-primitive-blue-900, #1E3A8A)',
20
+ '950': 'var(--color-primitive-blue-950, #172554)',
21
+ },
22
+ purple: {
23
+ '50': 'var(--color-primitive-purple-50, #F3E8FF)',
24
+ '100': 'var(--color-primitive-purple-100, #E9D5FF)',
25
+ '200': 'var(--color-primitive-purple-200, #D8B4FE)',
26
+ '400': 'var(--color-primitive-purple-400, #A78BFA)',
27
+ '500': 'var(--color-primitive-purple-500, #8B5CF6)',
28
+ '600': 'var(--color-primitive-purple-600, #7C3AED)',
29
+ '700': 'var(--color-primitive-purple-700, #6D28D9)',
30
+ '800': 'var(--color-primitive-purple-800, #5B21B6)',
31
+ '900': 'var(--color-primitive-purple-900, #4C1D95)',
32
+ },
33
+ green: {
34
+ '50': 'var(--color-primitive-green-50, #ECFDF5)',
35
+ '100': 'var(--color-primitive-green-100, #D1FAE5)',
36
+ '400': 'var(--color-primitive-green-400, #34D399)',
37
+ '500': 'var(--color-primitive-green-500, #10B981)',
38
+ '600': 'var(--color-primitive-green-600, #059669)',
39
+ '700': 'var(--color-primitive-green-700, #047857)',
40
+ },
41
+ red: {
42
+ '50': 'var(--color-primitive-red-50, #FEF2F2)',
43
+ '100': 'var(--color-primitive-red-100, #FEE2E2)',
44
+ '400': 'var(--color-primitive-red-400, #F87171)',
45
+ '500': 'var(--color-primitive-red-500, #EF4444)',
46
+ '600': 'var(--color-primitive-red-600, #DC2626)',
47
+ '700': 'var(--color-primitive-red-700, #B91C1C)',
48
+ },
49
+ amber: {
50
+ '50': 'var(--color-primitive-amber-50, #FFFBEB)',
51
+ '100': 'var(--color-primitive-amber-100, #FEF3C7)',
52
+ '400': 'var(--color-primitive-amber-400, #FBBF24)',
53
+ '500': 'var(--color-primitive-amber-500, #F59E0B)',
54
+ '600': 'var(--color-primitive-amber-600, #D97706)',
55
+ '700': 'var(--color-primitive-amber-700, #B45309)',
56
+ },
57
+ cyan: {
58
+ '400': 'var(--color-primitive-cyan-400, #22D3EE)',
59
+ '500': 'var(--color-primitive-cyan-500, #06B6D4)',
60
+ '600': 'var(--color-primitive-cyan-600, #00D4FF)',
61
+ },
62
+ 'neon-green': {
63
+ '500': 'var(--color-primitive-neon-green-500, #00FF88)',
64
+ },
65
+ pink: {
66
+ '500': 'var(--color-primitive-pink-500, #EC4899)',
67
+ '600': 'var(--color-primitive-pink-600, #DB2777)',
68
+ },
69
+ neutral: {
70
+ '0': 'var(--color-primitive-neutral-0, #FFFFFF)',
71
+ '50': 'var(--color-primitive-neutral-50, #FBFBFD)',
72
+ '100': 'var(--color-primitive-neutral-100, #F8F8FA)',
73
+ '150': 'var(--color-primitive-neutral-150, #F0F0F5)',
74
+ '200': 'var(--color-primitive-neutral-200, #E8E8F0)',
75
+ '300': 'var(--color-primitive-neutral-300, #C8C8D4)',
76
+ '400': 'var(--color-primitive-neutral-400, #999999)',
77
+ '500': 'var(--color-primitive-neutral-500, #6B6B7B)',
78
+ '600': 'var(--color-primitive-neutral-600, #555566)',
79
+ '700': 'var(--color-primitive-neutral-700, #3A3A4A)',
80
+ '800': 'var(--color-primitive-neutral-800, #1A1A24)',
81
+ '850': 'var(--color-primitive-neutral-850, #111118)',
82
+ '900': 'var(--color-primitive-neutral-900, #0A0A0F)',
83
+ '1000': 'var(--color-primitive-neutral-1000, #000000)',
84
+ },
85
+ navy: {
86
+ '700': 'var(--color-primitive-navy-700, #2B6CB0)',
87
+ '800': 'var(--color-primitive-navy-800, #1A365D)',
88
+ '900': 'var(--color-primitive-navy-900, #1A202C)',
89
+ },
90
+ },
91
+ semantic: {
92
+ bg: {
93
+ primary: 'var(--color-semantic-bg-primary, #FFFFFF)',
94
+ secondary: 'var(--color-semantic-bg-secondary, #F8F8FA)',
95
+ tertiary: 'var(--color-semantic-bg-tertiary, #F0F0F5)',
96
+ inverse: 'var(--color-semantic-bg-inverse, #111118)',
97
+ },
98
+ text: {
99
+ primary: 'var(--color-semantic-text-primary, #111118)',
100
+ secondary: 'var(--color-semantic-text-secondary, #555566)',
101
+ tertiary: 'var(--color-semantic-text-tertiary, #6B6B7B)',
102
+ 'on-brand': 'var(--color-semantic-text-on-brand, #FFFFFF)',
103
+ },
104
+ border: {
105
+ default: 'var(--color-semantic-border-default, #C8C8D4)',
106
+ input: 'var(--color-semantic-border-input, #999999)',
107
+ subtle: 'var(--color-semantic-border-subtle, #E8E8F0)',
108
+ },
109
+ brand: {
110
+ primary: 'var(--color-semantic-brand-primary, #2563EB)',
111
+ secondary: 'var(--color-semantic-brand-secondary, #3B82F6)',
112
+ accent: 'var(--color-semantic-brand-accent, #60A5FA)',
113
+ muted: 'var(--color-semantic-brand-muted, #DBEAFE)',
114
+ },
115
+ success: 'var(--color-semantic-success, #059669)',
116
+ 'success-bg': 'var(--color-semantic-success-bg, #ECFDF5)',
117
+ warning: 'var(--color-semantic-warning, #D97706)',
118
+ 'warning-bg': 'var(--color-semantic-warning-bg, #FFFBEB)',
119
+ error: 'var(--color-semantic-error, #DC2626)',
120
+ 'error-bg': 'var(--color-semantic-error-bg, #FEF2F2)',
121
+ info: 'var(--color-semantic-info, #2563EB)',
122
+ 'info-bg': 'var(--color-semantic-info-bg, #EFF6FF)',
123
+ 'surface-default': 'var(--color-semantic-surface-default, {color.primitive.neutral.white})',
124
+ 'surface-hover': 'var(--color-semantic-surface-hover, #F5F5FA)',
125
+ 'surface-active': 'var(--color-semantic-surface-active, #EDEDF5)',
126
+ 'text-disabled': 'var(--color-semantic-text-disabled, #A0A0B0)',
127
+ 'border-strong': 'var(--color-semantic-border-strong, #6E6E7E)',
128
+ overlay: 'var(--color-semantic-overlay, rgba(0, 0, 0, 0.5))',
129
+ },
130
+ chart: {
131
+ '1': 'var(--color-chart-1, #4F46E5)',
132
+ '2': 'var(--color-chart-2, #0EA5E9)',
133
+ '3': 'var(--color-chart-3, #10B981)',
134
+ '4': 'var(--color-chart-4, #F59E0B)',
135
+ '5': 'var(--color-chart-5, #EF4444)',
136
+ '6': 'var(--color-chart-6, #8B5CF6)',
137
+ '7': 'var(--color-chart-7, #EC4899)',
138
+ '8': 'var(--color-chart-8, #06B6D4)',
139
+ },
140
+ },
141
+ typography: {
142
+ fontFamily: {
143
+ sans: 'var(--font-family-sans, Inter, system-ui, -apple-system, sans-serif)',
144
+ display: 'var(--font-family-display, Inter, system-ui, sans-serif)',
145
+ mono: 'var(--font-family-mono, "JetBrains Mono", Menlo, Consolas, monospace)',
146
+ serif: 'var(--font-family-serif, "Source Serif 4", Georgia, serif)',
147
+ },
148
+ fontWeight: {
149
+ regular: 'var(--font-weight-regular, 400)',
150
+ medium: 'var(--font-weight-medium, 500)',
151
+ semibold: 'var(--font-weight-semibold, 600)',
152
+ bold: 'var(--font-weight-bold, 700)',
153
+ extrabold: 'var(--font-weight-extrabold, 800)',
154
+ },
155
+ fontSize: {
156
+ 'display-xl': 'var(--font-size-display-xl, 4.5rem)',
157
+ 'display-lg': 'var(--font-size-display-lg, 3.75rem)',
158
+ 'display-md': 'var(--font-size-display-md, 3rem)',
159
+ 'heading-lg': 'var(--font-size-heading-lg, 2.25rem)',
160
+ 'heading-md': 'var(--font-size-heading-md, 1.75rem)',
161
+ 'heading-sm': 'var(--font-size-heading-sm, 1.375rem)',
162
+ 'body-lg': 'var(--font-size-body-lg, 1.25rem)',
163
+ 'body-md': 'var(--font-size-body-md, 1rem)',
164
+ 'body-sm': 'var(--font-size-body-sm, 0.875rem)',
165
+ label: 'var(--font-size-label, 0.75rem)',
166
+ },
167
+ lineHeight: {
168
+ display: 'var(--line-height-display, 1.1)',
169
+ heading: 'var(--line-height-heading, 1.25)',
170
+ body: 'var(--line-height-body, 1.6)',
171
+ tight: 'var(--line-height-tight, 1.05)',
172
+ },
173
+ },
174
+ spacing: {
175
+ '1': 'var(--spacing-1, 4px)',
176
+ '2': 'var(--spacing-2, 8px)',
177
+ '3': 'var(--spacing-3, 12px)',
178
+ '4': 'var(--spacing-4, 16px)',
179
+ '5': 'var(--spacing-5, 20px)',
180
+ '6': 'var(--spacing-6, 24px)',
181
+ '8': 'var(--spacing-8, 32px)',
182
+ '10': 'var(--spacing-10, 40px)',
183
+ '12': 'var(--spacing-12, 48px)',
184
+ '16': 'var(--spacing-16, 64px)',
185
+ '20': 'var(--spacing-20, 80px)',
186
+ '24': 'var(--spacing-24, 96px)',
187
+ '32': 'var(--spacing-32, 128px)',
188
+ },
189
+ size: {
190
+ 'container-max': 'var(--size-container-max, 1280px)',
191
+ 'container-narrow': 'var(--size-container-narrow, 768px)',
192
+ 'container-wide': 'var(--size-container-wide, 1440px)',
193
+ 'icon-sm': 'var(--size-icon-sm, 16px)',
194
+ 'icon-md': 'var(--size-icon-md, 20px)',
195
+ 'icon-lg': 'var(--size-icon-lg, 24px)',
196
+ 'icon-xl': 'var(--size-icon-xl, 32px)',
197
+ },
198
+ shadow: {
199
+ xs: 'var(--shadow-xs, 0px 1px 2px 0px rgba(0,0,0,0.05))',
200
+ sm: 'var(--shadow-sm, 0px 2px 4px 0px rgba(0,0,0,0.06), 0px 1px 2px 0px rgba(0,0,0,0.04))',
201
+ md: 'var(--shadow-md, 0px 4px 12px 0px rgba(0,0,0,0.08), 0px 2px 4px 0px rgba(0,0,0,0.04))',
202
+ lg: 'var(--shadow-lg, 0px 12px 32px 0px rgba(0,0,0,0.12), 0px 4px 8px 0px rgba(0,0,0,0.06))',
203
+ xl: 'var(--shadow-xl, 0px 24px 64px 0px rgba(0,0,0,0.16))',
204
+ },
205
+ motion: {
206
+ duration: {
207
+ instant: 'var(--motion-duration-instant, 100ms)',
208
+ fast: 'var(--motion-duration-fast, 150ms)',
209
+ normal: 'var(--motion-duration-normal, 250ms)',
210
+ slow: 'var(--motion-duration-slow, 400ms)',
211
+ slower: 'var(--motion-duration-slower, 600ms)',
212
+ slowest: 'var(--motion-duration-slowest, 1000ms)',
213
+ },
214
+ easing: {
215
+ default: 'var(--motion-easing-default, cubic-bezier(0.4, 0, 0.2, 1))',
216
+ in: 'var(--motion-easing-in, cubic-bezier(0.4, 0, 1, 1))',
217
+ out: 'var(--motion-easing-out, cubic-bezier(0, 0, 0.2, 1))',
218
+ spring: 'var(--motion-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1))',
219
+ },
220
+ },
221
+ opacity: {
222
+ disabled: 'var(--opacity-disabled, 0.4)',
223
+ muted: 'var(--opacity-muted, 0.6)',
224
+ subtle: 'var(--opacity-subtle, 0.8)',
225
+ overlay: 'var(--opacity-overlay, 0.5)',
226
+ },
227
+ breakpoint: {
228
+ sm: 'var(--breakpoint-sm, 640px)',
229
+ md: 'var(--breakpoint-md, 768px)',
230
+ lg: 'var(--breakpoint-lg, 1024px)',
231
+ xl: 'var(--breakpoint-xl, 1280px)',
232
+ '2xl': 'var(--breakpoint-2xl, 1536px)',
233
+ },
234
+ component: {
235
+ tabs: {
236
+ height_md: 'var(--component-tabs-height_md, 44px)',
237
+ height_sm: 'var(--component-tabs-height_sm, 36px)',
238
+ indicator_width: 'var(--component-tabs-indicator_width, 2px)',
239
+ },
240
+ accordion: {
241
+ trigger_height: 'var(--component-accordion-trigger_height, 52px)',
242
+ content_padding: 'var(--component-accordion-content_padding, 16px)',
243
+ },
244
+ tooltip: {
245
+ max_width: 'var(--component-tooltip-max_width, 240px)',
246
+ padding_simple: 'var(--component-tooltip-padding_simple, 6px 12px)',
247
+ padding_rich: 'var(--component-tooltip-padding_rich, 12px 16px)',
248
+ delay: 'var(--component-tooltip-delay, 300ms)',
249
+ },
250
+ toast: {
251
+ min_width: 'var(--component-toast-min_width, 320px)',
252
+ max_width: 'var(--component-toast-max_width, 420px)',
253
+ duration_default: 'var(--component-toast-duration_default, 5000ms)',
254
+ max_visible: 'var(--component-toast-max_visible, 3)',
255
+ },
256
+ avatar: {
257
+ xs: 'var(--component-avatar-xs, 24px)',
258
+ sm: 'var(--component-avatar-sm, 32px)',
259
+ md: 'var(--component-avatar-md, 40px)',
260
+ lg: 'var(--component-avatar-lg, 48px)',
261
+ xl: 'var(--component-avatar-xl, 64px)',
262
+ status_dot_border: 'var(--component-avatar-status_dot_border, 2px)',
263
+ },
264
+ data_table: {
265
+ row_compact: 'var(--component-data_table-row_compact, 36px)',
266
+ row_default: 'var(--component-data_table-row_default, 48px)',
267
+ row_comfortable: 'var(--component-data_table-row_comfortable, 56px)',
268
+ header_height: 'var(--component-data_table-header_height, 44px)',
269
+ },
270
+ pagination: {
271
+ button_size: 'var(--component-pagination-button_size, 36px)',
272
+ },
273
+ skeleton: {
274
+ animation_duration: 'var(--component-skeleton-animation_duration, 1500ms)',
275
+ line_height: 'var(--component-skeleton-line_height, 16px)',
276
+ line_gap: 'var(--component-skeleton-line_gap, 12px)',
277
+ },
278
+ },
279
+ radius: {
280
+ sm: 'var(--radius-sm, 6px)',
281
+ md: 'var(--radius-md, 8px)',
282
+ lg: 'var(--radius-lg, 12px)',
283
+ xl: 'var(--radius-xl, 16px)',
284
+ '2xl': 'var(--radius-2xl, 24px)',
285
+ full: 'var(--radius-full, 9999px)',
286
+ },
287
+ zIndex: {
288
+ dropdown: 'var(--zIndex-dropdown, 100)',
289
+ sticky: 'var(--zIndex-sticky, 200)',
290
+ overlay: 'var(--zIndex-overlay, 300)',
291
+ modal: 'var(--zIndex-modal, 400)',
292
+ toast: 'var(--zIndex-toast, 500)',
293
+ tooltip: 'var(--zIndex-tooltip, 600)',
294
+ system: 'var(--zIndex-system, 9999)',
295
+ },
296
+ 'font-weight': {
297
+ regular: 'var(--font-weight-regular, 400)',
298
+ medium: 'var(--font-weight-medium, 500)',
299
+ semibold: 'var(--font-weight-semibold, 600)',
300
+ bold: 'var(--font-weight-bold, 700)',
301
+ extrabold: 'var(--font-weight-extrabold, 800)',
302
+ },
303
+ 'line-height': {
304
+ tight: 'var(--line-height-tight, 1.2)',
305
+ normal: 'var(--line-height-normal, 1.5)',
306
+ relaxed: 'var(--line-height-relaxed, 1.6)',
307
+ loose: 'var(--line-height-loose, 1.8)',
308
+ },
309
+ border: {
310
+ 'width-thin': 'var(--border-width-thin, 1px)',
311
+ 'width-medium': 'var(--border-width-medium, 2px)',
312
+ 'width-thick': 'var(--border-width-thick, 4px)',
313
+ },
314
+ icon: {
315
+ sm: 'var(--icon-sm, 16px)',
316
+ md: 'var(--icon-md, 20px)',
317
+ lg: 'var(--icon-lg, 24px)',
318
+ xl: 'var(--icon-xl, 32px)',
319
+ },
320
+ layout: {
321
+ breakpoint: {
322
+ sm: 'var(--layout-breakpoint-sm, 640px)',
323
+ md: 'var(--layout-breakpoint-md, 768px)',
324
+ lg: 'var(--layout-breakpoint-lg, 1024px)',
325
+ xl: 'var(--layout-breakpoint-xl, 1280px)',
326
+ '2xl': 'var(--layout-breakpoint-2xl, 1536px)',
327
+ },
328
+ container: {
329
+ sm: 'var(--layout-container-sm, 640px)',
330
+ md: 'var(--layout-container-md, 768px)',
331
+ lg: 'var(--layout-container-lg, 1024px)',
332
+ xl: 'var(--layout-container-xl, 1280px)',
333
+ full: 'var(--layout-container-full, 100%)',
334
+ },
335
+ sidebar: {
336
+ collapsed: 'var(--layout-sidebar-collapsed, 64px)',
337
+ default: 'var(--layout-sidebar-default, 240px)',
338
+ wide: 'var(--layout-sidebar-wide, 320px)',
339
+ },
340
+ },
341
+ };