@kungal/ui-tokens 0.17.1 → 0.17.2

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/tokens.css +24 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kungal/ui-tokens",
3
- "version": "0.17.1",
3
+ "version": "0.17.2",
4
4
  "description": "KunUI design tokens — framework-agnostic Tailwind v4 theme (semantic colors, radius, z-index, animations).",
5
5
  "type": "module",
6
6
  "keywords": [
package/src/tokens.css CHANGED
@@ -368,6 +368,30 @@
368
368
  z-index: var(--z-kun-message, 9999);
369
369
  }
370
370
 
371
+ /* Motion tokens, mirrored into a plain :root so they ALWAYS reach the document.
372
+ *
373
+ * Exact same tree-shaking trap as the z-index fallbacks above: Tailwind v4 only
374
+ * emits an @theme variable to :root when its scanner sees it "used", and these
375
+ * are read ONLY via `var(--kun-dur-base)` / `var(--ease-kun-out)` inside
376
+ * component <style> blocks and inline styles — which Tailwind never scans. The
377
+ * duration tokens have no utility namespace at all, so @theme drops every one
378
+ * of them in a normal consumer build; the component transitions then resolve to
379
+ * `var(<undefined>)`, the whole `transition` shorthand is invalidated, and the
380
+ * Modal / Drawer / FadeCard / Tab-indicator / toast animations silently vanish.
381
+ * This plain :root (not @theme → never tree-shaken) guarantees a real value in
382
+ * every build. The easings are ALSO kept in @theme above — that is what
383
+ * generates the `ease-kun-*` utilities — so keep the two lists in sync. */
384
+ :root {
385
+ --ease-kun-standard: cubic-bezier(0.2, 0, 0, 1);
386
+ --ease-kun-out: cubic-bezier(0, 0, 0, 1);
387
+ --ease-kun-in: cubic-bezier(0.3, 0, 1, 1);
388
+ --ease-kun-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
389
+ --kun-dur-fast: 150ms;
390
+ --kun-dur-base: 250ms;
391
+ --kun-dur-slow: 350ms;
392
+ --kun-dur-exit: 180ms;
393
+ }
394
+
371
395
  @layer base {
372
396
  :root {
373
397
  /* Content color */