@kungal/ui-tokens 2.52.1 → 2.54.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @kungal/ui-tokens
 
+## 2.54.0
+
+## 2.53.0
+
+### Minor Changes
+
+- 461df96: New token `foreground-muted` for secondary text: descriptions, helper text, timestamps, counts, empty states and meta lines. It is `default-600` in light mode and `default-500` in dark mode. The token generator now fails the build unless it clears 4.5:1 (WCAG AA) on both `background` and `content1` in both modes. Measured: 5.03:1 and 5.53:1 in light, 5.42:1 and 4.85:1 in dark.
+
+  KunUI's own components use it for secondary text. They used to set that text in `text-default-500` or `text-default-400`, which measure 3.33:1 and 2.31:1 on the light page background, so both fell below AA. Affected text includes field descriptions and helper text, tab labels that are not selected, divider labels, user-chip descriptions, character counts, empty states, timeline and chat timestamps, conversation previews and command-palette meta lines.
+
+  - **What it costs:** in light mode that text is now a step darker. Dark mode renders exactly as before, because its value (`default-500`) is the one it already used.
+  - **What stays the same:** placeholders (`::placeholder` stays `default-400`), the text of an empty select or date picker, disabled states, outside-month days and icons.
+
+  **Migrating your own text.** No single grey clears 4.5:1 against both the light and the dark page, and the ramp's `500` step is the same value in both modes. So readable secondary text belongs on this token, not on a fixed step:
+
+  - In Vue, replace `text-default-500` or `text-default-400` with `text-foreground-muted`.
+  - In Flutter (`kun_ui_tokens`), `KunColorScheme` gains `foregroundMuted`. Replace `scheme.neutral.shade500` with `scheme.foregroundMuted`.
+  - Keep the old steps for anything that is not text meant to be read.
+
+  `KunColorScheme`'s constructor gains a required `foregroundMuted` parameter. Only code that builds a scheme by hand needs to pass it. `KunColors.light` and `KunColors.dark` already carry it.
+
 ## 2.52.1
 
 ## 2.52.0

package/package.json

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

package/src/palette.generated.css

@@ -11,6 +11,7 @@
 @theme {
   --color-background: oklch(var(--background) / var(--kun-global-opacity));
   --color-foreground: oklch(var(--foreground));
+  --color-foreground-muted: oklch(var(--foreground-muted));
   --color-content1: oklch(var(--content1) / var(--kun-surface-opacity));
   --color-content2: oklch(var(--content2));
   --color-content3: oklch(var(--content3));
@@ -119,6 +120,7 @@
   :root {
     --background: 0.968 0.004 286.33;
     --foreground: 0.2057 0.0132 233.66;
+    --foreground-muted: 0.52 0.015 285.9;
     --content1: 1 0 0;
     --content2: 0.9683 0.0014 286.37;
     --content3: 0.9197 0.0041 286.32;
@@ -233,6 +235,7 @@
   .kun-dark-mode {
     --background: 0.1448 0 0;
     --foreground: 0.946 0.0018 247.84;
+    --foreground-muted: 0.62 0.015 285.9;
     --content1: 0.2102 0.006 285.87;
     --content2: 0.2747 0.006 286;
     --content3: 0.3701 0.0113 285.84;

package/src/tokens.dtcg.json

@@ -1306,6 +1306,10 @@
       "border": {
         "$type": "color",
         "$value": "{color.light.default.100}"
+      },
+      "foreground-muted": {
+        "$type": "color",
+        "$value": "{color.light.default.600}"
       }
     },
     "dark": {
@@ -2587,6 +2591,10 @@
       "border": {
         "$type": "color",
         "$value": "{color.dark.default.100}"
+      },
+      "foreground-muted": {
+        "$type": "color",
+        "$value": "{color.dark.default.500}"
       }
     }
   },