@kungal/ui-tokens 1.9.1 → 1.9.3

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @kungal/ui-tokens
 
+## 1.9.3
+
+### Patch Changes
+
+- 0b42fd3: perf: stop shipping backdrop-filter on every surface (mobile scroll jank)
+
+  KunCard shipped `backdrop-filter: blur(var(--kun-background-blur))` on EVERY card —
+  and the default blur was `0px` over an opaque surface, so it did nothing visually
+  while still promoting each card to a compositing layer and running the backdrop
+  pipeline. `backdrop-filter: blur()` is the #1 cause of janky scrolling on mobile
+  (a 120Hz phone can drop to ~30–60Hz). With many cards per page the layers piled up.
+
+  - KunCard / KunModal now emit `backdrop-filter` only via the new opt-in
+    `kun-backdrop` utility, which is `none` by default (free — no layer, no blur pass).
+  - New token `--kun-backdrop-filter` (default `none`) **replaces `--kun-background-blur`**.
+    A glass site opts in for every raised surface at once:
+    `:root { --kun-surface-opacity: 0.7; --kun-backdrop-filter: blur(12px); }`
+
+  BREAKING (glass only): if you set `--kun-background-blur: 12px`, switch to
+  `--kun-backdrop-filter: blur(12px)`. Sites that never enabled glass are unaffected
+  (and get smoother scrolling for free).
+
+## 1.9.2
+
+### Patch Changes
+
+- b673935: fix(tokens,vue): softer neutral hairline + bordered cards by default
+
+  - KunCard shows a faint hairline border by default again (it was borderless during
+    the filled-surface work) — with the lighter page and softer shadows, a hairline
+    delineates the card better than shadow alone.
+  - The shared neutral border token (`--color-kun-border` / the `border-kun` utility)
+    drops from `default-200` to `default-100` — a lighter hairline that delineates a
+    surface without framing it. Every consumer softens at once: inputs, textarea,
+    select & other controls, accordion, tabs, dividers, drawer rules, etc. Error
+    borders (danger) and focus rings are unaffected.
+
 ## 1.9.1
 
 ### Patch Changes

package/package.json

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

package/src/base.css

@@ -19,7 +19,7 @@
   ::file-selector-button {
     /* 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));
+    border-color: var(--color-kun-border, var(--color-default-100, currentColor));
     color: var(--color-foreground);
   }
 

package/src/tokens.css

@@ -35,16 +35,26 @@
    * inputs, modal, drawer. Default 1 = fully opaque (the clean elevation look).
    * A site with a background image (e.g. a galgame page) can make every surface
    * frosted at once by lowering this and adding a blur, with NO component changes:
-   *   :root { --kun-surface-opacity: 0.7; --kun-background-blur: 12px; }
-   * (Components don't ship a backdrop-blur on every surface, so set the blur too
-   * if you want true frosted glass rather than plain see-through.) */
+   *   :root { --kun-surface-opacity: 0.7; --kun-backdrop-filter: blur(12px); }
+   * (Surfaces ship `backdrop-filter: none` by default — set --kun-backdrop-filter
+   * to opt into true frosted glass rather than plain see-through.) */
   --kun-surface-opacity: 1;
 
-  /* Backdrop blur strength for glass surfaces (Card / Modal / sticky
-   * topbar). 0 = no blur. Referenced as
-   * `backdrop-blur-[var(--kun-background-blur)]` by those components.
-   * Apps may override (e.g. a user-adjustable glass-blur setting). */
-  --kun-background-blur: 0px;
+  /* Backdrop-filter for raised glass surfaces (Card / Modal), consumed via the
+   * `kun-backdrop` utility. Default `none` so NO backdrop-filter is emitted:
+   * backdrop-filter: blur() is the #1 cause of mobile scroll jank, and at the
+   * default opaque / zero-blur it produced no visual effect anyway. A glass site
+   * opts in for every surface at once, e.g. `--kun-backdrop-filter: blur(12px)`
+   * (pair with a lowered --kun-surface-opacity). */
+  --kun-backdrop-filter: none;
+}
+
+/* Opt-in frosted-glass backdrop for raised surfaces. At the default `none` it
+ * emits `backdrop-filter: none` (free — no compositing layer, no blur pass);
+ * set --kun-backdrop-filter to enable glass on every surface that uses it. */
+@utility kun-backdrop {
+  -webkit-backdrop-filter: var(--kun-backdrop-filter, none);
+  backdrop-filter: var(--kun-backdrop-filter, none);
 }
 
 @theme {
@@ -303,8 +313,9 @@
 
 /* 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
+ * `default-100` step — a very light hairline that just delineates a surface
+ * without framing it — which already flips light↔dark, 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
@@ -316,10 +327,10 @@
  * / `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: oklch(var(--default-200));
+  --color-kun-border: oklch(var(--default-100));
 }
 @utility border-kun {
-  border-color: var(--color-kun-border, oklch(var(--default-200)));
+  border-color: var(--color-kun-border, oklch(var(--default-100)));
 }
 
 /* Duration utilities bound to the motion scale, so component transitions route