@kungal/ui-tokens 0.17.1 → 0.18.0

package/package.json

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

package/src/base.css

@@ -17,7 +17,9 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-default-200, currentColor);
+    /* Global default border color = the canonical neutral border token, so a
+     * bare `border` (no explicit color) matches `border-kun` everywhere. */
+    border-color: var(--color-kun-border, var(--color-default-200, currentColor));
     color: var(--color-foreground);
   }
 

package/src/tokens.css

@@ -368,6 +368,51 @@
   z-index: var(--z-kun-message, 9999);
 }
 
+/* Canonical neutral border — the SINGLE source of truth for every structural
+ * hairline (inputs, cards, dividers, popovers, tabs, tables…). Defaults to the
+ * `default-200` step, which already flips light↔dark (light ≈ L90% zinc-200,
+ * dark ≈ L26% zinc-700), so one utility stays consistent across modes AND
+ * components — no more per-component `border-default/20` + `dark:border-…`
+ * juggling that only coincidentally matched. Retheme every border at once by
+ * overriding `--color-kun-border` (set it in `.kun-dark-mode` too if you give
+ * it a fixed, non-flipping value). Plain :root + literal fallback on the
+ * utility → never tree-shaken (same reasoning as the z-index / motion blocks).
+ *
+ * `border-kun` sets border-COLOR only; pair it with a width class
+ * (`border` / `border-b` / `border-t` / `border-l`). Conditional `border-danger-*`
+ * / `focus:border-*` still win (apply `border-kun` only in the non-error branch
+ * so two plain border-color utilities never fight over source order). */
+:root {
+  --color-kun-border: hsl(var(--default-200));
+}
+@utility border-kun {
+  border-color: var(--color-kun-border, hsl(var(--default-200)));
+}
+
+/* Motion tokens, mirrored into a plain :root so they ALWAYS reach the document.
+ *
+ * Exact same tree-shaking trap as the z-index fallbacks above: Tailwind v4 only
+ * emits an @theme variable to :root when its scanner sees it "used", and these
+ * are read ONLY via `var(--kun-dur-base)` / `var(--ease-kun-out)` inside
+ * component <style> blocks and inline styles — which Tailwind never scans. The
+ * duration tokens have no utility namespace at all, so @theme drops every one
+ * of them in a normal consumer build; the component transitions then resolve to
+ * `var(<undefined>)`, the whole `transition` shorthand is invalidated, and the
+ * Modal / Drawer / FadeCard / Tab-indicator / toast animations silently vanish.
+ * This plain :root (not @theme → never tree-shaken) guarantees a real value in
+ * every build. The easings are ALSO kept in @theme above — that is what
+ * generates the `ease-kun-*` utilities — so keep the two lists in sync. */
+:root {
+  --ease-kun-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-kun-out: cubic-bezier(0, 0, 0, 1);
+  --ease-kun-in: cubic-bezier(0.3, 0, 1, 1);
+  --ease-kun-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --kun-dur-fast: 150ms;
+  --kun-dur-base: 250ms;
+  --kun-dur-slow: 350ms;
+  --kun-dur-exit: 180ms;
+}
+
 @layer base {
   :root {
     /* Content color */