@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.json CHANGED
@@ -2,42 +2,46 @@
2
2
  "light": {
3
3
  "background": "oklch(0.994 0.002 75)",
4
4
  "foreground": "oklch(0.145 0.003 75)",
5
- "card": "oklch(0.985 0.003 75)",
5
+ "card": "oklch(0.994 0.002 75)",
6
6
  "card-foreground": "oklch(0.145 0.003 75)",
7
7
  "popover": "oklch(0.994 0.002 75)",
8
8
  "popover-foreground": "oklch(0.145 0.003 75)",
9
+ "surface-1": "oklch(0.97 0.003 75)",
10
+ "surface-2": "oklch(0.945 0.003 75)",
11
+ "surface-3": "oklch(0.922 0.003 75)",
9
12
  "primary": "oklch(0.353 0.003 75)",
10
13
  "primary-foreground": "oklch(0.985 0.003 75)",
11
14
  "primary-hover": "oklch(0.269 0.003 75)",
12
15
  "primary-active": "oklch(0.236 0.003 75)",
13
- "track": "oklch(0.87 0.003 75)",
14
16
  "secondary": "oklch(0.97 0.003 75)",
15
- "secondary-foreground": "oklch(0.205 0.003 75)",
17
+ "secondary-foreground": "oklch(0.145 0.003 75)",
16
18
  "muted": "oklch(0.97 0.003 75)",
17
19
  "muted-foreground": "oklch(0.439 0.003 75)",
18
20
  "muted-foreground-faint": "oklch(0.63 0.003 75)",
19
- "accent": "oklch(0.97 0.003 75)",
20
- "accent-foreground": "oklch(0.205 0.003 75)",
21
+ "accent": "oklch(0.945 0.003 75)",
22
+ "accent-foreground": "oklch(0.145 0.003 75)",
21
23
  "destructive": "oklch(0.505 0.213 27.52)",
22
24
  "destructive-foreground": "oklch(0.985 0.003 75)",
23
25
  "destructive-subtle": "oklch(0.949 0.022 24)",
24
- "destructive-text": "oklch(0.521 0.2 25)",
26
+ "destructive-text": "oklch(0.496 0.2 25)",
25
27
  "destructive-border": "oklch(0.505 0.213 27.52)",
26
28
  "success": "oklch(0.5 0.16 150)",
27
29
  "success-foreground": "oklch(0.985 0.003 75)",
28
30
  "success-subtle": "oklch(0.951 0.051 150)",
29
- "success-text": "oklch(0.5 0.13 150)",
31
+ "success-text": "oklch(0.48 0.13 150)",
30
32
  "warning": "oklch(0.52 0.145 52)",
31
33
  "warning-foreground": "oklch(0.985 0.003 75)",
32
34
  "warning-subtle": "oklch(0.96 0.019 42)",
33
- "warning-text": "oklch(0.52 0.139 42)",
35
+ "warning-text": "oklch(0.505 0.139 42)",
34
36
  "info": "oklch(0.531 0.182 256)",
35
37
  "info-foreground": "oklch(0.985 0.003 75)",
36
38
  "info-subtle": "oklch(0.961 0.018 253)",
37
- "info-text": "oklch(0.52 0.171 256)",
39
+ "info-text": "oklch(0.5 0.171 256)",
38
40
  "overlay": "oklch(0.13 0.002 75 / 0.28)",
39
- "border": "oklch(0.922 0.003 75)",
40
- "input": "oklch(0.922 0.003 75)",
41
+ "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
42
+ "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
43
+ "media-foreground": "oklch(0.985 0.003 75)",
44
+ "input": "oklch(0.145 0.003 75 / 0.08)",
41
45
  "ring": "oklch(0.353 0.003 75)",
42
46
  "chart-1": "oklch(0.546 0.245 262.88)",
43
47
  "chart-2": "oklch(0.6 0.118 184.7)",
@@ -47,7 +51,9 @@
47
51
  "chart-6": "oklch(0.505 0.213 27.52)",
48
52
  "chart-7": "oklch(0.6 0.127 104.2)",
49
53
  "chart-8": "oklch(0.531 0.182 256)",
54
+ "chart-single": "oklch(0.145 0.003 75)",
50
55
  "brand": "oklch(0.6 0.17 148)",
56
+ "brand-text": "oklch(0.46 0.17 148)",
51
57
  "tag-blue": "oklch(0.6 0.16 256)",
52
58
  "tag-blue-subtle": "oklch(0.955 0.02 256)",
53
59
  "tag-blue-text": "oklch(0.51 0.15 256)",
@@ -78,13 +84,13 @@
78
84
  "tag-purple": "oklch(0.6 0.16 295)",
79
85
  "tag-purple-subtle": "oklch(0.955 0.02 295)",
80
86
  "tag-purple-text": "oklch(0.51 0.15 295)",
81
- "sidebar": "oklch(0.985 0.003 75)",
82
- "sidebar-foreground": "oklch(0.269 0.003 75)",
83
- "sidebar-primary": "oklch(0.145 0.003 75)",
87
+ "sidebar": "oklch(0.994 0.002 75)",
88
+ "sidebar-foreground": "oklch(0.145 0.003 75)",
89
+ "sidebar-primary": "oklch(0.353 0.003 75)",
84
90
  "sidebar-primary-foreground": "oklch(0.985 0.003 75)",
85
- "sidebar-accent": "oklch(0.955 0.003 75)",
91
+ "sidebar-accent": "oklch(0.945 0.003 75)",
86
92
  "sidebar-accent-foreground": "oklch(0.145 0.003 75)",
87
- "sidebar-border": "oklch(0.922 0.003 75)",
93
+ "sidebar-border": "oklch(0.145 0.003 75 / 0.08)",
88
94
  "sidebar-ring": "oklch(0.353 0.003 75)",
89
95
  "radius": "0.75rem",
90
96
  "radius-xs": "0.125rem",
@@ -103,35 +109,39 @@
103
109
  "icon-feature": "1.5rem",
104
110
  "sidebar-width": "15rem",
105
111
  "sidebar-width-icon": "3rem",
112
+ "sidebar-width-mobile": "18rem",
113
+ "layout-header-height": "3.5rem",
114
+ "layout-overlay-max-height": "calc(100dvh - 16rem)",
115
+ "panel-width-sm": "14rem",
116
+ "panel-width-md": "18rem",
117
+ "panel-width-lg": "20rem",
106
118
  "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
- "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
  "effect-blur-glass": "8px",
109
120
  "z-raised": 10,
110
121
  "z-overlay": 50,
122
+ "z-toast": 60,
111
123
  "opacity-dim": "50%",
112
124
  "opacity-hint-soft": "60%",
113
125
  "opacity-hint": "70%",
114
126
  "opacity-track": "25%",
127
+ "alpha-hover": "7%",
128
+ "alpha-pressed": "10%",
129
+ "alpha-border": "8%",
115
130
  "alpha-tint-border": "70%",
116
131
  "alpha-outline-border": "50%",
117
132
  "alpha-border-subtle": "20%",
118
133
  "alpha-border-soft": "30%",
119
134
  "alpha-surface-faint": "5%",
120
- "alpha-surface-subtle": "10%",
121
135
  "alpha-ink-tint": "10%",
122
136
  "alpha-ink-tint-strong": "15%",
123
- "alpha-soft-hover": "20%",
124
- "alpha-soft-surface": "10%",
125
137
  "alpha-input": "30%",
126
- "alpha-input-hover": "50%",
127
- "alpha-fill-hover": "80%",
128
138
  "alpha-wash-faint": "40%",
129
139
  "alpha-wash": "50%",
130
140
  "alpha-wash-strong": "60%",
131
141
  "alpha-backdrop-soft": "60%",
132
142
  "alpha-glass": "90%",
133
143
  "alpha-glass-hover": "95%",
134
- "alpha-link-hover": "80%",
144
+ "alpha-link-hover": "88%",
135
145
  "alpha-outline-soft": "50%",
136
146
  "type-product-xs": {
137
147
  "fontSize": "0.6875rem",
@@ -281,23 +291,29 @@
281
291
  "duration-fast": "150ms",
282
292
  "duration-base": "200ms",
283
293
  "duration-slow": "300ms",
294
+ "duration-indeterminate": "1200ms",
284
295
  "motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
285
296
  "motion-ease-emphasized": "cubic-bezier(0.3, 0, 0, 1)",
286
297
  "motion-ease-exit": "cubic-bezier(0.4, 0, 1, 1)",
287
298
  "motion-ease-spring": "linear(0, 0.5 60%, 1.05 80%, 0.98 90%, 1)",
288
299
  "motion-blur": "2px",
300
+ "border": "oklch(0.145 0.003 75 / 0.08)",
289
301
  "destructive-hover": "oklch(0.455 0.213 27.52)",
290
302
  "destructive-active": "oklch(0.415 0.213 27.52)",
291
303
  "destructive-subtle-hover": "oklch(0.91 0.036 20.4)",
304
+ "destructive-subtle-active": "oklch(0.883 0.046 19.3)",
292
305
  "success-hover": "oklch(0.45 0.16 150)",
293
306
  "success-active": "oklch(0.41 0.16 150)",
294
307
  "success-subtle-hover": "oklch(0.919 0.059 151.1)",
308
+ "success-subtle-active": "oklch(0.896 0.065 151.7)",
295
309
  "warning-hover": "oklch(0.47 0.145 52)",
296
310
  "warning-active": "oklch(0.43 0.145 52)",
297
311
  "warning-subtle-hover": "oklch(0.929 0.027 48.8)",
312
+ "warning-subtle-active": "oklch(0.906 0.034 51.5)",
298
313
  "info-hover": "oklch(0.481 0.182 256)",
299
314
  "info-active": "oklch(0.441 0.182 256)",
300
- "info-subtle-hover": "oklch(0.929 0.03 251.1)"
315
+ "info-subtle-hover": "oklch(0.929 0.03 251.1)",
316
+ "info-subtle-active": "oklch(0.906 0.038 250.5)"
301
317
  },
302
318
  "dark": {
303
319
  "background": "oklch(0.175 0.003 75)",
@@ -306,27 +322,29 @@
306
322
  "card-foreground": "oklch(0.922 0.003 75)",
307
323
  "popover": "oklch(0.205 0.003 75)",
308
324
  "popover-foreground": "oklch(0.922 0.003 75)",
325
+ "surface-1": "oklch(0.236 0.003 75)",
326
+ "surface-2": "oklch(0.269 0.003 75)",
327
+ "surface-3": "oklch(0.29 0.003 75)",
309
328
  "primary": "oklch(0.922 0.003 75)",
310
329
  "primary-foreground": "oklch(0.145 0.003 75)",
311
330
  "primary-hover": "oklch(0.97 0.003 75)",
312
331
  "primary-active": "oklch(0.994 0.002 75)",
313
- "track": "oklch(0.439 0.003 75)",
314
- "secondary": "oklch(0.269 0.003 75)",
332
+ "secondary": "oklch(0.236 0.003 75)",
315
333
  "secondary-foreground": "oklch(0.922 0.003 75)",
316
- "muted": "oklch(0.269 0.003 75)",
334
+ "muted": "oklch(0.236 0.003 75)",
317
335
  "muted-foreground": "oklch(0.66 0.003 75)",
318
336
  "muted-foreground-faint": "oklch(0.559 0.003 75)",
319
337
  "accent": "oklch(0.269 0.003 75)",
320
- "accent-foreground": "oklch(0.967 0.003 75)",
338
+ "accent-foreground": "oklch(0.922 0.003 75)",
321
339
  "destructive": "oklch(0.505 0.213 27.52)",
322
340
  "destructive-foreground": "oklch(0.985 0.003 75)",
323
341
  "destructive-subtle": "oklch(0.275 0.07 25)",
324
- "destructive-text": "oklch(0.72 0.16 25)",
342
+ "destructive-text": "oklch(0.74 0.16 25)",
325
343
  "destructive-border": "oklch(0.72 0.16 25)",
326
344
  "success": "oklch(0.5 0.16 150)",
327
345
  "success-foreground": "oklch(0.985 0.003 75)",
328
346
  "success-subtle": "oklch(0.276 0.061 150)",
329
- "success-text": "oklch(0.72 0.17 150)",
347
+ "success-text": "oklch(0.74 0.17 150)",
330
348
  "warning": "oklch(0.52 0.145 52)",
331
349
  "warning-foreground": "oklch(0.985 0.003 75)",
332
350
  "warning-subtle": "oklch(0.28 0.069 42)",
@@ -334,10 +352,12 @@
334
352
  "info": "oklch(0.531 0.182 256)",
335
353
  "info-foreground": "oklch(0.985 0.003 75)",
336
354
  "info-subtle": "oklch(0.275 0.059 255)",
337
- "info-text": "oklch(0.72 0.13 256)",
355
+ "info-text": "oklch(0.76 0.13 256)",
338
356
  "overlay": "oklch(0 0 0 / 0.55)",
339
- "border": "oklch(0.269 0.003 75)",
340
- "input": "oklch(0.269 0.003 75)",
357
+ "media-scrim": "oklch(0.13 0.002 75 / 0.6)",
358
+ "media-scrim-strong": "oklch(0.13 0.002 75 / 0.8)",
359
+ "media-foreground": "oklch(0.985 0.003 75)",
360
+ "input": "oklch(0.922 0.003 75 / 0.14)",
341
361
  "ring": "oklch(0.922 0.003 75)",
342
362
  "chart-1": "oklch(0.623 0.214 259.81)",
343
363
  "chart-2": "oklch(0.696 0.17 162.48)",
@@ -347,7 +367,9 @@
347
367
  "chart-6": "oklch(0.69 0.21 25)",
348
368
  "chart-7": "oklch(0.72 0.15 103.9)",
349
369
  "chart-8": "oklch(0.72 0.13 256)",
370
+ "chart-single": "oklch(0.922 0.003 75)",
350
371
  "brand": "oklch(0.86 0.21 148)",
372
+ "brand-text": "oklch(0.86 0.21 148)",
351
373
  "tag-blue": "oklch(0.72 0.14 256)",
352
374
  "tag-blue-subtle": "oklch(0.275 0.05 256)",
353
375
  "tag-blue-text": "oklch(0.75 0.13 256)",
@@ -378,13 +400,13 @@
378
400
  "tag-purple": "oklch(0.72 0.15 295)",
379
401
  "tag-purple-subtle": "oklch(0.275 0.05 295)",
380
402
  "tag-purple-text": "oklch(0.75 0.13 295)",
381
- "sidebar": "oklch(0.145 0.003 75)",
382
- "sidebar-foreground": "oklch(0.87 0.003 75)",
403
+ "sidebar": "oklch(0.205 0.003 75)",
404
+ "sidebar-foreground": "oklch(0.922 0.003 75)",
383
405
  "sidebar-primary": "oklch(0.922 0.003 75)",
384
406
  "sidebar-primary-foreground": "oklch(0.145 0.003 75)",
385
- "sidebar-accent": "oklch(0.205 0.003 75)",
407
+ "sidebar-accent": "oklch(0.269 0.003 75)",
386
408
  "sidebar-accent-foreground": "oklch(0.922 0.003 75)",
387
- "sidebar-border": "oklch(0.269 0.003 75)",
409
+ "sidebar-border": "oklch(0.922 0.003 75 / 0.14)",
388
410
  "sidebar-ring": "oklch(0.922 0.003 75)",
389
411
  "radius": "0.75rem",
390
412
  "radius-xs": "0.125rem",
@@ -403,35 +425,39 @@
403
425
  "icon-feature": "1.5rem",
404
426
  "sidebar-width": "15rem",
405
427
  "sidebar-width-icon": "3rem",
428
+ "sidebar-width-mobile": "18rem",
429
+ "layout-header-height": "3.5rem",
430
+ "layout-overlay-max-height": "calc(100dvh - 16rem)",
431
+ "panel-width-sm": "14rem",
432
+ "panel-width-md": "18rem",
433
+ "panel-width-lg": "20rem",
406
434
  "shadow-overlay": "0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4)",
407
- "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
  "effect-blur-glass": "8px",
409
436
  "z-raised": 10,
410
437
  "z-overlay": 50,
438
+ "z-toast": 60,
411
439
  "opacity-dim": "50%",
412
440
  "opacity-hint-soft": "60%",
413
441
  "opacity-hint": "70%",
414
442
  "opacity-track": "25%",
443
+ "alpha-hover": "7%",
444
+ "alpha-pressed": "10%",
445
+ "alpha-border": "14%",
415
446
  "alpha-tint-border": "70%",
416
447
  "alpha-outline-border": "50%",
417
448
  "alpha-border-subtle": "20%",
418
449
  "alpha-border-soft": "30%",
419
450
  "alpha-surface-faint": "5%",
420
- "alpha-surface-subtle": "10%",
421
451
  "alpha-ink-tint": "10%",
422
452
  "alpha-ink-tint-strong": "15%",
423
- "alpha-soft-hover": "30%",
424
- "alpha-soft-surface": "20%",
425
453
  "alpha-input": "30%",
426
- "alpha-input-hover": "50%",
427
- "alpha-fill-hover": "80%",
428
454
  "alpha-wash-faint": "40%",
429
455
  "alpha-wash": "50%",
430
456
  "alpha-wash-strong": "60%",
431
457
  "alpha-backdrop-soft": "60%",
432
458
  "alpha-glass": "90%",
433
459
  "alpha-glass-hover": "95%",
434
- "alpha-link-hover": "80%",
460
+ "alpha-link-hover": "88%",
435
461
  "alpha-outline-soft": "50%",
436
462
  "type-product-xs": {
437
463
  "fontSize": "0.6875rem",
@@ -581,22 +607,28 @@
581
607
  "duration-fast": "150ms",
582
608
  "duration-base": "200ms",
583
609
  "duration-slow": "300ms",
610
+ "duration-indeterminate": "1200ms",
584
611
  "motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
585
612
  "motion-ease-emphasized": "cubic-bezier(0.3, 0, 0, 1)",
586
613
  "motion-ease-exit": "cubic-bezier(0.4, 0, 1, 1)",
587
614
  "motion-ease-spring": "linear(0, 0.5 60%, 1.05 80%, 0.98 90%, 1)",
588
615
  "motion-blur": "2px",
616
+ "border": "oklch(0.922 0.003 75 / 0.14)",
589
617
  "destructive-hover": "oklch(0.455 0.213 27.52)",
590
618
  "destructive-active": "oklch(0.415 0.213 27.52)",
591
619
  "destructive-subtle-hover": "oklch(0.34 0.123 26.3)",
620
+ "destructive-subtle-active": "oklch(0.364 0.137 26.9)",
592
621
  "success-hover": "oklch(0.45 0.16 150)",
593
622
  "success-active": "oklch(0.41 0.16 150)",
594
623
  "success-subtle-hover": "oklch(0.348 0.092 148.9)",
624
+ "success-subtle-active": "oklch(0.371 0.101 148.5)",
595
625
  "warning-hover": "oklch(0.47 0.145 52)",
596
626
  "warning-active": "oklch(0.43 0.145 52)",
597
627
  "warning-subtle-hover": "oklch(0.356 0.093 46.6)",
628
+ "warning-subtle-active": "oklch(0.381 0.1 47.3)",
598
629
  "info-hover": "oklch(0.481 0.182 256)",
599
630
  "info-active": "oklch(0.441 0.182 256)",
600
- "info-subtle-hover": "oklch(0.354 0.101 254.3)"
631
+ "info-subtle-hover": "oklch(0.354 0.101 254.3)",
632
+ "info-subtle-active": "oklch(0.38 0.114 254.5)"
601
633
  }
602
634
  }
package/dist/utilities.css CHANGED
@@ -601,6 +601,13 @@
601
601
  * - motion-shake : horizontal error jiggle. Replayable: re-trigger by
602
602
  * remounting (key bump) or toggling the class after
603
603
  * `animationend`.
604
+ * - motion-indeterminate : the ONE sanctioned looping utility — the sweeping
605
+ * segment of an indeterminate Progress. Looping motion is
606
+ * otherwise banned; an indeterminate bar has no other way
607
+ * to say "still working" (audit M-06).
608
+ *
609
+ * `motion-dock-in` / `motion-dock-out` below are the one PAIR in this family and
610
+ * the one that is not keyed presence — see their own header.
604
611
  * ------------------------------------------------------------------------- */
605
612
  @keyframes vs-pop-in {
606
613
  from {
@@ -676,6 +683,79 @@
676
683
  animation: vs-flash var(--duration-slow) var(--motion-ease-standard);
677
684
  }
678
685
 
686
+ @keyframes vs-indeterminate {
687
+ /* Indeterminate progress (audit M-06, 2026-09-07): a 35%-wide segment sweeps the
688
+ * track and returns. The 0% and 100% stops are IDENTICAL on purpose — the global
689
+ * prefers-reduced-motion reset in base.css collapses every animation to its `to`
690
+ * state, so a reduced-motion user sees a static 35% segment resting at the start
691
+ * of the track instead of a bar that reads as 100% complete. */
692
+ 0% {
693
+ inset-inline-start: 0%;
694
+ }
695
+ 50% {
696
+ inset-inline-start: 65%;
697
+ }
698
+ 100% {
699
+ inset-inline-start: 0%;
700
+ }
701
+ }
702
+
703
+ @utility motion-indeterminate {
704
+ animation: vs-indeterminate var(--duration-indeterminate)
705
+ var(--motion-ease-standard) infinite;
706
+ }
707
+
708
+ /* ---------------------------------------------------------------------------
709
+ * motion-dock-in / motion-dock-out — the docked-control enter/exit pair
710
+ * (audit D11 amendment #7, 2026-09-07).
711
+ *
712
+ * A docked control — a bottom action bar, a floating scroll-to-end button —
713
+ * stays MOUNTED and flips a `data-active` attribute, so its motion is a
714
+ * transition, not a keyed animation. That is why this is a pair rather than one
715
+ * `@utility`: the two states carry different timing, which is the whole point.
716
+ *
717
+ * The doctrine these encode: **an exit is never slower than its enter.** Both
718
+ * bars previously entered at `duration-base` and left at `duration-slow` with a
719
+ * `scale-95`, so dismissing one took half again as long as summoning it and the
720
+ * bar shrank as it went. Vercel, Linear and Base UI's own defaults all leave at
721
+ * or faster than they arrive. Enter is 150ms `emphasized`; exit is 100ms `exit`;
722
+ * a docked bar translates and fades and does not scale — scale reads as a popup,
723
+ * and a bar sliding off its own edge does not need it.
724
+ *
725
+ * 100ms has exactly one role in the system — this exit — so it lives here, in
726
+ * the utility that names it, rather than becoming a fifth global duration token
727
+ * that would invite reuse D11 did not sanction.
728
+ *
729
+ * These own the timing, the fade and the inert-while-hidden guard. The DISTANCE
730
+ * stays at the call site as ordinary `translate-*` utilities, because it is
731
+ * per-dock geometry (a bottom bar clears its own height plus the safe-area
732
+ * inset; an edge button clears 100%) and because Tailwind composes `translate-x`
733
+ * and `translate-y` through custom properties that a `translate:` declaration
734
+ * here would clobber — a horizontally-centred bar would lose its centring.
735
+ *
736
+ * The global prefers-reduced-motion reset in base.css collapses both to 0.01ms.
737
+ *
738
+ * <div data-active={open}
739
+ * className="data-[active=true]:motion-dock-in data-[active=true]:translate-y-0
740
+ * data-[active=false]:motion-dock-out data-[active=false]:translate-y-full" />
741
+ * ------------------------------------------------------------------------- */
742
+ @utility motion-dock-in {
743
+ transition-property: translate, opacity;
744
+ transition-duration: var(--duration-fast);
745
+ transition-timing-function: var(--motion-ease-emphasized);
746
+ opacity: 1;
747
+ }
748
+
749
+ @utility motion-dock-out {
750
+ transition-property: translate, opacity;
751
+ transition-duration: 100ms;
752
+ transition-timing-function: var(--motion-ease-exit);
753
+ opacity: 0;
754
+ /* A docked-out control is off-screen: it must not swallow clicks on the way
755
+ out, and it must not be a hit target while parked. */
756
+ pointer-events: none;
757
+ }
758
+
679
759
  /* ---------------------------------------------------------------------------
680
760
  * BrandIcon theme-aware artwork swap (`<BrandIcon variant="auto">`).
681
761
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vegastack/design-tokens",
3
- "version": "0.2.0",
3
+ "version": "0.4.0",
4
4
  "description": "VegaStack design tokens (DTCG → Tailwind v4 theme + TS)",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -31,17 +31,17 @@
31
31
  "./tokens.json": "./dist/tokens.json",
32
32
  "./package.json": "./package.json"
33
33
  },
34
- "devDependencies": {
35
- "style-dictionary": "5.5.0",
36
- "typescript": "^6.0.3",
37
- "@vegastack/typescript-config": "0.0.0"
38
- },
39
- "publishConfig": {
40
- "access": "public"
41
- },
42
34
  "scripts": {
43
35
  "build": "node build-tokens.mjs && node ../../tooling/contrast-check.mjs dist/theme.css && tsup src/tokens.ts --format esm,cjs --dts --out-dir dist",
44
36
  "lint": "node ../../tooling/verify-theme-parity.mjs dist/theme.css && node ../../tooling/contrast-check.mjs dist/theme.css && node ../../tooling/design-lint.mjs --token-css src",
45
37
  "typecheck": "tsc --noEmit"
38
+ },
39
+ "devDependencies": {
40
+ "@vegastack/typescript-config": "workspace:*",
41
+ "style-dictionary": "5.5.2",
42
+ "typescript": "catalog:"
43
+ },
44
+ "publishConfig": {
45
+ "access": "public"
46
46
  }
47
- }
47
+ }