refactor(palette): render the brand through Glaze's from

Replaces the derive-then-re-seed workaround with the primitive built for it.
`accentColor` is handed to Glaze as a literal, which supplies the hue, the tone
and an absolute saturation that does not answer to the theme seed.

Three things fall out of that.

The palette-level `saturation` is no longer raised to reach a saturated brand,
because the accent family carries its own chroma. That was the source of the
worst side effect in the previous approach: honoring one brand color
re-chromatized the neutral chrome and all four status themes. `#danger-accent-
surface` is now identical whatever the brand is, and the test asserts it against
the untouched baseline rather than against a saturation-matched reference.

The brand text and icon are now exact too, not just the fill. `from` bypasses
the light tone window per color, so `#2F5BFF` renders `#2f5bff` as the link and
the icon where it used to land on `#3764ff`.

`mode: 'static'` is gone. Exactness is scoped to the light, normal-contrast
variant — which is what `from` guarantees — so the chain goes back to
`mode: 'fixed'` and dark maps through its window like any other fixed color.
Dark and high contrast are where readability outranks fidelity.

Status themes still restore the white-anchored chain, and now must: `extend()`
copies defs, so an inherited `from` would make a danger button the brand color
outright rather than merely a washed-out version of itself.

Pins @tenphi/glaze to the PR snapshot (tenphi/glaze#89) — to be swapped for a
released version before merge.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: tenphi

.changeset/palette-color-seeds.md

@@ -10,7 +10,9 @@ setPaletteConfig({ accentColor: '#2F5BFF', baseColor: '#7A7269' });
 
 The two are deliberately asymmetric. `accentColor` contributes hue, saturation and **tone**, and the tone is the point: the brand fill was previously authored as a fixed tone step off white, so every accent hue landed at roughly the same lightness and a yellow brand came out olive. `baseColor` contributes **hue only** — its tone and saturation are discarded, because the chrome's lightness ladder and its 0.10–0.20 saturation factors are the design.
 
-The requested color is rendered exactly wherever a 3:1 floor against the page allows, and moved only as far as that floor requires. The floor is solved per scheme, so a light brand renders byte-exact on a dark page and darkens on a light one. High contrast keeps its AAA floor regardless — that tier is selected by `prefers-contrast: more` or `data-contrast="high"`, so anyone reading it has asked for separation over brand. Status themes deliberately do **not** inherit the tone: a light brand would otherwise turn `#danger-accent-surface` into a pale pink. `special` does follow it, since it is the brand-on-dark CTA.
+The color is handed to Glaze's `from`, so the **light, normal-contrast** variant reproduces it exactly — the fill, the link and the icon all render the value you passed. Dark and high contrast adapt as every other color does. A 3:1 floor against the page applies everywhere and is a floor rather than a target: `#7A4DBF` measures 5.8:1 and is emitted untouched, while `#FFD400` cannot clear 3:1 on white and darkens to `#b09200` and no further. High contrast tightens back to AAA regardless, since that tier is selected by `prefers-contrast: more` or `data-contrast="high"` and anyone reading it has asked for separation over brand.
+
+Because the accent family now carries its own chroma, a brand color no longer raises the palette-level `saturation` to reach it — so it cannot leak into the neutral chrome or the status themes. `#danger-accent-surface` is now identical whatever the brand is. Status themes also do not inherit the literal itself (`extend()` copies defs, so an inherited `from` would make a danger button the brand color outright); `special` does follow it, being the brand-on-dark CTA.
 
 `ResolvedPaletteConfig` gains `accentTone`, and `colorSeed()` is exported for reading hue / saturation / tone off a color directly. The shipped palette is unchanged — a config with no color seed resolves bit for bit as before.
 

package.json

@@ -90,7 +90,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/glaze": "1.3.0",
+    "@tenphi/glaze": "0.0.0-snapshot.84edd5e",
     "@tenphi/tasty": "^3.0.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",

pnpm-lock.yaml

@@ -126,16 +126,20 @@ setPaletteConfig({ accentColor: '#2F5BFF', hue: 300 }); // hue 300, tone still #
 The palette renders the color you asked for, and moves it only as far as it has to. Two
 things can make it move.
 
+First, **exactness is scoped to the light, normal-contrast variant.** That is the one
+that reproduces your color. Dark and high contrast adapt, as every other color in the
+palette does — they are different pages, and a brand pinned across all four would be
+less faithful, not more. What holds everywhere is the floor below.
+
 **The fill has a 3:1 floor against the page.** That is WCAG's non-text floor: enough
 that a button reads as a shape on the surface. It is a floor and not a target — a brand
-already at 5:1, or 17:1, is emitted exactly as given. It is also solved **per scheme**,
-so which scheme is exact depends on the color: `#FFD400` cannot clear 3:1 against a
-white page and darkens in light, while on a dark page it clears it easily and renders
-byte-exact. A near-black brand is the mirror image.
-
-High contrast is the exception, deliberately. There the floor goes back to AAA whatever
-you passed, because that tier is selected by `prefers-contrast: more` or an explicit
-`data-contrast="high"` — anyone reading it has asked for separation over brand.
+already at 5:1, or 17:1, is emitted exactly as given, and one that misses moves only as
+far as the floor. `#FFD400` cannot clear 3:1 on a white page, so it darkens to
+`#b09200`; `#7A4DBF` measures 5.8:1 and is left alone.
+
+High contrast tightens it further, deliberately: there the floor goes back to AAA
+whatever you passed, because that tier is selected by `prefers-contrast: more` or an
+explicit `data-contrast="high"` — anyone reading it has asked for separation over brand.
 
 **`pastel` caps chroma.** The flat, hue-independent ceiling is what makes pastel even
 across hues, and it sits below where a saturated color would land, so under it a color

src/stories/Theming.docs.mdx

@@ -479,13 +479,6 @@ function BaseSourceControls() {
 
 function SaturationControls() {
   const [palette, setPalette] = usePaletteConfig();
-  const input = getPaletteConfigInput();
-  const mode = useAccentMode();
-
-  // With a color seed and pastel off, the color's own chroma IS the saturation, so the
-  // slider is reporting a derived value rather than one it owns.
-  const fromColor =
-    mode === 'color' && !palette.pastel && input.saturation === undefined;
 
   return (
     <Section>
@@ -497,19 +490,13 @@ function SaturationControls() {
         Pastel
       </Switch>
       <Slider
-        // Rounded like the hue labels, and for a new reason as well: a saturation read
-        // off a color is a float, so the raw value would print as 99.9998610927005.
-        label={`Saturation — ${Math.round(palette.saturation)}${
-          palette.pastel
-            ? ' (pinned by pastel)'
-            : fromColor
-              ? ' (from the color)'
-              : ''
+        label={`Saturation — ${palette.saturation}${
+          palette.pastel ? ' (pinned by pastel)' : ''
         }`}
         minValue={0}
         maxValue={100}
-        isDisabled={palette.pastel || fromColor}
-        value={Math.round(palette.saturation)}
+        isDisabled={palette.pastel}
+        value={palette.saturation}
         onChange={(saturation) =>
           setPalette((config) => ({ ...config, saturation }))
         }
@@ -520,7 +507,13 @@ function SaturationControls() {
           ceiling is what makes it even across hues, and a second scale on top
           of it would only undo that. Turn pastel off for a free 0–100 scale.
         </Note>
-      ) : null}
+      ) : (
+        <Note>
+          Independent of the accent color: the brand family carries its own
+          chroma, so a color seed no longer moves this — and cannot wash the
+          neutral chrome or the status themes along with it.
+        </Note>
+      )}
     </Section>
   );
 }
@@ -570,12 +563,10 @@ function StatusControls() {
               onChange={(hue) => setPalette(statusSeed(name, { hue }))}
             />
             <Slider
-              // Rounded because this inherits the palette seed until it is pinned, and
-              // a palette seed read off an accent color is a float.
-              label={`${name} saturation — ${Math.round(seed.saturation)}`}
+              label={`${name} saturation — ${seed.saturation}`}
               minValue={0}
               maxValue={100}
-              value={Math.round(seed.saturation)}
+              value={seed.saturation}
               onChange={(saturation) =>
                 setPalette(statusSeed(name, { saturation }))
               }

src/stories/Theming.stories.tsx

@@ -95,10 +95,11 @@ export interface PaletteConfig {
    * is authored as a fixed tone step off white, so every accent hue lands at roughly
    * the same lightness and the color you asked for never actually appears.
    *
-   * The color is rendered exactly wherever a 3:1 floor against `surface` allows, and
-   * moved only as far as that floor requires. Two things cost exactness:
-   * {@link PaletteConfig.pastel} caps chroma (so `#FFD400` softens to `#e4d8ad`),
-   * and a light color on a light page has to darken to stay distinguishable.
+   * The **light, normal-contrast** variant reproduces the color; dark and high
+   * contrast adapt, as every other color in the palette does. Two things cost
+   * exactness even there: {@link PaletteConfig.pastel} caps chroma (so `#FFD400`
+   * softens), and a color that misses the 3:1 floor against `surface` darkens until
+   * it clears it — and no further.
    *
    * {@link PaletteConfig.hue} and {@link PaletteConfig.saturation} still win when
    * set — the number is the more specific instruction — and the tone keeps coming
@@ -208,13 +209,21 @@ export interface ResolvedPaletteConfig {
   baseHue: number;
   saturation: number;
   /**
-   * Tone (0–100, OKHST) the brand fill is pinned to, read off
-   * {@link PaletteConfig.accentColor}.
+   * The accent color as given, handed to Glaze's `from` so the brand family renders
+   * as that literal value rather than as a shade re-derived from the seed.
    *
-   * `null` — the common case — means no accent color was given and the fill keeps its
-   * white-anchored derivation, which is the only arrangement that reproduces the
+   * `null` — the common case — means no accent color was supplied and the family keeps
+   * its white-anchored derivation, which is the only arrangement that reproduces the
    * shipped palette bit for bit.
    */
+  accentColor: string | null;
+  /**
+   * The tone of {@link ResolvedPaletteConfig.accentColor}, or `null` alongside it.
+   *
+   * `from` carries the tone itself, so this exists for the one thing that needs the
+   * *number*: the hover brand text sits a fixed tone step past the rest one, and a
+   * step has to be computed.
+   */
   accentTone: number | null;
   pastel: boolean;
   contrastLevel: number | 'auto';
@@ -290,14 +299,19 @@ function resolveConfig(input: PaletteConfig): ResolvedPaletteConfig {
     );
   }
 
+  // Deliberately NOT `?? accent?.saturation`: the accent family carries the color's
+  // own chroma through Glaze's `from`, so the palette-level seed no longer has to be
+  // raised to reach it. Leaving it alone is what keeps a saturated brand from
+  // re-chromatizing the neutral chrome and every status theme as a side effect.
   const saturation = pastel
     ? DEFAULT_SATURATION
-    : input.saturation ?? accent?.saturation ?? DEFAULT_SATURATION;
+    : input.saturation ?? DEFAULT_SATURATION;
 
   return {
     hue,
     baseHue,
     saturation,
+    accentColor: accent ? input.accentColor! : null,
     accentTone: accent?.tone ?? null,
     pastel,
     contrastLevel: input.contrastLevel ?? 'auto',
@@ -387,10 +401,10 @@ function isSameConfig(a: ResolvedPaletteConfig, b: ResolvedPaletteConfig) {
     a.hue === b.hue &&
     a.baseHue === b.baseHue &&
     a.saturation === b.saturation &&
-    // `hue` and `saturation` already carry whatever an accent color derived, so tone
-    // is the one reading they cannot discriminate: two colors can agree on both and
-    // still be a different lightness of the brand.
-    a.accentTone === b.accentTone &&
+    // The color itself, not just what it derived: `hue` no longer carries its chroma
+    // (the accent family gets that through Glaze's `from`), so two different brands
+    // can agree on every numeric seed and still render differently.
+    a.accentColor === b.accentColor &&
     a.pastel === b.pastel &&
     a.contrastLevel === b.contrastLevel &&
     a.themes.code.saturation === b.themes.code.saturation &&

src/tokens/palette-config.ts

@@ -132,6 +132,11 @@ function toneOf(value: string): number {
   );
 }
 
+/** Hue of an emitted `oklch(L C H)` token value. */
+function hueOf(value: string): number {
+  return Number(value.trim().split(/\s+/)[2].replace(')', ''));
+}
+
 /** WCAG contrast ratio between two emitted token values. */
 function contrastOf(a: string, b: string): number {
   const luminance = (value: string) => {
@@ -1045,55 +1050,57 @@ describe('accent color seeds', () => {
    */
   it('renders the requested color exactly wherever the floor allows', () => {
     for (const accentColor of BRANDS) {
-      for (const scheme of ['light', 'dark'] as const) {
-        const tokens = renderPaletteTokens({ ...EXACT, accentColor, scheme });
-        const fill = String(tokens['#accent-surface']);
-        const surface = String(tokens['#surface']);
-        const label = `${accentColor} ${scheme}`;
-
-        const wanted = contrastOf(accentColor, surface);
-        const got = contrastOf(fill, surface);
-
-        if (wanted >= 3) {
-          // Nothing to solve, so nothing may move.
-          expectSameColor(hexOf(fill), accentColor.toLowerCase(), label);
-          expect(got, label).toBeCloseTo(wanted, 2);
-        } else {
-          // Solved to the floor and stopped there — not to AA, not to the far side.
-          expect(got, label).toBeGreaterThanOrEqual(3);
-          expect(got, label).toBeLessThan(3.2);
-        }
+      const tokens = renderPaletteTokens({
+        ...EXACT,
+        accentColor,
+        scheme: 'light',
+      });
+      const fill = String(tokens['#accent-surface']);
+      const surface = String(tokens['#surface']);
+
+      const wanted = contrastOf(accentColor, surface);
+      const got = contrastOf(fill, surface);
+
+      if (wanted >= 3) {
+        // Nothing to solve, so nothing may move.
+        expectSameColor(hexOf(fill), accentColor.toLowerCase(), accentColor);
+        expect(got, accentColor).toBeCloseTo(wanted, 2);
+      } else {
+        // Solved to the floor and stopped there — not to AA, not to the far side.
+        expect(got, accentColor).toBeGreaterThanOrEqual(3);
+        expect(got, accentColor).toBeLessThan(3.2);
       }
     }
   });
 
-  it('flips which scheme is exact according to the brand’s own lightness', () => {
-    // The concrete shape of the invariant above, and the evidence that the floor is
-    // solved per scheme rather than once: a light brand cannot clear 3:1 on a white
-    // page but clears it easily on a dark one, so `#FFD400` is exact in dark and
-    // floored in light. A dark brand is the mirror image.
-    const light = (c: string) =>
-      hexOf(
-        String(
-          renderPaletteTokens({ ...EXACT, accentColor: c, scheme: 'light' })[
-            '#accent-surface'
-          ],
-        ),
-      );
-    const dark = (c: string) =>
-      hexOf(
-        String(
-          renderPaletteTokens({ ...EXACT, accentColor: c, scheme: 'dark' })[
-            '#accent-surface'
-          ],
-        ),
-      );
+  it('lets dark adapt rather than pinning the color across schemes', () => {
+    // Exactness is scoped to light / normal contrast on purpose. Dark is a
+    // different page, and a fill pinned to one lightness across both would be a
+    // worse `mode: 'fixed'` rather than a faithful brand — so the dark variant
+    // maps through the dark tone window like any other fixed-mode color.
+    //
+    // What must hold in dark is the floor, not the value.
+    for (const accentColor of BRANDS) {
+      const tokens = renderPaletteTokens({
+        ...EXACT,
+        accentColor,
+        scheme: 'dark',
+      });
+      const fill = String(tokens['#accent-surface']);
 
-    expectSameColor(dark('#FFD400'), '#ffd400', '#FFD400 dark');
-    expect(light('#FFD400')).not.toBe('#ffd400');
+      expect(
+        contrastOf(fill, String(tokens['#surface'])),
+        accentColor,
+      ).toBeGreaterThanOrEqual(3);
+    }
 
-    expectSameColor(light('#111827'), '#111827', '#111827 light');
-    expect(dark('#111827')).not.toBe('#111827');
+    // …and it really is a different value, for a color the window has to move.
+    const dark = renderPaletteTokens({
+      ...EXACT,
+      accentColor: '#FFD400',
+      scheme: 'dark',
+    });
+    expect(hexOf(String(dark['#accent-surface']))).not.toBe('#ffd400');
   });
 
   it('keeps the fill ramp separated in high contrast', () => {
@@ -1245,32 +1252,39 @@ describe('accent color seeds', () => {
 
   it('leaves the status themes on their own fill derivation', () => {
     // A status hue signals a meaning, so it keeps the white-anchored derivation that
-    // lands every hue at a comparable weight. Inherited, a light brand would put
-    // `#danger-accent-surface` at tone 88 in a red hue — a pale pink danger button.
+    // lands every hue at a comparable weight. The stakes are higher now that the
+    // brand is a literal: `extend()` copies defs, so an inherited `from` would make
+    // `#danger-accent-surface` the brand color outright — a yellow danger button, not
+    // merely a washed-out one.
     //
-    // Compared at a matched saturation rather than against the shipped default,
-    // because `saturation` is one palette-wide scale and a color seed legitimately
-    // moves it for every theme. The tone is the part that must not travel.
-    const seed = colorSeed('#FFD400')!;
+    // Compared against the untouched baseline, which is the strong form of the claim.
+    // It holds because the accent family carries its own chroma through `from` and no
+    // longer raises the palette-level `saturation` to reach it — so a brand color has
+    // nothing left to leak into a status theme.
     const seeded = renderPaletteTokens({
       ...EXACT,
       accentColor: '#FFD400',
       scheme: 'light',
     });
-    const reference = renderPaletteTokens({
-      ...EXACT,
-      saturation: seed.saturation,
-      scheme: 'light',
-    });
+    const baseline = renderPaletteTokens({ ...EXACT, scheme: 'light' });
 
     for (const name of [
       '#danger-accent-surface',
       '#success-accent-surface',
       '#warning-accent-surface',
       '#note-accent-surface',
     ]) {
-      expect(seeded[name], name).toBe(reference[name]);
+      expect(seeded[name], name).toBe(baseline[name]);
     }
+
+    // The neutral chrome still re-hues, and should: `baseHue` inherits the accent
+    // hue, so the greys keep their faint tint of the brand. What it no longer does is
+    // change *chroma* — only the hue moved.
+    expect(seeded['#border']).not.toBe(baseline['#border']);
+    expect(hueOf(String(seeded['#border']))).toBeCloseTo(
+      colorSeed('#FFD400')!.hue,
+      1,
+    );
   });
 
   it('carries the brand into the special theme', () => {
@@ -1280,7 +1294,7 @@ describe('accent color seeds', () => {
     const tokens = renderPaletteTokens({
       ...EXACT,
       accentColor: '#FFD400',
-      scheme: 'dark',
+      scheme: 'light',
     });
 
     expectSameColor(