@oxyhq/bloom 0.80.0 → 0.82.0

package/src/theme/__tests__/policy-legibility.test.ts

@@ -3,7 +3,7 @@
  *
  * Every accent and status family is generated, not authored, so nothing else in
  * the suite can notice when a tuning change makes a label unreadable. This walks
- * the full matrix — 13 presets x 2 modes x 7 families — and asserts the property
+ * the full matrix — every preset x 2 modes x 7 families — and asserts the property
  * a user actually perceives.
  *
  * Two failure shapes it exists to catch, both of which have already happened:
@@ -20,7 +20,9 @@
  * it against the raw rgba would compare against a colour nobody ever sees.
  */
 import { getResolvedTokens } from '../token-registry';
-import { APP_COLOR_NAMES } from '../color-presets';
+import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../color-presets';
+import { Hct } from '../color-engine/hct';
+import { argbFromHex } from '../color-engine';
 
 const AA = 4.5;
 
@@ -117,23 +119,63 @@ describe('colour policy legibility', () => {
   });
 
 
+  // The regression this exists for has landed twice, both times reported by the
+  // user rather than by the suite: a preset rendering the IDENTICAL brand fill in
+  // both modes, which is not a theme, just one palette shown twice. It is easy to
+  // reintroduce because every individual token stays legible and every other
+  // assertion here keeps passing — nothing in a per-mode check can see that the
+  // two modes agree.
+  //
+  // Two distinct mechanisms produced it, which is why the gate is on the OUTPUT
+  // rather than on either cause: a tone search that degenerated to its own floor
+  // for any seed whose chroma is flat across the search range (pink, purple), and
+  // a light floor sharing that same bound, which voided the depth step for a seed
+  // whose dark fill already sat on it (pink again, for the opposite reason).
+  it('every preset renders a different brand fill in each mode', () => {
+    const identical = APP_COLOR_NAMES.filter(
+      (preset) =>
+        getResolvedTokens(preset, 'light')['--primary'] ===
+        getResolvedTokens(preset, 'dark')['--primary'],
+    );
+    expect(identical).toEqual([]);
+  });
+
   // The two modes want opposite things and the suite has to say which. Applying
   // the budget in LIGHT let a light seed keep its own tone there, so faircoin
   // rendered the same pale lime in both modes — no theme at all. Skipping it in
   // DARK left every Follow button, avatar and chat bubble with a black label.
   // Each half was individually legible, so nothing else could catch either.
   it('the brand fill keeps light exemption-free and dark budgeted', () => {
-    const white = { light: 0, dark: 0 };
-    for (const preset of APP_COLOR_NAMES) {
-      for (const mode of ['light', 'dark'] as const) {
-        if (getResolvedTokens(preset, mode)['--primary-foreground'] === 'rgb(255 255 255)') {
-          white[mode] += 1;
-        }
-      }
+    // `mono` is not governed by the budget — it has no chroma to preserve, and its
+    // dark fill is near-WHITE by design, so it takes a black label on purpose.
+    const chromatic = APP_COLOR_NAMES.filter((name) => name !== 'mono');
+    const black: number[] = [];
+    const white: number[] = [];
+    for (const preset of chromatic) {
+      // Light admits no exemption: every chromatic preset comes down far enough
+      // to carry white, which is what makes faircoin a deep green there and a
+      // bright lime in dark rather than the same pale smear twice.
+      expect(getResolvedTokens(preset, 'light')['--primary-foreground']).toBe('rgb(255 255 255)');
+      const seedTone = Hct.fromInt(argbFromHex(APP_COLOR_PRESETS[preset].hex)).tone;
+      (getResolvedTokens(preset, 'dark')['--primary-foreground'] === 'rgb(255 255 255)'
+        ? white
+        : black
+      ).push(seedTone);
     }
-    // Light admits no exemption, so every preset carries white there. Dark keeps
-    // the budget, so the seeds that are already light keep their colour instead.
-    expect(white.light).toBe(APP_COLOR_NAMES.length);
-    expect(white.dark).toBeGreaterThan(APP_COLOR_NAMES.length - 4);
+
+    // Dark's split is decided by the SEED'S OWN LIGHTNESS and nothing else: a seed
+    // already too light to come down within the budget keeps its tone and takes a
+    // black label. So the partition must be ordered — every black-label seed
+    // lighter than every white-label one. Counting them instead (an "at most N
+    // take black" slack) says nothing about WHICH, passes while the rule inverts,
+    // and has to be re-tuned by hand every time a preset is added.
+    expect(black.length).toBeGreaterThan(0);
+    expect(white.length).toBeGreaterThan(0);
+    expect(Math.min(...black)).toBeGreaterThan(Math.max(...white));
+
+    // And the monochrome exception itself, stated rather than tolerated: a fill at
+    // each end of the scale, carrying the opposite label.
+    expect(getResolvedTokens('mono', 'light')['--primary-foreground']).toBe('rgb(255 255 255)');
+    expect(getResolvedTokens('mono', 'dark')['--primary-foreground']).toBe('rgb(0 0 0)');
   });
 });

package/src/theme/color-engine/index.ts

@@ -10,7 +10,7 @@
 export { Hct } from './hct';
 export { TonalPalette } from './tonal-palette';
 export { DynamicScheme } from './dynamic-scheme';
-export { buildScheme, schemeVibrant, schemeExpressive, schemeTonalSpot, schemeNeutral } from './scheme-variants';
+export { buildScheme, schemeVibrant, schemeExpressive, schemeTonalSpot, schemeNeutral, schemeMonochrome } from './scheme-variants';
 export type { SchemeVariant, AccentSources } from './scheme-variants';
 export { Roles } from './color-roles';
 export type { RoleName } from './color-roles';

package/src/theme/color-engine/scheme-variants.ts

@@ -13,7 +13,13 @@ import { sanitizeDegreesDouble } from './math-utils';
 import { TonalPalette } from './tonal-palette';
 import { Variant } from './variant';
 
-export type SchemeVariant = 'vivid' | 'vibrant' | 'expressive' | 'tonalSpot' | 'neutral';
+export type SchemeVariant =
+  | 'vivid'
+  | 'vibrant'
+  | 'expressive'
+  | 'tonalSpot'
+  | 'neutral'
+  | 'monochrome';
 
 /**
  * Optional explicit accent seeds for a scheme. When a source HCT is supplied, its
@@ -191,6 +197,36 @@ export function schemeNeutral(
   });
 }
 
+/**
+ * No colour at all: every palette is greyscale, so the seed's hue is irrelevant
+ * and only its tone survives. This is the variant the `isMonochrome` role
+ * branches in `color-roles` were written for — they push `primary` to the far end
+ * of the scale (tone 0 on a light page, 100 on a dark one) rather than the
+ * mid-tone the chromatic curves would pick, which is what keeps a black-and-white
+ * theme from reading as a grey one.
+ *
+ * A pinned accent is ignored on purpose: honouring it would put one coloured
+ * family back into a scheme whose entire point is that nothing is coloured.
+ */
+export function schemeMonochrome(
+  source: Hct,
+  isDark: boolean,
+  contrastLevel: number,
+): DynamicScheme {
+  const grey = (): TonalPalette => TonalPalette.fromHueAndChroma(source.hue, 0);
+  return new DynamicScheme({
+    sourceColorArgb: source.toInt(),
+    variant: Variant.MONOCHROME,
+    contrastLevel,
+    isDark,
+    primaryPalette: grey(),
+    secondaryPalette: grey(),
+    tertiaryPalette: grey(),
+    neutralPalette: grey(),
+    neutralVariantPalette: grey(),
+  });
+}
+
 const BUILDERS: Record<
   SchemeVariant,
   (s: Hct, d: boolean, c: number, accents: AccentSources) => DynamicScheme
@@ -200,6 +236,7 @@ const BUILDERS: Record<
   expressive: schemeExpressive,
   tonalSpot: schemeTonalSpot,
   neutral: schemeNeutral,
+  monochrome: schemeMonochrome,
 };
 
 /**

package/src/theme/color-policy.ts

@@ -92,10 +92,31 @@ const noLegibleForeground = (argb: number): boolean =>
   contrastOf(argb, true) < AA && contrastOf(argb, false) < AA;
 
 /** The tone a white-label fill sits at in LIGHT mode. */
-const LIGHT_FILL_TONE = 45;
+const FILL_TONE_FLOOR = 45;
 
 /** The tone a white-label fill sits at in DARK: the ceiling white text allows. */
-const DARK_FILL_TONE = 49;
+const FILL_TONE_SEARCH_CEILING = 56;
+
+/**
+ * How much DEEPER the same brand sits on a light page than on a dark one.
+ *
+ * Not decoration: a colour on a near-white page has nothing to read against, so
+ * the mode difference is what makes a theme a theme rather than one palette shown
+ * twice. Dropping it is a regression that looks like a simplification — light and
+ * dark collapse onto the same fill for every seed that is not already bright, and
+ * the two modes stop being distinguishable at all.
+ */
+const LIGHT_DEPTH_STEP = 5;
+
+/**
+ * How deep a light-mode fill may go. Deliberately BELOW the search's lower bound,
+ * which those two used to share — and sharing them silently voided the depth step
+ * for any seed whose dark fill already sits at that bound. A high-chroma seed is
+ * exactly that case: pink loses its white label above tone 45, so dark cannot rise
+ * to make room and light must descend instead, or the two modes render the
+ * identical fill.
+ */
+const LIGHT_FILL_FLOOR = 40;
 
 /** How far a fill may be dragged from its natural tone before the colour is lost. */
 const TONE_BUDGET = 25;
@@ -131,6 +152,29 @@ const TEXT_CHROMA = 60;
 const SUBTLE_SOURCE_TONE = 60;
 const SUBTLE_ALPHA = { light: 0.13, dark: 0.24 } as const;
 
+/**
+ * A seed at or below this chroma has no colour to derive from, so the whole
+ * palette goes greyscale — the black-and-white theme. Keyed on the seed rather
+ * than on a flag, so picking any grey in a colour wheel lands there too instead
+ * of on a nearly-grey approximation of it.
+ */
+const MONOCHROME_MAX_CHROMA = 6;
+
+/**
+ * Whether a seed carries no colour to derive a theme from — the one authority for
+ * that question, so the policy and the scheme choice can never disagree about a
+ * given seed and produce a grey palette wearing chromatic surfaces.
+ */
+export function isColourlessSeed(seedHex: string): boolean {
+  return Hct.fromInt(argbFromHex(seedHex)).chroma <= MONOCHROME_MAX_CHROMA;
+}
+
+/** Where a monochrome brand fill sits: near-black on a white page, near-white on a black one. */
+const MONOCHROME_FILL_TONE = { light: 12, dark: 94 } as const;
+
+/** The quiet member of a monochrome trio — the only one that is actually grey. */
+const MONOCHROME_SECONDARY_TONE = { light: 36, dark: 72 } as const;
+
 /** Split-complementary: the two accents sit either side of the seed's complement. */
 const SPLIT_ROTATIONS = [150, 210] as const;
 
@@ -202,6 +246,47 @@ function vividHueNear(hue: number): number {
   return bestChroma - baseChroma >= VIVID_SNAP_MIN_GAIN ? bestHue : hue;
 }
 
+/**
+ * The most vivid tone a palette reaches while a WHITE label still clears AA on
+ * it — searched per HUE instead of assumed.
+ *
+ * A single tone for every hue leaves chroma on the table for some and takes it
+ * from others, because the sRGB gamut is not a cylinder: from tone 45 upward an
+ * orange keeps gaining chroma until white runs out at ~49.5 (59 -> 84), while a
+ * violet has already passed its peak and LOSES chroma over the same interval
+ * (91 -> 86). The old flat 45 spent none of the contrast headroom it had — every
+ * preset sat at 5.38 when 4.5 was the requirement — and orange paid for that
+ * twice, since its hue is also one of the gamut's narrow ones.
+ *
+ * The floor is what keeps this from trading lightness for chroma: a hue that
+ * peaks far below 45 stays at 45 rather than descending into a near-black slab
+ * that happens to be saturated. So the search can only ever improve a fill or
+ * leave it exactly where it was.
+ *
+ * Contrast is measured on the QUANTIZED colour, not the engine's continuous
+ * tone-ratio: an earlier iteration chose tones by the latter and shipped 135
+ * pairs at a measured 4.49.
+ */
+function vividLegibleTone(palette: TonalPalette): number {
+  let bestTone = FILL_TONE_FLOOR;
+  let bestChroma = -1;
+  for (let tone = FILL_TONE_FLOOR; tone <= FILL_TONE_SEARCH_CEILING; tone += 0.5) {
+    const argb = palette.tone(tone);
+    if (contrastOf(argb, true) < AA) continue;
+    const chroma = Hct.fromInt(argb).chroma;
+    // A tie keeps the DEEPEST tone. Ties are common rather than exotic — any seed
+    // whose chroma sits below the gamut ceiling across this whole range has a flat
+    // curve here — and breaking them toward the lightest end instead changes no
+    // preset's output, because the light-mode floor below already supplies the
+    // separation that would have bought. Mutation-checked, not assumed.
+    if (chroma > bestChroma) {
+      bestChroma = chroma;
+      bestTone = tone;
+    }
+  }
+  return bestTone;
+}
+
 /**
  * The tone a BRAND fill sits at.
  *
@@ -211,7 +296,8 @@ function vividHueNear(hue: number): number {
  * ceasing to be itself: yellow turns to brown and lime to moss. Those keep their
  * own tone and take a black label instead, which is what a bright yellow button
  * wants anyway. The 25-tone budget is what separates the two cases, and it is
- * why 11 of the 13 presets carry white and exactly the two light ones do not.
+ * why 11 of the 13 chromatic presets carry white and exactly the two light ones
+ * do not. (`mono` sits outside this rule — see MONOCHROME_FILL_TONE.)
  */
 function whiteLabelTone(palette: TonalPalette, seedTone: number, isDark: boolean): number {
   // LIGHT: every fill comes down, no exemption. On a near-white page a bright
@@ -219,11 +305,11 @@ function whiteLabelTone(palette: TonalPalette, seedTone: number, isDark: boolean
   // smear there, indistinguishable from the same colour in dark, which is not a
   // theme at all. Coming down is what makes faircoin a deep green in light and a
   // bright lime in dark.
-  if (!isDark) return LIGHT_FILL_TONE;
+  if (!isDark) return Math.max(LIGHT_FILL_FLOOR, vividLegibleTone(palette) - LIGHT_DEPTH_STEP);
   // DARK: the budget applies. Most brands come down to where white fits, but a
   // seed that is already light cannot without ceasing to be itself, so it keeps
   // its own tone and takes a black label. That is the eleven-and-two pattern.
-  const candidate = Math.max(DARK_FILL_TONE, seedTone - TONE_BUDGET);
+  const candidate = Math.max(vividLegibleTone(palette), seedTone - TONE_BUDGET);
   return contrastOf(palette.tone(candidate), true) >= AA
     ? candidate
     : Math.max(seedTone, DARK_SEED_FLOOR);
@@ -236,10 +322,10 @@ function whiteLabelTone(palette: TonalPalette, seedTone: number, isDark: boolean
  * peaks dark comes down and carries white.
  */
 function accentTone(hue: number, isDark: boolean): number {
-  if (!isDark) return LIGHT_FILL_TONE;
-  const peak = Math.max(peakTone(hue), DARK_ACCENT_FLOOR);
   const palette = TonalPalette.fromHueAndChroma(hue, ACCENT_CHROMA);
-  const candidate = Math.max(DARK_FILL_TONE, peak - TONE_BUDGET);
+  if (!isDark) return Math.max(LIGHT_FILL_FLOOR, vividLegibleTone(palette) - LIGHT_DEPTH_STEP);
+  const peak = Math.max(peakTone(hue), DARK_ACCENT_FLOOR);
+  const candidate = Math.max(vividLegibleTone(palette), peak - TONE_BUDGET);
   return contrastOf(palette.tone(candidate), true) >= AA ? candidate : peak;
 }
 
@@ -306,12 +392,26 @@ export function buildPolicyTokens(
   // tone <= 49, so that is the ceiling — in dark as much as in light. Letting the
   // dark fill sit at the seed's own tone instead makes it brighter, but every one
   // of those labels turns black, which costs more than the brightness buys.
-  // DARK keys off the seed itself so the fill IS the brand hex; LIGHT uses the
-  // max-chroma palette, which is what stops a deepened fill from going pastel.
-  const brandPalette = isDark
-    ? TonalPalette.fromInt(argbFromHex(seedHex))
-    : TonalPalette.fromHueAndChroma(seed.hue, 200);
-  const primary = fillPair(brandPalette, whiteLabelTone(brandPalette, seed.tone, isDark));
+  const monochrome = seed.chroma <= MONOCHROME_MAX_CHROMA;
+  // BOTH modes key off the seed itself, so the fill carries the brand's SATURATION
+  // as well as its hue. Light used to force the hue to maximum chroma, which reads
+  // as "the seed only chose a hue" — and that silently renames a colour: a muted
+  // blue-grey seed resolved to a vivid cyan, and a brown seed to an orange, since
+  // both differ from a saturated neighbour by chroma alone. A deliberately soft
+  // brand now stays soft instead of being argued with.
+  // A monochrome seed has no chroma to preserve either way, and its fill goes to
+  // the far end of the scale rather than the white-label ceiling: a mid-grey
+  // button reads as disabled, where near-black on white reads as the primary
+  // action.
+  const brandPalette = monochrome
+    ? TonalPalette.fromHueAndChroma(0, 0)
+    : TonalPalette.fromInt(argbFromHex(seedHex));
+  const primary = fillPair(
+    brandPalette,
+    monochrome
+      ? (isDark ? MONOCHROME_FILL_TONE.dark : MONOCHROME_FILL_TONE.light)
+      : whiteLabelTone(brandPalette, seed.tone, isDark),
+  );
 
   const tokens: PolicyTokens = {
     '--primary': primary.fill,
@@ -320,7 +420,7 @@ export function buildPolicyTokens(
     // does correctly, and which the fill must stop trying to do at the same time.
     '--primary-text': roles.primary,
     '--primary-subtle': rgba(
-      TonalPalette.fromHueAndChroma(seed.hue, 200).tone(SUBTLE_SOURCE_TONE),
+      TonalPalette.fromHueAndChroma(seed.hue, monochrome ? 0 : 200).tone(SUBTLE_SOURCE_TONE),
       isDark ? SUBTLE_ALPHA.dark : SUBTLE_ALPHA.light,
     ),
     '--ring': roles.primary,
@@ -332,7 +432,9 @@ export function buildPolicyTokens(
     '--card': isDark ? roles.surfaceContainer : roles.surfaceContainerLowest,
     // A touch darker than M3's page background: near-white reads as unfinished
     // next to the card, and the extra step gives the surface ramp somewhere to sit.
-    '--background': rgb(TonalPalette.fromHueAndChroma(seed.hue, 10).tone(isDark ? 4 : 96)),
+    '--background': rgb(
+      TonalPalette.fromHueAndChroma(seed.hue, monochrome ? 0 : 10).tone(isDark ? 4 : 96),
+    ),
     // `--accent` stays what every consumer actually uses it for: a hover surface.
     '--accent': roles.surfaceContainerHigh,
     '--accent-foreground': roles.onSurfaceVariant,
@@ -344,9 +446,11 @@ export function buildPolicyTokens(
     const hue = pin !== undefined ? Hct.fromInt(argbFromHex(pin)).hue : hues[role];
     // One hue, three palettes. Every member shares it, so the family still reads
     // as one colour; only how loudly each speaks differs.
-    const fillPalette = TonalPalette.fromHueAndChroma(hue, ACCENT_CHROMA);
-    const textPalette = TonalPalette.fromHueAndChroma(hue, TEXT_CHROMA);
-    const vividPalette = TonalPalette.fromHueAndChroma(hue, 200);
+    // A monochrome theme has no accents to rotate to; the trio becomes a ladder
+    // of greys, which still separates a standout button from a quiet one.
+    const fillPalette = TonalPalette.fromHueAndChroma(hue, monochrome ? 0 : ACCENT_CHROMA);
+    const textPalette = TonalPalette.fromHueAndChroma(hue, monochrome ? 0 : TEXT_CHROMA);
+    const vividPalette = TonalPalette.fromHueAndChroma(hue, monochrome ? 0 : 200);
     // DARK sits at the hue's peak tone, floored by the same rule the brand fill
     // uses: some hues peak dark (violet at 35), and rendering them there gives a
     // slab rather than a highlight. LIGHT goes deep like every other fill, but
@@ -362,7 +466,20 @@ export function buildPolicyTokens(
     // black. The accent chroma cap already keeps these hues out of neon territory,
     // and the hue itself is the caller's brand rather than ours to move. The
     // analyzer still runs where it was designed to, inside `color-roles`.
-    const tone = accentTone(hue, isDark);
+    // Monochrome keeps `tertiary` AT the brand fill rather than a step off it:
+    // tertiary is what a compose button and a FAB paint with, and those are the
+    // primary action — a step of grey between them and `primary` reads as two
+    // buttons disagreeing, not as hierarchy. `secondary` carries the whole
+    // demotion instead.
+    const tone = monochrome
+      ? role === 'tertiary'
+        ? isDark
+          ? MONOCHROME_FILL_TONE.dark
+          : MONOCHROME_FILL_TONE.light
+        : isDark
+          ? MONOCHROME_SECONDARY_TONE.dark
+          : MONOCHROME_SECONDARY_TONE.light
+      : accentTone(hue, isDark);
     const pair = fillPair(fillPalette, tone);
     tokens[`--${role}`] = pair.fill;
     tokens[`--${role}-foreground`] = pair.foreground;
@@ -377,9 +494,10 @@ export function buildPolicyTokens(
   // The old ramp drew all five from the primary/secondary/tertiary trio, which
   // spans ~35 degrees, so adjacent series were indistinguishable.
   for (let i = 0; i < 5; i += 1) {
-    tokens[`--chart-${i + 1}`] = rgb(
-      TonalPalette.fromHueAndChroma((seed.hue + i * 72) % 360, 60).tone(isDark ? 72 : 48),
-    );
+    // Greyscale charts spread by TONE instead of hue — the only axis left.
+    tokens[`--chart-${i + 1}`] = monochrome
+      ? rgb(TonalPalette.fromHueAndChroma(0, 0).tone(isDark ? 40 + i * 13 : 78 - i * 13))
+      : rgb(TonalPalette.fromHueAndChroma((seed.hue + i * 72) % 360, 60).tone(isDark ? 72 : 48));
   }
 
   // The status family, themed per mode. The four frozen hexes it replaces all
@@ -389,7 +507,12 @@ export function buildPolicyTokens(
   for (const [role, hex] of Object.entries(STATUS_SEEDS)) {
     const status = Hct.fromInt(argbFromHex(hex));
     const palette = TonalPalette.fromHueAndChroma(status.hue, status.chroma);
-    const pair = fillPair(palette, isDark ? DARK_FILL_TONE : LIGHT_FILL_TONE);
+    const pair = fillPair(
+      palette,
+      isDark
+        ? vividLegibleTone(palette)
+        : Math.max(LIGHT_FILL_FLOOR, vividLegibleTone(palette) - LIGHT_DEPTH_STEP),
+    );
     tokens[`--${role}`] = pair.fill;
     tokens[`--${role}-foreground`] = pair.foreground;
     tokens[`--${role}-text`] = rgb(

package/src/theme/color-presets.ts

@@ -4,7 +4,6 @@ export type AppColorName =
   | 'teal'
   | 'blue'
   | 'green'
-  | 'amber'
   | 'yellow'
   | 'red'
   | 'purple'
@@ -13,7 +12,13 @@ export type AppColorName =
   | 'orange'
   | 'mint'
   | 'oxy'
-  | 'faircoin';
+  | 'faircoin'
+  | 'pumpkin'
+  | 'gray'
+  | 'brown'
+  | 'peach'
+  | 'rose'
+  | 'mono';
 
 /**
  * A single colour preset: a brand SEED colour plus the tonal scheme variant to
@@ -56,25 +61,30 @@ export interface AppColorPreset {
  */
 export type PresetTokens = Record<string, string>;
 
-export const APP_COLOR_NAMES: readonly AppColorName[] = ['teal', 'blue', 'green', 'amber', 'yellow', 'red', 'purple', 'pink', 'sky', 'orange', 'mint', 'oxy', 'faircoin'];
+export const APP_COLOR_NAMES: readonly AppColorName[] = ['teal', 'blue', 'green', 'yellow', 'red', 'purple', 'pink', 'sky', 'orange', 'mint', 'oxy', 'faircoin', 'pumpkin', 'gray', 'brown', 'peach', 'rose', 'mono'];
 
 /** Premium-exclusive presets, hidden from the standard color picker. */
 export const PREMIUM_COLOR_NAMES: readonly AppColorName[] = ['oxy', 'faircoin'];
 
 export const HEX_TO_APP_COLOR: Record<string, AppColorName> = {
   '#005c67': 'teal',
-  '#1d9bf0': 'blue',
+  '#0085fe': 'blue',
   '#10b981': 'green',
-  '#f59e0b': 'amber',
-  '#ffc300': 'yellow',
+  '#fcdc00': 'yellow',
   '#ef4444': 'red',
-  '#8b5cf6': 'purple',
-  '#ec4899': 'pink',
-  '#0ea5e9': 'sky',
-  '#f97316': 'orange',
+  '#b866ff': 'purple',
+  '#ff3c7f': 'pink',
+  '#03a9f4': 'sky',
+  '#ff5722': 'orange',
   '#14b8a6': 'mint',
   '#c46ede': 'oxy',
   '#9ffb50': 'faircoin',
+  '#ff9800': 'pumpkin',
+  '#607d8b': 'gray',
+  '#813519': 'brown',
+  '#ffb28d': 'peach',
+  '#fcaffe': 'rose',
+  '#000000': 'mono',
 };
 
 export function hexToAppColorName(hex: string): AppColorName {
@@ -89,16 +99,33 @@ export function hexToAppColorName(hex: string): AppColorName {
  */
 export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
   teal: { name: 'teal', hex: '#005c67', variant: 'vivid' },
-  blue: { name: 'blue', hex: '#1d9bf0', variant: 'vivid' },
+  blue: { name: 'blue', hex: '#0085fe', variant: 'vivid' },
   green: { name: 'green', hex: '#10b981', variant: 'vivid' },
-  amber: { name: 'amber', hex: '#f59e0b', variant: 'vivid' },
-  yellow: { name: 'yellow', hex: '#ffc300', variant: 'vivid' },
+  yellow: { name: 'yellow', hex: '#fcdc00', variant: 'vivid' },
   red: { name: 'red', hex: '#ef4444', variant: 'vivid' },
-  purple: { name: 'purple', hex: '#8b5cf6', variant: 'vivid' },
-  pink: { name: 'pink', hex: '#ec4899', variant: 'vivid' },
-  sky: { name: 'sky', hex: '#0ea5e9', variant: 'vivid' },
-  orange: { name: 'orange', hex: '#f97316', variant: 'vivid' },
+  purple: { name: 'purple', hex: '#b866ff', variant: 'vivid' },
+  pink: { name: 'pink', hex: '#ff3c7f', variant: 'vivid' },
+  sky: { name: 'sky', hex: '#03a9f4', variant: 'vivid' },
+  // Deliberately NOT Tailwind's orange-500 (`#f97316`). That seed sits at HCT hue
+  // 46, which reads as orange only because it is also light: at hue 46 the sRGB
+  // gamut allows a chroma of just 62 at the tones a white label needs (<= 49), so
+  // the brand fill resolved to `rgb(177 76 0)` — a brown. Hue 34 carries a chroma
+  // of 84 at that same tone, with the same white label and the same contrast
+  // headroom, so the fill reads as orange instead of paying for the hue twice.
+  orange: { name: 'orange', hex: '#ff5722', variant: 'vivid' },
   mint: { name: 'mint', hex: '#14b8a6', variant: 'vivid' },
   oxy: { name: 'oxy', hex: '#c46ede', variant: 'vivid' },
   faircoin: { name: 'faircoin', hex: '#9ffb50', variant: 'vivid' },
+  pumpkin: { name: 'pumpkin', hex: '#ff9800', variant: 'vivid' },
+  gray: { name: 'gray', hex: '#607d8b', variant: 'vivid' },
+  brown: { name: 'brown', hex: '#813519', variant: 'vivid' },
+  peach: { name: 'peach', hex: '#ffb28d', variant: 'vivid' },
+  rose: { name: 'rose', hex: '#fcaffe', variant: 'vivid' },
+  /**
+   * No colour at all — the black-and-white theme. Its seed carries zero chroma,
+   * which is the whole mechanism: the policy derives a greyscale palette from any
+   * seed with none, so a user who picks a grey in the colour wheel lands here too
+   * rather than on a nearly-grey approximation.
+   */
+  mono: { name: 'mono', hex: '#000000', variant: 'monochrome' },
 };

package/src/theme/color-scope/seed-scope.ts

@@ -1,5 +1,5 @@
 import { generateRoleColors, type RoleColors, type SchemeVariant } from '../color-engine';
-import { buildPolicyTokens } from '../color-policy';
+import { buildPolicyTokens, isColourlessSeed } from '../color-policy';
 import { CANONICAL_TOKENS } from '../token-registry';
 
 /**
@@ -104,7 +104,11 @@ export interface SeedScopeOptions {
 export function buildSeedScopeVars(options: SeedScopeOptions): Record<string, string> {
   const roles = generateRoleColors({
     seed: options.seed,
-    variant: options.variant ?? 'vivid',
+    // A seed with no chroma has no colour for a chromatic variant to work with,
+    // so it takes the greyscale scheme unless the caller asked for something else.
+    // This is what makes a grey picked in a colour wheel produce the SAME
+    // black-and-white theme as the `mono` preset instead of a tinted near-grey.
+    variant: options.variant ?? (isColourlessSeed(options.seed) ? 'monochrome' : 'vivid'),
     isDark: options.mode === 'dark',
     contrastLevel: options.contrastLevel ?? 0,
     secondarySeed: options.secondarySeed,