@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/commonjs/styles/interactive-web-css.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NOT_DISABLED = void 0;
+exports.RING_OFFSET_VAR = exports.RING_OFFSET_FALLBACK = exports.NOT_DISABLED = void 0;
+exports.focusRingShadow = focusRingShadow;
 exports.interactiveWebCss = interactiveWebCss;
 exports.useInteractiveWebCss = useInteractiveWebCss;
 var _react = require("react");
 var _adoptStyleSheet = require("./adopt-style-sheet.js");
+var _tokens = require("./tokens.js");
 /**
  * The one recipe every raw-DOM Bloom control's stylesheet is built from.
  *
@@ -25,6 +27,17 @@ var _adoptStyleSheet = require("./adopt-style-sheet.js");
  * base declarations (layout, border, font), the transition list, WHICH property
  * hover changes, and the focus ring's offset.
  *
+ * It grew because it was not being used. Thirty-odd families called only
+ * `useInteractiveWebCss()` — the two-line adopter — and hand-wrote the sheet it
+ * was supposed to build, which is exactly why rings, hovers and disabled states
+ * drifted: three focus-ring mechanisms in one package, a `#FFFFFF` ring gap
+ * baked into a dark-mode component, and disabled opacity at 0.4, 0.5 and 0.6.
+ * The options below therefore cover what those callers actually needed — a
+ * hover fill, a pressed fill, a disabled block and a focus ring whose GAP comes
+ * from the surface — so that hand-writing one is a decision rather than the
+ * default. **This is THE way to build a raw-DOM or `dataSet`-hooked control's
+ * stylesheet in Bloom.**
+ *
  * TWO RULES THAT MUST SURVIVE ANY EDIT HERE:
  *
  * - **The keyboard focus ring is `:focus-visible`, never `:focus`.** An
@@ -42,6 +55,44 @@ var _adoptStyleSheet = require("./adopt-style-sheet.js");
  * runtime in behind a stylesheet.
  */
 
+/**
+ * The custom property every Bloom focus ring reads its GAP colour from.
+ *
+ * Three ring mechanisms existed: the canonical `outline` + `outline-offset`, a
+ * two-step `box-shadow` whose gap was the literal `#FFFFFF`, and an inset
+ * shadow. The literal is the one that broke — `ring-offset-color` defaults to
+ * white in Tailwind and was never overridden, so in DARK mode a focused filter
+ * chip, filter text button, stepper value or slider thumb drew a 2px white halo
+ * against a near-black page. A gap is meant to be a hole in the ring, and a hole
+ * is the colour of whatever is behind it.
+ *
+ * So the gap is a variable, set inline from the surface the control sits on
+ * (`useRingOffsetStyle()` in `styles/surface-levels.ts`). The fallback below is
+ * only for a control that sets nothing.
+ */
+const RING_OFFSET_VAR = exports.RING_OFFSET_VAR = '--bloom-ring-offset';
+
+/** What the gap falls back to when nothing sets {@link RING_OFFSET_VAR}. */
+const RING_OFFSET_FALLBACK = exports.RING_OFFSET_FALLBACK = '#FFFFFF';
+
+/** The two-step ring: a `gap`px hole in the surface colour, then a `width`px ring. */
+
+/**
+ * The `box-shadow` value of a `ring`-mode focus ring.
+ *
+ * `ringVar` is the full custom-property name the family already sets inline for
+ * its accent, e.g. `--bloom-stepper-ring`. Anything in `extra` is appended, for
+ * a control that also carries a resting shadow the ring must not erase.
+ */
+function focusRingShadow(ringVar, {
+  offset = 2,
+  width = 2
+} = {}, extra) {
+  const gap = `0 0 0 ${offset}px var(${RING_OFFSET_VAR}, ${RING_OFFSET_FALLBACK})`;
+  const ring = `0 0 0 ${offset + width}px var(${ringVar}, currentColor)`;
+  return extra ? `${gap}, ${ring}, ${extra}` : `${gap}, ${ring}`;
+}
+
 /**
  * The filter every interactive rule carries: a control that is disabled by
  * either spelling reacts to nothing. Exported so a family-specific `extraRules`
@@ -62,18 +113,20 @@ function block(declarations) {
 function interactiveWebCss({
   selector,
   varPrefix,
-  base,
+  reset = 'button',
+  base = '',
   transition,
   hover,
   pressDeclarations,
+  pressScale = reset === 'button',
   outlineOffset,
+  focus,
+  disabled,
   extraRules
 }) {
   const c = selector;
   const interactive = `${c}${NOT_DISABLED}`;
-  return `
-${c} {
-  appearance: none;
+  const resetDeclarations = reset === 'button' ? `  appearance: none;
   -webkit-appearance: none;
   box-sizing: border-box;
   display: inline-flex;
@@ -83,23 +136,33 @@ ${c} {
   cursor: pointer;
   user-select: none;
   outline: none;
-${block(base)}
-  transition: ${transition};
+` : `  cursor: pointer;
+  outline: none;
+`;
+  const ring = {
+    mode: 'outline',
+    offset: outlineOffset ?? 2,
+    width: 2,
+    ...focus
+  };
+  const focusDeclarations = ring.mode === 'ring' ? `box-shadow: ${focusRingShadow(`--${varPrefix}-ring`, ring)};` : `outline: 2px solid var(--${varPrefix}-ring, currentColor);\n  outline-offset: ${ring.offset ?? 0}px;`;
+  const disabledOpacity = disabled?.opacity === undefined ? _tokens.DISABLED_OPACITY : disabled.opacity;
+  const pressRule = pressScale || pressDeclarations ? `${interactive}:active {
+${pressScale ? `  transform: scale(var(--${varPrefix}-press-scale, 1));\n` : ''}${pressDeclarations ? `${block(pressDeclarations)}\n` : ''}}
+` : '';
+  return `
+${c} {
+${resetDeclarations}${base.trim() ? `${block(base)}\n` : ''}  transition: ${transition};
 }
 ${c}:disabled,
 ${c}[aria-disabled="true"] {
   cursor: default;
-  opacity: 0.5;
-}
-${interactive}${hover.filter ?? ''}:hover {
+${disabledOpacity === null ? '' : `  opacity: ${disabledOpacity};\n`}${disabled?.declarations ? `${block(disabled.declarations)}\n` : ''}}
+${hover ? `${interactive}${hover.filter ?? ''}:hover {
 ${block(hover.declarations)}
 }
-${interactive}:active {
-  transform: scale(var(--${varPrefix}-press-scale, 1));
-${pressDeclarations ? `${block(pressDeclarations)}\n` : ''}}
-${c}:focus-visible {
-  outline: 2px solid var(--${varPrefix}-ring, currentColor);
-  outline-offset: ${outlineOffset}px;
+` : ''}${pressRule}${c}:focus-visible {
+  ${focusDeclarations}
 }
 ${extraRules ? `${extraRules.trim()}\n` : ''}`;
 }

package/lib/commonjs/styles/interactive-web-css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_adoptStyleSheet","NOT_DISABLED","exports","block","declarations","split","map","line","trim","filter","Boolean","join","interactiveWebCss","selector","varPrefix","base","transition","hover","pressDeclarations","outlineOffset","extraRules","c","interactive","useInteractiveWebCss","styleId","css","useEffect","adoptStyleSheet"],"sourceRoot":"../../../src","sources":["styles/interactive-web-css.ts"],"mappings":";;;;;;;;AAiCA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,gBAAA,GAAAD,OAAA;AAnCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACO,MAAME,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,6CAA6C;AAmDzE;AACA,SAASE,KAAKA,CAACC,YAAoB,EAAU;EAC3C,OAAOA,YAAY,CAChBC,KAAK,CAAC,IAAI,CAAC,CACXC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,CAAC,CAAC,CAAC,CAC1BC,MAAM,CAACC,OAAO,CAAC,CACfJ,GAAG,CAAEC,IAAI,IAAK,KAAKA,IAAI,EAAE,CAAC,CAC1BI,IAAI,CAAC,IAAI,CAAC;AACf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,iBAAiBA,CAAC;EAChCC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,UAAU;EACVC,KAAK;EACLC,iBAAiB;EACjBC,aAAa;EACbC;AACwB,CAAC,EAAU;EACnC,MAAMC,CAAC,GAAGR,QAAQ;EAClB,MAAMS,WAAW,GAAG,GAAGD,CAAC,GAAGpB,YAAY,EAAE;EAEzC,OAAO;AACT,EAAEoB,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAElB,KAAK,CAACY,IAAI,CAAC;AACb,gBAAgBC,UAAU;AAC1B;AACA,EAAEK,CAAC;AACH,EAAEA,CAAC;AACH;AACA;AACA;AACA,EAAEC,WAAW,GAAGL,KAAK,CAACR,MAAM,IAAI,EAAE;AAClC,EAAEN,KAAK,CAACc,KAAK,CAACb,YAAY,CAAC;AAC3B;AACA,EAAEkB,WAAW;AACb,2BAA2BR,SAAS;AACpC,EAAEI,iBAAiB,GAAG,GAAGf,KAAK,CAACe,iBAAiB,CAAC,IAAI,GAAG,EAAE;AAC1D,EAAEG,CAAC;AACH,6BAA6BP,SAAS;AACtC,oBAAoBK,aAAa;AACjC;AACA,EAAEC,UAAU,GAAG,GAAGA,UAAU,CAACZ,IAAI,CAAC,CAAC,IAAI,GAAG,EAAE,EAAE;AAC9C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASe,oBAAoBA,CAACC,OAAe,EAAEC,GAAW,EAAQ;EACvE,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAAC,gCAAe,EAACH,OAAO,EAAEC,GAAG,CAAC;EAC/B,CAAC,EAAE,CAACD,OAAO,EAAEC,GAAG,CAAC,CAAC;AACpB","ignoreList":[]}
+{"version":3,"names":["_react","require","_adoptStyleSheet","_tokens","RING_OFFSET_VAR","exports","RING_OFFSET_FALLBACK","focusRingShadow","ringVar","offset","width","extra","gap","ring","NOT_DISABLED","block","declarations","split","map","line","trim","filter","Boolean","join","interactiveWebCss","selector","varPrefix","reset","base","transition","hover","pressDeclarations","pressScale","outlineOffset","focus","disabled","extraRules","c","interactive","resetDeclarations","mode","focusDeclarations","disabledOpacity","opacity","undefined","DISABLED_OPACITY","pressRule","useInteractiveWebCss","styleId","css","useEffect","adoptStyleSheet"],"sourceRoot":"../../../src","sources":["styles/interactive-web-css.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/styles/panel-chrome.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PANEL_SHADOW = void 0;
+exports.resolvePanelChrome = resolvePanelChrome;
+exports.useOptionalPanelChrome = useOptionalPanelChrome;
+var _react = require("react");
+var _shared = require("../button/shared.js");
+var _BloomThemeProvider = require("../theme/BloomThemeProvider.js");
+/**
+ * The FLOATING PANEL chrome — the edge Bloom's big surfaces wear: a hairline
+ * plus the soft three-part shadow that lifts a panel off the page background.
+ *
+ * It lives here because two surfaces wear the same thing and had it written
+ * twice: the `Sidebar`'s panel and the framed `ContentPanel`. A panel that only
+ * draws a border reads as a box; the shadow is what makes it a panel.
+ *
+ *   shadow   0 1px 0 (the seat), 0 1px 12px (the soft body), 0 0 1px (the edge
+ *            definition that keeps the hairline from disappearing on a
+ *            same-coloured background)
+ *   border   the CARD colour in light mode — a panel on a tinted page reads as
+ *            a lighter edge, not a grey line — and neutral-800 in dark
+ */
+
+const PANEL_SHADOW = exports.PANEL_SHADOW = {
+  light: '0 1px 0 0 rgba(0, 0, 0, 0.0196), 0 1px 12px 0 rgba(0, 0, 0, 0.0588), 0 0 1px 0 rgba(0, 0, 0, 0.3216)',
+  dark: '0 1px 0 0 rgba(0, 0, 0, 0.1), 0 1px 12px 0 rgba(0, 0, 0, 0.16), 0 0 1px 0 rgba(0, 0, 0, 0.42)'
+};
+function resolvePanelChrome(theme) {
+  const {
+    neutral: n
+  } = (0, _shared.resolveButtonRamps)(theme);
+  const dark = theme.isDark;
+  return {
+    surface: dark ? n[900] : n[100],
+    border: dark ? n[800] : theme.colors.card,
+    shadow: dark ? PANEL_SHADOW.dark : PANEL_SHADOW.light
+  };
+}
+
+/**
+ * The chrome for the current theme, or `null` outside a `BloomThemeProvider`.
+ *
+ * Optional on purpose: `ContentPanel` draws its own surface and had never
+ * touched the theme, so a consumer (or a test) rendering one without the
+ * provider used to work. Making the shadow mandatory would have turned that
+ * into a thrown error at the moment the panel merely got prettier.
+ */
+function useOptionalPanelChrome() {
+  const ctx = (0, _react.useContext)(_BloomThemeProvider.BloomThemeContext);
+  return ctx ? resolvePanelChrome(ctx.theme) : null;
+}
+//# sourceMappingURL=panel-chrome.js.map

package/lib/commonjs/styles/panel-chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_shared","_BloomThemeProvider","PANEL_SHADOW","exports","light","dark","resolvePanelChrome","theme","neutral","n","resolveButtonRamps","isDark","surface","border","colors","card","shadow","useOptionalPanelChrome","ctx","useContext","BloomThemeContext"],"sourceRoot":"../../../src","sources":["styles/panel-chrome.ts"],"mappings":";;;;;;;;AAcA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AAjBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOO,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG;EAC1BE,KAAK,EAAE,sGAAsG;EAC7GC,IAAI,EAAE;AACR,CAAU;AAWH,SAASC,kBAAkBA,CAACC,KAAY,EAAe;EAC5D,MAAM;IAAEC,OAAO,EAAEC;EAAE,CAAC,GAAG,IAAAC,0BAAkB,EAACH,KAAK,CAAC;EAChD,MAAMF,IAAI,GAAGE,KAAK,CAACI,MAAM;EACzB,OAAO;IACLC,OAAO,EAAEP,IAAI,GAAGI,CAAC,CAAC,GAAG,CAAC,GAAGA,CAAC,CAAC,GAAG,CAAC;IAC/BI,MAAM,EAAER,IAAI,GAAGI,CAAC,CAAC,GAAG,CAAC,GAAGF,KAAK,CAACO,MAAM,CAACC,IAAI;IACzCC,MAAM,EAAEX,IAAI,GAAGH,YAAY,CAACG,IAAI,GAAGH,YAAY,CAACE;EAClD,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASa,sBAAsBA,CAAA,EAAuB;EAC3D,MAAMC,GAAG,GAAG,IAAAC,iBAAU,EAACC,qCAAiB,CAAC;EACzC,OAAOF,GAAG,GAAGZ,kBAAkB,CAACY,GAAG,CAACX,KAAK,CAAC,GAAG,IAAI;AACnD","ignoreList":[]}

package/lib/commonjs/styles/surface-levels.js

@@ -0,0 +1,379 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SURFACE_LEVELS = exports.SURFACE_FILL_VAR = exports.SURFACE_FILL_CSS = exports.AA_TEXT_STRONG = exports.AA_TEXT = exports.AA_GRAPHICAL = void 0;
+exports.SurfaceLevelProvider = SurfaceLevelProvider;
+exports.hairlineOn = hairlineOn;
+exports.resolveSurfaceLevel = resolveSurfaceLevel;
+exports.surfaceFillOn = surfaceFillOn;
+exports.surfaceFillVars = surfaceFillVars;
+exports.surfaceTextOn = surfaceTextOn;
+exports.useRingOffsetStyle = useRingOffsetStyle;
+exports.useSurfaceFill = useSurfaceFill;
+exports.useSurfaceLevel = useSurfaceLevel;
+exports.useSurfaceLevelValue = useSurfaceLevelValue;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _useTheme = require("../theme/use-theme.js");
+var _colorContrast = require("./color-contrast.js");
+var _interactiveWebCss = require("./interactive-web-css.js");
+/**
+ * The surface LADDER: one answer to "what colour is the thing I am sitting on,
+ * and what colour is the thing I put on top of it".
+ *
+ * Thirty families had each resolved that themselves, and the result was four
+ * different dark "card on a page" fills in one tree — `#14171c` (chart cards),
+ * `#23262b` (menus, fields, tab rails), `#2e353e` (`theme.colors.card`) and a
+ * per-family mix — plus two light ones. Two of those collisions are not a
+ * cosmetic drift but a disappearing act: a dark text field painted `n[800]`
+ * inside a menu painted `n[800]` measured 1.000:1, and a tab rail painted
+ * `n[800]` inside a queue panel painted `n[800]` measured ΔE 0. In both cases
+ * the control had no shell at all.
+ *
+ * The fix is not another table of hexes. A control cannot know its own parent,
+ * so the only durable form of the answer is RELATIVE: every step is computed
+ * from the fill it lands on.
+ *
+ *   surfaceFillOn(theme, parent)   the next surface up — a field, a track, a tile
+ *   hairlineOn(theme, parent)      the line that separates them
+ *   surfaceTextOn(theme, parent)   text rungs that clear AA *on that fill*
+ *
+ * A step moves the parent fill toward the theme's own `text` colour by a fixed
+ * alpha. That is deliberately the same move the neutral ramp makes, so nothing
+ * new enters the palette — but it is anchored on the ACTUAL parent instead of a
+ * ramp stop that happens to match one page colour.
+ *
+ * **Light and dark are one rule here, not two.** Moving toward `text` darkens a
+ * light surface and lightens a dark one, which is what each mode wants; the
+ * alphas differ only because a dark page has more headroom above it than a light
+ * page has below white.
+ *
+ * ## The named rungs
+ *
+ * `resolveSurfaceLevel(theme, level)` names the four rungs a screen actually
+ * uses, and the first two land on what Bloom already paints, so adopting the
+ * API is not a repaint:
+ *
+ *   0  page          `theme.colors.background`
+ *   1  card on page  light `theme.colors.card` (white), dark one step off the
+ *                    page — `#212327` against the `#23262b` that
+ *                    `floating/menu-palette` has always used, 1.03:1 apart
+ *   2  card on card  one step off level 1 — a popover's inner tile, a field
+ *   3  deep          one step off level 2
+ *
+ * The ladder is NOT monotonic in lightness. In light mode the first step goes
+ * UP to white and every step after goes down; in dark every step goes up. What
+ * is monotonic — and what the gate pins — is the SEPARATION between neighbours:
+ * measured on `blue`, every adjacent pair separates by fill alone (light 1.11 /
+ * 1.15 / 1.15, dark 1.23 / 1.30 / 1.30).
+ *
+ * 1.11:1 is a thin margin, and that is why every rung ALSO carries the `border`
+ * that separates it from its parent (light 1.21 / 1.53 / 1.50). A surface either
+ * separates by fill or it draws its hairline, and on a light page a card needs
+ * the hairline. `surface-levels.test.ts` pins both mechanisms over every preset,
+ * so losing either one goes red.
+ *
+ * ## Ambient level
+ *
+ * `SurfaceLevelProvider` publishes "the fill my children are sitting on", and
+ * `useSurfaceLevel()` reads it. A container that paints a surface raises it;
+ * everything inside then steps off the right parent without being told.
+ * Defaulting to level 0 keeps every unwrapped consumer on the page rung, which
+ * is what it was already assuming.
+ *
+ * ## The rung is a derivation; `fill` is the fact
+ *
+ * A rung ANSWERS the question from the page down, and for a control that only
+ * needs a legible step off its parent that is enough. It is not enough for the
+ * other question a surface gets asked — "paint yourself the same colour as me"
+ * — because a container may paint something the ladder would not have chosen.
+ * `ContentPanel` is exactly that case: it paints `bg-card`, and in DARK mode
+ * `theme.colors.card` is not rung 1 (which is a computed step off the page,
+ * pinned within 1.03:1 of the menu surface). A sticky header that took the rung
+ * would sit a visible shade off the column it is supposed to disappear into.
+ *
+ * So a container that knows exactly what it painted publishes it —
+ * `<SurfaceLevelProvider level={1} fill={colors.card}>` — and `useSurfaceFill()`
+ * returns that colour verbatim. Everything derived (the hairline, the raised
+ * fill, the text rungs) is then computed off the REAL parent, which is what the
+ * relative primitives always wanted and could not have while the parent was
+ * inferred. A provider with no `fill` behaves exactly as it did.
+ *
+ * ## The same answer on web, for CSS that cannot call a hook
+ *
+ * {@link SURFACE_FILL_VAR} (`--bloom-surface`) carries the published fill down
+ * the DOM, so a stylesheet, a `::after` seam or an arbitrary Tailwind value can
+ * follow the surface without the consumer threading a colour through props.
+ * It is set by the same containers, on the element they paint, with
+ * {@link surfaceFillVars} — never at `:root`, which would resolve once for the
+ * whole document and defeat both this and `BloomColorScope` (a subtree scoped
+ * to another preset paints its own `--background`; a root-computed alias keeps
+ * the app-wide one — `theme/color-scope/seed-scope.ts` has the mechanism).
+ *
+ * It is WEB-ONLY, and deliberately: propagating a custom property to a native
+ * subtree means react-native-css's `VariableContextProvider`, i.e. the
+ * `nativewind` OPTIONAL peer, and a panel's own surface must not depend on
+ * whether a consumer installed it. Native's answer is the hook, which is also
+ * the only form that is correct on both platforms — so cross-platform code
+ * reads `useSurfaceFill()` and a web-only fork may read the variable.
+ */
+
+/** WCAG AA for body-size text. */
+const AA_TEXT = exports.AA_TEXT = 4.5;
+/** WCAG AAA-ish: the rung a SECONDARY label sits at, clearly quieter than the primary one. */
+const AA_TEXT_STRONG = exports.AA_TEXT_STRONG = 7;
+/** WCAG AA for large text, icons and graphical objects (gridlines, tracks, rules). */
+const AA_GRAPHICAL = exports.AA_GRAPHICAL = 3;
+
+/**
+ * How far one surface step moves its parent toward `theme.colors.text`.
+ *
+ * Tuned so that the step off the PAGE reproduces what Bloom already painted
+ * there: light `#f3f3f7` → `#e6e6ea` (today's `n[200]`, 1.12:1) and dark
+ * `#0c0e11` → `#21232a` (today's `n[800]`, 1.86:1). Dark takes the larger alpha
+ * because a near-black page has the whole range above it while a light page has
+ * only the sliver below white.
+ */
+const FILL_STEP = {
+  light: 0.07,
+  dark: 0.1
+};
+
+/** The same move, further: a hairline has to read AS a line, not as another fill. */
+const HAIRLINE_STEP = {
+  light: 0.14,
+  dark: 0.2
+};
+
+/**
+ * The next surface up from `parent` — a text field's fill, a progress track, a
+ * stat tile, a hovered row. Always a visible step off whatever it is given.
+ */
+function surfaceFillOn(theme, parent) {
+  return (0, _colorContrast.mixColors)(parent, theme.colors.text, FILL_STEP[theme.isDark ? 'dark' : 'light']);
+}
+
+/** The hairline that reads on `parent` — a divider, a card edge, a tab rail. */
+function hairlineOn(theme, parent) {
+  return (0, _colorContrast.mixColors)(parent, theme.colors.text, HAIRLINE_STEP[theme.isDark ? 'dark' : 'light']);
+}
+
+/** The text rungs legible on one fill. Every member is floored against that fill. */
+
+/**
+ * The three text rungs plus the graphical one, resolved against `parent`.
+ *
+ * A ramp stop cannot do this job: `n[400]` clears AA on the page and measures
+ * 2.42:1 on a chart card, because the card is not the page. Reading the rungs
+ * off the fill they land on is the whole difference.
+ */
+function surfaceTextOn(theme, parent) {
+  const text = theme.colors.text;
+  return {
+    text,
+    textSecondary: (0, _colorContrast.quietText)(parent, text, AA_TEXT_STRONG),
+    textTertiary: (0, _colorContrast.quietText)(parent, text, AA_TEXT),
+    textGraphical: (0, _colorContrast.quietText)(parent, text, AA_GRAPHICAL)
+  };
+}
+
+/** The four rungs a screen stacks. See the module comment for what each one is. */
+
+const SURFACE_LEVELS = exports.SURFACE_LEVELS = [0, 1, 2, 3];
+/** The fill of one rung. Levels 0 and 1 are pinned to what Bloom already paints. */
+function levelBackground(theme, level) {
+  const page = theme.colors.background;
+  if (level === 0) return page;
+  // Level 1 is `card` in light (white) and a step off the page in dark, which is
+  // byte-for-byte the surface `floating/menu-palette` has always used.
+  const card = theme.isDark ? surfaceFillOn(theme, page) : theme.colors.card;
+  if (level === 1) return card;
+  const inner = surfaceFillOn(theme, card);
+  return level === 2 ? inner : surfaceFillOn(theme, inner);
+}
+
+/** Everything a surface paints, given the fill it actually has. */
+function paintOn(theme, level, background) {
+  return {
+    level,
+    background,
+    border: hairlineOn(theme, background),
+    raised: surfaceFillOn(theme, background),
+    ...surfaceTextOn(theme, background)
+  };
+}
+
+/** Everything one rung paints. Pure, so it can be walked over every preset × mode. */
+function resolveSurfaceLevel(theme, level) {
+  return paintOn(theme, level, levelBackground(theme, level));
+}
+
+/**
+ * The CSS custom property carrying the published surface fill to a web subtree.
+ *
+ * Named like `--bloom-ring-offset` (its opposite number: a CONTAINER publishes
+ * this one, a CONTROL consumes that one, and they are the same colour) rather
+ * than like a palette token — it is not one. `--surface` is already a token, and
+ * this deliberately does not shadow it.
+ */
+const SURFACE_FILL_VAR = exports.SURFACE_FILL_VAR = '--bloom-surface';
+
+/**
+ * How to REFERENCE the published fill from CSS or an arbitrary Tailwind value:
+ *
+ * ```
+ * background-color: var(--bloom-surface, var(--background));
+ * className="bg-[var(--bloom-surface,var(--background))]"   // web-only
+ * ```
+ *
+ * The fallback is what makes it safe: the variable exists only where a container
+ * published one, so outside every surface — and in a `BloomColorScope` subtree
+ * that owns no surface of its own — this resolves to the page. Both halves
+ * substitute at the USING element, so a scoped subtree gets the scope's
+ * `--background`, not the document root's.
+ */
+const SURFACE_FILL_CSS = exports.SURFACE_FILL_CSS = `var(${SURFACE_FILL_VAR}, var(--background))`;
+
+/**
+ * The style a surface OWNER puts on the element it paints, so web CSS below it
+ * can read {@link SURFACE_FILL_CSS}. `undefined` on native, where the variable
+ * has no propagation mechanism that does not go through an optional peer (see
+ * the module comment) — the hook is native's answer, and the owner passes this
+ * unconditionally either way.
+ *
+ * It belongs on the SAME element that carries the fill, so the two can never
+ * disagree, and a container that publishes the context publishes this with it.
+ *
+ * `undefined` in, `undefined` out: a container that cannot name its own colour
+ * (see `content-panel/shared.ts`) publishes no variable rather than a wrong one,
+ * and the call site stays one unconditional expression.
+ */
+function surfaceFillVars(fill) {
+  if (fill === undefined || _reactNative.Platform.OS !== 'web') return undefined;
+  // A custom property has no key on RN's `ViewStyle`, and on web it does not
+  // need one: react-native-web compiles every own key of a style object into an
+  // atomic rule, so `--bloom-surface` lands on the element and inherits from
+  // there. `WebCssStyle` is the annotation for exactly that crossing (it is what
+  // keeps this from being an `as ViewStyle`, which silences typos instead of
+  // widening — `styles/web-view-style.ts`).
+  const vars = {
+    [SURFACE_FILL_VAR]: fill
+  };
+  return vars;
+}
+
+/** What a container publishes: the rung, and the fill if it knows it exactly. */
+
+const NO_AMBIENT_SURFACE = {
+  level: 0,
+  fill: null
+};
+const SurfaceLevelContext = /*#__PURE__*/(0, _react.createContext)(NO_AMBIENT_SURFACE);
+/**
+ * Publish the rung this subtree sits on.
+ *
+ * A container that paints a surface wraps its content in this; every descendant
+ * then steps off the right parent. Without it a control assumes level 0, which
+ * is what it assumed before this existed — so adopting it is additive.
+ *
+ * On web, publish {@link surfaceFillVars} on the painted element in the same
+ * breath: the DOM inherits the variable independently of React context, so a
+ * container that sets one and not the other leaves CSS below it reading the
+ * ENCLOSING surface's colour — which is the wrong colour, silently.
+ */
+function SurfaceLevelProvider({
+  level,
+  fill,
+  children
+}) {
+  const value = (0, _react.useMemo)(() => ({
+    level,
+    fill: fill ?? null
+  }), [level, fill]);
+  return /*#__PURE__*/(0, _react.createElement)(SurfaceLevelContext.Provider, {
+    value
+  }, children);
+}
+
+/** The ambient rung, as a number. `0` when nothing published one. */
+function useSurfaceLevelValue() {
+  return (0, _react.useContext)(SurfaceLevelContext).level;
+}
+
+/**
+ * The ambient rung's paint, optionally `delta` rungs above it.
+ *
+ * `useSurfaceLevel()` is "the surface I am on"; `useSurfaceLevel(1)` is "the
+ * surface one level above the current one" — the question every one of those
+ * thirty families was answering by hand.
+ *
+ * When the container published an exact `fill`, every rung above it is STEPPED
+ * off that colour instead of read from the ladder: one step above a real panel
+ * is a step above what the panel actually painted, not a rung that assumed a
+ * different parent.
+ *
+ * Two edges, both resolved by counting the steps the CLAMPED rung actually
+ * costs rather than the delta that was asked for:
+ *
+ *  - a delta that runs off the top asks for the rung it landed on, not for more
+ *    steps than the ladder has (`level 1 + 3` is rung 3, i.e. two steps);
+ *  - a NEGATIVE delta is a question about what is BELOW the published surface,
+ *    and an exact fill says nothing about that — the ladder is the only thing
+ *    that can answer, so it does, instead of clamping to the fill and labelling
+ *    it with a rung it is not.
+ */
+function useSurfaceLevel(delta = 0) {
+  const theme = (0, _useTheme.useTheme)();
+  const {
+    level,
+    fill
+  } = (0, _react.useContext)(SurfaceLevelContext);
+  const next = Math.min(3, Math.max(0, level + delta));
+  const steps = next - level;
+  return (0, _react.useMemo)(() => {
+    if (fill === null || steps < 0) return resolveSurfaceLevel(theme, next);
+    let background = fill;
+    for (let i = 0; i < steps; i += 1) background = surfaceFillOn(theme, background);
+    return paintOn(theme, next, background);
+  }, [theme, next, fill, steps]);
+}
+
+/**
+ * Just the ambient fill — for a control that only needs to know what is behind
+ * it, and for chrome that has to BE that colour (an opaque sticky header over a
+ * scrolling column, a tab bar, a search field's backing).
+ *
+ * This is the one to reach for over `theme.colors.card`: `card` is a palette
+ * token — the colour a CARD paints — and it is right only for as long as the
+ * surface you happen to be inside is a card. This answers what the surface
+ * around you actually painted, whatever that surface turns out to be, so the
+ * app does not repeat a guess at every call site and does not have to be swept
+ * when a container changes what it paints.
+ */
+function useSurfaceFill() {
+  const theme = (0, _useTheme.useTheme)();
+  const {
+    level,
+    fill
+  } = (0, _react.useContext)(SurfaceLevelContext);
+  return (0, _react.useMemo)(() => fill ?? levelBackground(theme, level), [theme, level, fill]);
+}
+
+/**
+ * The inline style that gives a focus ring's GAP the colour of the surface
+ * behind the control.
+ *
+ * `styles/interactive-web-css.ts` `RING_OFFSET_VAR` explains why the gap is a
+ * variable at all: as the literal `#FFFFFF` it drew a 2px white halo around
+ * every focused chip, stepper and slider thumb in dark mode. Spread it into the
+ * control's own `style` alongside its accent ring variable.
+ */
+function useRingOffsetStyle() {
+  const surface = useSurfaceFill();
+  return (0, _react.useMemo)(() => ({
+    [_interactiveWebCss.RING_OFFSET_VAR]: surface
+  }), [surface]);
+}
+//# sourceMappingURL=surface-levels.js.map

package/lib/commonjs/styles/surface-levels.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_useTheme","_colorContrast","_interactiveWebCss","AA_TEXT","exports","AA_TEXT_STRONG","AA_GRAPHICAL","FILL_STEP","light","dark","HAIRLINE_STEP","surfaceFillOn","theme","parent","mixColors","colors","text","isDark","hairlineOn","surfaceTextOn","textSecondary","quietText","textTertiary","textGraphical","SURFACE_LEVELS","levelBackground","level","page","background","card","inner","paintOn","border","raised","resolveSurfaceLevel","SURFACE_FILL_VAR","SURFACE_FILL_CSS","surfaceFillVars","fill","undefined","Platform","OS","vars","NO_AMBIENT_SURFACE","SurfaceLevelContext","createContext","SurfaceLevelProvider","children","value","useMemo","createElement","Provider","useSurfaceLevelValue","useContext","useSurfaceLevel","delta","useTheme","next","Math","min","max","steps","i","useSurfaceFill","useRingOffsetStyle","surface","RING_OFFSET_VAR"],"sourceRoot":"../../../src","sources":["styles/surface-levels.ts"],"mappings":";;;;;;;;;;;;;;;;AAoGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAGA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AA1GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA;AACO,MAAMK,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,GAAG;AAC1B;AACO,MAAME,cAAc,GAAAD,OAAA,CAAAC,cAAA,GAAG,CAAC;AAC/B;AACO,MAAMC,YAAY,GAAAF,OAAA,CAAAE,YAAA,GAAG,CAAC;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,GAAG;EAAEC,KAAK,EAAE,IAAI;EAAEC,IAAI,EAAE;AAAI,CAAU;;AAErD;AACA,MAAMC,aAAa,GAAG;EAAEF,KAAK,EAAE,IAAI;EAAEC,IAAI,EAAE;AAAI,CAAU;;AAEzD;AACA;AACA;AACA;AACO,SAASE,aAAaA,CAACC,KAAY,EAAEC,MAAc,EAAU;EAClE,OAAO,IAAAC,wBAAS,EAACD,MAAM,EAAED,KAAK,CAACG,MAAM,CAACC,IAAI,EAAET,SAAS,CAACK,KAAK,CAACK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAA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","ignoreList":[]}

package/lib/commonjs/styles/tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.space = exports.lineHeight = exports.gradients = exports.fontSize = exports.borderRadius = exports.animation = void 0;
+exports.space = exports.lineHeight = exports.gradients = exports.fontSize = exports.borderRadius = exports.animation = exports.DISABLED_OPACITY = void 0;
 var _scales = require("../design-tokens/scales.js");
 /**
  * The t-shirt-keyed VIEW of `design-tokens/scales.ts`.
@@ -142,4 +142,30 @@ const gradients = exports.gradients = {
     hover_value: '#0A7AFF'
   }
 };
+
+/**
+ * How far a disabled control fades.
+ *
+ * ONE value, because three were in the tree: 0.5 in twenty-five places, 0.4 in
+ * six (`listing-actions`, `track-list`, `accordion`, `composer-panel`,
+ * `agent-chat`) and 0.6 in one (`listing-card`'s favourite button). Nothing
+ * distinguished them — the same kind of icon button faded to three different
+ * depths depending on which family drew it.
+ *
+ * **The convention.** A control that can RECOLOUR when disabled recolours: it
+ * swaps to the theme's own disabled fill and foreground and keeps opacity 1.
+ * That is what `Button` does, and it is preferred, because a fade multiplies
+ * against whatever is behind the control — over a coloured card a 0.5 label goes
+ * muddy rather than quiet, and a fade stacks when a disabled control sits inside
+ * a disabled group.
+ *
+ * Opacity is the fallback, for a control with NO token pair to swap to — an icon
+ * drawn in `currentColor`, a `Pressable` painting nothing of its own, a row of
+ * mixed children. When it is used, it is this number. A disabled control is
+ * exempt from the WCAG contrast floors, which is what makes a single blanket
+ * value defensible at all; it is not licence to pick a new one per family.
+ *
+ * Gate: `disabled-convention.test.ts`.
+ */
+const DISABLED_OPACITY = exports.DISABLED_OPACITY = 0.5;
 //# sourceMappingURL=tokens.js.map