@thewhatmatters/wmds 0.4.35 → 0.4.36

package/CHANGELOG.md

@@ -7,6 +7,23 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.36
+
+**Colour fixes from building every component in light and dark: fills that vanished, the navy on the dark body, invalid hovers, and a primary Button on a band.**
+
+- **`--color-accent-muted`** (and `--color-secondary`, which reads it): `#ebebeb` light (was the body's `#f8f8f8`), `#363636` dark (was the surface's `#262626`). The selected NavList pill, empty StepProgress segments, secondary Badges and Buttons, the AppShell avatar, Chips, and the Dropdown and Select item hover now show on the body and the surface.
+- **`--color-brand` in dark** is `#5566e0`, the navy's hue lifted (was `#011272`, 1.09:1 on the dark body): 3.58:1 on the body, 3.14:1 on the surface, white on it 4.81:1. The PromptBar send button, the selected SelectableCard border, the filled StepProgress segment, FooterReveal, TextSequence and TextSequenceShape marks now read in dark. **`--color-brand-surface` defaults to `#011272` itself** (it was `var(--color-brand)`), so `tone="inverse"` bands keep the deep navy in dark, and a client's own brand surface still wins.
+- **Dark status hovers:** `--color-{error,success,warning,info}-hover` mixed `108%` with white, which is invalid, so the browser dropped them. They're `88%` with white now, the same lift as the primary.
+- **Primary on a field band:** inside `tone="field"`, `--color-primary` inverts to the field's ink with the field colour as its label (Randy, 2026-10-29). A primary Button on a field band was the band's own colour, since the field defaults to the primary. Inverse bands are unchanged (they take the dark, or the client's dark, primary).
+- **Type scale metadata:** `astryxTypeScale` lists display line heights 1.05 / 1.1 / 1.15, matching typography.css (it said 1.15 / 1.2 / 1.24).
+- **FooterReveal.Ruled** in dark keeps the deep navy ink on its white field.
+- Tests: no `color-mix` above 100%; the secondary fill separates from body and surface in both themes; the dark brand's contrast; the field primary inversion; the type metadata matches the CSS.
+
+### Consumer actions
+
+- None required. Look at dark mode where you use `bg-brand` / `text-brand` as a large field: it's the lighter `#5566e0` now. Use `--color-brand-surface` (or a `tone="inverse"` Band) for a deep navy section in dark.
+- If your brand stylesheet sets `--color-brand` for dark, keep it at 3:1 or more on `--color-background-body` and white at 4.5:1 or more on it.
+
 ## 0.4.35
 
 **Contact and booking forms: two steps, booking after the request, a way out above the calendar, and nothing lost on close.**

package/dist/colors.css

@@ -28,7 +28,12 @@
 
   /* Accent (neutral UI chrome — not brand) */
   --color-accent: #262626;
-  --color-accent-muted: #f8f8f8;
+  /*
+   * `--color-secondary` (selected pills, empty progress segments, secondary badges, item hover).
+   * It must differ from both the body (#f8f8f8) and the surface (#fff), or those fills vanish:
+   * #ebebeb is 1.12:1 on the body and 1.19:1 on the surface.
+   */
+  --color-accent-muted: #ebebeb;
   --color-on-accent: #ffffff;
 
   /* Overlays & neutral fills */
@@ -114,7 +119,8 @@
    * - field: a saturated section colour (`tone="field"`). Default: the primary.
    * `*-muted` is the secondary text step on that colour; it must clear 4.5:1 too.
    */
-  --color-brand-surface: var(--color-brand);
+  /* The navy itself, not var(--color-brand): the dark brand is lifted for dark grounds, and a dark section stays deep. */
+  --color-brand-surface: #011272;
   --color-on-brand-surface: var(--color-on-brand);
   --color-field: var(--color-primary);
   --color-on-field: var(--color-on-primary);
@@ -189,7 +195,8 @@
   --color-text-accent: #ebebeb;
 
   --color-accent: #ebebeb;
-  --color-accent-muted: #262626;
+  /* Off the body (#1b1b1b, 1.43:1) and the surface (#262626, 1.26:1), so fills and item hover show on both. */
+  --color-accent-muted: #363636;
   --color-on-accent: #171717;
 
   --color-neutral: #ffffff1a;
@@ -226,11 +233,11 @@
   --color-on-primary: #fafaf8;
 
   /*
-   * The field stays #011272. That navy on #1b1b1b is 1.09:1 and on #262626 is 1.04:1,
-   * so it cannot be the hand outline. `--color-brand-outline` is 45% navy / 55% white
-   * (about #8d94c0): 5.1:1 on #262626 and 5.8:1 on #1b1b1b.
+   * #011272 on #1b1b1b is 1.09:1, so the dark brand is the same navy hue lifted to #5566e0:
+   * 3.58:1 on the body and 3.14:1 on the surface (marks, borders, fills), and white on it is 4.81:1
+   * (send button, selected pill). Inverse bands keep the deep navy (`--color-brand-surface` is #011272 on :root).
    */
-  --color-brand: #011272;
+  --color-brand: #5566e0;
   --color-on-brand: #ffffff;
   --color-brand-outline: color-mix(in srgb, var(--color-brand) 45%, white);
   --color-brand-soft: color-mix(in srgb, var(--color-on-brand) 40%, var(--color-brand));
@@ -338,7 +345,15 @@
   /* Default: the ink itself, since a lighter step on a mid-tone field would fall under 4.5:1. */
   --tone-muted: var(--color-on-field-muted, var(--color-on-field));
   /* A tinted card would pull a mid-tone field under 4.5:1, so cards sit flat on the field. */
-  --tone-raised: var(--tone-bg);
+  --tone-raised: var(--tone-bg);  /*
+   * The field defaults to the primary, so a primary Button would vanish into it. On a field the primary
+   * inverts: the field's ink as the fill, the field colour as the label (Randy, 2026-10-29).
+   * Inverse bands keep the primary: they carry data-theme="dark", so it takes the dark (or client's dark) value.
+   */
+  --color-primary: var(--tone-fg);
+  --color-on-primary: var(--tone-bg);
+  --color-primary-hover: color-mix(in srgb, var(--tone-fg) 88%, var(--tone-bg));
+  --color-primary-active: color-mix(in srgb, var(--tone-fg) 80%, var(--tone-bg));
 }
 
 [data-tone="inverse"],

package/dist/components/organisms/IntakeConfirmation/intakeConfirmationStyles.d.ts

@@ -1,5 +1,5 @@
 /**
- * Brand colors for the intake burst. `--color-brand` is #011272 in both themes.
+ * Brand colors for the intake burst. `--color-brand` is #011272 (light) and #5566e0 (dark).
  * Passed to the existing Confetti `colors` option — not a second palette token.
  */
 export declare const intakeConfettiColors: readonly ["var(--color-brand)", "var(--color-brand-soft)", "var(--color-primary)", "var(--color-info-muted)", "var(--color-accent)", "var(--color-chart-categorical-1)", "var(--color-chart-categorical-4)"];

package/dist/stateColors.css

@@ -44,7 +44,7 @@
 [data-theme="dark"] {
   --color-ghost-foreground: var(--color-text-primary);
 
-  /* Dark lifts toward white on hover (12%) — percentages above 100% are invalid color-mix */
+  /* Dark lifts toward white on hover (12%). color-mix percentages must stay within 0–100%. */
   --color-primary-hover: color-mix(in oklch, var(--color-primary) 88%, white);
   --color-primary-active: color-mix(in oklch, var(--color-primary) 92%, black);
 
@@ -54,16 +54,16 @@
   --color-ghost-hover: var(--color-overlay-hover);
   --color-ghost-active: var(--color-overlay-pressed);
 
-  --color-error-hover: color-mix(in oklch, var(--color-error) 108%, white);
+  --color-error-hover: color-mix(in oklch, var(--color-error) 88%, white);
   --color-error-active: color-mix(in oklch, var(--color-error) 88%, black);
 
-  --color-success-hover: color-mix(in oklch, var(--color-success) 108%, white);
+  --color-success-hover: color-mix(in oklch, var(--color-success) 88%, white);
   --color-success-active: color-mix(in oklch, var(--color-success) 88%, black);
 
-  --color-warning-hover: color-mix(in oklch, var(--color-warning) 108%, white);
+  --color-warning-hover: color-mix(in oklch, var(--color-warning) 88%, white);
   --color-warning-active: color-mix(in oklch, var(--color-warning) 88%, black);
 
-  --color-info-hover: color-mix(in oklch, var(--color-info) 108%, white);
+  --color-info-hover: color-mix(in oklch, var(--color-info) 88%, white);
   --color-info-active: color-mix(in oklch, var(--color-info) 88%, black);
 
   --color-on-brand-hover: color-mix(in srgb, var(--color-on-brand) 88%, var(--color-brand));