@oxy.so/bloom 2.10.0 → 2.11.0

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

package/lib/commonjs/styles/tokens.js.map

@@ -1 +1 @@
-{"version":3,"names":["_scales","require","space","exports","_2xs","SPACING","xs","sm","md","lg","xl","_2xl","_3xl","_4xl","_5xl","fontSize","lineHeight","tight","snug","normal","relaxed","borderRadius","RADIUS","full","animation","duration","instant","fast","slow","spring","snappy","friction","tension","gentle","bouncy","pressScale","gradients","primary","values","hover_value","sky"],"sourceRoot":"../../../src","sources":["styles/tokens.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_scales","require","space","exports","_2xs","SPACING","xs","sm","md","lg","xl","_2xl","_3xl","_4xl","_5xl","fontSize","lineHeight","tight","snug","normal","relaxed","borderRadius","RADIUS","full","animation","duration","instant","fast","slow","spring","snappy","friction","tension","gentle","bouncy","pressScale","gradients","primary","values","hover_value","sky","DISABLED_OPACITY"],"sourceRoot":"../../../src","sources":["styles/tokens.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/styles/web-data.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webDataSet = webDataSet;
+var _reactNative = require("react-native");
+const IS_WEB = _reactNative.Platform.OS === 'web';
+
+/**
+ * The web-only `dataSet` hook an adopted sheet's selectors hang off, as spread
+ * props: react-native-web's channel to a `data-*` attribute (a class never
+ * reaches the DOM here), and nothing on native.
+ *
+ * ONE copy for the whole package — thirteen families had grown their own,
+ * byte for byte the same, under two names (`webDataSet` and `webDataSet`).
+ *
+ * ```tsx
+ * <Pressable {...webDataSet({ 'bloom-track-row': 'true' })} />
+ * // web:    <div data-bloom-track-row="true">
+ * // native: nothing
+ * ```
+ */
+function webDataSet(entries) {
+  return IS_WEB ? {
+    dataSet: entries
+  } : {};
+}
+//# sourceMappingURL=web-data.js.map

package/lib/commonjs/styles/web-data.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","IS_WEB","Platform","OS","webDataSet","entries","dataSet"],"sourceRoot":"../../../src","sources":["styles/web-data.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,MAAMC,MAAM,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,UAAUA,CAACC,OAA+B,EAA2B;EACnF,OAAOJ,MAAM,GAAG;IAAEK,OAAO,EAAED;EAAQ,CAAC,GAAG,CAAC,CAAC;AAC3C","ignoreList":[]}

package/lib/commonjs/tabs/Tabs.js

@@ -13,7 +13,9 @@ var _index = require("../typography/index.js");
 var _scale = require("../typography/scale.js");
 var _useInteractionState = require("../hooks/use-interaction-state.js");
 var _tokens = require("../styles/tokens.js");
+var _surfaceLevels = require("../styles/surface-levels.js");
 var _interactiveWebCss = require("../styles/interactive-web-css.js");
+var _webData = require("../styles/web-data.js");
 var _shared = require("../button/shared.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -124,20 +126,27 @@ function resolveVariant(variant) {
  * Every colour a strip paints, per variant. Pure — takes the theme rather than
  * calling `useTheme()`, so it can be walked over presets and modes.
  */
-function resolveTabsPaint(theme, variant) {
+function resolveTabsPaint(theme, variant, surface = theme.colors.background) {
   const {
     accent,
     neutral: n
   } = (0, _shared.resolveButtonRamps)(theme);
   const c = theme.colors;
   const dark = theme.isDark;
+  // The rail, the hover row and the filled thumb are STEPS OFF the strip's own
+  // surface, not ramp stops. As `neutral-800` the dark rail was byte for byte
+  // the fill `queue-panel` (and every other menu-surface family) paints its
+  // panel with — ΔE 0, so a tab strip inside one had no rail at all. On the page
+  // these land within 0.04 of the colours they replaced.
+  const hairline = (0, _surfaceLevels.hairlineOn)(theme, surface);
+  const raised = (0, _surfaceLevels.surfaceFillOn)(theme, surface);
   const count = {
     countSelectedBackground: dark ? (0, _shared.mixColor)(c.background, accent[800], 0.6) : accent[100],
     countSelectedForeground: accent[600],
     // `bg-black/10` in both modes.
     countIdleBackground: 'rgba(0, 0, 0, 0.1)',
     countIdleForeground: c.text,
-    separator: dark ? n[800] : n[200],
+    separator: hairline,
     underline: accent[600],
     ring: accent[500]
   };
@@ -156,7 +165,7 @@ function resolveTabsPaint(theme, variant) {
       return {
         ...count,
         thumb: dark ? (0, _shared.mixColor)(c.background, accent[950], 0.6) : accent[50],
-        hover: dark ? n[800] : n[100],
+        hover: raised,
         selectedLabel: accent[500],
         selectedIcon: accent[500],
         idleLabel: n[500],
@@ -166,8 +175,8 @@ function resolveTabsPaint(theme, variant) {
     default:
       return {
         ...count,
-        thumb: dark ? n[800] : n[200],
-        hover: dark ? (0, _shared.mixColor)(c.background, n[700], 0.6) : n[100],
+        thumb: raised,
+        hover: dark ? (0, _shared.mixColor)(surface, n[700], 0.6) : (0, _surfaceLevels.surfaceFillOn)(theme, raised),
         selectedLabel: c.text,
         selectedIcon: c.text,
         idleLabel: n[500],
@@ -207,11 +216,6 @@ const GEOMETRY = {
 /** The strip's gap between triggers (`gap-1`), both variants. */
 const STRIP_GAP = 4;
 const IS_WEB = _reactNative.Platform.OS === 'web';
-function webData(data) {
-  return IS_WEB ? {
-    dataSet: data
-  } : {};
-}
 
 // ---------------------------------------------------------------------------
 //  Web: keyboard focus ring, colour transitions, disabled cursor
@@ -298,7 +302,8 @@ const TabsBarComponent = /*#__PURE__*/(0, _react.forwardRef)(function TabsBar({
   (0, _interactiveWebCss.useInteractiveWebCss)(STYLE_ID, BLOOM_TABS_CSS);
   const resolvedVariant = resolveVariant(variant);
   const isUnderline = resolvedVariant === 'underline';
-  const paint = (0, _react.useMemo)(() => resolveTabsPaint(theme, variant), [theme, variant]);
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => resolveTabsPaint(theme, variant, surface), [theme, variant, surface]);
   const reducedMotion = (0, _reactNativeReanimated.useReducedMotion)();
   const slideTiming = isUnderline ? UNDERLINE_TIMING : PILL_TIMING;
 
@@ -734,7 +739,7 @@ const TabComponent = ({
     color: labelColor
   }), [isUnderline, isSelected, labelColor]);
   const renderedIcon = LeadingIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    ...webData({
+    ...(0, _webData.webDataSet)({
       bloomTabsIcon: ''
     }),
     style: {
@@ -763,7 +768,7 @@ const TabComponent = ({
       flex: 1
     } : undefined,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-      ...webData({
+      ...(0, _webData.webDataSet)({
         bloomTabsTrigger: variant
       }),
       style: [triggerStyle, fullWidth && {
@@ -793,7 +798,7 @@ const TabComponent = ({
       "aria-selected": isSelected,
       children: [showHoverLayer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         pointerEvents: "none",
-        ...webData({
+        ...(0, _webData.webDataSet)({
           bloomTabsHover: ''
         }),
         style: {
@@ -813,7 +818,7 @@ const TabComponent = ({
           gap: geometry.labelGap
         },
         children: [renderedIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
-          ...webData({
+          ...(0, _webData.webDataSet)({
             bloomTabsLabel: ''
           }),
           numberOfLines: 1,