@kungal/ui-tokens 2.54.0 → 2.56.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @kungal/ui-tokens
 
+## 2.56.0
+
+### Minor Changes
+
+- 570067b: Coloured text and placeholders now clear WCAG AA (4.5:1). A kungal Flutter app's contrast check measured KunUI's own coloured text and placeholders below it, and the web uses the same classes.
+
+  **New tokens:**
+
+  - `--color-{color}-text` (Tailwind `text-primary-text`, `text-danger-text`, …), one per semantic colour, `default` included.
+  - In Dart: `KunColorScale.text`.
+
+  **Why a new token.** A fill colour used as text measured 1.75–4.42:1 on the light page for every colour but `default`, and in dark mode primary and danger fell to 3.87:1 and 3.66:1 on cards. `{color}-text` is the ramp step closest to the fill that clears 4.5:1 on:
+
+  - the page background;
+  - cards (`content1`);
+  - the colour's own 20% tint over each, which is the hover and keyboard-focus fill of a light item and the fill of a flat chip.
+
+  The token generator measures all four in both modes and fails the build if one misses. The steps it picks:
+
+  | Mode  | Step 600                      | Step 700                                |
+  | ----- | ----------------------------- | --------------------------------------- |
+  | Light | secondary, warning            | primary, success, danger, info, default |
+  | Dark  | every colour except secondary | secondary                               |
+
+  **What moved to it:**
+
+  - The `light`, `bordered` and `flat` variants (buttons, chips, badges, menu items) and `kunTextClasses`, which covers KunLink, selected tabs, active steps and reactions.
+  - KunInfo's `bordered` text, and its dark `flat` danger and info.
+  - Every form error message and required asterisk.
+  - Chat sender names, reply and pinned titles, links, mentions, typing and status text.
+
+  **What you'll see.** Coloured text is one step darker in light mode and one step lighter in dark mode. Icons, SVG strokes, spinners and text on solid fills keep their colours.
+
+  **If your own markup uses `text-primary` for readable text**, switch it to `text-primary-text`. `text-primary` stays the fill colour, meant for fills, borders and icons.
+
+  **Placeholders** now use `foreground-muted`, the secondary-text colour: 5.52:1 light and 4.85:1 dark, where `default-400` measured 2.31–3.58:1. This covers the base-layer `::placeholder` rule (every native input), KunSelect's and KunDatePicker's empty trigger, KunChatComposer and KunCommandPalette. A placeholder is often the only label a field has, such as "全部平台" in a filter. Disabled text, outside-month days and icons keep their lighter steps: WCAG exempts disabled controls, and the others are not text.
+
+  Measured on the docs site in Chromium: 227 text elements in each mode across the button, chip, tab, link, select, input, info, dropdown, chat bubble, date picker and textarea pages all clear 4.5:1. The lowest are a warning chip (4.77:1 light, 4.87:1 dark) and the dark placeholder (4.85:1).
+
+## 2.55.0
+
 ## 2.54.0
 
 ## 2.53.0

package/package.json

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

package/src/base.css

@@ -81,11 +81,14 @@
     min-height: 100vh;
   }
 
-  /* Placeholder text — a muted neutral that flips with the theme (the browser
-   * default is a fixed grey that doesn't follow light/dark). `opacity: 1` since
-   * the colour already carries its own muting and UA sheets dim placeholders. */
+  /* Placeholder text — the secondary-text colour, which flips with the theme
+   * (the browser default is a fixed grey that doesn't follow light/dark).
+   * default-400 measured 2.31:1 on the light page and 3.21:1 on dark cards;
+   * foreground-muted is held at 4.5:1 by the token generator. A placeholder
+   * often carries the only label a field has ("全部平台"). `opacity: 1` since
+   * UA sheets dim placeholders. */
   ::placeholder {
-    color: oklch(var(--default-400));
+    color: oklch(var(--foreground-muted));
     opacity: 1;
   }
 }

package/src/palette.generated.css

@@ -19,6 +19,7 @@
 
   --color-primary: oklch(var(--primary-accent));
   --color-primary-foreground: oklch(var(--primary-on));
+  --color-primary-text: oklch(var(--primary-text));
   --color-primary-50: oklch(var(--primary-50));
   --color-primary-100: oklch(var(--primary-100));
   --color-primary-200: oklch(var(--primary-200));
@@ -33,6 +34,7 @@
 
   --color-secondary: oklch(var(--secondary-accent));
   --color-secondary-foreground: oklch(var(--secondary-on));
+  --color-secondary-text: oklch(var(--secondary-text));
   --color-secondary-50: oklch(var(--secondary-50));
   --color-secondary-100: oklch(var(--secondary-100));
   --color-secondary-200: oklch(var(--secondary-200));
@@ -47,6 +49,7 @@
 
   --color-success: oklch(var(--success-accent));
   --color-success-foreground: oklch(var(--success-on));
+  --color-success-text: oklch(var(--success-text));
   --color-success-50: oklch(var(--success-50));
   --color-success-100: oklch(var(--success-100));
   --color-success-200: oklch(var(--success-200));
@@ -61,6 +64,7 @@
 
   --color-warning: oklch(var(--warning-accent));
   --color-warning-foreground: oklch(var(--warning-on));
+  --color-warning-text: oklch(var(--warning-text));
   --color-warning-50: oklch(var(--warning-50));
   --color-warning-100: oklch(var(--warning-100));
   --color-warning-200: oklch(var(--warning-200));
@@ -75,6 +79,7 @@
 
   --color-danger: oklch(var(--danger-accent));
   --color-danger-foreground: oklch(var(--danger-on));
+  --color-danger-text: oklch(var(--danger-text));
   --color-danger-50: oklch(var(--danger-50));
   --color-danger-100: oklch(var(--danger-100));
   --color-danger-200: oklch(var(--danger-200));
@@ -89,6 +94,7 @@
 
   --color-info: oklch(var(--info-accent));
   --color-info-foreground: oklch(var(--info-on));
+  --color-info-text: oklch(var(--info-text));
   --color-info-50: oklch(var(--info-50));
   --color-info-100: oklch(var(--info-100));
   --color-info-200: oklch(var(--info-200));
@@ -103,6 +109,7 @@
 
   --color-default: oklch(var(--default-accent));
   --color-default-foreground: oklch(var(--default-on));
+  --color-default-text: oklch(var(--default-text));
   --color-default-50: oklch(var(--default-50));
   --color-default-100: oklch(var(--default-100) / var(--kun-global-opacity));
   --color-default-200: oklch(var(--default-200));
@@ -129,6 +136,7 @@
     /* Blue */
     --primary-accent: 0.57 0.2 257.9;
     --primary-on: 1 0 0;
+    --primary-text: 0.44 0.1622 257.9;
     --primary-50: 0.972 0.0133 257.9;
     --primary-100: 0.945 0.0264 257.9;
     --primary-200: 0.892 0.0528 257.9;
@@ -144,6 +152,7 @@
     /* Magenta */
     --secondary-accent: 0.8 0.1524 341.5;
     --secondary-on: 0.2 0.03 341.5;
+    --secondary-text: 0.52 0.2244 341.5;
     --secondary-50: 0.972 0.018 341.5;
     --secondary-100: 0.945 0.0362 341.5;
     --secondary-200: 0.892 0.0748 341.5;
@@ -159,6 +168,7 @@
     /* Green */
     --success-accent: 0.72 0.18 150.9;
     --success-on: 0.2 0.03 150.9;
+    --success-text: 0.44 0.1186 150.9;
     --success-50: 0.972 0.0446 150.9;
     --success-100: 0.945 0.0914 150.9;
     --success-200: 0.892 0.18 150.9;
@@ -174,6 +184,7 @@
     /* Amber */
     --warning-accent: 0.8 0.1686 72.2;
     --warning-on: 0.2 0.03 72.2;
+    --warning-text: 0.52 0.1112 72.2;
     --warning-50: 0.972 0.0211 72.2;
     --warning-100: 0.945 0.0421 72.2;
     --warning-200: 0.892 0.0855 72.2;
@@ -189,6 +200,7 @@
     /* Red */
     --danger-accent: 0.58 0.23 11.1;
     --danger-on: 1 0 0;
+    --danger-text: 0.44 0.1759 11.1;
     --danger-50: 0.972 0.0139 11.1;
     --danger-100: 0.945 0.028 11.1;
     --danger-200: 0.892 0.0577 11.1;
@@ -204,6 +216,7 @@
     /* Cyan */
     --info-accent: 0.7 0.1262 218.5;
     --info-on: 0.2 0.03 218.5;
+    --info-text: 0.44 0.0793 218.5;
     --info-50: 0.972 0.0201 218.5;
     --info-100: 0.945 0.0398 218.5;
     --info-200: 0.892 0.0796 218.5;
@@ -219,6 +232,7 @@
     /* Neutral */
     --default-accent: 0.55 0.015 285.9;
     --default-on: 1 0 0;
+    --default-text: 0.44 0.015 285.9;
     --default-50: 0.972 0.0137 285.9;
     --default-100: 0.945 0.015 285.9;
     --default-200: 0.892 0.015 285.9;
@@ -244,6 +258,7 @@
     /* Blue */
     --primary-accent: 0.57 0.2 257.9;
     --primary-on: 1 0 0;
+    --primary-text: 0.715 0.1495 257.9;
     --primary-50: 0.215 0.0792 257.9;
     --primary-100: 0.28 0.1032 257.9;
     --primary-200: 0.36 0.1327 257.9;
@@ -259,6 +274,7 @@
     /* Magenta */
     --secondary-accent: 0.8 0.1524 341.5;
     --secondary-on: 0.2 0.03 341.5;
+    --secondary-text: 0.82 0.1342 341.5;
     --secondary-50: 0.215 0.0928 341.5;
     --secondary-100: 0.28 0.1208 341.5;
     --secondary-200: 0.36 0.1554 341.5;
@@ -274,6 +290,7 @@
     /* Green */
     --success-accent: 0.72 0.18 150.9;
     --success-on: 0.2 0.03 150.9;
+    --success-text: 0.715 0.18 150.9;
     --success-50: 0.215 0.058 150.9;
     --success-100: 0.28 0.0755 150.9;
     --success-200: 0.36 0.0971 150.9;
@@ -289,6 +306,7 @@
     /* Amber */
     --warning-accent: 0.8 0.1686 72.2;
     --warning-on: 0.2 0.03 72.2;
+    --warning-text: 0.715 0.1529 72.2;
     --warning-50: 0.215 0.046 72.2;
     --warning-100: 0.28 0.0599 72.2;
     --warning-200: 0.36 0.077 72.2;
@@ -304,6 +322,7 @@
     /* Red */
     --danger-accent: 0.58 0.23 11.1;
     --danger-on: 1 0 0;
+    --danger-text: 0.715 0.1833 11.1;
     --danger-50: 0.215 0.0859 11.1;
     --danger-100: 0.28 0.1119 11.1;
     --danger-200: 0.36 0.1439 11.1;
@@ -319,6 +338,7 @@
     /* Cyan */
     --info-accent: 0.7 0.1262 218.5;
     --info-on: 0.2 0.03 218.5;
+    --info-text: 0.715 0.1289 218.5;
     --info-50: 0.215 0.0387 218.5;
     --info-100: 0.28 0.0505 218.5;
     --info-200: 0.36 0.0649 218.5;
@@ -334,6 +354,7 @@
     /* Neutral */
     --default-accent: 0.55 0.015 285.9;
     --default-on: 1 0 0;
+    --default-text: 0.715 0.015 285.9;
     --default-50: 0.215 0.015 285.9;
     --default-100: 0.28 0.015 285.9;
     --default-200: 0.36 0.015 285.9;

package/src/tokens.dtcg.json

@@ -197,6 +197,10 @@
             "alpha": 1,
             "hex": "#ffffff"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.light.primary.700}"
         }
       },
       "secondary": {
@@ -368,6 +372,10 @@
             "alpha": 1,
             "hex": "#1f101a"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.light.secondary.600}"
         }
       },
       "success": {
@@ -539,6 +547,10 @@
             "alpha": 1,
             "hex": "#0b1a0f"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.light.success.700}"
         }
       },
       "warning": {
@@ -710,6 +722,10 @@
             "alpha": 1,
             "hex": "#1e1406"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.light.warning.600}"
         }
       },
       "danger": {
@@ -881,6 +897,10 @@
             "alpha": 1,
             "hex": "#ffffff"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.light.danger.700}"
         }
       },
       "info": {
@@ -1052,6 +1072,10 @@
             "alpha": 1,
             "hex": "#04191f"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.light.info.700}"
         }
       },
       "default": {
@@ -1223,6 +1247,10 @@
             "alpha": 1,
             "hex": "#ffffff"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.light.default.700}"
         }
       },
       "background": {
@@ -1482,6 +1510,10 @@
             "alpha": 1,
             "hex": "#ffffff"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.dark.primary.600}"
         }
       },
       "secondary": {
@@ -1653,6 +1685,10 @@
             "alpha": 1,
             "hex": "#1f101a"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.dark.secondary.700}"
         }
       },
       "success": {
@@ -1824,6 +1860,10 @@
             "alpha": 1,
             "hex": "#0b1a0f"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.dark.success.600}"
         }
       },
       "warning": {
@@ -1995,6 +2035,10 @@
             "alpha": 1,
             "hex": "#1e1406"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.dark.warning.600}"
         }
       },
       "danger": {
@@ -2166,6 +2210,10 @@
             "alpha": 1,
             "hex": "#ffffff"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.dark.danger.600}"
         }
       },
       "info": {
@@ -2337,6 +2385,10 @@
             "alpha": 1,
             "hex": "#04191f"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.dark.info.600}"
         }
       },
       "default": {
@@ -2508,6 +2560,10 @@
             "alpha": 1,
             "hex": "#ffffff"
           }
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.dark.default.600}"
         }
       },
       "background": {