@vegastack/design-tokens 0.2.0 → 0.4.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.
Files changed (9) hide show
  1. package/dist/base.css +37 -8
  2. package/dist/theme.css +108 -67
  3. package/dist/tokens.cjs +77 -45
  4. package/dist/tokens.d.cts +75 -43
  5. package/dist/tokens.d.ts +75 -43
  6. package/dist/tokens.js +77 -45
  7. package/dist/tokens.json +77 -45
  8. package/dist/utilities.css +80 -0
  9. package/package.json +10 -10
package/dist/tokens.cjs CHANGED
@@ -27,42 +27,46 @@ var tokens = {
27
27
  "light": {
28
28
  "background": "oklch(0.994 0.002 75)",
29
29
  "foreground": "oklch(0.145 0.003 75)",
30
- "card": "oklch(0.985 0.003 75)",
30
+ "card": "oklch(0.994 0.002 75)",
31
31
  "card-foreground": "oklch(0.145 0.003 75)",
32
32
  "popover": "oklch(0.994 0.002 75)",
33
33
  "popover-foreground": "oklch(0.145 0.003 75)",
34
+ "surface-1": "oklch(0.97 0.003 75)",
35
+ "surface-2": "oklch(0.945 0.003 75)",
36
+ "surface-3": "oklch(0.922 0.003 75)",
34
37
  "primary": "oklch(0.353 0.003 75)",
35
38
  "primary-foreground": "oklch(0.985 0.003 75)",
36
39
  "primary-hover": "oklch(0.269 0.003 75)",
37
40
  "primary-active": "oklch(0.236 0.003 75)",
38
- "track": "oklch(0.87 0.003 75)",
39
41
  "secondary": "oklch(0.97 0.003 75)",
40
- "secondary-foreground": "oklch(0.205 0.003 75)",
42
+ "secondary-foreground": "oklch(0.145 0.003 75)",
41
43
  "muted": "oklch(0.97 0.003 75)",
42
44
  "muted-foreground": "oklch(0.439 0.003 75)",
43
45
  "muted-foreground-faint": "oklch(0.63 0.003 75)",
44
- "accent": "oklch(0.97 0.003 75)",
45
- "accent-foreground": "oklch(0.205 0.003 75)",
46
+ "accent": "oklch(0.945 0.003 75)",
47
+ "accent-foreground": "oklch(0.145 0.003 75)",
46
48
  "destructive": "oklch(0.505 0.213 27.52)",
47
49
  "destructive-foreground": "oklch(0.985 0.003 75)",
48
50
  "destructive-subtle": "oklch(0.949 0.022 24)",
49
- "destructive-text": "oklch(0.521 0.2 25)",
51
+ "destructive-text": "oklch(0.496 0.2 25)",
50
52
  "destructive-border": "oklch(0.505 0.213 27.52)",
51
53
  "success": "oklch(0.5 0.16 150)",
52
54
  "success-foreground": "oklch(0.985 0.003 75)",
53
55
  "success-subtle": "oklch(0.951 0.051 150)",
54
- "success-text": "oklch(0.5 0.13 150)",
56
+ "success-text": "oklch(0.48 0.13 150)",
55
57
  "warning": "oklch(0.52 0.145 52)",
56
58
  "warning-foreground": "oklch(0.985 0.003 75)",
57
59
  "warning-subtle": "oklch(0.96 0.019 42)",
58
- "warning-text": "oklch(0.52 0.139 42)",
60
+ "warning-text": "oklch(0.505 0.139 42)",
59
61
  "info": "oklch(0.531 0.182 256)",
60
62
  "info-foreground": "oklch(0.985 0.003 75)",
61
63
  "info-subtle": "oklch(0.961 0.018 253)",
62
- "info-text": "oklch(0.52 0.171 256)",
64
+ "info-text": "oklch(0.5 0.171 256)",
63
65
  "overlay": "oklch(0.13 0.002 75 / 0.28)",
64
- "border": "oklch(0.922 0.003 75)",
65
- "input": "oklch(0.922 0.003 75)",
66
+ "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
67
+ "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
68
+ "media-foreground": "oklch(0.985 0.003 75)",
69
+ "input": "oklch(0.145 0.003 75 / 0.08)",
66
70
  "ring": "oklch(0.353 0.003 75)",
67
71
  "chart-1": "oklch(0.546 0.245 262.88)",
68
72
  "chart-2": "oklch(0.6 0.118 184.7)",
@@ -72,7 +76,9 @@ var tokens = {
72
76
  "chart-6": "oklch(0.505 0.213 27.52)",
73
77
  "chart-7": "oklch(0.6 0.127 104.2)",
74
78
  "chart-8": "oklch(0.531 0.182 256)",
79
+ "chart-single": "oklch(0.145 0.003 75)",
75
80
  "brand": "oklch(0.6 0.17 148)",
81
+ "brand-text": "oklch(0.46 0.17 148)",
76
82
  "tag-blue": "oklch(0.6 0.16 256)",
77
83
  "tag-blue-subtle": "oklch(0.955 0.02 256)",
78
84
  "tag-blue-text": "oklch(0.51 0.15 256)",
@@ -103,13 +109,13 @@ var tokens = {
103
109
  "tag-purple": "oklch(0.6 0.16 295)",
104
110
  "tag-purple-subtle": "oklch(0.955 0.02 295)",
105
111
  "tag-purple-text": "oklch(0.51 0.15 295)",
106
- "sidebar": "oklch(0.985 0.003 75)",
107
- "sidebar-foreground": "oklch(0.269 0.003 75)",
108
- "sidebar-primary": "oklch(0.145 0.003 75)",
112
+ "sidebar": "oklch(0.994 0.002 75)",
113
+ "sidebar-foreground": "oklch(0.145 0.003 75)",
114
+ "sidebar-primary": "oklch(0.353 0.003 75)",
109
115
  "sidebar-primary-foreground": "oklch(0.985 0.003 75)",
110
- "sidebar-accent": "oklch(0.955 0.003 75)",
116
+ "sidebar-accent": "oklch(0.945 0.003 75)",
111
117
  "sidebar-accent-foreground": "oklch(0.145 0.003 75)",
112
- "sidebar-border": "oklch(0.922 0.003 75)",
118
+ "sidebar-border": "oklch(0.145 0.003 75 / 0.08)",
113
119
  "sidebar-ring": "oklch(0.353 0.003 75)",
114
120
  "radius": "0.75rem",
115
121
  "radius-xs": "0.125rem",
@@ -128,35 +134,39 @@ var tokens = {
128
134
  "icon-feature": "1.5rem",
129
135
  "sidebar-width": "15rem",
130
136
  "sidebar-width-icon": "3rem",
137
+ "sidebar-width-mobile": "18rem",
138
+ "layout-header-height": "3.5rem",
139
+ "layout-overlay-max-height": "calc(100dvh - 16rem)",
140
+ "panel-width-sm": "14rem",
141
+ "panel-width-md": "18rem",
142
+ "panel-width-lg": "20rem",
131
143
  "shadow-overlay": "0 4px 14px -4px oklch(0.13 0.002 75 / 0.1), 0 2px 4px -2px oklch(0.13 0.002 75 / 0.06)",
132
- "shadow-lit": "inset 0 1px 0 0 oklch(1 0 0 / 0.12), 0 1px 2px 0 oklch(0.13 0.002 75 / 0.18), 0 2px 6px -2px oklch(0.13 0.002 75 / 0.14)",
133
144
  "effect-blur-glass": "8px",
134
145
  "z-raised": 10,
135
146
  "z-overlay": 50,
147
+ "z-toast": 60,
136
148
  "opacity-dim": "50%",
137
149
  "opacity-hint-soft": "60%",
138
150
  "opacity-hint": "70%",
139
151
  "opacity-track": "25%",
152
+ "alpha-hover": "7%",
153
+ "alpha-pressed": "10%",
154
+ "alpha-border": "8%",
140
155
  "alpha-tint-border": "70%",
141
156
  "alpha-outline-border": "50%",
142
157
  "alpha-border-subtle": "20%",
143
158
  "alpha-border-soft": "30%",
144
159
  "alpha-surface-faint": "5%",
145
- "alpha-surface-subtle": "10%",
146
160
  "alpha-ink-tint": "10%",
147
161
  "alpha-ink-tint-strong": "15%",
148
- "alpha-soft-hover": "20%",
149
- "alpha-soft-surface": "10%",
150
162
  "alpha-input": "30%",
151
- "alpha-input-hover": "50%",
152
- "alpha-fill-hover": "80%",
153
163
  "alpha-wash-faint": "40%",
154
164
  "alpha-wash": "50%",
155
165
  "alpha-wash-strong": "60%",
156
166
  "alpha-backdrop-soft": "60%",
157
167
  "alpha-glass": "90%",
158
168
  "alpha-glass-hover": "95%",
159
- "alpha-link-hover": "80%",
169
+ "alpha-link-hover": "88%",
160
170
  "alpha-outline-soft": "50%",
161
171
  "type-product-xs": {
162
172
  "fontSize": "0.6875rem",
@@ -306,23 +316,29 @@ var tokens = {
306
316
  "duration-fast": "150ms",
307
317
  "duration-base": "200ms",
308
318
  "duration-slow": "300ms",
319
+ "duration-indeterminate": "1200ms",
309
320
  "motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
310
321
  "motion-ease-emphasized": "cubic-bezier(0.3, 0, 0, 1)",
311
322
  "motion-ease-exit": "cubic-bezier(0.4, 0, 1, 1)",
312
323
  "motion-ease-spring": "linear(0, 0.5 60%, 1.05 80%, 0.98 90%, 1)",
313
324
  "motion-blur": "2px",
325
+ "border": "oklch(0.145 0.003 75 / 0.08)",
314
326
  "destructive-hover": "oklch(0.455 0.213 27.52)",
315
327
  "destructive-active": "oklch(0.415 0.213 27.52)",
316
328
  "destructive-subtle-hover": "oklch(0.91 0.036 20.4)",
329
+ "destructive-subtle-active": "oklch(0.883 0.046 19.3)",
317
330
  "success-hover": "oklch(0.45 0.16 150)",
318
331
  "success-active": "oklch(0.41 0.16 150)",
319
332
  "success-subtle-hover": "oklch(0.919 0.059 151.1)",
333
+ "success-subtle-active": "oklch(0.896 0.065 151.7)",
320
334
  "warning-hover": "oklch(0.47 0.145 52)",
321
335
  "warning-active": "oklch(0.43 0.145 52)",
322
336
  "warning-subtle-hover": "oklch(0.929 0.027 48.8)",
337
+ "warning-subtle-active": "oklch(0.906 0.034 51.5)",
323
338
  "info-hover": "oklch(0.481 0.182 256)",
324
339
  "info-active": "oklch(0.441 0.182 256)",
325
- "info-subtle-hover": "oklch(0.929 0.03 251.1)"
340
+ "info-subtle-hover": "oklch(0.929 0.03 251.1)",
341
+ "info-subtle-active": "oklch(0.906 0.038 250.5)"
326
342
  },
327
343
  "dark": {
328
344
  "background": "oklch(0.175 0.003 75)",
@@ -331,27 +347,29 @@ var tokens = {
331
347
  "card-foreground": "oklch(0.922 0.003 75)",
332
348
  "popover": "oklch(0.205 0.003 75)",
333
349
  "popover-foreground": "oklch(0.922 0.003 75)",
350
+ "surface-1": "oklch(0.236 0.003 75)",
351
+ "surface-2": "oklch(0.269 0.003 75)",
352
+ "surface-3": "oklch(0.29 0.003 75)",
334
353
  "primary": "oklch(0.922 0.003 75)",
335
354
  "primary-foreground": "oklch(0.145 0.003 75)",
336
355
  "primary-hover": "oklch(0.97 0.003 75)",
337
356
  "primary-active": "oklch(0.994 0.002 75)",
338
- "track": "oklch(0.439 0.003 75)",
339
- "secondary": "oklch(0.269 0.003 75)",
357
+ "secondary": "oklch(0.236 0.003 75)",
340
358
  "secondary-foreground": "oklch(0.922 0.003 75)",
341
- "muted": "oklch(0.269 0.003 75)",
359
+ "muted": "oklch(0.236 0.003 75)",
342
360
  "muted-foreground": "oklch(0.66 0.003 75)",
343
361
  "muted-foreground-faint": "oklch(0.559 0.003 75)",
344
362
  "accent": "oklch(0.269 0.003 75)",
345
- "accent-foreground": "oklch(0.967 0.003 75)",
363
+ "accent-foreground": "oklch(0.922 0.003 75)",
346
364
  "destructive": "oklch(0.505 0.213 27.52)",
347
365
  "destructive-foreground": "oklch(0.985 0.003 75)",
348
366
  "destructive-subtle": "oklch(0.275 0.07 25)",
349
- "destructive-text": "oklch(0.72 0.16 25)",
367
+ "destructive-text": "oklch(0.74 0.16 25)",
350
368
  "destructive-border": "oklch(0.72 0.16 25)",
351
369
  "success": "oklch(0.5 0.16 150)",
352
370
  "success-foreground": "oklch(0.985 0.003 75)",
353
371
  "success-subtle": "oklch(0.276 0.061 150)",
354
- "success-text": "oklch(0.72 0.17 150)",
372
+ "success-text": "oklch(0.74 0.17 150)",
355
373
  "warning": "oklch(0.52 0.145 52)",
356
374
  "warning-foreground": "oklch(0.985 0.003 75)",
357
375
  "warning-subtle": "oklch(0.28 0.069 42)",
@@ -359,10 +377,12 @@ var tokens = {
359
377
  "info": "oklch(0.531 0.182 256)",
360
378
  "info-foreground": "oklch(0.985 0.003 75)",
361
379
  "info-subtle": "oklch(0.275 0.059 255)",
362
- "info-text": "oklch(0.72 0.13 256)",
380
+ "info-text": "oklch(0.76 0.13 256)",
363
381
  "overlay": "oklch(0 0 0 / 0.55)",
364
- "border": "oklch(0.269 0.003 75)",
365
- "input": "oklch(0.269 0.003 75)",
382
+ "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
383
+ "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
384
+ "media-foreground": "oklch(0.985 0.003 75)",
385
+ "input": "oklch(0.922 0.003 75 / 0.14)",
366
386
  "ring": "oklch(0.922 0.003 75)",
367
387
  "chart-1": "oklch(0.623 0.214 259.81)",
368
388
  "chart-2": "oklch(0.696 0.17 162.48)",
@@ -372,7 +392,9 @@ var tokens = {
372
392
  "chart-6": "oklch(0.69 0.21 25)",
373
393
  "chart-7": "oklch(0.72 0.15 103.9)",
374
394
  "chart-8": "oklch(0.72 0.13 256)",
395
+ "chart-single": "oklch(0.922 0.003 75)",
375
396
  "brand": "oklch(0.86 0.21 148)",
397
+ "brand-text": "oklch(0.86 0.21 148)",
376
398
  "tag-blue": "oklch(0.72 0.14 256)",
377
399
  "tag-blue-subtle": "oklch(0.275 0.05 256)",
378
400
  "tag-blue-text": "oklch(0.75 0.13 256)",
@@ -403,13 +425,13 @@ var tokens = {
403
425
  "tag-purple": "oklch(0.72 0.15 295)",
404
426
  "tag-purple-subtle": "oklch(0.275 0.05 295)",
405
427
  "tag-purple-text": "oklch(0.75 0.13 295)",
406
- "sidebar": "oklch(0.145 0.003 75)",
407
- "sidebar-foreground": "oklch(0.87 0.003 75)",
428
+ "sidebar": "oklch(0.205 0.003 75)",
429
+ "sidebar-foreground": "oklch(0.922 0.003 75)",
408
430
  "sidebar-primary": "oklch(0.922 0.003 75)",
409
431
  "sidebar-primary-foreground": "oklch(0.145 0.003 75)",
410
- "sidebar-accent": "oklch(0.205 0.003 75)",
432
+ "sidebar-accent": "oklch(0.269 0.003 75)",
411
433
  "sidebar-accent-foreground": "oklch(0.922 0.003 75)",
412
- "sidebar-border": "oklch(0.269 0.003 75)",
434
+ "sidebar-border": "oklch(0.922 0.003 75 / 0.14)",
413
435
  "sidebar-ring": "oklch(0.922 0.003 75)",
414
436
  "radius": "0.75rem",
415
437
  "radius-xs": "0.125rem",
@@ -428,35 +450,39 @@ var tokens = {
428
450
  "icon-feature": "1.5rem",
429
451
  "sidebar-width": "15rem",
430
452
  "sidebar-width-icon": "3rem",
453
+ "sidebar-width-mobile": "18rem",
454
+ "layout-header-height": "3.5rem",
455
+ "layout-overlay-max-height": "calc(100dvh - 16rem)",
456
+ "panel-width-sm": "14rem",
457
+ "panel-width-md": "18rem",
458
+ "panel-width-lg": "20rem",
431
459
  "shadow-overlay": "0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4)",
432
- "shadow-lit": "inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5)",
433
460
  "effect-blur-glass": "8px",
434
461
  "z-raised": 10,
435
462
  "z-overlay": 50,
463
+ "z-toast": 60,
436
464
  "opacity-dim": "50%",
437
465
  "opacity-hint-soft": "60%",
438
466
  "opacity-hint": "70%",
439
467
  "opacity-track": "25%",
468
+ "alpha-hover": "7%",
469
+ "alpha-pressed": "10%",
470
+ "alpha-border": "14%",
440
471
  "alpha-tint-border": "70%",
441
472
  "alpha-outline-border": "50%",
442
473
  "alpha-border-subtle": "20%",
443
474
  "alpha-border-soft": "30%",
444
475
  "alpha-surface-faint": "5%",
445
- "alpha-surface-subtle": "10%",
446
476
  "alpha-ink-tint": "10%",
447
477
  "alpha-ink-tint-strong": "15%",
448
- "alpha-soft-hover": "30%",
449
- "alpha-soft-surface": "20%",
450
478
  "alpha-input": "30%",
451
- "alpha-input-hover": "50%",
452
- "alpha-fill-hover": "80%",
453
479
  "alpha-wash-faint": "40%",
454
480
  "alpha-wash": "50%",
455
481
  "alpha-wash-strong": "60%",
456
482
  "alpha-backdrop-soft": "60%",
457
483
  "alpha-glass": "90%",
458
484
  "alpha-glass-hover": "95%",
459
- "alpha-link-hover": "80%",
485
+ "alpha-link-hover": "88%",
460
486
  "alpha-outline-soft": "50%",
461
487
  "type-product-xs": {
462
488
  "fontSize": "0.6875rem",
@@ -606,23 +632,29 @@ var tokens = {
606
632
  "duration-fast": "150ms",
607
633
  "duration-base": "200ms",
608
634
  "duration-slow": "300ms",
635
+ "duration-indeterminate": "1200ms",
609
636
  "motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
610
637
  "motion-ease-emphasized": "cubic-bezier(0.3, 0, 0, 1)",
611
638
  "motion-ease-exit": "cubic-bezier(0.4, 0, 1, 1)",
612
639
  "motion-ease-spring": "linear(0, 0.5 60%, 1.05 80%, 0.98 90%, 1)",
613
640
  "motion-blur": "2px",
641
+ "border": "oklch(0.922 0.003 75 / 0.14)",
614
642
  "destructive-hover": "oklch(0.455 0.213 27.52)",
615
643
  "destructive-active": "oklch(0.415 0.213 27.52)",
616
644
  "destructive-subtle-hover": "oklch(0.34 0.123 26.3)",
645
+ "destructive-subtle-active": "oklch(0.364 0.137 26.9)",
617
646
  "success-hover": "oklch(0.45 0.16 150)",
618
647
  "success-active": "oklch(0.41 0.16 150)",
619
648
  "success-subtle-hover": "oklch(0.348 0.092 148.9)",
649
+ "success-subtle-active": "oklch(0.371 0.101 148.5)",
620
650
  "warning-hover": "oklch(0.47 0.145 52)",
621
651
  "warning-active": "oklch(0.43 0.145 52)",
622
652
  "warning-subtle-hover": "oklch(0.356 0.093 46.6)",
653
+ "warning-subtle-active": "oklch(0.381 0.1 47.3)",
623
654
  "info-hover": "oklch(0.481 0.182 256)",
624
655
  "info-active": "oklch(0.441 0.182 256)",
625
- "info-subtle-hover": "oklch(0.354 0.101 254.3)"
656
+ "info-subtle-hover": "oklch(0.354 0.101 254.3)",
657
+ "info-subtle-active": "oklch(0.38 0.114 254.5)"
626
658
  }
627
659
  };
628
660
  // Annotate the CommonJS export names for ESM import in node:
package/dist/tokens.d.cts CHANGED
@@ -2,42 +2,46 @@ declare const tokens: {
2
2
  readonly light: {
3
3
  readonly background: "oklch(0.994 0.002 75)";
4
4
  readonly foreground: "oklch(0.145 0.003 75)";
5
- readonly card: "oklch(0.985 0.003 75)";
5
+ readonly card: "oklch(0.994 0.002 75)";
6
6
  readonly "card-foreground": "oklch(0.145 0.003 75)";
7
7
  readonly popover: "oklch(0.994 0.002 75)";
8
8
  readonly "popover-foreground": "oklch(0.145 0.003 75)";
9
+ readonly "surface-1": "oklch(0.97 0.003 75)";
10
+ readonly "surface-2": "oklch(0.945 0.003 75)";
11
+ readonly "surface-3": "oklch(0.922 0.003 75)";
9
12
  readonly primary: "oklch(0.353 0.003 75)";
10
13
  readonly "primary-foreground": "oklch(0.985 0.003 75)";
11
14
  readonly "primary-hover": "oklch(0.269 0.003 75)";
12
15
  readonly "primary-active": "oklch(0.236 0.003 75)";
13
- readonly track: "oklch(0.87 0.003 75)";
14
16
  readonly secondary: "oklch(0.97 0.003 75)";
15
- readonly "secondary-foreground": "oklch(0.205 0.003 75)";
17
+ readonly "secondary-foreground": "oklch(0.145 0.003 75)";
16
18
  readonly muted: "oklch(0.97 0.003 75)";
17
19
  readonly "muted-foreground": "oklch(0.439 0.003 75)";
18
20
  readonly "muted-foreground-faint": "oklch(0.63 0.003 75)";
19
- readonly accent: "oklch(0.97 0.003 75)";
20
- readonly "accent-foreground": "oklch(0.205 0.003 75)";
21
+ readonly accent: "oklch(0.945 0.003 75)";
22
+ readonly "accent-foreground": "oklch(0.145 0.003 75)";
21
23
  readonly destructive: "oklch(0.505 0.213 27.52)";
22
24
  readonly "destructive-foreground": "oklch(0.985 0.003 75)";
23
25
  readonly "destructive-subtle": "oklch(0.949 0.022 24)";
24
- readonly "destructive-text": "oklch(0.521 0.2 25)";
26
+ readonly "destructive-text": "oklch(0.496 0.2 25)";
25
27
  readonly "destructive-border": "oklch(0.505 0.213 27.52)";
26
28
  readonly success: "oklch(0.5 0.16 150)";
27
29
  readonly "success-foreground": "oklch(0.985 0.003 75)";
28
30
  readonly "success-subtle": "oklch(0.951 0.051 150)";
29
- readonly "success-text": "oklch(0.5 0.13 150)";
31
+ readonly "success-text": "oklch(0.48 0.13 150)";
30
32
  readonly warning: "oklch(0.52 0.145 52)";
31
33
  readonly "warning-foreground": "oklch(0.985 0.003 75)";
32
34
  readonly "warning-subtle": "oklch(0.96 0.019 42)";
33
- readonly "warning-text": "oklch(0.52 0.139 42)";
35
+ readonly "warning-text": "oklch(0.505 0.139 42)";
34
36
  readonly info: "oklch(0.531 0.182 256)";
35
37
  readonly "info-foreground": "oklch(0.985 0.003 75)";
36
38
  readonly "info-subtle": "oklch(0.961 0.018 253)";
37
- readonly "info-text": "oklch(0.52 0.171 256)";
39
+ readonly "info-text": "oklch(0.5 0.171 256)";
38
40
  readonly overlay: "oklch(0.13 0.002 75 / 0.28)";
39
- readonly border: "oklch(0.922 0.003 75)";
40
- readonly input: "oklch(0.922 0.003 75)";
41
+ readonly "media-scrim": "oklch(0.13 0.002 75 / 0.6)";
42
+ readonly "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)";
43
+ readonly "media-foreground": "oklch(0.985 0.003 75)";
44
+ readonly input: "oklch(0.145 0.003 75 / 0.08)";
41
45
  readonly ring: "oklch(0.353 0.003 75)";
42
46
  readonly "chart-1": "oklch(0.546 0.245 262.88)";
43
47
  readonly "chart-2": "oklch(0.6 0.118 184.7)";
@@ -47,7 +51,9 @@ declare const tokens: {
47
51
  readonly "chart-6": "oklch(0.505 0.213 27.52)";
48
52
  readonly "chart-7": "oklch(0.6 0.127 104.2)";
49
53
  readonly "chart-8": "oklch(0.531 0.182 256)";
54
+ readonly "chart-single": "oklch(0.145 0.003 75)";
50
55
  readonly brand: "oklch(0.6 0.17 148)";
56
+ readonly "brand-text": "oklch(0.46 0.17 148)";
51
57
  readonly "tag-blue": "oklch(0.6 0.16 256)";
52
58
  readonly "tag-blue-subtle": "oklch(0.955 0.02 256)";
53
59
  readonly "tag-blue-text": "oklch(0.51 0.15 256)";
@@ -78,13 +84,13 @@ declare const tokens: {
78
84
  readonly "tag-purple": "oklch(0.6 0.16 295)";
79
85
  readonly "tag-purple-subtle": "oklch(0.955 0.02 295)";
80
86
  readonly "tag-purple-text": "oklch(0.51 0.15 295)";
81
- readonly sidebar: "oklch(0.985 0.003 75)";
82
- readonly "sidebar-foreground": "oklch(0.269 0.003 75)";
83
- readonly "sidebar-primary": "oklch(0.145 0.003 75)";
87
+ readonly sidebar: "oklch(0.994 0.002 75)";
88
+ readonly "sidebar-foreground": "oklch(0.145 0.003 75)";
89
+ readonly "sidebar-primary": "oklch(0.353 0.003 75)";
84
90
  readonly "sidebar-primary-foreground": "oklch(0.985 0.003 75)";
85
- readonly "sidebar-accent": "oklch(0.955 0.003 75)";
91
+ readonly "sidebar-accent": "oklch(0.945 0.003 75)";
86
92
  readonly "sidebar-accent-foreground": "oklch(0.145 0.003 75)";
87
- readonly "sidebar-border": "oklch(0.922 0.003 75)";
93
+ readonly "sidebar-border": "oklch(0.145 0.003 75 / 0.08)";
88
94
  readonly "sidebar-ring": "oklch(0.353 0.003 75)";
89
95
  readonly radius: "0.75rem";
90
96
  readonly "radius-xs": "0.125rem";
@@ -103,35 +109,39 @@ declare const tokens: {
103
109
  readonly "icon-feature": "1.5rem";
104
110
  readonly "sidebar-width": "15rem";
105
111
  readonly "sidebar-width-icon": "3rem";
112
+ readonly "sidebar-width-mobile": "18rem";
113
+ readonly "layout-header-height": "3.5rem";
114
+ readonly "layout-overlay-max-height": "calc(100dvh - 16rem)";
115
+ readonly "panel-width-sm": "14rem";
116
+ readonly "panel-width-md": "18rem";
117
+ readonly "panel-width-lg": "20rem";
106
118
  readonly "shadow-overlay": "0 4px 14px -4px oklch(0.13 0.002 75 / 0.1), 0 2px 4px -2px oklch(0.13 0.002 75 / 0.06)";
107
- readonly "shadow-lit": "inset 0 1px 0 0 oklch(1 0 0 / 0.12), 0 1px 2px 0 oklch(0.13 0.002 75 / 0.18), 0 2px 6px -2px oklch(0.13 0.002 75 / 0.14)";
108
119
  readonly "effect-blur-glass": "8px";
109
120
  readonly "z-raised": 10;
110
121
  readonly "z-overlay": 50;
122
+ readonly "z-toast": 60;
111
123
  readonly "opacity-dim": "50%";
112
124
  readonly "opacity-hint-soft": "60%";
113
125
  readonly "opacity-hint": "70%";
114
126
  readonly "opacity-track": "25%";
127
+ readonly "alpha-hover": "7%";
128
+ readonly "alpha-pressed": "10%";
129
+ readonly "alpha-border": "8%";
115
130
  readonly "alpha-tint-border": "70%";
116
131
  readonly "alpha-outline-border": "50%";
117
132
  readonly "alpha-border-subtle": "20%";
118
133
  readonly "alpha-border-soft": "30%";
119
134
  readonly "alpha-surface-faint": "5%";
120
- readonly "alpha-surface-subtle": "10%";
121
135
  readonly "alpha-ink-tint": "10%";
122
136
  readonly "alpha-ink-tint-strong": "15%";
123
- readonly "alpha-soft-hover": "20%";
124
- readonly "alpha-soft-surface": "10%";
125
137
  readonly "alpha-input": "30%";
126
- readonly "alpha-input-hover": "50%";
127
- readonly "alpha-fill-hover": "80%";
128
138
  readonly "alpha-wash-faint": "40%";
129
139
  readonly "alpha-wash": "50%";
130
140
  readonly "alpha-wash-strong": "60%";
131
141
  readonly "alpha-backdrop-soft": "60%";
132
142
  readonly "alpha-glass": "90%";
133
143
  readonly "alpha-glass-hover": "95%";
134
- readonly "alpha-link-hover": "80%";
144
+ readonly "alpha-link-hover": "88%";
135
145
  readonly "alpha-outline-soft": "50%";
136
146
  readonly "type-product-xs": {
137
147
  readonly fontSize: "0.6875rem";
@@ -281,23 +291,29 @@ declare const tokens: {
281
291
  readonly "duration-fast": "150ms";
282
292
  readonly "duration-base": "200ms";
283
293
  readonly "duration-slow": "300ms";
294
+ readonly "duration-indeterminate": "1200ms";
284
295
  readonly "motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)";
285
296
  readonly "motion-ease-emphasized": "cubic-bezier(0.3, 0, 0, 1)";
286
297
  readonly "motion-ease-exit": "cubic-bezier(0.4, 0, 1, 1)";
287
298
  readonly "motion-ease-spring": "linear(0, 0.5 60%, 1.05 80%, 0.98 90%, 1)";
288
299
  readonly "motion-blur": "2px";
300
+ readonly border: "oklch(0.145 0.003 75 / 0.08)";
289
301
  readonly "destructive-hover": "oklch(0.455 0.213 27.52)";
290
302
  readonly "destructive-active": "oklch(0.415 0.213 27.52)";
291
303
  readonly "destructive-subtle-hover": "oklch(0.91 0.036 20.4)";
304
+ readonly "destructive-subtle-active": "oklch(0.883 0.046 19.3)";
292
305
  readonly "success-hover": "oklch(0.45 0.16 150)";
293
306
  readonly "success-active": "oklch(0.41 0.16 150)";
294
307
  readonly "success-subtle-hover": "oklch(0.919 0.059 151.1)";
308
+ readonly "success-subtle-active": "oklch(0.896 0.065 151.7)";
295
309
  readonly "warning-hover": "oklch(0.47 0.145 52)";
296
310
  readonly "warning-active": "oklch(0.43 0.145 52)";
297
311
  readonly "warning-subtle-hover": "oklch(0.929 0.027 48.8)";
312
+ readonly "warning-subtle-active": "oklch(0.906 0.034 51.5)";
298
313
  readonly "info-hover": "oklch(0.481 0.182 256)";
299
314
  readonly "info-active": "oklch(0.441 0.182 256)";
300
315
  readonly "info-subtle-hover": "oklch(0.929 0.03 251.1)";
316
+ readonly "info-subtle-active": "oklch(0.906 0.038 250.5)";
301
317
  };
302
318
  readonly dark: {
303
319
  readonly background: "oklch(0.175 0.003 75)";
@@ -306,27 +322,29 @@ declare const tokens: {
306
322
  readonly "card-foreground": "oklch(0.922 0.003 75)";
307
323
  readonly popover: "oklch(0.205 0.003 75)";
308
324
  readonly "popover-foreground": "oklch(0.922 0.003 75)";
325
+ readonly "surface-1": "oklch(0.236 0.003 75)";
326
+ readonly "surface-2": "oklch(0.269 0.003 75)";
327
+ readonly "surface-3": "oklch(0.29 0.003 75)";
309
328
  readonly primary: "oklch(0.922 0.003 75)";
310
329
  readonly "primary-foreground": "oklch(0.145 0.003 75)";
311
330
  readonly "primary-hover": "oklch(0.97 0.003 75)";
312
331
  readonly "primary-active": "oklch(0.994 0.002 75)";
313
- readonly track: "oklch(0.439 0.003 75)";
314
- readonly secondary: "oklch(0.269 0.003 75)";
332
+ readonly secondary: "oklch(0.236 0.003 75)";
315
333
  readonly "secondary-foreground": "oklch(0.922 0.003 75)";
316
- readonly muted: "oklch(0.269 0.003 75)";
334
+ readonly muted: "oklch(0.236 0.003 75)";
317
335
  readonly "muted-foreground": "oklch(0.66 0.003 75)";
318
336
  readonly "muted-foreground-faint": "oklch(0.559 0.003 75)";
319
337
  readonly accent: "oklch(0.269 0.003 75)";
320
- readonly "accent-foreground": "oklch(0.967 0.003 75)";
338
+ readonly "accent-foreground": "oklch(0.922 0.003 75)";
321
339
  readonly destructive: "oklch(0.505 0.213 27.52)";
322
340
  readonly "destructive-foreground": "oklch(0.985 0.003 75)";
323
341
  readonly "destructive-subtle": "oklch(0.275 0.07 25)";
324
- readonly "destructive-text": "oklch(0.72 0.16 25)";
342
+ readonly "destructive-text": "oklch(0.74 0.16 25)";
325
343
  readonly "destructive-border": "oklch(0.72 0.16 25)";
326
344
  readonly success: "oklch(0.5 0.16 150)";
327
345
  readonly "success-foreground": "oklch(0.985 0.003 75)";
328
346
  readonly "success-subtle": "oklch(0.276 0.061 150)";
329
- readonly "success-text": "oklch(0.72 0.17 150)";
347
+ readonly "success-text": "oklch(0.74 0.17 150)";
330
348
  readonly warning: "oklch(0.52 0.145 52)";
331
349
  readonly "warning-foreground": "oklch(0.985 0.003 75)";
332
350
  readonly "warning-subtle": "oklch(0.28 0.069 42)";
@@ -334,10 +352,12 @@ declare const tokens: {
334
352
  readonly info: "oklch(0.531 0.182 256)";
335
353
  readonly "info-foreground": "oklch(0.985 0.003 75)";
336
354
  readonly "info-subtle": "oklch(0.275 0.059 255)";
337
- readonly "info-text": "oklch(0.72 0.13 256)";
355
+ readonly "info-text": "oklch(0.76 0.13 256)";
338
356
  readonly overlay: "oklch(0 0 0 / 0.55)";
339
- readonly border: "oklch(0.269 0.003 75)";
340
- readonly input: "oklch(0.269 0.003 75)";
357
+ readonly "media-scrim": "oklch(0.13 0.002 75 / 0.6)";
358
+ readonly "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)";
359
+ readonly "media-foreground": "oklch(0.985 0.003 75)";
360
+ readonly input: "oklch(0.922 0.003 75 / 0.14)";
341
361
  readonly ring: "oklch(0.922 0.003 75)";
342
362
  readonly "chart-1": "oklch(0.623 0.214 259.81)";
343
363
  readonly "chart-2": "oklch(0.696 0.17 162.48)";
@@ -347,7 +367,9 @@ declare const tokens: {
347
367
  readonly "chart-6": "oklch(0.69 0.21 25)";
348
368
  readonly "chart-7": "oklch(0.72 0.15 103.9)";
349
369
  readonly "chart-8": "oklch(0.72 0.13 256)";
370
+ readonly "chart-single": "oklch(0.922 0.003 75)";
350
371
  readonly brand: "oklch(0.86 0.21 148)";
372
+ readonly "brand-text": "oklch(0.86 0.21 148)";
351
373
  readonly "tag-blue": "oklch(0.72 0.14 256)";
352
374
  readonly "tag-blue-subtle": "oklch(0.275 0.05 256)";
353
375
  readonly "tag-blue-text": "oklch(0.75 0.13 256)";
@@ -378,13 +400,13 @@ declare const tokens: {
378
400
  readonly "tag-purple": "oklch(0.72 0.15 295)";
379
401
  readonly "tag-purple-subtle": "oklch(0.275 0.05 295)";
380
402
  readonly "tag-purple-text": "oklch(0.75 0.13 295)";
381
- readonly sidebar: "oklch(0.145 0.003 75)";
382
- readonly "sidebar-foreground": "oklch(0.87 0.003 75)";
403
+ readonly sidebar: "oklch(0.205 0.003 75)";
404
+ readonly "sidebar-foreground": "oklch(0.922 0.003 75)";
383
405
  readonly "sidebar-primary": "oklch(0.922 0.003 75)";
384
406
  readonly "sidebar-primary-foreground": "oklch(0.145 0.003 75)";
385
- readonly "sidebar-accent": "oklch(0.205 0.003 75)";
407
+ readonly "sidebar-accent": "oklch(0.269 0.003 75)";
386
408
  readonly "sidebar-accent-foreground": "oklch(0.922 0.003 75)";
387
- readonly "sidebar-border": "oklch(0.269 0.003 75)";
409
+ readonly "sidebar-border": "oklch(0.922 0.003 75 / 0.14)";
388
410
  readonly "sidebar-ring": "oklch(0.922 0.003 75)";
389
411
  readonly radius: "0.75rem";
390
412
  readonly "radius-xs": "0.125rem";
@@ -403,35 +425,39 @@ declare const tokens: {
403
425
  readonly "icon-feature": "1.5rem";
404
426
  readonly "sidebar-width": "15rem";
405
427
  readonly "sidebar-width-icon": "3rem";
428
+ readonly "sidebar-width-mobile": "18rem";
429
+ readonly "layout-header-height": "3.5rem";
430
+ readonly "layout-overlay-max-height": "calc(100dvh - 16rem)";
431
+ readonly "panel-width-sm": "14rem";
432
+ readonly "panel-width-md": "18rem";
433
+ readonly "panel-width-lg": "20rem";
406
434
  readonly "shadow-overlay": "0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4)";
407
- readonly "shadow-lit": "inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5)";
408
435
  readonly "effect-blur-glass": "8px";
409
436
  readonly "z-raised": 10;
410
437
  readonly "z-overlay": 50;
438
+ readonly "z-toast": 60;
411
439
  readonly "opacity-dim": "50%";
412
440
  readonly "opacity-hint-soft": "60%";
413
441
  readonly "opacity-hint": "70%";
414
442
  readonly "opacity-track": "25%";
443
+ readonly "alpha-hover": "7%";
444
+ readonly "alpha-pressed": "10%";
445
+ readonly "alpha-border": "14%";
415
446
  readonly "alpha-tint-border": "70%";
416
447
  readonly "alpha-outline-border": "50%";
417
448
  readonly "alpha-border-subtle": "20%";
418
449
  readonly "alpha-border-soft": "30%";
419
450
  readonly "alpha-surface-faint": "5%";
420
- readonly "alpha-surface-subtle": "10%";
421
451
  readonly "alpha-ink-tint": "10%";
422
452
  readonly "alpha-ink-tint-strong": "15%";
423
- readonly "alpha-soft-hover": "30%";
424
- readonly "alpha-soft-surface": "20%";
425
453
  readonly "alpha-input": "30%";
426
- readonly "alpha-input-hover": "50%";
427
- readonly "alpha-fill-hover": "80%";
428
454
  readonly "alpha-wash-faint": "40%";
429
455
  readonly "alpha-wash": "50%";
430
456
  readonly "alpha-wash-strong": "60%";
431
457
  readonly "alpha-backdrop-soft": "60%";
432
458
  readonly "alpha-glass": "90%";
433
459
  readonly "alpha-glass-hover": "95%";
434
- readonly "alpha-link-hover": "80%";
460
+ readonly "alpha-link-hover": "88%";
435
461
  readonly "alpha-outline-soft": "50%";
436
462
  readonly "type-product-xs": {
437
463
  readonly fontSize: "0.6875rem";
@@ -581,23 +607,29 @@ declare const tokens: {
581
607
  readonly "duration-fast": "150ms";
582
608
  readonly "duration-base": "200ms";
583
609
  readonly "duration-slow": "300ms";
610
+ readonly "duration-indeterminate": "1200ms";
584
611
  readonly "motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)";
585
612
  readonly "motion-ease-emphasized": "cubic-bezier(0.3, 0, 0, 1)";
586
613
  readonly "motion-ease-exit": "cubic-bezier(0.4, 0, 1, 1)";
587
614
  readonly "motion-ease-spring": "linear(0, 0.5 60%, 1.05 80%, 0.98 90%, 1)";
588
615
  readonly "motion-blur": "2px";
616
+ readonly border: "oklch(0.922 0.003 75 / 0.14)";
589
617
  readonly "destructive-hover": "oklch(0.455 0.213 27.52)";
590
618
  readonly "destructive-active": "oklch(0.415 0.213 27.52)";
591
619
  readonly "destructive-subtle-hover": "oklch(0.34 0.123 26.3)";
620
+ readonly "destructive-subtle-active": "oklch(0.364 0.137 26.9)";
592
621
  readonly "success-hover": "oklch(0.45 0.16 150)";
593
622
  readonly "success-active": "oklch(0.41 0.16 150)";
594
623
  readonly "success-subtle-hover": "oklch(0.348 0.092 148.9)";
624
+ readonly "success-subtle-active": "oklch(0.371 0.101 148.5)";
595
625
  readonly "warning-hover": "oklch(0.47 0.145 52)";
596
626
  readonly "warning-active": "oklch(0.43 0.145 52)";
597
627
  readonly "warning-subtle-hover": "oklch(0.356 0.093 46.6)";
628
+ readonly "warning-subtle-active": "oklch(0.381 0.1 47.3)";
598
629
  readonly "info-hover": "oklch(0.481 0.182 256)";
599
630
  readonly "info-active": "oklch(0.441 0.182 256)";
600
631
  readonly "info-subtle-hover": "oklch(0.354 0.101 254.3)";
632
+ readonly "info-subtle-active": "oklch(0.38 0.114 254.5)";
601
633
  };
602
634
  };
603
635
  type Theme = keyof typeof tokens;