@x12i/tokens 1.0.0 → 1.1.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.
package/dist/index.js CHANGED
@@ -1,690 +1,3 @@
1
- // src/generated/base.ts
2
- var base = {
3
- "border": {
4
- "width": {
5
- "1": "1px",
6
- "2": "2px",
7
- "default": "1px",
8
- "emphasis": "2px",
9
- "focus": "2px"
10
- }
11
- },
12
- "color": {
13
- "black": "#000000",
14
- "white": "#ffffff",
15
- "neutral": {
16
- "1": "#07090e",
17
- "2": "#0f1217",
18
- "3": "#181b20",
19
- "4": "#24262c",
20
- "5": "#32353c",
21
- "6": "#44484e",
22
- "7": "#5d6067",
23
- "8": "#777a82",
24
- "9": "#92959d",
25
- "10": "#b0b4bc",
26
- "11": "#e7ebf4",
27
- "12": "#f8faff"
28
- },
29
- "accent": {
30
- "1": "#0a0c25",
31
- "2": "#12163a",
32
- "3": "#1d2059",
33
- "4": "#282d74",
34
- "5": "#373e94",
35
- "6": "#444cb2",
36
- "7": "#5057dc",
37
- "8": "#5d67ee",
38
- "9": "#6e7cfd",
39
- "10": "#8b9bff",
40
- "11": "#e1e7ff",
41
- "12": "#f4f6ff"
42
- },
43
- "success": {
44
- "1": "#011408",
45
- "2": "#00220f",
46
- "3": "#003219",
47
- "4": "#004424",
48
- "5": "#005a31",
49
- "6": "#006d3c",
50
- "7": "#008148",
51
- "8": "#009253",
52
- "9": "#19a661",
53
- "10": "#59bc81",
54
- "11": "#d0f2da",
55
- "12": "#effaf2"
56
- },
57
- "warning": {
58
- "1": "#180d00",
59
- "2": "#271700",
60
- "3": "#3a2400",
61
- "4": "#4d3200",
62
- "5": "#654200",
63
- "6": "#7b5100",
64
- "7": "#916100",
65
- "8": "#a46e00",
66
- "9": "#bb7e00",
67
- "10": "#d09945",
68
- "11": "#fae4c7",
69
- "12": "#fdf6ec"
70
- },
71
- "danger": {
72
- "1": "#210505",
73
- "2": "#340909",
74
- "3": "#4f0a0d",
75
- "4": "#691214",
76
- "5": "#861d1f",
77
- "6": "#a12628",
78
- "7": "#c51d28",
79
- "8": "#d73337",
80
- "9": "#e9504d",
81
- "10": "#f97770",
82
- "11": "#ffdfdc",
83
- "12": "#fff4f3"
84
- },
85
- "info": {
86
- "1": "#00121d",
87
- "2": "#001e2d",
88
- "3": "#002d42",
89
- "4": "#003d58",
90
- "5": "#005172",
91
- "6": "#00628a",
92
- "7": "#0075a3",
93
- "8": "#0084b8",
94
- "9": "#0097d2",
95
- "10": "#4cb0e5",
96
- "11": "#d0edff",
97
- "12": "#eef9ff"
98
- },
99
- "categorical": {
100
- "light": {
101
- "1": "#2971c6",
102
- "2": "#ac5700",
103
- "3": "#008758",
104
- "4": "#a8488d",
105
- "5": "#867000",
106
- "6": "#00818c",
107
- "7": "#b94642",
108
- "8": "#8059bb"
109
- },
110
- "dark": {
111
- "1": "#70adfb",
112
- "2": "#e99355",
113
- "3": "#53c48e",
114
- "4": "#e189c5",
115
- "5": "#c5a93b",
116
- "6": "#00c1d0",
117
- "7": "#f28881",
118
- "8": "#b897f0"
119
- }
120
- },
121
- "sequential": {
122
- "1": "#e9f3ff",
123
- "2": "#bcd9ff",
124
- "3": "#8ebfff",
125
- "4": "#5ea4fd",
126
- "5": "#478ade",
127
- "6": "#3f72b2",
128
- "7": "#3f5b7f",
129
- "8": "#384453",
130
- "9": "#242f3d"
131
- },
132
- "diverging": {
133
- "1": "#2a6cba",
134
- "2": "#5e8dc9",
135
- "3": "#8dadd7",
136
- "4": "#bdcee3",
137
- "5": "#eeeeee",
138
- "6": "#dfc7b7",
139
- "7": "#cea081",
140
- "8": "#bb7949",
141
- "9": "#a45300"
142
- }
143
- },
144
- "font": {
145
- "family": {
146
- "sans": "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif",
147
- "mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace"
148
- },
149
- "weight": {
150
- "regular": 400,
151
- "medium": 500,
152
- "semibold": 600
153
- },
154
- "size": {
155
- "12": "12px",
156
- "13": "13px",
157
- "14": "14px",
158
- "16": "16px",
159
- "20": "20px",
160
- "24": "24px",
161
- "30": "30px",
162
- "48": "48px"
163
- },
164
- "lineHeight": {
165
- "16": "16px",
166
- "20": "20px",
167
- "22": "22px",
168
- "24": "24px",
169
- "28": "28px",
170
- "32": "32px",
171
- "38": "38px",
172
- "56": "56px"
173
- }
174
- },
175
- "radius": {
176
- "2": "2px",
177
- "4": "4px",
178
- "6": "6px",
179
- "8": "8px",
180
- "12": "12px",
181
- "16": "16px",
182
- "full": "9999px",
183
- "control": "6px",
184
- "panel": "8px",
185
- "overlay": "12px",
186
- "pill": "9999px"
187
- },
188
- "size": {
189
- "12": "12px",
190
- "16": "16px",
191
- "20": "20px",
192
- "24": "24px",
193
- "28": "28px",
194
- "32": "32px",
195
- "40": "40px",
196
- "44": "44px",
197
- "48": "48px",
198
- "56": "56px",
199
- "icon": {
200
- "xs": "12px",
201
- "sm": "16px",
202
- "md": "20px",
203
- "lg": "24px"
204
- },
205
- "target": {
206
- "min": "24px",
207
- "touch": "44px"
208
- }
209
- },
210
- "space": {
211
- "0": "0px",
212
- "1": "4px",
213
- "2": "8px",
214
- "3": "12px",
215
- "4": "16px",
216
- "5": "20px",
217
- "6": "24px",
218
- "8": "32px",
219
- "10": "40px",
220
- "12": "48px",
221
- "16": "64px",
222
- "20": "80px",
223
- "24": "96px",
224
- "0-5": "2px"
225
- },
226
- "text": {
227
- "display": {
228
- "size": "48px",
229
- "lineHeight": "56px",
230
- "weight": 600
231
- },
232
- "h1": {
233
- "size": "30px",
234
- "lineHeight": "38px",
235
- "weight": 600
236
- },
237
- "h2": {
238
- "size": "24px",
239
- "lineHeight": "32px",
240
- "weight": 600
241
- },
242
- "h3": {
243
- "size": "20px",
244
- "lineHeight": "28px",
245
- "weight": 600
246
- },
247
- "h4": {
248
- "size": "16px",
249
- "lineHeight": "24px",
250
- "weight": 600
251
- },
252
- "body": {
253
- "size": "14px",
254
- "lineHeight": "22px",
255
- "weight": 400
256
- },
257
- "label": {
258
- "size": "13px",
259
- "lineHeight": "20px",
260
- "weight": 500
261
- },
262
- "caption": {
263
- "size": "12px",
264
- "lineHeight": "16px",
265
- "weight": 400
266
- },
267
- "code": {
268
- "size": "13px",
269
- "lineHeight": "20px",
270
- "weight": 400
271
- }
272
- },
273
- "icon": {
274
- "strokeWidth": 1.5
275
- },
276
- "duration": {
277
- "instant": "90ms",
278
- "fast": "150ms",
279
- "base": "240ms",
280
- "slow": "400ms"
281
- },
282
- "easing": {
283
- "standard": "cubic-bezier(0.2, 0, 0, 1)",
284
- "enter": "cubic-bezier(0, 0, 0, 1)",
285
- "exit": "cubic-bezier(0.3, 0, 1, 1)"
286
- },
287
- "z": {
288
- "base": 0,
289
- "sticky": 10,
290
- "dropdown": 100,
291
- "overlay": 200,
292
- "modal": 300,
293
- "toast": 400,
294
- "tooltip": 500
295
- },
296
- "breakpoint": {
297
- "xs": "480px",
298
- "sm": "640px",
299
- "md": "768px",
300
- "lg": "1024px",
301
- "xl": "1280px",
302
- "2xl": "1536px"
303
- }
304
- };
305
-
306
- // src/generated/component.ts
307
- var component = {
308
- "button": {
309
- "height": {
310
- "xs": "24px",
311
- "sm": "28px",
312
- "md": "32px",
313
- "lg": "40px",
314
- "xl": "48px"
315
- },
316
- "paddingInline": {
317
- "xs": "8px",
318
- "sm": "8px",
319
- "md": "12px",
320
- "lg": "16px",
321
- "xl": "20px"
322
- },
323
- "gap": "8px"
324
- },
325
- "badge": {
326
- "height": {
327
- "sm": "16px",
328
- "md": "20px"
329
- }
330
- },
331
- "grid": {
332
- "row": {
333
- "height": "40px"
334
- }
335
- }
336
- };
337
-
338
- // src/generated/density-comfortable.ts
339
- var densityComfortable = {
340
- "size": {
341
- "control": {
342
- "xs": "28px",
343
- "sm": "32px",
344
- "md": "40px",
345
- "lg": "48px",
346
- "xl": "56px"
347
- }
348
- },
349
- "space": {
350
- "control": {
351
- "inline": {
352
- "xs": "12px",
353
- "sm": "12px",
354
- "md": "16px",
355
- "lg": "20px",
356
- "xl": "24px"
357
- },
358
- "gap": "12px"
359
- }
360
- }
361
- };
362
-
363
- // src/generated/density-compact.ts
364
- var densityCompact = {
365
- "size": {
366
- "control": {
367
- "xs": "20px",
368
- "sm": "24px",
369
- "md": "28px",
370
- "lg": "32px",
371
- "xl": "40px"
372
- }
373
- },
374
- "space": {
375
- "control": {
376
- "inline": {
377
- "xs": "4px",
378
- "sm": "4px",
379
- "md": "8px",
380
- "lg": "12px",
381
- "xl": "16px"
382
- },
383
- "gap": "4px"
384
- }
385
- }
386
- };
387
-
388
- // src/generated/density-default.ts
389
- var densityDefault = {
390
- "size": {
391
- "control": {
392
- "xs": "24px",
393
- "sm": "28px",
394
- "md": "32px",
395
- "lg": "40px",
396
- "xl": "48px"
397
- }
398
- },
399
- "space": {
400
- "control": {
401
- "inline": {
402
- "xs": "8px",
403
- "sm": "8px",
404
- "md": "12px",
405
- "lg": "16px",
406
- "xl": "20px"
407
- },
408
- "gap": "8px"
409
- }
410
- }
411
- };
412
-
413
- // src/generated/theme-dark.ts
414
- var dark = {
415
- "color": {
416
- "accent": {
417
- "default": "#5d67ee",
418
- "hover": "#5057dc",
419
- "active": "#444cb2",
420
- "subtle": "#1d2059",
421
- "on-accent": "#ffffff"
422
- },
423
- "bg": {
424
- "canvas": "#07090e",
425
- "surface": "#0f1217",
426
- "raised": "#181b20",
427
- "overlay": "#24262c",
428
- "inverse": "#f8faff"
429
- },
430
- "border": {
431
- "subtle": "#24262c",
432
- "default": "#777a82",
433
- "strong": "#92959d",
434
- "focus": "#6e7cfd"
435
- },
436
- "text": {
437
- "primary": "#f8faff",
438
- "secondary": "#b0b4bc",
439
- "tertiary": "#92959d",
440
- "disabled": "#44484e",
441
- "inverse": "#07090e",
442
- "link": "#8b9bff"
443
- },
444
- "status": {
445
- "success": {
446
- "background": "#00220f",
447
- "foreground": "#59bc81",
448
- "border": "#006d3c"
449
- },
450
- "warning": {
451
- "background": "#271700",
452
- "foreground": "#d09945",
453
- "border": "#7b5100"
454
- },
455
- "danger": {
456
- "background": "#340909",
457
- "foreground": "#f97770",
458
- "border": "#a12628"
459
- },
460
- "info": {
461
- "background": "#001e2d",
462
- "foreground": "#4cb0e5",
463
- "border": "#00628a"
464
- }
465
- },
466
- "chart": {
467
- "axis": "#b0b4bc",
468
- "grid": "#24262c",
469
- "muted": "#777a82",
470
- "reference": "#92959d",
471
- "categorical": {
472
- "1": "#70adfb",
473
- "2": "#e99355",
474
- "3": "#53c48e",
475
- "4": "#e189c5",
476
- "5": "#c5a93b",
477
- "6": "#00c1d0",
478
- "7": "#f28881",
479
- "8": "#b897f0"
480
- },
481
- "good": "#009253",
482
- "warning": "#a46e00",
483
- "critical": "#d73337"
484
- },
485
- "selection": "#282d74",
486
- "highlight": "#4d3200",
487
- "scrim": "rgba(0, 0, 0, 0.7)"
488
- },
489
- "shadow": {
490
- "raised": "0px 0px 0px 1px #ffffff14",
491
- "overlay": "0px 8px 24px 0px #00000080",
492
- "modal": "0px 16px 48px 0px #000000a6",
493
- "toast": "0px 8px 24px 0px #00000080"
494
- }
495
- };
496
-
497
- // src/generated/theme-hc.ts
498
- var hc = {
499
- "color": {
500
- "accent": {
501
- "default": "#8b9bff",
502
- "hover": "#e1e7ff",
503
- "active": "#f4f6ff",
504
- "subtle": "#0a0c25",
505
- "on-accent": "#000000"
506
- },
507
- "bg": {
508
- "canvas": "#000000",
509
- "surface": "#000000",
510
- "raised": "#07090e",
511
- "overlay": "#0f1217",
512
- "inverse": "#ffffff"
513
- },
514
- "border": {
515
- "subtle": "#777a82",
516
- "default": "#b0b4bc",
517
- "strong": "#ffffff",
518
- "focus": "#d09945"
519
- },
520
- "text": {
521
- "primary": "#ffffff",
522
- "secondary": "#e7ebf4",
523
- "tertiary": "#b0b4bc",
524
- "disabled": "#777a82",
525
- "inverse": "#000000",
526
- "link": "#8b9bff"
527
- },
528
- "status": {
529
- "success": {
530
- "background": "#000000",
531
- "foreground": "#59bc81",
532
- "border": "#59bc81"
533
- },
534
- "warning": {
535
- "background": "#000000",
536
- "foreground": "#d09945",
537
- "border": "#d09945"
538
- },
539
- "danger": {
540
- "background": "#000000",
541
- "foreground": "#f97770",
542
- "border": "#f97770"
543
- },
544
- "info": {
545
- "background": "#000000",
546
- "foreground": "#4cb0e5",
547
- "border": "#4cb0e5"
548
- }
549
- },
550
- "chart": {
551
- "axis": "#e7ebf4",
552
- "grid": "#44484e",
553
- "muted": "#92959d",
554
- "reference": "#b0b4bc",
555
- "categorical": {
556
- "1": "#70adfb",
557
- "2": "#e99355",
558
- "3": "#53c48e",
559
- "4": "#e189c5",
560
- "5": "#c5a93b",
561
- "6": "#00c1d0",
562
- "7": "#f28881",
563
- "8": "#b897f0"
564
- },
565
- "good": "#59bc81",
566
- "warning": "#d09945",
567
- "critical": "#f97770"
568
- },
569
- "selection": "#373e94",
570
- "highlight": "#654200",
571
- "scrim": "rgba(0, 0, 0, 0.9)"
572
- },
573
- "shadow": {
574
- "raised": "0px 0px 0px 0px #00000000",
575
- "overlay": "0px 0px 0px 0px #00000000",
576
- "modal": "0px 0px 0px 0px #00000000",
577
- "toast": "0px 0px 0px 0px #00000000"
578
- }
579
- };
580
-
581
- // src/generated/theme-light.ts
582
- var light = {
583
- "color": {
584
- "accent": {
585
- "default": "#444cb2",
586
- "hover": "#373e94",
587
- "active": "#282d74",
588
- "subtle": "#e1e7ff",
589
- "on-accent": "#ffffff"
590
- },
591
- "bg": {
592
- "canvas": "#f8faff",
593
- "surface": "#ffffff",
594
- "raised": "#ffffff",
595
- "overlay": "#ffffff",
596
- "inverse": "#0f1217"
597
- },
598
- "border": {
599
- "subtle": "#e7ebf4",
600
- "default": "#777a82",
601
- "strong": "#5d6067",
602
- "focus": "#444cb2"
603
- },
604
- "text": {
605
- "primary": "#0f1217",
606
- "secondary": "#44484e",
607
- "tertiary": "#5d6067",
608
- "disabled": "#92959d",
609
- "inverse": "#f8faff",
610
- "link": "#373e94"
611
- },
612
- "status": {
613
- "success": {
614
- "background": "#d0f2da",
615
- "foreground": "#003219",
616
- "border": "#009253"
617
- },
618
- "warning": {
619
- "background": "#fae4c7",
620
- "foreground": "#3a2400",
621
- "border": "#a46e00"
622
- },
623
- "danger": {
624
- "background": "#ffdfdc",
625
- "foreground": "#4f0a0d",
626
- "border": "#d73337"
627
- },
628
- "info": {
629
- "background": "#d0edff",
630
- "foreground": "#002d42",
631
- "border": "#0084b8"
632
- }
633
- },
634
- "chart": {
635
- "axis": "#44484e",
636
- "grid": "#e7ebf4",
637
- "muted": "#777a82",
638
- "reference": "#5d6067",
639
- "categorical": {
640
- "1": "#2971c6",
641
- "2": "#ac5700",
642
- "3": "#008758",
643
- "4": "#a8488d",
644
- "5": "#867000",
645
- "6": "#00818c",
646
- "7": "#b94642",
647
- "8": "#8059bb"
648
- },
649
- "good": "#006d3c",
650
- "warning": "#7b5100",
651
- "critical": "#a12628"
652
- },
653
- "selection": "#8b9bff",
654
- "highlight": "#d09945",
655
- "scrim": "rgba(7, 9, 14, 0.5)"
656
- },
657
- "shadow": {
658
- "raised": "0px 1px 3px 0px #0f12171a",
659
- "overlay": "0px 6px 16px -2px #0f121724",
660
- "modal": "0px 16px 40px -4px #0f12172e",
661
- "toast": "0px 8px 24px -4px #0f121729"
662
- }
663
- };
664
-
665
- // src/index.ts
666
- var CSS_VAR_PREFIX = "kit";
667
- var THEME_ATTRIBUTE = "data-theme";
668
- var DENSITY_ATTRIBUTE = "data-density";
669
- var THEME_STORAGE_KEY = "kit-theme";
670
- var DENSITY_STORAGE_KEY = "kit-density";
671
- var themeNames = ["light", "dark", "hc"];
672
- var densityNames = ["compact", "default", "comfortable"];
673
- var themes = { light, dark, hc };
674
- var densities = {
675
- compact: densityCompact,
676
- default: densityDefault,
677
- comfortable: densityComfortable
678
- };
679
- var toKebab = (segment) => segment.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
680
- function cssVarName(path) {
681
- return `--${CSS_VAR_PREFIX}-${path.split(".").map(toKebab).join("-")}`;
682
- }
683
- function cssVar(path, fallback) {
684
- const name = cssVarName(path);
685
- return fallback === void 0 ? `var(${name})` : `var(${name}, ${fallback})`;
686
- }
687
-
688
- export { CSS_VAR_PREFIX, DENSITY_ATTRIBUTE, DENSITY_STORAGE_KEY, THEME_ATTRIBUTE, THEME_STORAGE_KEY, base, component, cssVar, cssVarName, dark, densities, densityComfortable, densityCompact, densityDefault, densityNames, hc, light, themeNames, themes };
1
+ export { CSS_VAR_PREFIX, DENSITY_ATTRIBUTE, DENSITY_STORAGE_KEY, THEME_ATTRIBUTE, THEME_STORAGE_KEY, base, component, cssVar, cssVarName, dark, densities, densityComfortable, densityCompact, densityDefault, densityNames, hc, light, themeNames, themes } from './chunk-W3FHW2SE.js';
689
2
  //# sourceMappingURL=index.js.map
690
3
  //# sourceMappingURL=index.js.map