@kungal/ui-tokens 2.37.0 → 2.39.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @kungal/ui-tokens
 
+## 2.39.0
+
+### Minor Changes
+
+- 866effe: More of the web layer is now generated for Flutter — the rest of the Tailwind scales the components use, the sheet drag's feel, and the two offline images — and `KunShadows` now draws in Flutter the way the CSS does
+
+  **Web changes** (small, but visible):
+
+  - **`KunTextarea`'s counter no longer reads `n/100007`.** `maxlength` defaulted to 100007, so `show-char-count` without a `maxlength` printed that number as the limit, and downstream pages were showing it. The default is gone: with `maxlength` the counter reads `used/maxlength`, without it the bare count. The cost: a textarea with no `maxlength` no longer has a hidden native cap of 100007 characters. If your server enforces a length, pass it as `maxlength` so the field and the counter know about it.
+  - **`KunAvatar` and `KunUserChip`: `disableFloating` and `floatingPosition` are marked `@deprecated`.** Neither component has a floating card any more; the props still type-check so existing call sites compile, and your editor now shows them struck through. `KunUserChip` stopped passing them on to an avatar that ignored them.
+  - **`KunTab` and `KunCarousel` scroll buttons use `backdrop-blur-sm`** instead of the bare `backdrop-blur`, which Tailwind v4 keeps only as a deprecated alias. Both are 8px; nothing renders differently.
+  - **`@kungal/ui-core` exports `KUN_SWIPE_DISMISS_PHYSICS`** — the distance ratio, flick velocity and rubber-band limit behind the KunModal/KunDrawer drag-to-dismiss, now read from the shared motion manifest instead of literals in the composable. Same values, no behaviour change.
+  - The docs props tables and page Markdown now mark deprecated props, and `component-meta.json` / `contracts/component-contracts.json` carry a `deprecated` field on them.
+  - The docs changelog now shows the notes of releases whose changeset named `ui-core`, `ui-tokens` or `ui-nuxt` rather than `ui-vue`; 13 of them, 2.38.0 included, read "updated with dependencies" until now.
+
+  **Flutter (`kun_ui_tokens`, `kun_ui_icons`):**
+
+  - **`KunShadows` blur is converted, not copied — shadows look different, and correct.** CSS blurs a shadow with σ = blur / 2; `BoxShadow` turns `blurRadius` into σ = 0.57735 × blurRadius + 0.5. Every earlier release passed the CSS number straight through, so every elevation drew about 20% softer than the web. Measured against Chromium on the same shapes, `KunShadows.lg` on a rounded box had 6249 color channels more than 2/255 off before this fix and 33 after. If you wrote your own `BoxShadow` from a CSS value, it needs the same conversion.
+  - **More Tailwind defaults, read from Tailwind** (like `KunSpacing` and `KunText` in 2.38.0): `KunContainerWidths` (`max-w-*`, 3xs–7xl), `KunBreakpointWidths` (sm–2xl), `KunBlur` (`blur-*` / `backdrop-blur-*`; a step is a standard deviation and passes straight into `ImageFilter.blur`), `KunShadows.glow(color)` (`shadow-lg` in a tint — the `shadow` variant's glow) and `KunDefaultTransition` (the 150 ms curve that a bare `transition` runs, which is most of KunUI's hover and press feedback). Names with a leading digit become `xl2`, `xs3` and so on. `KunBreakpointWidths` is deliberately not `KunBreakpoints`, which `kun_ui` already defines.
+  - **`KunColors.white` and `KunColors.black`**, the two colors that do not change with the mode.
+  - **`KunSwipeDismissPhysics`** — the feel of dragging a bottom sheet closed, generated from the same manifest as the web constant. `closeVelocity` is in px/s, the unit of `DragEndDetails`. The web's other drag constants (claim slop, velocity window, scroll cooldown, open grace) are tuned to browser mechanics and stay web-only.
+  - **`KunImages.nullImage` and `KunImages.avatarFallback`** in `kun_ui_icons`: KunNull's mascot and KunAvatar's last fallback, bundled as package assets (the exact bytes the web inlines as data URIs), so a Flutter app draws them without a network request and without declaring anything in its own pubspec.
+  - **DTCG** gains `container`, `breakpoint`, `blur`, `motion.defaultTransition`, `color.white` and `color.black`.
+
+  Not generated, on purpose: Pagination's timings and pop keyframes and Select's type-ahead delay are one component's own choreography, so the Flutter port copies them from source. The `shadow` variant keeps Tailwind's `shadow-lg` rather than switching to `shadow-kun-lg`, which is the elevation scale and would restyle every `variant="shadow"` button.
+
+## 2.38.0
+
+### Minor Changes
+
+- 8132bef: Spacing and the type scale are now generated tokens: `KunSpacing` and `KunText` in `kun_ui_tokens`, `spacing` and `text` in `tokens.dtcg.json`
+
+  Until now the token exports carried colour, radius, motion and elevation, but not the two scales every component is laid out with. The Flutter port felt the gap first: a form label had to hand-type `fontSize: 14, height: 20 / 14`, and a gallery heading borrowed the control-size table because there was no type scale to take.
+
+  **Where the numbers come from.** KunUI has never declared `--spacing` or `--text-*` — its components are written against Tailwind v4's default theme. So `gen-tokens.mjs` reads both straight out of `tailwindcss/theme.css` rather than restating them: a Tailwind upgrade that changes a default shows up as a diff in the generated files, and the generator refuses to run if KunUI's own `tokens.css` ever starts declaring either. The values describe the scale the components were designed at; a site that overrides `--spacing` or `--text-*` in its own `@theme` renders differently from them.
+
+  - **Dart.** `KunSpacing.unit` (4) is the step every spacing utility multiplies — `px-4` is `KunSpacing.unit * 4`, which stays a `const` expression. `KunText.xs` … `KunText.xl9` are const `TextStyle`s carrying only `fontSize` and `height` (`2xl`–`9xl` become `xl2`–`xl9`, since a Dart name cannot start with a digit); colour, weight and family stay null and inherit.
+  - **Half-leading.** Every `KunText` style sets `leadingDistribution: TextLeadingDistribution.even`, which is what CSS does. Measured with the same font metrics in Chromium and `flutter test`, Flutter's default `proportional` sits the baseline 1.2–2.6 px lower than the browser at `xs`–`4xl`; `even` matches it to within Chromium's pixel rounding.
+  - **DTCG.** `spacing.unit` is a `dimension`; each `text.<step>` is a `fontSize` dimension plus a unitless `lineHeight` number. They are not `typography` composites, because the 2025.10 format requires all five of that type's sub-values, and family, weight and letter-spacing are not part of this scale.
+
+  Nothing changes for web consumers: no CSS changed.
+
 ## 2.37.0
 
 ## 2.36.0

package/package.json

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

package/src/tokens.dtcg.json

@@ -1,6 +1,32 @@
 {
   "$description": "KunUI design tokens, DTCG Format Module 2025.10. Generated by packages/ui-tokens/scripts/gen-tokens.mjs from the same model that emits palette.generated.css and the kun_ui_tokens Dart package. Do not edit.",
   "color": {
+    "white": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "alpha": 1,
+        "hex": "#ffffff"
+      }
+    },
+    "black": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ],
+        "alpha": 1,
+        "hex": "#000000"
+      }
+    },
     "light": {
       "primary": {
         "50": {
@@ -2661,6 +2687,25 @@
           "unit": "ms"
         }
       }
+    },
+    "defaultTransition": {
+      "$description": "The values are Tailwind v4's default theme, which KunUI's components are written against and never redeclare. A site that overrides them in its own @theme renders differently from these; these are what the components were designed at.",
+      "duration": {
+        "$type": "duration",
+        "$value": {
+          "value": 150,
+          "unit": "ms"
+        }
+      },
+      "easing": {
+        "$type": "cubicBezier",
+        "$value": [
+          0.4,
+          0,
+          0.2,
+          1
+        ]
+      }
     }
   },
   "elevation": {
@@ -2819,5 +2864,371 @@
         }
       ]
     }
+  },
+  "spacing": {
+    "$description": "The values are Tailwind v4's default theme, which KunUI's components are written against and never redeclare. A site that overrides them in its own @theme renders differently from these; these are what the components were designed at.",
+    "unit": {
+      "$type": "dimension",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      }
+    }
+  },
+  "container": {
+    "$description": "The values are Tailwind v4's default theme, which KunUI's components are written against and never redeclare. A site that overrides them in its own @theme renders differently from these; these are what the components were designed at.",
+    "3xs": {
+      "$type": "dimension",
+      "$value": {
+        "value": 256,
+        "unit": "px"
+      }
+    },
+    "2xs": {
+      "$type": "dimension",
+      "$value": {
+        "value": 288,
+        "unit": "px"
+      }
+    },
+    "xs": {
+      "$type": "dimension",
+      "$value": {
+        "value": 320,
+        "unit": "px"
+      }
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": {
+        "value": 384,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": {
+        "value": 448,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": {
+        "value": 512,
+        "unit": "px"
+      }
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 576,
+        "unit": "px"
+      }
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 672,
+        "unit": "px"
+      }
+    },
+    "3xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 768,
+        "unit": "px"
+      }
+    },
+    "4xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 896,
+        "unit": "px"
+      }
+    },
+    "5xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1024,
+        "unit": "px"
+      }
+    },
+    "6xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1152,
+        "unit": "px"
+      }
+    },
+    "7xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1280,
+        "unit": "px"
+      }
+    }
+  },
+  "breakpoint": {
+    "$description": "The values are Tailwind v4's default theme, which KunUI's components are written against and never redeclare. A site that overrides them in its own @theme renders differently from these; these are what the components were designed at.",
+    "sm": {
+      "$type": "dimension",
+      "$value": {
+        "value": 640,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": {
+        "value": 768,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1024,
+        "unit": "px"
+      }
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1280,
+        "unit": "px"
+      }
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1536,
+        "unit": "px"
+      }
+    }
+  },
+  "blur": {
+    "$description": "The values are Tailwind v4's default theme, which KunUI's components are written against and never redeclare. A site that overrides them in its own @theme renders differently from these; these are what the components were designed at.",
+    "xs": {
+      "$type": "dimension",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      }
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      }
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 24,
+        "unit": "px"
+      }
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      }
+    },
+    "3xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 64,
+        "unit": "px"
+      }
+    }
+  },
+  "text": {
+    "$description": "The values are Tailwind v4's default theme, which KunUI's components are written against and never redeclare. A site that overrides them in its own @theme renders differently from these; these are what the components were designed at.",
+    "xs": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 12,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1.3333333333333333
+      }
+    },
+    "sm": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 14,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1.4285714285714286
+      }
+    },
+    "base": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1.5
+      }
+    },
+    "lg": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 18,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1.5555555555555556
+      }
+    },
+    "xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 20,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1.4
+      }
+    },
+    "2xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 24,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1.3333333333333333
+      }
+    },
+    "3xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 30,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1.2
+      }
+    },
+    "4xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 36,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1.1111111111111112
+      }
+    },
+    "5xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 48,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1
+      }
+    },
+    "6xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 60,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1
+      }
+    },
+    "7xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 72,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1
+      }
+    },
+    "8xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 96,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1
+      }
+    },
+    "9xl": {
+      "fontSize": {
+        "$type": "dimension",
+        "$value": {
+          "value": 128,
+          "unit": "px"
+        }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "$value": 1
+      }
+    }
   }
 }