@oxyhq/bloom 0.75.0 → 0.76.1

package/src/theme/color-policy.ts

@@ -94,8 +94,14 @@ const noLegibleForeground = (argb: number): boolean =>
 /** The tone a white-label fill sits at in LIGHT mode. */
 const LIGHT_FILL_TONE = 45;
 
-/** No dark-mode BRAND fill sits below this: under it a colour goes heavy on black. */
-const DARK_FLOOR = 58;
+/** The tone a white-label fill sits at in DARK: the ceiling white text allows. */
+const DARK_FILL_TONE = 49;
+
+/**
+ * No dark-mode ACCENT sits below this. Some hues peak dark — violet at tone 33 —
+ * and rendering one there gives a slab rather than a highlight.
+ */
+const DARK_ACCENT_FLOOR = 58;
 
 /**
  * Accent fills sit at their hue's PEAK tone in dark — where the hue is most
@@ -190,6 +196,23 @@ function vividHueNear(hue: number): number {
   return bestChroma - baseChroma >= VIVID_SNAP_MIN_GAIN ? bestHue : hue;
 }
 
+/**
+ * The tone a BRAND fill sits at.
+ *
+ * Normally the ceiling white text allows, so a Follow button, an avatar and the
+ * compose button all carry a white label. But a seed that is ALREADY light —
+ * yellow at tone 82, faircoin at 90 — cannot be dragged down there without
+ * 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.
+ */
+function whiteLabelTone(palette: TonalPalette, seedTone: number, isDark: boolean): number {
+  const target = isDark ? DARK_FILL_TONE : LIGHT_FILL_TONE;
+  const candidate = Math.max(target, seedTone - 25);
+  return contrastOf(palette.tone(candidate), true) >= AA ? candidate : seedTone;
+}
+
 /** Settle a fill tone so some foreground is legible, then pair it with that foreground. */
 function fillPair(palette: TonalPalette, startTone: number): { fill: string; foreground: string } {
   let tone = startTone;
@@ -246,19 +269,15 @@ export function buildPolicyTokens(
 ): PolicyTokens {
   const seed = Hct.fromInt(argbFromHex(seedHex));
 
-  // LIGHT takes the max-chroma palette at a deep tone: on a near-white page the
-  // fill has to go deep to read calm, and max chroma is what keeps it from going
-  // pastel there. DARK takes the SEED'S OWN palette — its own chroma and its own
-  // tone, floored so a dark seed still lifts off the ground. At a fixed dark tone
-  // every mid-tone preset read dull on black, and the ones that looked right were
-  // exactly those whose seed tone escaped it.
-  const brandPalette = isDark
-    ? TonalPalette.fromInt(argbFromHex(seedHex))
-    : TonalPalette.fromHueAndChroma(seed.hue, 200);
-  const primary = fillPair(
-    brandPalette,
-    isDark ? Math.max(seed.tone, DARK_FLOOR) : LIGHT_FILL_TONE,
-  );
+  // Max chroma at a tone that carries a WHITE label, in both modes.
+  //
+  // The brand fill is what a compose button, a Follow button, an avatar and the
+  // user's own chat bubble paint with, and those carry white text. White needs
+  // 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.
+  const brandPalette = TonalPalette.fromHueAndChroma(seed.hue, 200);
+  const primary = fillPair(brandPalette, whiteLabelTone(brandPalette, seed.tone, isDark));
 
   const tokens: PolicyTokens = {
     '--primary': primary.fill,
@@ -309,7 +328,7 @@ 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 = isDark ? Math.max(peakTone(hue), DARK_FLOOR) : LIGHT_FILL_TONE;
+    const tone = isDark ? Math.max(peakTone(hue), DARK_ACCENT_FLOOR) : LIGHT_FILL_TONE;
     const pair = fillPair(fillPalette, tone);
     tokens[`--${role}`] = pair.fill;
     tokens[`--${role}-foreground`] = pair.foreground;
@@ -336,7 +355,7 @@ 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 ? Math.max(status.tone, DARK_FLOOR) : LIGHT_FILL_TONE);
+    const pair = fillPair(palette, isDark ? DARK_FILL_TONE : LIGHT_FILL_TONE);
     tokens[`--${role}`] = pair.fill;
     tokens[`--${role}-foreground`] = pair.foreground;
     tokens[`--${role}-text`] = rgb(