@adia-ai/web-components 0.7.4 → 0.7.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.5] — 2026-06-02
+
+### Fixed
+
+- **`<button-ui>` colored buttons — unreadable solid text + outline rendering as a solid pill.** Two bugs in the `[color]` × `variant` matrix, both verified on the live render (`scripts/qa/button-color-probe.mjs`: WCAG contrast + fill-transparency probe). (1) **Solid** `color="danger|info|success"` set `--button-fg: var(--a-X-fg)`, which resolves to `--a-X-text-strong` — *family-colored* text, ~1:1 contrast on the same-hue fill (near-invisible). Now `--a-chrome-light` (white) like `variant="primary"` → danger 4.75:1, info 4.27:1, success 4.02:1. `warning` keeps dark `--a-warning-fg` (its `--a-warning-bg` fill is light amber). Documented anti-pattern `feedback_text_on_accent_disc` (light text on filled accent surfaces). (2) **Outline/ghost + color** rendered as a solid pill — the `[color]` rule's solid `--button-bg` won source-order over `[variant="outline"]` (the demo's `variant="outline" color="success"` "Approve" button, `button.examples.html:50`). Added combined `[variant][color]` selectors (specificity 0,3,0 > the 0,2,0 `[color]` rule) restoring a transparent fill + colored text (`--a-X-text`) + colored border (`--a-X-border` for outline). **(3) The actual override mechanism.** Fixes (1)+(2) set `--button-fg` correctly, yet the rendered text stayed the fill hue: the global `[color]` presentational utility (`api/text.css`, `utilities` layer) sets `color: var(--a-fg)` and wins over the button's `components`-layer `color: var(--button-fg)` by **layer order** (utilities > components), regardless of specificity. `button-ui` re-purposes `color=` as a semantic *fill* (the `variant="danger"`→`color="danger"` migration, button.css:180) and is the only filled control that does, and is not among the color honorings (`cascade-component-attr-sweep.mjs`) — so it is now excluded from the text-color utility: `[color]:not(:where(button-ui))` (specificity-neutral via `:where()`; a plain `[color="info"]` element still resolves to info text). Verified on a *fresh* serve against the real demo buttons — the persistent dev server caches the `host.css` `@import` chain and masked the fix on edit. Files: `components/button/button.css`, `styles/api/text.css`.
+
+### Changed
+- **CDN bundles rebuilt** — `dist/host.min.css` + `dist/web-components.min.css` regenerated so the button-color fix above reaches `@adia-ai/web-components@0.7` CDN consumers (the bundles were stale since the fix landed on `main` pre-cut, ahead of the cut's `build:bundles`).
+
 ## [0.7.4] — 2026-06-02
 
 ### Added

package/components/button/button.css

@@ -56,7 +56,7 @@ button-ui[color="danger"]:not([disabled]):hover {
     --button-border-ghost:     transparent;
     --button-border-ghost-hover: transparent;
     --button-bg-danger:        var(--a-danger);
-    --button-fg-danger:        var(--a-danger-fg);
+    --button-fg-danger:        var(--a-chrome-light);  /* white on the saturated fill — see color rules */
     --button-bg-hover-danger:  var(--a-danger);
     --button-bg-disabled:      var(--a-ui-bg-disabled);
     --button-fg-disabled:      var(--a-ui-text-disabled);
@@ -186,13 +186,17 @@ button-ui[color="danger"]:not([disabled]):hover {
     /* Consume the L3 `-bg` alias, not the L2 `-strong` step. Currently
        resolves identically (both = `-50`), but consuming `-bg` future-
        proofs if the surface-step ever redirects (as -warning-bg did
-       in v0.6.36 to fix muddy contrast). */
+       in v0.6.36 to fix muddy contrast).
+       Text is --a-chrome-light (white) on the saturated fill, like primary
+       (--button-fg-primary). --a-success-fg is success-COLORED text — near
+       invisible on the fill (feedback_text_on_accent_disc). Warning is the
+       exception: its --a-warning-bg fill is light, so it keeps dark -fg. */
     --button-bg: var(--a-success-bg);
-    --button-fg: var(--a-success-fg);
+    --button-fg: var(--a-chrome-light);
   }
   :scope[color="info"] {
     --button-bg: var(--a-info-bg);
-    --button-fg: var(--a-info-fg);
+    --button-fg: var(--a-chrome-light);
   }
   :scope[color="warning"] {
     /* `--a-warning-bg` (bright amber, scheme-independent) not
@@ -203,6 +207,25 @@ button-ui[color="danger"]:not([disabled]):hover {
     --button-fg: var(--a-warning-fg);
   }
 
+  /* ── Color × non-solid variants ──
+     The [color] rules above set a SOLID fill — that's the default rendering
+     (bare `color="danger"`). But with variant="outline"/"ghost" the button
+     must COMPOSE, not fill. These combined selectors (specificity 0,3,0) beat
+     the 0,2,0 [color] rules regardless of source order, restoring a transparent
+     fill + colored text (+ colored border for outline). Without them,
+     `variant="outline" color="success"` renders as a solid green pill — the
+     demo's "Approve" button (button.examples.html:50). --a-X-text is the
+     family-colored text designed to read on a neutral page surface; -border is
+     the L3 colored border alias. */
+  :scope[variant="outline"][color="danger"]  { --button-bg: transparent; --button-fg: var(--a-danger-text);  --button-border: var(--a-danger-border); }
+  :scope[variant="outline"][color="info"]     { --button-bg: transparent; --button-fg: var(--a-info-text);     --button-border: var(--a-info-border); }
+  :scope[variant="outline"][color="success"]  { --button-bg: transparent; --button-fg: var(--a-success-text);  --button-border: var(--a-success-border); }
+  :scope[variant="outline"][color="warning"]  { --button-bg: transparent; --button-fg: var(--a-warning-text);  --button-border: var(--a-warning-border); }
+  :scope[variant="ghost"][color="danger"]   { --button-bg: transparent; --button-fg: var(--a-danger-text); }
+  :scope[variant="ghost"][color="info"]      { --button-bg: transparent; --button-fg: var(--a-info-text); }
+  :scope[variant="ghost"][color="success"]   { --button-bg: transparent; --button-fg: var(--a-success-text); }
+  :scope[variant="ghost"][color="warning"]   { --button-bg: transparent; --button-fg: var(--a-warning-text); }
+
   /* Hover rules moved outside @scope — see Safari 17.x bug note at
      top of file. */