@kungal/ui-tokens 2.39.0 → 2.40.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @kungal/ui-tokens
 
+## 2.40.1
+
+## 2.40.0
+
+### Minor Changes
+
+- 905b880: `kun_ui_tokens` now carries every theme value a KunUI component uses, and the generator fails when a component starts using one it does not.
+
+  **For the Flutter port**
+
+  - `KunPulse` (`animate-pulse`: 2 s, `Cubic(0.4, 0, 0.6, 1)`, `midOpacity` 0.5) and `KunSpin` (`animate-spin`: 1 s, linear) unblock KunSkeleton, KunAvatar's loading layer and KunProgress's indeterminate ring. The web eases each _half_ of a pulse cycle. An `AnimationController` of half `KunPulse.duration` running `repeat(reverse: true)` under a `CurvedAnimation` with `KunPulse.curve` matched Chromium within 0.0008 opacity across two cycles; easing the whole cycle once is off by up to 0.14.
+  - `KunRounded` is Tailwind's own radius scale. KunSkeleton's text variant, KunLightbox and KunCommandPalette use `rounded-md` and its neighbours directly. Unlike `KunRadius`, the scale ignores `--kun-radius-scale`.
+  - `KunFontWeights` is Tailwind's weight scale: `font-medium` is `KunFontWeights.medium`.
+  - `KunColorScheme.border` is the `border-kun` hairline, `neutral.shade100`.
+  - `KunColors.globalOpacity` (0.7) is the alpha the web draws `--color-background` and `--color-default-100` at. The schemes still store both opaque, so web `bg-default-100` is `neutral.shade100.withValues(alpha: KunColors.globalOpacity)`.
+  - A few values stay unported on purpose, each with its reason in `packages/ui-tokens/scripts/theme-coverage.mjs`: the `--z-kun-*` layers, KunLoli's animate.css keyframes (copy them with the component, as with Pagination's pop), the opt-in glass knobs and the live `--kun-scrollbar-width`.
+  - `tokens.dtcg.json` gains the same values: `fontWeight`, `rounded`, `motion.pulse`, `motion.spin`, `opacity.global` and a `border` alias in each mode.
+
+  **For websites**
+
+  - KunImage's loading placeholder, and with it KunAvatar's, now pulses only when the user has not asked for reduced motion, as KunSkeleton already did. Nothing else renders differently.
+
+  **For contributors**
+
+  - `pnpm gen:tokens` builds the Vue and core sources with Tailwind and fails when a component depends on a theme variable that `kun_ui_tokens` neither generates nor lists in `NOT_GENERATED` with a reason. A class, a breakpoint or a `var()` in a `<style>` block all count. `@kungal/ui-tokens` gains `@tailwindcss/oxide` and `tailwindcss` as dev dependencies for this; consumers install nothing new.
+
 ## 2.39.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/ui-tokens",
-  "version": "2.39.0",
+  "version": "2.40.1",
   "description": "KunUI design tokens — framework-agnostic Tailwind v4 theme (semantic colors, radius, z-index, animations).",
   "type": "module",
   "keywords": [
@@ -42,7 +42,9 @@
     "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
-    "culori": "^4.0.2"
+    "@tailwindcss/oxide": "^4.3.0",
+    "culori": "^4.0.2",
+    "tailwindcss": "^4.3.0"
   },
   "scripts": {
     "build": "echo \"@kungal/ui-tokens ships CSS source, no build step\"",

package/src/tokens.dtcg.json

@@ -1302,6 +1302,10 @@
           "alpha": 1,
           "hex": "#d4d4d8"
         }
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.light.default.100}"
       }
     },
     "dark": {
@@ -2579,9 +2583,20 @@
           "alpha": 1,
           "hex": "#52525b"
         }
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.dark.default.100}"
       }
     }
   },
+  "opacity": {
+    "global": {
+      "$description": "The alpha of --color-background and --color-default-100; the color tokens store both opaque.",
+      "$type": "number",
+      "$value": 0.7
+    }
+  },
   "radius": {
     "none": {
       "$type": "dimension",
@@ -2619,6 +2634,65 @@
       }
     }
   },
+  "rounded": {
+    "$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": 2,
+        "unit": "px"
+      }
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      }
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      }
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      }
+    },
+    "3xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 24,
+        "unit": "px"
+      }
+    },
+    "4xl": {
+      "$type": "dimension",
+      "$value": {
+        "value": 32,
+        "unit": "px"
+      }
+    }
+  },
   "motion": {
     "easing": {
       "standard": {
@@ -2706,6 +2780,48 @@
           1
         ]
       }
+    },
+    "pulse": {
+      "$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. The easing applies to each half of a cycle.",
+      "duration": {
+        "$type": "duration",
+        "$value": {
+          "value": 2000,
+          "unit": "ms"
+        }
+      },
+      "easing": {
+        "$type": "cubicBezier",
+        "$value": [
+          0.4,
+          0,
+          0.6,
+          1
+        ]
+      },
+      "midOpacity": {
+        "$type": "number",
+        "$value": 0.5
+      }
+    },
+    "spin": {
+      "$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. One full turn per duration.",
+      "duration": {
+        "$type": "duration",
+        "$value": {
+          "value": 1000,
+          "unit": "ms"
+        }
+      },
+      "easing": {
+        "$type": "cubicBezier",
+        "$value": [
+          0,
+          0,
+          1,
+          1
+        ]
+      }
     }
   },
   "elevation": {
@@ -3059,6 +3175,45 @@
       }
     }
   },
+  "fontWeight": {
+    "$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.",
+    "thin": {
+      "$type": "fontWeight",
+      "$value": 100
+    },
+    "extralight": {
+      "$type": "fontWeight",
+      "$value": 200
+    },
+    "light": {
+      "$type": "fontWeight",
+      "$value": 300
+    },
+    "normal": {
+      "$type": "fontWeight",
+      "$value": 400
+    },
+    "medium": {
+      "$type": "fontWeight",
+      "$value": 500
+    },
+    "semibold": {
+      "$type": "fontWeight",
+      "$value": 600
+    },
+    "bold": {
+      "$type": "fontWeight",
+      "$value": 700
+    },
+    "extrabold": {
+      "$type": "fontWeight",
+      "$value": 800
+    },
+    "black": {
+      "$type": "fontWeight",
+      "$value": 900
+    }
+  },
   "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": {