@oxyhq/bloom 0.81.0 → 0.82.0

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

@@ -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,28 +119,60 @@ 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 };
     // `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.
-    // Counting it here would let a real regression hide inside its slack.
     const chromatic = APP_COLOR_NAMES.filter((name) => name !== 'mono');
+    const black: number[] = [];
+    const white: number[] = [];
     for (const preset of chromatic) {
-      for (const mode of ['light', 'dark'] as const) {
-        if (getResolvedTokens(preset, mode)['--primary-foreground'] === 'rgb(255 255 255)') {
-          white[mode] += 1;
-        }
-      }
+      // 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(chromatic.length);
-    expect(white.dark).toBeGreaterThan(chromatic.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)');

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;
@@ -225,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.
  *
@@ -243,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);
@@ -260,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;
 }
 
@@ -331,17 +393,19 @@ export function buildPolicyTokens(
   // 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.
   const monochrome = seed.chroma <= MONOCHROME_MAX_CHROMA;
-  // 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.
+  // 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)
-    : isDark
-      ? TonalPalette.fromInt(argbFromHex(seedHex))
-      : TonalPalette.fromHueAndChroma(seed.hue, 200);
+    : TonalPalette.fromInt(argbFromHex(seedHex));
   const primary = fillPair(
     brandPalette,
     monochrome
@@ -443,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'
@@ -14,6 +13,11 @@ export type AppColorName =
   | 'mint'
   | 'oxy'
   | 'faircoin'
+  | 'pumpkin'
+  | 'gray'
+  | 'brown'
+  | 'peach'
+  | 'rose'
   | 'mono';
 
 /**
@@ -57,25 +61,29 @@ 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', 'mono'];
+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',
 };
 
@@ -91,18 +99,28 @@ 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