@tantuui/tokens 0.0.1-rc1

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,778 @@
1
+ 'use strict';
2
+
3
+ // src/tokens/color.ts
4
+ var color = {
5
+ // ── Primitives (raw scale) ──────────────────────────────────────────
6
+ primitive: {
7
+ // ── White / Black (brand colors) ───────────────────────────────────
8
+ white: "#ffffff",
9
+ black: "#000000",
10
+ // ── Brand White (scale from pure white) ────────────────────────────
11
+ brandWhite50: "#ffffff",
12
+ brandWhite100: "#fefefe",
13
+ brandWhite200: "#fafafa",
14
+ brandWhite300: "#f5f5f5",
15
+ brandWhite400: "#ededed",
16
+ brandWhite500: "#e0e0e0",
17
+ brandWhite600: "#c2c2c2",
18
+ brandWhite700: "#9e9e9e",
19
+ brandWhite800: "#757575",
20
+ brandWhite900: "#4a4a4a",
21
+ brandWhite950: "#2b2b2b",
22
+ brandWhiteDefault: "#ffffff",
23
+ // base from brand palette
24
+ // ── Brand Black (scale from pure black) ────────────────────────────
25
+ brandBlack50: "#f5f5f5",
26
+ brandBlack100: "#e8e8e8",
27
+ brandBlack200: "#d4d4d4",
28
+ brandBlack300: "#b0b0b0",
29
+ brandBlack400: "#8a8a8a",
30
+ brandBlack500: "#616161",
31
+ brandBlack600: "#4a4a4a",
32
+ brandBlack700: "#363636",
33
+ brandBlack800: "#242424",
34
+ brandBlack900: "#141414",
35
+ brandBlack950: "#000000",
36
+ brandBlackDefault: "#000000",
37
+ // base from brand palette
38
+ // ── Brand Navy (#0D132B base) ──────────────────────────────────────
39
+ brandNavy50: "#f3f4f7",
40
+ brandNavy100: "#e7e8ef",
41
+ brandNavy200: "#cacfe2",
42
+ brandNavy300: "#9da8d2",
43
+ brandNavy400: "#6377c5",
44
+ brandNavy500: "#354eb0",
45
+ brandNavy600: "#2c4091",
46
+ brandNavy700: "#223272",
47
+ brandNavy800: "#1a2656",
48
+ brandNavy900: "#121a3b",
49
+ brandNavy950: "#0a0e1f",
50
+ brandNavyDefault: "#2c4091",
51
+ // base from brand palette
52
+ // ── Brand Blue (#2563EB base) ──────────────────────────────────────
53
+ brandBlue50: "#eff4ff",
54
+ brandBlue100: "#dbe6fe",
55
+ brandBlue200: "#bfd3fe",
56
+ brandBlue300: "#93b4fd",
57
+ brandBlue400: "#6090fa",
58
+ brandBlue500: "#3b6ef6",
59
+ brandBlue600: "#2563eb",
60
+ brandBlue700: "#1d50d8",
61
+ brandBlue800: "#1e41af",
62
+ brandBlue900: "#1e398a",
63
+ brandBlue950: "#172554",
64
+ brandBlueDefault: "#2563EB",
65
+ // base from brand palette
66
+ // ── Brand Purple (#7C3AED base) ────────────────────────────────────
67
+ brandPurple50: "#f5f3ff",
68
+ brandPurple100: "#ede8ff",
69
+ brandPurple200: "#ddd6fe",
70
+ brandPurple300: "#c4b5fc",
71
+ brandPurple400: "#a78bfa",
72
+ brandPurple500: "#8b5cf6",
73
+ brandPurple600: "#7c3aed",
74
+ brandPurple700: "#6d28d9",
75
+ brandPurple800: "#5b21b6",
76
+ brandPurple900: "#4c1d95",
77
+ brandPurple950: "#2e1065",
78
+ brandPurpleDefault: "#7C3AED",
79
+ // base from brand palette
80
+ // ── Brand Pink (#D946EF base) ──────────────────────────────────────
81
+ brandPink50: "#fdf4ff",
82
+ brandPink100: "#fae8ff",
83
+ brandPink200: "#f5d0fe",
84
+ brandPink300: "#f0abfc",
85
+ brandPink400: "#e879f9",
86
+ brandPink500: "#d946ef",
87
+ brandPink600: "#c026d3",
88
+ brandPink700: "#a21caf",
89
+ brandPink800: "#86198f",
90
+ brandPink900: "#701a75",
91
+ brandPink950: "#4a044e",
92
+ brandPinkDefault: "#c026d3",
93
+ // base from brand palette
94
+ // ── Brand Gray (#4B5563 base) ──────────────────────────────────────
95
+ brandGray50: "#f9fafb",
96
+ brandGray100: "#f3f4f6",
97
+ brandGray200: "#e5e7eb",
98
+ brandGray300: "#d1d5db",
99
+ brandGray400: "#9ca3af",
100
+ brandGray500: "#6b7280",
101
+ brandGray600: "#4b5563",
102
+ brandGray700: "#374151",
103
+ brandGray800: "#1f2937",
104
+ brandGray900: "#111827",
105
+ brandGray950: "#030712",
106
+ brandGrayDefault: "#4B5563",
107
+ // base from brand palette
108
+ // ── Brand Light (#F3F4F6 base) ─────────────────────────────────────
109
+ brandLight50: "#fdfefe",
110
+ brandLight100: "#f9fafb",
111
+ brandLight200: "#f3f4f6",
112
+ brandLight300: "#e5e7eb",
113
+ brandLight400: "#d1d5db",
114
+ brandLight500: "#9ca3af",
115
+ brandLight600: "#6b7280",
116
+ brandLight700: "#4b5563",
117
+ brandLight800: "#374151",
118
+ brandLight900: "#1f2937",
119
+ brandLight950: "#111827",
120
+ brandLightDefault: "#F3F4F6",
121
+ // base from brand palette
122
+ // ── Success (green) ───────────────────────────────────────────────
123
+ success50: "#f0fdf4",
124
+ success100: "#dcfce7",
125
+ success200: "#bbf7d0",
126
+ success300: "#86efac",
127
+ success400: "#4ade80",
128
+ success500: "#22c55e",
129
+ success600: "#16a34a",
130
+ success700: "#15803d",
131
+ success800: "#166534",
132
+ success900: "#14532d",
133
+ success950: "#052e16",
134
+ successDefault: "#16a34a",
135
+ // ── Warning (amber) ────────────────────────────────────────────────
136
+ warning50: "#fffbeb",
137
+ warning100: "#fef3c7",
138
+ warning200: "#fde68a",
139
+ warning300: "#fcd34d",
140
+ warning400: "#fbbf24",
141
+ warning500: "#f59e0b",
142
+ warning600: "#d97706",
143
+ warning700: "#b45309",
144
+ warning800: "#92400e",
145
+ warning900: "#78350f",
146
+ warning950: "#451a03",
147
+ warningDefault: "#d97706",
148
+ // ── Danger (red) ───────────────────────────────────────────────────
149
+ danger50: "#fef2f2",
150
+ danger100: "#fee2e2",
151
+ danger200: "#fecaca",
152
+ danger300: "#fca5a5",
153
+ danger400: "#f87171",
154
+ danger500: "#ef4444",
155
+ danger600: "#dc2626",
156
+ danger700: "#b91c1c",
157
+ danger800: "#991b1b",
158
+ danger900: "#7f1d1d",
159
+ danger950: "#450a0a",
160
+ dangerDefault: "#dc2626",
161
+ // ── Info (blue) ────────────────────────────────────────────────────
162
+ info50: "#eff6ff",
163
+ info100: "#dbeafe",
164
+ info200: "#bfdbfe",
165
+ info300: "#93c5fd",
166
+ info400: "#60a5fa",
167
+ info500: "#3b82f6",
168
+ info600: "#2563eb",
169
+ info700: "#1d4ed8",
170
+ info800: "#1e40af",
171
+ info900: "#1e3a8a",
172
+ info950: "#172554",
173
+ infoDefault: "#2563eb",
174
+ // ── Teal (cyan/teal) ───────────────────────────────────────────────
175
+ teal50: "#f0fdfa",
176
+ teal100: "#ccfbf1",
177
+ teal200: "#99f6e4",
178
+ teal300: "#5eead4",
179
+ teal400: "#2dd4bf",
180
+ teal500: "#14b8a6",
181
+ teal600: "#0d9488",
182
+ teal700: "#0f766e",
183
+ teal800: "#115e59",
184
+ teal900: "#134e4a",
185
+ teal950: "#042f2e",
186
+ tealDefault: "#0d9488",
187
+ // ── Orange (deep orange) ───────────────────────────────────────────
188
+ orange50: "#fff7ed",
189
+ orange100: "#ffedd5",
190
+ orange200: "#fed7aa",
191
+ orange300: "#fdba74",
192
+ orange400: "#fb923c",
193
+ orange500: "#f97316",
194
+ orange600: "#ea580c",
195
+ orange700: "#c2410c",
196
+ orange800: "#9a3412",
197
+ orange900: "#7c2d12",
198
+ orange950: "#431407",
199
+ orangeDefault: "#ea580c",
200
+ // ── Rose (soft red/pink) ───────────────────────────────────────────
201
+ rose50: "#fff1f2",
202
+ rose100: "#ffe4e6",
203
+ rose200: "#fecdd3",
204
+ rose300: "#fda4af",
205
+ rose400: "#fb7185",
206
+ rose500: "#f43f5e",
207
+ rose600: "#e11d48",
208
+ rose700: "#be123c",
209
+ rose800: "#9f1239",
210
+ rose900: "#881337",
211
+ rose950: "#4c0519",
212
+ roseDefault: "#e11d48",
213
+ // ── Indigo (deep blue-purple) ──────────────────────────────────────
214
+ indigo50: "#eef2ff",
215
+ indigo100: "#e0e7ff",
216
+ indigo200: "#c7d2fe",
217
+ indigo300: "#a5b4fc",
218
+ indigo400: "#818cf8",
219
+ indigo500: "#6366f1",
220
+ indigo600: "#4f46e5",
221
+ indigo700: "#4338ca",
222
+ indigo800: "#3730a3",
223
+ indigo900: "#312e81",
224
+ indigo950: "#1e1b4b",
225
+ indigoDefault: "#4f46e5",
226
+ // ── Mint (fresh green) ─────────────────────────────────────────────
227
+ mint50: "#ecfdf5",
228
+ mint100: "#d1fae5",
229
+ mint200: "#a7f3d0",
230
+ mint300: "#6ee7b7",
231
+ mint400: "#34d399",
232
+ mint500: "#10b981",
233
+ mint600: "#059669",
234
+ mint700: "#047857",
235
+ mint800: "#065f46",
236
+ mint900: "#064e3b",
237
+ mint950: "#022c22",
238
+ mintDefault: "#059669",
239
+ // ── Coal (dark neutral state) ──────────────────────────────────────
240
+ coal50: "#f8fafc",
241
+ coal100: "#f1f5f9",
242
+ coal200: "#e2e8f0",
243
+ coal300: "#cbd5e1",
244
+ coal400: "#94a3b8",
245
+ coal500: "#64748b",
246
+ coal600: "#475569",
247
+ coal700: "#334155",
248
+ coal800: "#1e293b",
249
+ coal900: "#0f172a",
250
+ coal950: "#020617",
251
+ coalDefault: "#475569"
252
+ },
253
+ // ── Semantic aliases ────────────────────────────────────────────────
254
+ semantic: {
255
+ // Background
256
+ bgBase: "var(--tui-color-white)",
257
+ bgSubtle: "var(--tui-color-brand-black-50)",
258
+ bgMuted: "var(--tui-color-brand-black-100)",
259
+ bgInverse: "var(--tui-color-brand-black-900)",
260
+ // Surface (cards, panels)
261
+ surfaceDefault: "var(--tui-color-white)",
262
+ surfaceRaised: "var(--tui-color-brand-black-50)",
263
+ surfaceOverlay: "var(--tui-color-brand-black-100)",
264
+ // Text
265
+ textPrimary: "var(--tui-color-brand-black-900)",
266
+ textSecondary: "var(--tui-color-brand-gray-600)",
267
+ textTertiary: "var(--tui-color-brand-gray-400)",
268
+ textDisabled: "var(--tui-color-brand-black-300)",
269
+ textInverse: "var(--tui-color-white)",
270
+ textLink: "var(--tui-color-brand-blue-600)",
271
+ textLinkHover: "var(--tui-color-brand-blue-700)",
272
+ // Border
273
+ borderDefault: "var(--tui-color-brand-black-200)",
274
+ borderStrong: "var(--tui-color-brand-black-400)",
275
+ borderFocus: "var(--tui-color-brand-pink-500)",
276
+ // Focus ring
277
+ focusRing: "var(--tui-color-brand-black-500)",
278
+ focusRingGap: "var(--tui-color-white)",
279
+ // Brand interactive (uses brand-pink as primary)
280
+ brandDefault: "var(--tui-color-brand-pink-600)",
281
+ brandHover: "var(--tui-color-brand-pink-700)",
282
+ brandActive: "var(--tui-color-brand-pink-800)",
283
+ brandSubtle: "var(--tui-color-brand-pink-50)",
284
+ brandText: "var(--tui-color-white)",
285
+ // Status
286
+ successDefault: "var(--tui-color-success-600)",
287
+ successSubtle: "var(--tui-color-success-50)",
288
+ successText: "var(--tui-color-success-700)",
289
+ warningDefault: "var(--tui-color-warning-600)",
290
+ warningSubtle: "var(--tui-color-warning-50)",
291
+ warningText: "var(--tui-color-warning-700)",
292
+ dangerDefault: "var(--tui-color-danger-600)",
293
+ dangerSubtle: "var(--tui-color-danger-50)",
294
+ dangerText: "var(--tui-color-danger-700)",
295
+ infoDefault: "var(--tui-color-info-600)",
296
+ infoSubtle: "var(--tui-color-info-50)",
297
+ infoText: "var(--tui-color-info-700)",
298
+ tealDefault: "var(--tui-color-teal-600)",
299
+ tealSubtle: "var(--tui-color-teal-50)",
300
+ tealText: "var(--tui-color-teal-700)",
301
+ orangeDefault: "var(--tui-color-orange-600)",
302
+ orangeSubtle: "var(--tui-color-orange-50)",
303
+ orangeText: "var(--tui-color-orange-700)",
304
+ roseDefault: "var(--tui-color-rose-600)",
305
+ roseSubtle: "var(--tui-color-rose-50)",
306
+ roseText: "var(--tui-color-rose-700)",
307
+ indigoDefault: "var(--tui-color-indigo-600)",
308
+ indigoSubtle: "var(--tui-color-indigo-50)",
309
+ indigoText: "var(--tui-color-indigo-700)",
310
+ mintDefault: "var(--tui-color-mint-600)",
311
+ mintSubtle: "var(--tui-color-mint-50)",
312
+ mintText: "var(--tui-color-mint-700)",
313
+ coalDefault: "var(--tui-color-coal-600)",
314
+ coalSubtle: "var(--tui-color-coal-50)",
315
+ coalText: "var(--tui-color-coal-700)"
316
+ }
317
+ };
318
+
319
+ // src/tokens/spacing.ts
320
+ var spacing = {
321
+ 0: "0px",
322
+ px: "1px",
323
+ 0.5: "0.125rem",
324
+ // 2px
325
+ 1: "0.25rem",
326
+ // 4px
327
+ 1.5: "0.375rem",
328
+ // 6px
329
+ 2: "0.5rem",
330
+ // 8px
331
+ 2.5: "0.625rem",
332
+ // 10px
333
+ 3: "0.75rem",
334
+ // 12px
335
+ 3.5: "0.875rem",
336
+ // 14px
337
+ 4: "1rem",
338
+ // 16px
339
+ 5: "1.25rem",
340
+ // 20px
341
+ 6: "1.5rem",
342
+ // 24px
343
+ 7: "1.75rem",
344
+ // 28px
345
+ 8: "2rem",
346
+ // 32px
347
+ 9: "2.25rem",
348
+ // 36px
349
+ 10: "2.5rem",
350
+ // 40px
351
+ 11: "2.75rem",
352
+ // 44px
353
+ 12: "3rem",
354
+ // 48px
355
+ 14: "3.5rem",
356
+ // 56px
357
+ 16: "4rem",
358
+ // 64px
359
+ 20: "5rem",
360
+ // 80px
361
+ 24: "6rem",
362
+ // 96px
363
+ 28: "7rem",
364
+ // 112px
365
+ 32: "8rem",
366
+ // 128px
367
+ 36: "9rem",
368
+ // 144px
369
+ 40: "10rem",
370
+ // 160px
371
+ 44: "11rem",
372
+ // 176px
373
+ 48: "12rem",
374
+ // 192px
375
+ 52: "13rem",
376
+ // 208px
377
+ 56: "14rem",
378
+ // 224px
379
+ 60: "15rem",
380
+ // 240px
381
+ 64: "16rem",
382
+ // 256px
383
+ 72: "18rem",
384
+ // 288px
385
+ 80: "20rem",
386
+ // 320px
387
+ 96: "24rem",
388
+ // 384px
389
+ // ── Semantic defaults ────────────────────────────────────────────────
390
+ componentXs: "var(--tui-spacing-1)",
391
+ // tight inner padding (badges)
392
+ componentSm: "var(--tui-spacing-2)",
393
+ // small component padding
394
+ componentMd: "var(--tui-spacing-3)",
395
+ // default component padding
396
+ componentLg: "var(--tui-spacing-4)",
397
+ // large component padding
398
+ componentXl: "var(--tui-spacing-6)",
399
+ // extra-large component padding
400
+ sectionSm: "var(--tui-spacing-6)",
401
+ // small section spacing
402
+ sectionMd: "var(--tui-spacing-8)",
403
+ // default section spacing
404
+ sectionLg: "var(--tui-spacing-12)",
405
+ // large section spacing
406
+ pagePadding: "var(--tui-spacing-4)",
407
+ // page-level side padding
408
+ cardPadding: "var(--tui-spacing-4)",
409
+ // card/panel inner padding
410
+ modalPadding: "var(--tui-spacing-6)",
411
+ // modal/dialog inner padding
412
+ stackSm: "var(--tui-spacing-2)",
413
+ // small vertical stack gap
414
+ stackMd: "var(--tui-spacing-4)",
415
+ // default vertical stack gap
416
+ stackLg: "var(--tui-spacing-6)",
417
+ // large vertical stack gap
418
+ inlineSm: "var(--tui-spacing-2)",
419
+ // small horizontal gap
420
+ inlineMd: "var(--tui-spacing-3)",
421
+ // default horizontal gap
422
+ inlineLg: "var(--tui-spacing-4)"
423
+ // large horizontal gap
424
+ };
425
+
426
+ // src/tokens/typography.ts
427
+ var fontFamily = {
428
+ sans: "'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif",
429
+ serif: "'Georgia', ui-serif, serif",
430
+ mono: "'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace"
431
+ };
432
+ var fontSize = {
433
+ "2xs": "0.625rem",
434
+ // 10px
435
+ xs: "0.75rem",
436
+ // 12px
437
+ sm: "0.875rem",
438
+ // 14px
439
+ md: "1rem",
440
+ // 16px ← base
441
+ lg: "1.125rem",
442
+ // 18px
443
+ xl: "1.25rem",
444
+ // 20px
445
+ "2xl": "1.5rem",
446
+ // 24px
447
+ "3xl": "1.875rem",
448
+ // 30px
449
+ "4xl": "2.25rem",
450
+ // 36px
451
+ "5xl": "3rem",
452
+ // 48px
453
+ "6xl": "3.75rem",
454
+ // 60px
455
+ "7xl": "4.5rem"
456
+ // 72px
457
+ };
458
+ var fontWeight = {
459
+ thin: "100",
460
+ extralight: "200",
461
+ light: "300",
462
+ normal: "400",
463
+ medium: "500",
464
+ semibold: "600",
465
+ bold: "700",
466
+ extrabold: "800",
467
+ black: "900"
468
+ };
469
+ var lineHeight = {
470
+ none: "1",
471
+ tight: "1.25",
472
+ snug: "1.375",
473
+ normal: "1.5",
474
+ relaxed: "1.625",
475
+ loose: "2",
476
+ "3": "0.75rem",
477
+ "4": "1rem",
478
+ "5": "1.25rem",
479
+ "6": "1.5rem",
480
+ "7": "1.75rem",
481
+ "8": "2rem",
482
+ "9": "2.25rem",
483
+ "10": "2.5rem"
484
+ };
485
+ var letterSpacing = {
486
+ tighter: "-0.05em",
487
+ tight: "-0.025em",
488
+ normal: "0em",
489
+ wide: "0.025em",
490
+ wider: "0.05em",
491
+ widest: "0.1em"
492
+ };
493
+ var typography = {
494
+ fontFamily,
495
+ fontSize,
496
+ fontWeight,
497
+ lineHeight,
498
+ letterSpacing
499
+ };
500
+
501
+ // src/tokens/radius.ts
502
+ var radius = {
503
+ none: "0px",
504
+ xs: "0.125rem",
505
+ // 2px
506
+ sm: "0.25rem",
507
+ // 4px
508
+ md: "0.375rem",
509
+ // 6px
510
+ lg: "0.5rem",
511
+ // 8px
512
+ xl: "0.75rem",
513
+ // 12px
514
+ "2xl": "1rem",
515
+ // 16px
516
+ "3xl": "1.5rem",
517
+ // 24px
518
+ full: "9999px",
519
+ // pill / circle
520
+ // ── Semantic defaults ────────────────────────────────────────────────
521
+ default: "var(--tui-radius-md)",
522
+ // default component radius
523
+ button: "var(--tui-radius-md)",
524
+ // buttons
525
+ input: "var(--tui-radius-md)",
526
+ // inputs, selects, textareas
527
+ card: "var(--tui-radius-lg)",
528
+ // cards, panels
529
+ badge: "var(--tui-radius-full)",
530
+ // badges, tags, pills
531
+ avatar: "var(--tui-radius-full)",
532
+ // avatar circles
533
+ modal: "var(--tui-radius-xl)",
534
+ // modals, dialogs
535
+ tooltip: "var(--tui-radius-sm)"
536
+ // tooltips, popovers
537
+ };
538
+
539
+ // src/tokens/shadow.ts
540
+ var shadow = {
541
+ none: "none",
542
+ // Elevation scale
543
+ xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
544
+ sm: "0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10)",
545
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
546
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)",
547
+ xl: "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)",
548
+ "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
549
+ // Inner
550
+ inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
551
+ // Focus ring (used for keyboard focus)
552
+ focus: "0 0 0 3px var(--tui-color-brand-pink-300, #f0abfc)",
553
+ // Brand focus ring
554
+ focusBrand: "0 0 0 3px var(--tui-color-brand-pink-400, #e879f9)",
555
+ // ── Semantic defaults ────────────────────────────────────────────────
556
+ default: "var(--tui-shadow-sm)",
557
+ // default component shadow
558
+ card: "var(--tui-shadow-md)",
559
+ // cards, panels
560
+ dropdown: "var(--tui-shadow-lg)",
561
+ // dropdowns, menus
562
+ modal: "var(--tui-shadow-xl)",
563
+ // modals, dialogs
564
+ tooltip: "var(--tui-shadow-md)",
565
+ // tooltips, popovers
566
+ button: "var(--tui-shadow-xs)"
567
+ // subtle button lift
568
+ };
569
+
570
+ // src/tokens/border.ts
571
+ var borderWidth = {
572
+ 0: "0px",
573
+ 0.5: "0.5px",
574
+ 1: "1px",
575
+ 1.5: "1.5px",
576
+ 2: "2px",
577
+ 2.5: "2.5px",
578
+ 3: "3px",
579
+ 3.5: "3.5px",
580
+ 4: "4px",
581
+ 4.5: "4.5px",
582
+ 5: "5px",
583
+ 5.5: "5.5px",
584
+ 8: "8px",
585
+ none: "0px",
586
+ xs: "0.5px",
587
+ sm: "1px",
588
+ md: "2px",
589
+ lg: "4px",
590
+ xl: "6px",
591
+ "2xl": "12px",
592
+ "3xl": "18px",
593
+ "4xl": "24px",
594
+ "5xl": "30px",
595
+ "6xl": "36px",
596
+ "7xl": "42px",
597
+ "8xl": "48px",
598
+ // ── Semantic defaults ────────────────────────────────────────────────
599
+ default: "var(--tui-border-width-1)",
600
+ // default border width
601
+ input: "var(--tui-border-width-1)",
602
+ // input/select border
603
+ card: "var(--tui-border-width-1)",
604
+ // card border
605
+ divider: "var(--tui-border-width-1)",
606
+ // horizontal/vertical dividers
607
+ thick: "var(--tui-border-width-2)"
608
+ // emphasized borders
609
+ };
610
+ var borderStyle = {
611
+ solid: "solid",
612
+ dashed: "dashed",
613
+ dotted: "dotted",
614
+ none: "none"
615
+ };
616
+ var border = {
617
+ width: borderWidth,
618
+ style: borderStyle
619
+ };
620
+
621
+ // src/tokens/zindex.ts
622
+ var zIndex = {
623
+ hide: "-1",
624
+ auto: "auto",
625
+ base: "0",
626
+ raised: "1",
627
+ dropdown: "1000",
628
+ sticky: "1100",
629
+ overlay: "1200",
630
+ modal: "1300",
631
+ popover: "1400",
632
+ toast: "1500",
633
+ tooltip: "1600"
634
+ };
635
+
636
+ // src/tokens/animation.ts
637
+ var duration = {
638
+ instant: "0ms",
639
+ fast: "100ms",
640
+ normal: "200ms",
641
+ slow: "300ms",
642
+ slower: "500ms",
643
+ slowest: "700ms",
644
+ // ── Semantic defaults ────────────────────────────────────────────────
645
+ default: "var(--tui-duration-normal)",
646
+ // default transition duration
647
+ hover: "var(--tui-duration-fast)",
648
+ // hover state transitions
649
+ modal: "var(--tui-duration-slow)",
650
+ // modal open/close
651
+ tooltip: "var(--tui-duration-fast)",
652
+ // tooltip show/hide
653
+ collapse: "var(--tui-duration-slow)"
654
+ // accordion/collapse
655
+ };
656
+ var easing = {
657
+ linear: "linear",
658
+ in: "cubic-bezier(0.4, 0, 1, 1)",
659
+ out: "cubic-bezier(0, 0, 0.2, 1)",
660
+ inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
661
+ bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
662
+ spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
663
+ // ── Semantic defaults ────────────────────────────────────────────────
664
+ default: "var(--tui-ease-in-out)",
665
+ // default easing
666
+ enter: "var(--tui-ease-out)",
667
+ // elements entering
668
+ exit: "var(--tui-ease-in)"
669
+ // elements exiting
670
+ };
671
+ var animation = {
672
+ duration,
673
+ easing
674
+ };
675
+
676
+ // src/tokens/breakpoint.ts
677
+ var breakpoint = {
678
+ xs: "320px",
679
+ sm: "640px",
680
+ md: "768px",
681
+ lg: "1024px",
682
+ xl: "1280px",
683
+ "2xl": "1536px"
684
+ };
685
+
686
+ // src/tokens/opacity.ts
687
+ var opacity = {
688
+ 0: "0",
689
+ 5: "0.05",
690
+ 10: "0.1",
691
+ 20: "0.2",
692
+ 25: "0.25",
693
+ 30: "0.3",
694
+ 35: "0.35",
695
+ 40: "0.4",
696
+ 45: "0.45",
697
+ 50: "0.5",
698
+ 55: "0.55",
699
+ 60: "0.6",
700
+ 65: "0.65",
701
+ 70: "0.7",
702
+ 75: "0.75",
703
+ 80: "0.8",
704
+ 85: "0.55",
705
+ 90: "0.9",
706
+ 95: "0.95",
707
+ 100: "1"
708
+ };
709
+
710
+ // src/css-generator.ts
711
+ function toKebab(str) {
712
+ return str.replace(/\./g, "_").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/([a-zA-Z])(\d)/g, "$1-$2").toLowerCase();
713
+ }
714
+ function flattenTokens(obj, prefix = "--tui", skipKeys = []) {
715
+ const result = {};
716
+ for (const [key, value] of Object.entries(obj)) {
717
+ const segment = toKebab(key);
718
+ const varName = skipKeys.includes(key) ? prefix : `${prefix}-${segment}`;
719
+ if (typeof value === "object" && value !== null) {
720
+ Object.assign(result, flattenTokens(value, varName, []));
721
+ } else {
722
+ result[varName] = String(value);
723
+ }
724
+ }
725
+ return result;
726
+ }
727
+ function toCSSRoot(flatTokens, selector = ":root") {
728
+ const lines = Object.entries(flatTokens).map(([prop, value]) => ` ${prop}: ${value};`).join("\n");
729
+ return `${selector} {
730
+ ${lines}
731
+ }
732
+ `;
733
+ }
734
+ function generateCSSCategory(categoryName, tokens2, selector = ":root", skipKeys = []) {
735
+ const prefix = `--tui-${toKebab(categoryName)}`;
736
+ const flat = flattenTokens(tokens2, prefix, skipKeys);
737
+ return toCSSRoot(flat, selector);
738
+ }
739
+
740
+ // src/index.ts
741
+ var tokens = {
742
+ color,
743
+ spacing,
744
+ typography,
745
+ radius,
746
+ shadow,
747
+ border,
748
+ zIndex,
749
+ animation,
750
+ breakpoint,
751
+ opacity
752
+ };
753
+
754
+ exports.animation = animation;
755
+ exports.border = border;
756
+ exports.borderStyle = borderStyle;
757
+ exports.borderWidth = borderWidth;
758
+ exports.breakpoint = breakpoint;
759
+ exports.color = color;
760
+ exports.duration = duration;
761
+ exports.easing = easing;
762
+ exports.flattenTokens = flattenTokens;
763
+ exports.fontFamily = fontFamily;
764
+ exports.fontSize = fontSize;
765
+ exports.fontWeight = fontWeight;
766
+ exports.generateCSSCategory = generateCSSCategory;
767
+ exports.letterSpacing = letterSpacing;
768
+ exports.lineHeight = lineHeight;
769
+ exports.opacity = opacity;
770
+ exports.radius = radius;
771
+ exports.shadow = shadow;
772
+ exports.spacing = spacing;
773
+ exports.toCSSRoot = toCSSRoot;
774
+ exports.tokens = tokens;
775
+ exports.typography = typography;
776
+ exports.zIndex = zIndex;
777
+ //# sourceMappingURL=index.js.map
778
+ //# sourceMappingURL=index.js.map