@kungal/ui-core 2.55.0 → 2.56.1

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @kungal/ui-core
 
+## 2.56.1
+
+## 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
 
 ### Minor Changes

package/dist/index.cjs

@@ -54,32 +54,35 @@ var TABLE = {
     danger: "border border-transparent bg-danger text-danger-foreground",
     info: "border border-transparent bg-info text-info-foreground"
   },
+  // `{c}-text`, not the fill: a fill used as text measured 1.75–4.42:1 on the
+  // light page. The generator holds `{c}-text` at 4.5:1 on the page, on cards
+  // and on the hue's 20% tint, so the hover fill and a flat chip stay readable.
   bordered: {
     default: "border border-default bg-transparent",
-    primary: "border border-primary bg-transparent text-primary",
-    secondary: "border border-secondary bg-transparent text-secondary",
-    success: "border border-success bg-transparent text-success",
-    warning: "border border-warning bg-transparent text-warning",
-    danger: "border border-danger bg-transparent text-danger",
-    info: "border border-info bg-transparent text-info"
+    primary: "border border-primary bg-transparent text-primary-text",
+    secondary: "border border-secondary bg-transparent text-secondary-text",
+    success: "border border-success bg-transparent text-success-text",
+    warning: "border border-warning bg-transparent text-warning-text",
+    danger: "border border-danger bg-transparent text-danger-text",
+    info: "border border-info bg-transparent text-info-text"
   },
   light: {
     default: "border border-transparent bg-transparent hover:bg-default/20",
-    primary: "border border-transparent bg-transparent text-primary hover:bg-primary/20",
-    secondary: "border border-transparent bg-transparent text-secondary hover:bg-secondary/20",
-    success: "border border-transparent bg-transparent text-success hover:bg-success/20",
-    warning: "border border-transparent bg-transparent text-warning hover:bg-warning/20",
-    danger: "border border-transparent bg-transparent text-danger hover:bg-danger/20",
-    info: "border border-transparent bg-transparent text-info hover:bg-info/20"
+    primary: "border border-transparent bg-transparent text-primary-text hover:bg-primary/20",
+    secondary: "border border-transparent bg-transparent text-secondary-text hover:bg-secondary/20",
+    success: "border border-transparent bg-transparent text-success-text hover:bg-success/20",
+    warning: "border border-transparent bg-transparent text-warning-text hover:bg-warning/20",
+    danger: "border border-transparent bg-transparent text-danger-text hover:bg-danger/20",
+    info: "border border-transparent bg-transparent text-info-text hover:bg-info/20"
   },
   flat: {
-    default: "border border-transparent bg-default/20 text-default-700",
-    primary: "border border-transparent bg-primary/20 text-primary-600",
-    secondary: "border border-transparent bg-secondary/20 text-secondary-600",
-    success: "border border-transparent bg-success/20 text-success-700 dark:text-success",
-    warning: "border border-transparent bg-warning/20 text-warning-700 dark:text-warning",
-    danger: "border border-transparent bg-danger/20 text-danger-600 dark:text-danger-500",
-    info: "border border-transparent bg-info/20 text-info-700 dark:text-info-500"
+    default: "border border-transparent bg-default/20 text-default-text",
+    primary: "border border-transparent bg-primary/20 text-primary-text",
+    secondary: "border border-transparent bg-secondary/20 text-secondary-text",
+    success: "border border-transparent bg-success/20 text-success-text",
+    warning: "border border-transparent bg-warning/20 text-warning-text",
+    danger: "border border-transparent bg-danger/20 text-danger-text",
+    info: "border border-transparent bg-info/20 text-info-text"
   },
   // Same fill logic as `solid` (see note above) plus a COLORED glow. The glow
   // needs both a size (`shadow-lg` — the geometry) AND a tint (`shadow-{color}/40`
@@ -135,12 +138,12 @@ var kunSolidClasses = {
 };
 var kunTextClasses = {
   default: "text-foreground",
-  primary: "text-primary",
-  secondary: "text-secondary",
-  success: "text-success",
-  warning: "text-warning",
-  danger: "text-danger",
-  info: "text-info"
+  primary: "text-primary-text",
+  secondary: "text-secondary-text",
+  success: "text-success-text",
+  warning: "text-warning-text",
+  danger: "text-danger-text",
+  info: "text-info-text"
 };
 var kunBorderClasses = {
   default: "border-default",