@kungal/ui-tokens 0.19.1 → 0.20.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/package.json +1 -1
- package/src/tokens.css +32 -0
package/package.json
CHANGED
package/src/tokens.css
CHANGED
|
@@ -179,6 +179,19 @@
|
|
|
179
179
|
--kun-dur-slow: 350ms; /* larger surfaces */
|
|
180
180
|
--kun-dur-exit: 180ms; /* exits run ~30% shorter than enters */
|
|
181
181
|
|
|
182
|
+
/* Elevation scale — ONE shadow per tier so every floating surface of the same
|
|
183
|
+
* kind shares an elevation instead of picking shadow-md/lg/2xl ad hoc. These
|
|
184
|
+
* are a Tailwind `--shadow-*` namespace, so `shadow-kun-sm|md|lg` utilities are
|
|
185
|
+
* generated and compose with `ring-*` (both feed --tw-shadow). Tiers:
|
|
186
|
+
* sm → tooltips / small hints
|
|
187
|
+
* md → popovers, dropdowns, menus, select & date lists, toasts
|
|
188
|
+
* lg → modals, drawers (the highest surfaces) */
|
|
189
|
+
--shadow-kun-sm: 0 2px 8px -2px rgb(0 0 0 / 0.12);
|
|
190
|
+
--shadow-kun-md:
|
|
191
|
+
0 4px 12px -4px rgb(0 0 0 / 0.1), 0 8px 24px -6px rgb(0 0 0 / 0.14);
|
|
192
|
+
--shadow-kun-lg:
|
|
193
|
+
0 8px 24px -8px rgb(0 0 0 / 0.14), 0 16px 48px -12px rgb(0 0 0 / 0.22);
|
|
194
|
+
|
|
182
195
|
/* Animations */
|
|
183
196
|
--animate-shake: shake 1s ease-in-out;
|
|
184
197
|
--animate-bounceInDown: bounceInDown 1s ease-in-out;
|
|
@@ -389,6 +402,25 @@
|
|
|
389
402
|
border-color: var(--color-kun-border, hsl(var(--default-200)));
|
|
390
403
|
}
|
|
391
404
|
|
|
405
|
+
/* Duration utilities bound to the motion scale, so component transitions route
|
|
406
|
+
* through the same `--kun-dur-*` tokens as the overlay enter/leave animations
|
|
407
|
+
* instead of hardcoding `duration-150/200/300`. Literal fallback (the var is
|
|
408
|
+
* mirrored to :root below) keeps them robust if the token is ever tree-shaken.
|
|
409
|
+
* Tiers: fast = hover/selection/micro; base = component enter; exit = leave
|
|
410
|
+
* (asymmetric, ~30% shorter); slow = larger surfaces / fades. */
|
|
411
|
+
@utility duration-kun-fast {
|
|
412
|
+
transition-duration: var(--kun-dur-fast, 150ms);
|
|
413
|
+
}
|
|
414
|
+
@utility duration-kun-base {
|
|
415
|
+
transition-duration: var(--kun-dur-base, 250ms);
|
|
416
|
+
}
|
|
417
|
+
@utility duration-kun-slow {
|
|
418
|
+
transition-duration: var(--kun-dur-slow, 350ms);
|
|
419
|
+
}
|
|
420
|
+
@utility duration-kun-exit {
|
|
421
|
+
transition-duration: var(--kun-dur-exit, 180ms);
|
|
422
|
+
}
|
|
423
|
+
|
|
392
424
|
/* Motion tokens, mirrored into a plain :root so they ALWAYS reach the document.
|
|
393
425
|
*
|
|
394
426
|
* Exact same tree-shaking trap as the z-index fallbacks above: Tailwind v4 only
|