@boopdoopgoop/design-system 0.0.0-stage → 0.2.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,775 @@
1
+ type TokenType = 'color' | 'dimension' | 'fontFamily' | 'fontWeight' | 'number';
2
+ interface Token {
3
+ $type: TokenType;
4
+ $value: unknown;
5
+ $description?: string;
6
+ }
7
+ interface ResolvedToken extends Token {
8
+ path: string;
9
+ cssName: string;
10
+ cssValue: string;
11
+ }
12
+ /** Flatten the supported DTCG subset, honoring inherited group types. */
13
+ declare function flattenTokens(...documents: unknown[]): Record<string, Token>;
14
+ /** Resolve aliases with explicit missing-reference, cycle, and type checks. */
15
+ declare function resolveTokens(tokens: Record<string, Token>): Record<string, ResolvedToken>;
16
+ /** Deterministic output: no timestamps, filesystem access, or external tools. */
17
+ declare function renderTheme(tokens: Record<string, Token>): string;
18
+
19
+ /** DTCG source documents; CSS and font loading remain opt-in. */
20
+ declare const tokenDocuments: {
21
+ primitives: {
22
+ $description: string;
23
+ primitive: {
24
+ color: {
25
+ $type: string;
26
+ white: {
27
+ $value: {
28
+ colorSpace: string;
29
+ components: number[];
30
+ hex: string;
31
+ };
32
+ };
33
+ black: {
34
+ $value: {
35
+ colorSpace: string;
36
+ components: number[];
37
+ hex: string;
38
+ };
39
+ };
40
+ ink: {
41
+ $value: {
42
+ colorSpace: string;
43
+ components: number[];
44
+ hex: string;
45
+ };
46
+ };
47
+ muted: {
48
+ $value: {
49
+ colorSpace: string;
50
+ components: number[];
51
+ hex: string;
52
+ };
53
+ };
54
+ mist: {
55
+ $value: {
56
+ colorSpace: string;
57
+ components: number[];
58
+ hex: string;
59
+ };
60
+ };
61
+ line: {
62
+ $value: {
63
+ colorSpace: string;
64
+ components: number[];
65
+ hex: string;
66
+ };
67
+ };
68
+ "control-line": {
69
+ $value: {
70
+ colorSpace: string;
71
+ components: number[];
72
+ hex: string;
73
+ };
74
+ };
75
+ placeholder: {
76
+ $value: {
77
+ colorSpace: string;
78
+ components: number[];
79
+ hex: string;
80
+ };
81
+ };
82
+ signal: {
83
+ $value: {
84
+ colorSpace: string;
85
+ components: number[];
86
+ hex: string;
87
+ };
88
+ };
89
+ warning: {
90
+ $value: {
91
+ colorSpace: string;
92
+ components: number[];
93
+ hex: string;
94
+ };
95
+ };
96
+ success: {
97
+ $value: {
98
+ colorSpace: string;
99
+ components: number[];
100
+ hex: string;
101
+ };
102
+ };
103
+ danger: {
104
+ $value: {
105
+ colorSpace: string;
106
+ components: number[];
107
+ hex: string;
108
+ };
109
+ };
110
+ info: {
111
+ $value: {
112
+ colorSpace: string;
113
+ components: number[];
114
+ hex: string;
115
+ };
116
+ };
117
+ sage: {
118
+ $value: {
119
+ colorSpace: string;
120
+ components: number[];
121
+ hex: string;
122
+ };
123
+ };
124
+ "sage-ink": {
125
+ $value: {
126
+ colorSpace: string;
127
+ components: number[];
128
+ hex: string;
129
+ };
130
+ };
131
+ slate: {
132
+ $value: {
133
+ colorSpace: string;
134
+ components: number[];
135
+ hex: string;
136
+ };
137
+ };
138
+ "slate-ink": {
139
+ $value: {
140
+ colorSpace: string;
141
+ components: number[];
142
+ hex: string;
143
+ };
144
+ };
145
+ ochre: {
146
+ $value: {
147
+ colorSpace: string;
148
+ components: number[];
149
+ hex: string;
150
+ };
151
+ };
152
+ "ochre-ink": {
153
+ $value: {
154
+ colorSpace: string;
155
+ components: number[];
156
+ hex: string;
157
+ };
158
+ };
159
+ clay: {
160
+ $value: {
161
+ colorSpace: string;
162
+ components: number[];
163
+ hex: string;
164
+ };
165
+ };
166
+ "clay-ink": {
167
+ $value: {
168
+ colorSpace: string;
169
+ components: number[];
170
+ hex: string;
171
+ };
172
+ };
173
+ mauve: {
174
+ $value: {
175
+ colorSpace: string;
176
+ components: number[];
177
+ hex: string;
178
+ };
179
+ };
180
+ "mauve-ink": {
181
+ $value: {
182
+ colorSpace: string;
183
+ components: number[];
184
+ hex: string;
185
+ };
186
+ };
187
+ stone: {
188
+ $value: {
189
+ colorSpace: string;
190
+ components: number[];
191
+ hex: string;
192
+ };
193
+ };
194
+ "stone-ink": {
195
+ $value: {
196
+ colorSpace: string;
197
+ components: number[];
198
+ hex: string;
199
+ };
200
+ };
201
+ paper: {
202
+ $value: {
203
+ colorSpace: string;
204
+ components: number[];
205
+ hex: string;
206
+ };
207
+ };
208
+ sheet: {
209
+ $value: {
210
+ colorSpace: string;
211
+ components: number[];
212
+ hex: string;
213
+ };
214
+ };
215
+ "ink-70": {
216
+ $value: {
217
+ colorSpace: string;
218
+ components: number[];
219
+ hex: string;
220
+ };
221
+ };
222
+ "ink-35": {
223
+ $value: {
224
+ colorSpace: string;
225
+ components: number[];
226
+ hex: string;
227
+ };
228
+ };
229
+ "ink-18": {
230
+ $value: {
231
+ colorSpace: string;
232
+ components: number[];
233
+ hex: string;
234
+ };
235
+ };
236
+ yellow: {
237
+ $value: {
238
+ colorSpace: string;
239
+ components: number[];
240
+ hex: string;
241
+ };
242
+ };
243
+ };
244
+ font: {
245
+ $type: string;
246
+ display: {
247
+ $value: string[];
248
+ };
249
+ body: {
250
+ $value: string[];
251
+ };
252
+ mono: {
253
+ $value: string[];
254
+ };
255
+ };
256
+ size: {
257
+ $type: string;
258
+ "11": {
259
+ $value: {
260
+ value: number;
261
+ unit: string;
262
+ };
263
+ };
264
+ "12": {
265
+ $value: {
266
+ value: number;
267
+ unit: string;
268
+ };
269
+ };
270
+ "14": {
271
+ $value: {
272
+ value: number;
273
+ unit: string;
274
+ };
275
+ };
276
+ "15": {
277
+ $value: {
278
+ value: number;
279
+ unit: string;
280
+ };
281
+ };
282
+ "18": {
283
+ $value: {
284
+ value: number;
285
+ unit: string;
286
+ };
287
+ };
288
+ "24": {
289
+ $value: {
290
+ value: number;
291
+ unit: string;
292
+ };
293
+ };
294
+ "32": {
295
+ $value: {
296
+ value: number;
297
+ unit: string;
298
+ };
299
+ };
300
+ };
301
+ dimension: {
302
+ $type: string;
303
+ zero: {
304
+ $value: {
305
+ value: number;
306
+ unit: string;
307
+ };
308
+ };
309
+ one: {
310
+ $value: {
311
+ value: number;
312
+ unit: string;
313
+ };
314
+ };
315
+ two: {
316
+ $value: {
317
+ value: number;
318
+ unit: string;
319
+ };
320
+ };
321
+ three: {
322
+ $value: {
323
+ value: number;
324
+ unit: string;
325
+ };
326
+ };
327
+ };
328
+ space: {
329
+ $type: string;
330
+ "4": {
331
+ $value: {
332
+ value: number;
333
+ unit: string;
334
+ };
335
+ };
336
+ "6": {
337
+ $value: {
338
+ value: number;
339
+ unit: string;
340
+ };
341
+ };
342
+ "8": {
343
+ $value: {
344
+ value: number;
345
+ unit: string;
346
+ };
347
+ };
348
+ "10": {
349
+ $value: {
350
+ value: number;
351
+ unit: string;
352
+ };
353
+ };
354
+ "12": {
355
+ $value: {
356
+ value: number;
357
+ unit: string;
358
+ };
359
+ };
360
+ "16": {
361
+ $value: {
362
+ value: number;
363
+ unit: string;
364
+ };
365
+ };
366
+ "20": {
367
+ $value: {
368
+ value: number;
369
+ unit: string;
370
+ };
371
+ };
372
+ "24": {
373
+ $value: {
374
+ value: number;
375
+ unit: string;
376
+ };
377
+ };
378
+ "32": {
379
+ $value: {
380
+ value: number;
381
+ unit: string;
382
+ };
383
+ };
384
+ };
385
+ "component-size": {
386
+ $type: string;
387
+ control: {
388
+ $value: {
389
+ value: number;
390
+ unit: string;
391
+ };
392
+ };
393
+ textarea: {
394
+ $value: {
395
+ value: number;
396
+ unit: string;
397
+ };
398
+ };
399
+ modal: {
400
+ $value: {
401
+ value: number;
402
+ unit: string;
403
+ };
404
+ };
405
+ };
406
+ layer: {
407
+ $type: string;
408
+ modal: {
409
+ $value: number;
410
+ };
411
+ };
412
+ weight: {
413
+ $type: string;
414
+ regular: {
415
+ $value: number;
416
+ };
417
+ medium: {
418
+ $value: number;
419
+ };
420
+ semibold: {
421
+ $value: number;
422
+ };
423
+ bold: {
424
+ $value: number;
425
+ };
426
+ black: {
427
+ $value: number;
428
+ };
429
+ };
430
+ ratio: {
431
+ $type: string;
432
+ display: {
433
+ $value: number;
434
+ };
435
+ body: {
436
+ $value: number;
437
+ };
438
+ copy: {
439
+ $value: number;
440
+ };
441
+ label: {
442
+ $value: number;
443
+ };
444
+ grain: {
445
+ $value: number;
446
+ };
447
+ hover: {
448
+ $value: number;
449
+ };
450
+ overlay: {
451
+ $value: number;
452
+ };
453
+ disabled: {
454
+ $value: number;
455
+ };
456
+ "tracking-control": {
457
+ $value: number;
458
+ };
459
+ "tracking-label": {
460
+ $value: number;
461
+ };
462
+ "tracking-panel": {
463
+ $value: number;
464
+ };
465
+ };
466
+ };
467
+ };
468
+ semantic: {
469
+ $description: string;
470
+ color: {
471
+ $type: string;
472
+ app: {
473
+ $description: string;
474
+ canvas: {
475
+ $value: string;
476
+ };
477
+ paper: {
478
+ $value: string;
479
+ };
480
+ ink: {
481
+ $value: string;
482
+ };
483
+ muted: {
484
+ $value: string;
485
+ };
486
+ mist: {
487
+ $value: string;
488
+ };
489
+ line: {
490
+ $value: string;
491
+ };
492
+ "control-line": {
493
+ $value: string;
494
+ };
495
+ placeholder: {
496
+ $value: string;
497
+ };
498
+ signal: {
499
+ $value: string;
500
+ };
501
+ "on-signal": {
502
+ $value: string;
503
+ };
504
+ focus: {
505
+ $value: string;
506
+ };
507
+ warning: {
508
+ $value: string;
509
+ };
510
+ success: {
511
+ $value: string;
512
+ };
513
+ danger: {
514
+ $value: string;
515
+ };
516
+ info: {
517
+ $value: string;
518
+ };
519
+ "tile-sage": {
520
+ $value: string;
521
+ };
522
+ "tile-sage-ink": {
523
+ $value: string;
524
+ };
525
+ "tile-slate": {
526
+ $value: string;
527
+ };
528
+ "tile-slate-ink": {
529
+ $value: string;
530
+ };
531
+ "tile-ochre": {
532
+ $value: string;
533
+ };
534
+ "tile-ochre-ink": {
535
+ $value: string;
536
+ };
537
+ "tile-clay": {
538
+ $value: string;
539
+ };
540
+ "tile-clay-ink": {
541
+ $value: string;
542
+ };
543
+ "tile-mauve": {
544
+ $value: string;
545
+ };
546
+ "tile-mauve-ink": {
547
+ $value: string;
548
+ };
549
+ "tile-stone": {
550
+ $value: string;
551
+ };
552
+ "tile-stone-ink": {
553
+ $value: string;
554
+ };
555
+ };
556
+ riso: {
557
+ $description: string;
558
+ paper: {
559
+ $value: string;
560
+ };
561
+ sheet: {
562
+ $value: string;
563
+ };
564
+ ink: {
565
+ $value: string;
566
+ };
567
+ "ink-2": {
568
+ $value: string;
569
+ };
570
+ "tint-35": {
571
+ $value: string;
572
+ };
573
+ "tint-18": {
574
+ $value: string;
575
+ };
576
+ highlight: {
577
+ $value: string;
578
+ };
579
+ };
580
+ };
581
+ font: {
582
+ $type: string;
583
+ display: {
584
+ $value: string;
585
+ };
586
+ body: {
587
+ $value: string;
588
+ };
589
+ sans: {
590
+ $value: string;
591
+ };
592
+ ui: {
593
+ $value: string;
594
+ };
595
+ mono: {
596
+ $value: string;
597
+ };
598
+ };
599
+ text: {
600
+ $type: string;
601
+ display: {
602
+ $value: string;
603
+ };
604
+ heading: {
605
+ $value: string;
606
+ };
607
+ body: {
608
+ $value: string;
609
+ };
610
+ ui: {
611
+ $value: string;
612
+ };
613
+ mono: {
614
+ $value: string;
615
+ };
616
+ label: {
617
+ $value: string;
618
+ };
619
+ };
620
+ leading: {
621
+ $type: string;
622
+ display: {
623
+ $value: string;
624
+ };
625
+ body: {
626
+ $value: string;
627
+ };
628
+ ui: {
629
+ $value: string;
630
+ };
631
+ label: {
632
+ $value: string;
633
+ };
634
+ };
635
+ "font-weight": {
636
+ $type: string;
637
+ black: {
638
+ $value: string;
639
+ };
640
+ regular: {
641
+ $value: string;
642
+ };
643
+ medium: {
644
+ $value: string;
645
+ };
646
+ semibold: {
647
+ $value: string;
648
+ };
649
+ bold: {
650
+ $value: string;
651
+ };
652
+ };
653
+ radius: {
654
+ $type: string;
655
+ control: {
656
+ $value: string;
657
+ };
658
+ };
659
+ border: {
660
+ $type: string;
661
+ app: {
662
+ $value: string;
663
+ };
664
+ riso: {
665
+ $value: string;
666
+ };
667
+ };
668
+ focus: {
669
+ $type: string;
670
+ "app-width": {
671
+ $value: string;
672
+ };
673
+ "app-offset": {
674
+ $value: string;
675
+ };
676
+ "riso-width": {
677
+ $value: string;
678
+ };
679
+ "riso-offset": {
680
+ $value: string;
681
+ };
682
+ };
683
+ space: {
684
+ $type: string;
685
+ xs: {
686
+ $value: string;
687
+ };
688
+ hint: {
689
+ $value: string;
690
+ };
691
+ sm: {
692
+ $value: string;
693
+ };
694
+ "tag-inline": {
695
+ $value: string;
696
+ };
697
+ md: {
698
+ $value: string;
699
+ };
700
+ lg: {
701
+ $value: string;
702
+ };
703
+ panel: {
704
+ $value: string;
705
+ };
706
+ modal: {
707
+ $value: string;
708
+ };
709
+ viewport: {
710
+ $value: string;
711
+ };
712
+ };
713
+ size: {
714
+ $type: string;
715
+ control: {
716
+ $value: string;
717
+ };
718
+ icon: {
719
+ $value: string;
720
+ };
721
+ "close-icon": {
722
+ $value: string;
723
+ };
724
+ close: {
725
+ $value: string;
726
+ };
727
+ textarea: {
728
+ $value: string;
729
+ };
730
+ modal: {
731
+ $value: string;
732
+ };
733
+ };
734
+ layer: {
735
+ $type: string;
736
+ modal: {
737
+ $value: string;
738
+ };
739
+ };
740
+ tracking: {
741
+ $type: string;
742
+ control: {
743
+ $value: string;
744
+ };
745
+ label: {
746
+ $value: string;
747
+ };
748
+ panel: {
749
+ $value: string;
750
+ };
751
+ };
752
+ opacity: {
753
+ $type: string;
754
+ "riso-grain": {
755
+ $value: string;
756
+ };
757
+ hover: {
758
+ $value: string;
759
+ };
760
+ overlay: {
761
+ $value: string;
762
+ };
763
+ disabled: {
764
+ $value: string;
765
+ };
766
+ "disabled-close": {
767
+ $value: string;
768
+ };
769
+ };
770
+ };
771
+ };
772
+ declare const tokens: Record<string, Token>;
773
+ declare const resolvedTokens: Record<string, ResolvedToken>;
774
+
775
+ export { type ResolvedToken, type Token, type TokenType, flattenTokens, renderTheme, resolveTokens, resolvedTokens, tokenDocuments, tokens };