@kungal/ui-tokens 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/ui-tokens",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "KunUI design tokens — framework-agnostic Tailwind v4 theme (semantic colors, radius, z-index, animations).",
   "type": "module",
   "keywords": [

package/src/base.css

@@ -75,3 +75,20 @@
     display: block;
   }
 }
+
+/*
+ * Respect the user's reduced-motion preference (WCAG 2.3.3). "Reduce" means
+ * reduce, not remove: we collapse durations to ~0 rather than 0 so JS that
+ * waits on transitionend / animationend still fires. This is part of the
+ * opinionated base layer — apps that import tokens-only opt out.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/tokens.css

@@ -148,9 +148,9 @@
    * Tailwind v4 @theme auto-generates rounded-kun-none / -sm / -md / -lg / -full;
    * the framework-agnostic class map lives in @kungal/ui-core (kunRoundedClasses). */
   --radius-kun-none: 0;
-  --radius-kun-sm: calc(0.25rem * var(--kun-radius-scale, 1));
-  --radius-kun-md: calc(0.5rem * var(--kun-radius-scale, 1));
-  --radius-kun-lg: calc(0.75rem * var(--kun-radius-scale, 1));
+  --radius-kun-sm: calc(0.375rem * var(--kun-radius-scale, 1)); /* 6px  */
+  --radius-kun-md: calc(0.75rem * var(--kun-radius-scale, 1)); /* 12px — HeroUI-style default control radius */
+  --radius-kun-lg: calc(1rem * var(--kun-radius-scale, 1)); /* 16px — containers / floating panels */
   --radius-kun-full: 9999px;
 
   /* z-index layering — floating UI must stack predictably so a popover
@@ -165,6 +165,20 @@
   --z-kun-alert: 9700;
   --z-kun-message: 9999;
 
+  /* Motion — one easing set + duration scale so every component shares a
+   * rhythm. Asymmetric by design: decelerate on enter, accelerate on exit
+   * (ease in as it arrives, snap away as it leaves). Curves from Material 3;
+   * `emphasized` is the snappy "premium settle" (Radix/Vaul). The --ease-kun-*
+   * names also generate Tailwind `ease-kun-*` utilities. */
+  --ease-kun-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-kun-out: cubic-bezier(0, 0, 0, 1); /* enter / decelerate */
+  --ease-kun-in: cubic-bezier(0.3, 0, 1, 1); /* exit / accelerate */
+  --ease-kun-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --kun-dur-fast: 150ms; /* hover, selection, micro-interactions */
+  --kun-dur-base: 250ms; /* component enter / in-screen transitions */
+  --kun-dur-slow: 350ms; /* larger surfaces */
+  --kun-dur-exit: 180ms; /* exits run ~30% shorter than enters */
+
   /* Animations */
   --animate-shake: shake 1s ease-in-out;
   --animate-bounceInDown: bounceInDown 1s ease-in-out;