@mkatogui/uds-tokens 0.2.1 → 0.5.0

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.
@@ -0,0 +1,432 @@
1
+ /**
2
+ * Universal Design System -- Token Type Definitions
3
+ * Auto-generated by @mkatogui/uds-tokens build script
4
+ *
5
+ * Provides compile-time validation and autocomplete for design tokens.
6
+ */
7
+
8
+ /**
9
+ * Union of all valid CSS custom property names emitted to :root.
10
+ * Total: 337 tokens.
11
+ */
12
+ export type TokenName =
13
+ | '--border-width-medium'
14
+ | '--border-width-thick'
15
+ | '--border-width-thin'
16
+ | '--breakpoint-2xl'
17
+ | '--breakpoint-lg'
18
+ | '--breakpoint-md'
19
+ | '--breakpoint-sm'
20
+ | '--breakpoint-xl'
21
+ | '--color-chart-1'
22
+ | '--color-chart-2'
23
+ | '--color-chart-3'
24
+ | '--color-chart-4'
25
+ | '--color-chart-5'
26
+ | '--color-chart-6'
27
+ | '--color-chart-7'
28
+ | '--color-chart-8'
29
+ | '--color-primitive-amber-100'
30
+ | '--color-primitive-amber-400'
31
+ | '--color-primitive-amber-50'
32
+ | '--color-primitive-amber-500'
33
+ | '--color-primitive-amber-600'
34
+ | '--color-primitive-amber-700'
35
+ | '--color-primitive-amber-800'
36
+ | '--color-primitive-blue-100'
37
+ | '--color-primitive-blue-200'
38
+ | '--color-primitive-blue-300'
39
+ | '--color-primitive-blue-400'
40
+ | '--color-primitive-blue-50'
41
+ | '--color-primitive-blue-500'
42
+ | '--color-primitive-blue-600'
43
+ | '--color-primitive-blue-700'
44
+ | '--color-primitive-blue-800'
45
+ | '--color-primitive-blue-900'
46
+ | '--color-primitive-blue-950'
47
+ | '--color-primitive-cyan-400'
48
+ | '--color-primitive-cyan-500'
49
+ | '--color-primitive-cyan-600'
50
+ | '--color-primitive-green-100'
51
+ | '--color-primitive-green-400'
52
+ | '--color-primitive-green-50'
53
+ | '--color-primitive-green-500'
54
+ | '--color-primitive-green-600'
55
+ | '--color-primitive-green-700'
56
+ | '--color-primitive-navy-700'
57
+ | '--color-primitive-navy-800'
58
+ | '--color-primitive-navy-900'
59
+ | '--color-primitive-neon-green-500'
60
+ | '--color-primitive-neutral-0'
61
+ | '--color-primitive-neutral-100'
62
+ | '--color-primitive-neutral-1000'
63
+ | '--color-primitive-neutral-150'
64
+ | '--color-primitive-neutral-200'
65
+ | '--color-primitive-neutral-300'
66
+ | '--color-primitive-neutral-400'
67
+ | '--color-primitive-neutral-50'
68
+ | '--color-primitive-neutral-500'
69
+ | '--color-primitive-neutral-600'
70
+ | '--color-primitive-neutral-700'
71
+ | '--color-primitive-neutral-800'
72
+ | '--color-primitive-neutral-850'
73
+ | '--color-primitive-neutral-900'
74
+ | '--color-primitive-pink-500'
75
+ | '--color-primitive-pink-600'
76
+ | '--color-primitive-purple-100'
77
+ | '--color-primitive-purple-200'
78
+ | '--color-primitive-purple-400'
79
+ | '--color-primitive-purple-50'
80
+ | '--color-primitive-purple-500'
81
+ | '--color-primitive-purple-600'
82
+ | '--color-primitive-purple-700'
83
+ | '--color-primitive-purple-800'
84
+ | '--color-primitive-purple-900'
85
+ | '--color-primitive-red-100'
86
+ | '--color-primitive-red-400'
87
+ | '--color-primitive-red-50'
88
+ | '--color-primitive-red-500'
89
+ | '--color-primitive-red-600'
90
+ | '--color-primitive-red-700'
91
+ | '--color-semantic-action-destructive'
92
+ | '--color-semantic-action-primary'
93
+ | '--color-semantic-action-secondary'
94
+ | '--color-semantic-bg-inverse'
95
+ | '--color-semantic-bg-primary'
96
+ | '--color-semantic-bg-secondary'
97
+ | '--color-semantic-bg-tertiary'
98
+ | '--color-semantic-border-default'
99
+ | '--color-semantic-border-focus'
100
+ | '--color-semantic-border-input'
101
+ | '--color-semantic-border-strong'
102
+ | '--color-semantic-border-subtle'
103
+ | '--color-semantic-brand-accent'
104
+ | '--color-semantic-brand-muted'
105
+ | '--color-semantic-brand-primary'
106
+ | '--color-semantic-brand-secondary'
107
+ | '--color-semantic-error'
108
+ | '--color-semantic-error-bg'
109
+ | '--color-semantic-feedback-error'
110
+ | '--color-semantic-feedback-info'
111
+ | '--color-semantic-feedback-success'
112
+ | '--color-semantic-feedback-warning'
113
+ | '--color-semantic-info'
114
+ | '--color-semantic-info-bg'
115
+ | '--color-semantic-overlay'
116
+ | '--color-semantic-success'
117
+ | '--color-semantic-success-bg'
118
+ | '--color-semantic-success-on-bg'
119
+ | '--color-semantic-surface-active'
120
+ | '--color-semantic-surface-default'
121
+ | '--color-semantic-surface-elevated'
122
+ | '--color-semantic-surface-hover'
123
+ | '--color-semantic-surface-overlay'
124
+ | '--color-semantic-text-disabled'
125
+ | '--color-semantic-text-link'
126
+ | '--color-semantic-text-on-brand'
127
+ | '--color-semantic-text-on-error'
128
+ | '--color-semantic-text-primary'
129
+ | '--color-semantic-text-secondary'
130
+ | '--color-semantic-text-tertiary'
131
+ | '--color-semantic-warning'
132
+ | '--color-semantic-warning-bg'
133
+ | '--color-semantic-warning-on-bg'
134
+ | '--color-utility-disabled-overlay'
135
+ | '--color-utility-focus-ring'
136
+ | '--color-utility-hover-shade'
137
+ | '--color-utility-hover-tint'
138
+ | '--component-accordion-content_padding'
139
+ | '--component-accordion-trigger_height'
140
+ | '--component-alert-icon-size'
141
+ | '--component-alert-padding-lg'
142
+ | '--component-alert-padding-md'
143
+ | '--component-alert-padding-sm'
144
+ | '--component-avatar-lg'
145
+ | '--component-avatar-md'
146
+ | '--component-avatar-sm'
147
+ | '--component-avatar-status_dot_border'
148
+ | '--component-avatar-xl'
149
+ | '--component-avatar-xs'
150
+ | '--component-data_table-header_height'
151
+ | '--component-data_table-row_comfortable'
152
+ | '--component-data_table-row_compact'
153
+ | '--component-data_table-row_default'
154
+ | '--component-dropdown-item-height-lg'
155
+ | '--component-dropdown-item-height-md'
156
+ | '--component-dropdown-item-height-sm'
157
+ | '--component-dropdown-menu-min-width'
158
+ | '--component-dropdown-separator-margin'
159
+ | '--component-feature-card-content-padding'
160
+ | '--component-feature-card-footer-padding'
161
+ | '--component-feature-card-media-height'
162
+ | '--component-input-helper-gap'
163
+ | '--component-input-icon-inset'
164
+ | '--component-input-icon-size'
165
+ | '--component-input-label-gap'
166
+ | '--component-modal-content-padding'
167
+ | '--component-modal-footer-padding'
168
+ | '--component-modal-header-padding'
169
+ | '--component-modal-overlay-opacity'
170
+ | '--component-modal-width-lg'
171
+ | '--component-modal-width-md'
172
+ | '--component-modal-width-sm'
173
+ | '--component-pagination-button_size'
174
+ | '--component-skeleton-animation_duration'
175
+ | '--component-skeleton-line_gap'
176
+ | '--component-skeleton-line_height'
177
+ | '--component-tabs-height_md'
178
+ | '--component-tabs-height_sm'
179
+ | '--component-tabs-indicator_width'
180
+ | '--component-toast-duration_default'
181
+ | '--component-toast-max_visible'
182
+ | '--component-toast-max_width'
183
+ | '--component-toast-min_width'
184
+ | '--component-tooltip-delay'
185
+ | '--component-tooltip-max_width'
186
+ | '--component-tooltip-padding_rich'
187
+ | '--component-tooltip-padding_simple'
188
+ | '--font-family-display'
189
+ | '--font-family-mono'
190
+ | '--font-family-sans'
191
+ | '--font-family-serif'
192
+ | '--font-size-body-lg'
193
+ | '--font-size-body-md'
194
+ | '--font-size-body-sm'
195
+ | '--font-size-display-lg'
196
+ | '--font-size-display-md'
197
+ | '--font-size-display-xl'
198
+ | '--font-size-heading-lg'
199
+ | '--font-size-heading-md'
200
+ | '--font-size-heading-sm'
201
+ | '--font-size-label'
202
+ | '--font-weight-bold'
203
+ | '--font-weight-extrabold'
204
+ | '--font-weight-medium'
205
+ | '--font-weight-regular'
206
+ | '--font-weight-semibold'
207
+ | '--icon-lg'
208
+ | '--icon-md'
209
+ | '--icon-sm'
210
+ | '--icon-xl'
211
+ | '--layout-breakpoint-2xl'
212
+ | '--layout-breakpoint-lg'
213
+ | '--layout-breakpoint-md'
214
+ | '--layout-breakpoint-sm'
215
+ | '--layout-breakpoint-xl'
216
+ | '--layout-container-full'
217
+ | '--layout-container-lg'
218
+ | '--layout-container-max-width-lg'
219
+ | '--layout-container-max-width-md'
220
+ | '--layout-container-max-width-sm'
221
+ | '--layout-container-max-width-xl'
222
+ | '--layout-container-md'
223
+ | '--layout-container-query-lg'
224
+ | '--layout-container-query-md'
225
+ | '--layout-container-query-sm'
226
+ | '--layout-container-query-xl'
227
+ | '--layout-container-sm'
228
+ | '--layout-container-xl'
229
+ | '--layout-grid-columns-1'
230
+ | '--layout-grid-columns-12'
231
+ | '--layout-grid-columns-2'
232
+ | '--layout-grid-columns-3'
233
+ | '--layout-grid-columns-4'
234
+ | '--layout-grid-columns-6'
235
+ | '--layout-sidebar-collapsed'
236
+ | '--layout-sidebar-default'
237
+ | '--layout-sidebar-wide'
238
+ | '--layout-stack-gap-lg'
239
+ | '--layout-stack-gap-md'
240
+ | '--layout-stack-gap-sm'
241
+ | '--layout-stack-gap-xl'
242
+ | '--layout-stack-gap-xs'
243
+ | '--line-height-body'
244
+ | '--line-height-display'
245
+ | '--line-height-heading'
246
+ | '--line-height-loose'
247
+ | '--line-height-normal'
248
+ | '--line-height-relaxed'
249
+ | '--line-height-tight'
250
+ | '--motion-duration-fast'
251
+ | '--motion-duration-instant'
252
+ | '--motion-duration-normal'
253
+ | '--motion-duration-slow'
254
+ | '--motion-duration-slower'
255
+ | '--motion-duration-slowest'
256
+ | '--motion-easing-default'
257
+ | '--motion-easing-in'
258
+ | '--motion-easing-out'
259
+ | '--motion-easing-spring'
260
+ | '--motion-easing-spring-bouncy'
261
+ | '--motion-easing-spring-gentle'
262
+ | '--motion-easing-spring-stiff'
263
+ | '--motion-keyframes-accordion-height'
264
+ | '--motion-keyframes-bounce'
265
+ | '--motion-keyframes-bounce-in'
266
+ | '--motion-keyframes-checkbox-morph'
267
+ | '--motion-keyframes-counter'
268
+ | '--motion-keyframes-fade-in'
269
+ | '--motion-keyframes-fade-in-up'
270
+ | '--motion-keyframes-fade-out'
271
+ | '--motion-keyframes-pulse'
272
+ | '--motion-keyframes-pulse-ring'
273
+ | '--motion-keyframes-scale-in'
274
+ | '--motion-keyframes-scale-out'
275
+ | '--motion-keyframes-shake'
276
+ | '--motion-keyframes-shimmer'
277
+ | '--motion-keyframes-skeleton-wave'
278
+ | '--motion-keyframes-slide-down'
279
+ | '--motion-keyframes-slide-in-right'
280
+ | '--motion-keyframes-slide-left'
281
+ | '--motion-keyframes-slide-right'
282
+ | '--motion-keyframes-slide-up'
283
+ | '--motion-keyframes-spin'
284
+ | '--motion-keyframes-tab-indicator'
285
+ | '--motion-keyframes-toggle-slide'
286
+ | '--motion-keyframes-typing'
287
+ | '--motion-scroll-driven-parallax-factor'
288
+ | '--motion-scroll-driven-progress'
289
+ | '--motion-scroll-driven-reveal-threshold'
290
+ | '--motion-style-conservative'
291
+ | '--motion-style-expressive'
292
+ | '--motion-style-instant'
293
+ | '--motion-style-moderate'
294
+ | '--opacity-disabled'
295
+ | '--opacity-muted'
296
+ | '--opacity-overlay'
297
+ | '--opacity-subtle'
298
+ | '--radius-2xl'
299
+ | '--radius-full'
300
+ | '--radius-lg'
301
+ | '--radius-md'
302
+ | '--radius-sm'
303
+ | '--radius-xl'
304
+ | '--shadow-lg'
305
+ | '--shadow-md'
306
+ | '--shadow-sm'
307
+ | '--shadow-xl'
308
+ | '--shadow-xs'
309
+ | '--size-container-max'
310
+ | '--size-container-narrow'
311
+ | '--size-container-wide'
312
+ | '--size-icon-lg'
313
+ | '--size-icon-md'
314
+ | '--size-icon-sm'
315
+ | '--size-icon-xl'
316
+ | '--spacing-1'
317
+ | '--spacing-10'
318
+ | '--spacing-12'
319
+ | '--spacing-16'
320
+ | '--spacing-2'
321
+ | '--spacing-20'
322
+ | '--spacing-24'
323
+ | '--spacing-3'
324
+ | '--spacing-32'
325
+ | '--spacing-4'
326
+ | '--spacing-5'
327
+ | '--spacing-6'
328
+ | '--spacing-8'
329
+ | '--transition-behavior-allow-discrete'
330
+ | '--transition-starting-style-dropdown'
331
+ | '--transition-starting-style-modal'
332
+ | '--transition-starting-style-popover'
333
+ | '--transition-starting-style-toast'
334
+ | '--transition-style-elegant'
335
+ | '--transition-style-gentle'
336
+ | '--transition-style-instant'
337
+ | '--transition-style-snappy'
338
+ | '--transition-view-transition-name-card'
339
+ | '--transition-view-transition-name-header'
340
+ | '--transition-view-transition-name-hero'
341
+ | '--transition-view-transition-name-modal'
342
+ | '--transition-view-transition-name-sidebar'
343
+ | '--zIndex-dropdown'
344
+ | '--zIndex-modal'
345
+ | '--zIndex-overlay'
346
+ | '--zIndex-sticky'
347
+ | '--zIndex-system'
348
+ | '--zIndex-toast'
349
+ | '--zIndex-tooltip';
350
+
351
+ /**
352
+ * Union of the 9 structural palette names.
353
+ * Apply via data-theme attribute: <div data-theme="minimal-saas">
354
+ */
355
+ export type PaletteName = 'minimal-saas' | 'ai-futuristic' | 'gradient-startup' | 'corporate' | 'apple-minimal' | 'illustration' | 'dashboard' | 'bold-lifestyle' | 'minimal-corporate';
356
+
357
+ /**
358
+ * Runtime type guard that checks whether a string is a valid PaletteName.
359
+ */
360
+ export declare function isPalette(name: string): name is PaletteName;
361
+
362
+ /**
363
+ * Interface mapping each palette color token to its resolved CSS value.
364
+ * These are the tokens that vary per palette (applied via [data-theme] selector).
365
+ */
366
+ export interface PaletteTokens {
367
+ readonly 'bg-inverse': string;
368
+ readonly 'bg-primary': string;
369
+ readonly 'bg-secondary': string;
370
+ readonly 'bg-tertiary': string;
371
+ readonly 'border-default': string;
372
+ readonly 'border-input': string;
373
+ readonly 'border-subtle': string;
374
+ readonly 'brand-accent': string;
375
+ readonly 'brand-muted': string;
376
+ readonly 'brand-primary': string;
377
+ readonly 'brand-primary-rgb': string;
378
+ readonly 'brand-secondary': string;
379
+ readonly 'error': string;
380
+ readonly 'error-bg': string;
381
+ readonly 'info': string;
382
+ readonly 'info-bg': string;
383
+ readonly 'success': string;
384
+ readonly 'success-bg': string;
385
+ readonly 'text-on-brand': string;
386
+ readonly 'text-primary': string;
387
+ readonly 'text-secondary': string;
388
+ readonly 'text-tertiary': string;
389
+ readonly 'warning': string;
390
+ readonly 'warning-bg': string;
391
+ }
392
+
393
+ /**
394
+ * Theme configuration structure matching Tailwind CSS config output format.
395
+ */
396
+ export interface ThemeConfig {
397
+ readonly colors: {
398
+ readonly brand: {
399
+ readonly primary: string;
400
+ readonly secondary: string;
401
+ readonly accent: string;
402
+ readonly muted: string;
403
+ };
404
+ readonly bg: {
405
+ readonly primary: string;
406
+ readonly secondary: string;
407
+ readonly tertiary: string;
408
+ readonly inverse: string;
409
+ };
410
+ readonly text: {
411
+ readonly primary: string;
412
+ readonly secondary: string;
413
+ readonly tertiary: string;
414
+ readonly 'on-brand': string;
415
+ };
416
+ readonly border: {
417
+ readonly default: string;
418
+ readonly input: string;
419
+ readonly subtle: string;
420
+ };
421
+ };
422
+ readonly spacing: Record<string, string>;
423
+ readonly fontSize: Record<string, string>;
424
+ readonly fontFamily: Record<string, string>;
425
+ readonly borderRadius: Record<string, string>;
426
+ readonly boxShadow: Record<string, string>;
427
+ }
428
+
429
+ /**
430
+ * Array of all valid palette names. Useful for iteration.
431
+ */
432
+ export declare const PALETTES: readonly PaletteName[];