@multiplatform.one/theme 8.2.2 → 8.4.0

package/dist/esm/theme/useResolvedKnobs.native.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { useThemeName } from "tamagui";
 import { useTouchSurface } from "./useTouchSurface.native.js";
 import { defaultKnobs } from "./knobs.native.js";
@@ -6,6 +6,7 @@ import { resolveKnobs } from "./resolveKnobs.native.js";
 import { usePresetContext } from "./PresetContext.native.js";
 import { defaultIntents } from "./intents.native.js";
 import { clampSurfaceSize, SurfaceContext } from "./Surface.native.js";
+import { usePrefersReducedMotion } from "./reducedMotion.native.js";
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
@@ -15,35 +16,6 @@ var IntentContext = createContext(null);
 function useIntentContext() {
   return useContext(IntentContext);
 }
-var reducedMotionQuery = "(prefers-reduced-motion: reduce)";
-var serverReducedMotion = function serverReducedMotion2() {
-  return false;
-};
-function readReducedMotion() {
-  var _window_matchMedia, _window;
-  return typeof window !== "undefined" && !!((_window_matchMedia = (_window = window).matchMedia) === null || _window_matchMedia === void 0 ? void 0 : _window_matchMedia.call(_window, reducedMotionQuery).matches);
-}
-function subscribeReducedMotion(notify) {
-  if (typeof window === "undefined" || !window.matchMedia) return function () {};
-  var mq = window.matchMedia(reducedMotionQuery);
-  if (typeof mq.addEventListener === "function") {
-    mq.addEventListener("change", notify);
-    return function () {
-      return mq.removeEventListener("change", notify);
-    };
-  }
-  if (typeof mq.addListener === "function") {
-    mq.addListener(notify);
-    return function () {
-      var _mq_removeListener;
-      return (_mq_removeListener = mq.removeListener) === null || _mq_removeListener === void 0 ? void 0 : _mq_removeListener.call(mq, notify);
-    };
-  }
-  return function () {};
-}
-function usePrefersReducedMotion() {
-  return useSyncExternalStore(subscribeReducedMotion, readReducedMotion, serverReducedMotion);
-}
 var solidButtonIntents = /* @__PURE__ */new Set(["error", "warning", "success"]);
 var solidPaletteThemes = /* @__PURE__ */new Set(["accent"]);
 function useResolvedKnobs(options) {

package/dist/esm/theme/useResolvedKnobs.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContext","useMemo","useSyncExternalStore","useThemeName","useTouchSurface","defaultKnobs","resolveKnobs","usePresetContext","defaultIntents","clampSurfaceSize","SurfaceContext","_type_of","obj","Symbol","constructor","IntentContext","useIntentContext","reducedMotionQuery","serverReducedMotion","serverReducedMotion2","readReducedMotion","_window_matchMedia","_window","window","matchMedia","call","matches","subscribeReducedMotion","notify","mq","addEventListener","removeEventListener","addListener","_mq_removeListener","removeListener","usePrefersReducedMotion","solidButtonIntents","Set","solidPaletteThemes","useResolvedKnobs","options","_ref","_ref1","_ref2","_ref3","_ref4","touch","presetCtx","contextIntent","prefersReducedMotion","themeName","scheme","startsWith","surfaceCtx","useStyledContext","surfaceSize","size","painted","intent","component","override","sizeOverride","baseKnobs","preset","knobs","overrides","merged","_ref5","intentOverrides","intents","knobOverrides","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Object","entries","iterator","_step","next","done","key","value","err","return"],"sources":["../../../src/theme/useResolvedKnobs.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","useMemo","useThemeName","useTouchSurface","defaultKnobs","resolveKnobs","usePresetContext","defaultIntents","clampSurfaceSize","SurfaceContext","usePrefersReducedMotion","_type_of","obj","Symbol","constructor","IntentContext","useIntentContext","solidButtonIntents","Set","solidPaletteThemes","useResolvedKnobs","options","_ref","_ref1","_ref2","_ref3","_ref4","touch","presetCtx","contextIntent","prefersReducedMotion","themeName","scheme","startsWith","surfaceCtx","useStyledContext","surfaceSize","size","painted","intent","component","override","sizeOverride","baseKnobs","preset","knobs","overrides","merged","_ref5","intentOverrides","intents","knobOverrides","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_iterator","Object","entries","iterator","_step","next","done","key","value","err","return","componentOverride"],"sources":["../../../src/theme/useResolvedKnobs.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "8.2.2",
+  "version": "8.4.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -163,8 +163,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^8.2.2",
-    "@multiplatform.one/store": "^8.2.2",
+    "@multiplatform.one/platform": "^8.4.0",
+    "@multiplatform.one/store": "^8.4.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -180,8 +180,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "8.2.2",
-    "@multiplatform.one/test-utils": "8.2.2",
+    "@multiplatform.one/config": "8.4.0",
+    "@multiplatform.one/test-utils": "8.4.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/build": "2.7.6",

package/src/figma/figmaTokens.spec.ts

@@ -104,7 +104,8 @@ describe("buildFigmaTokens", () => {
       // BUILDER's derivation again rather than mpo's re-anchoring. That is
       // the correction landing, and what this pins is that it landed —
       // borderColor back off color5, the background states no longer forced.
-      expect(result.semantic.borderColor?.alias).toBe("color4");
+      // FZ-9281: the dark edge is measured per scope, so no one alias either.
+      expect(result.semantic.borderColor?.alias).toBeNull();
       // LC-152: the secondary ink is a different ramp step per scheme, so no one alias.
       expect(result.semantic.textMuted?.alias).toBeNull();
       expect(result.semantic.placeholderColor?.alias).toBe("color9");

package/src/index.gnome.ts

@@ -207,6 +207,7 @@ export {
   controlTierDisabled,
   controlTierPaint,
   controlTierWash,
+  controlTrackFill,
   isDarkThemeName,
 } from "./theme/controlTiers";
 export type { ControlTier, ControlTierPaint } from "./theme/controlTiers";
@@ -541,4 +542,5 @@ export type { ThemeSubset } from "./theme/subsetThemes";
 export type { SizeKey } from "./theme/scale/scaleInputs";
 export { listHeightForRows } from "./theme/listRows";
 export { useTouchSurface } from "./theme/useTouchSurface";
+export { tokenNumber } from "./theme/tokenNumber";
 export type { GenericFonts, MediaQueryKey, ThemeName } from "@tamagui/web";

package/src/menuRow.palette.spec.ts

@@ -1,8 +1,10 @@
 /**
- * FZ-8557 (Round 40): a checked menu row is a selection tint on its panel in
- * every theme. Dark steps lighter than the `$color4` overlay, never a hole;
- * light stays a tint on the white panel, never a slab; the check is the
- * accent (ink when hue-less) and holds 3:1 on the fill.
+ * FZ-8557 (Round 40), FZ-8400 (Round 52): a checked menu row is a selection
+ * tint on its panel in every theme. Dark sits exactly one ramp step above the
+ * `$color5` overlay and never jumps two, lighter, never a hole; measured, that
+ * step stays under 1.33:1, the stock ramp's widest at `$color5` to `$color6`.
+ * Light stays a tint on the white panel, `$color3`, never a slab, under 1.3:1.
+ * The check is the accent (ink when hue-less) and holds 3:1 on the fill.
  */
 import { describe, expect, it } from "vitest";
 import { contrastRatio, normalizeToHex, relativeLuminance } from "./theme/colorRules";
@@ -35,12 +37,23 @@ describe("a checked menu row is a selection tint on its panel (FZ-8557)", () =>
       it(`${name}`, () => {
         const theme = themes[name];
         expect(theme, name).toBeTruthy();
-        const panel = token(theme!, scheme === "dark" ? "$color4" : "$background");
-        const fill = token(theme!, menuRowChecked(scheme).backgroundColor);
+        const panel = token(theme!, scheme === "dark" ? "$color5" : "$background");
+        const fillToken = menuRowChecked(scheme).backgroundColor;
+        const fill = token(theme!, fillToken);
         const ratio = contrastRatio(lum(fill), lum(panel));
         if (scheme === "dark") expect(lum(fill), `${fill} on ${panel}`).toBeGreaterThan(lum(panel));
         else expect(lum(fill), `${fill} on ${panel}`).toBeLessThan(lum(panel));
-        expect(ratio, `${fill} on ${panel}`).toBeLessThan(1.3);
+        if (scheme === "dark") {
+          const panelStep = Array.from({ length: 12 }, (_, i) => i + 1).find(
+            (step) => token(theme!, `$color${step}`) === panel,
+          );
+          expect(panelStep, `${panel} is a ramp step`).toBeDefined();
+          expect(
+            Number(fillToken.replace("$color", "")) - panelStep!,
+            `${fillToken} on step ${panelStep}`,
+          ).toBe(1);
+        }
+        expect(ratio, `${fill} on ${panel}`).toBeLessThan(scheme === "dark" ? 1.33 : 1.3);
         const check = resolveMenuRowCheckInk(theme!);
         expect(contrastRatio(lum(check), lum(fill)), `${check} on ${fill}`).toBeGreaterThanOrEqual(
           3,

package/src/menuRow.spec.ts

@@ -36,8 +36,8 @@ describe("menuRowChecked (LC-262 checked row, FZ-8355 r6, FZ-8557)", () => {
     expect(menuRowChecked("light").backgroundColor).toBe("$color3");
   });
 
-  it("lifts dark rows to $color5, a step lighter than the $color4 dark overlay", () => {
-    expect(menuRowChecked("dark").backgroundColor).toBe("$color5");
+  it("lifts dark rows to $color6, a step lighter than the $color5 dark overlay", () => {
+    expect(menuRowChecked("dark").backgroundColor).toBe("$color6");
   });
 
   it("keeps the fill through hover and press, and leaves focus rings to the consumer", () => {

package/src/menuRow.ts

@@ -44,8 +44,8 @@ export const menuRowFrame = {
  * The fill is a selection tint one step off the panel toward the ink, the way
  * HIG lifts a selection off its material (FZ-8557, Round 40). Light rests on
  * `$color3` over the white `$color1` panel, a tint and not the `$color4` slab.
- * A dark overlay is `$color4` (`surface2`), so dark rests on `$color5`, a step
- * lighter: a recessed `$color2` read as a hole in the panel. In a colour theme
+ * A dark overlay is `$color5` (the house `surface2`, FZ-8400), so dark rests on
+ * `$color6`, a step lighter: a recessed `$color2` read as a hole in the panel. In a colour theme
  * both steps carry its hue. Hover and press keep the fill, so a checked row
  * never drops to the transient hover fill. Spread it last on the row so it
  * wins over the consumer's hover and keyboard-cursor fills; a consumer that
@@ -53,7 +53,7 @@ export const menuRowFrame = {
  * the consumer's.
  */
 export function menuRowChecked(scheme: ColorScheme) {
-  const fill = scheme === "dark" ? "$color5" : "$color3";
+  const fill = scheme === "dark" ? "$color6" : "$color3";
   return {
     backgroundColor: fill,
     hoverStyle: { backgroundColor: fill },

package/src/theme/accentInk.ts

@@ -109,6 +109,12 @@ export function identityKeys(themeName: string): string[] {
     : accentStepKeys;
 }
 
+export function pageSurfaces(name: string, values: Record<string, string>): (string | undefined)[] {
+  return name.startsWith("dark")
+    ? [values.color1, values.color2, values.color5]
+    : [values.color1, values.color2];
+}
+
 /**
  * FZ-9608. Every theme with the ink {@link useAccentOnSurface} picks inside it,
  * as `accentOnSurface`. On web the hook then hands back `$accentOnSurface`, so
@@ -125,7 +131,7 @@ export function withAccentOnSurface(
       const accentOnSurface = resolveAccentOnSurface({
         identity: identityKeys(name).map((key) => values[key]),
         accentSteps: accentStepKeys.map((key) => values[key]),
-        surfaces: [values.color1, values.color2],
+        surfaces: pageSurfaces(name, values),
         ink: values.color12,
       });
       return [name, { ...theme, accentOnSurface }];
@@ -149,7 +155,7 @@ export function withIdentityInk(
       if (!values.color12) return [name, theme];
       const identityInk = resolveIdentityInk({
         candidates: identityKeys(name).map((key) => values[key]),
-        surfaces: [values.color1, values.color2],
+        surfaces: pageSurfaces(name, values),
         ink: values.color12,
       });
       return [name, { ...theme, identityInk }];

package/src/theme/accentOnSurface.spec.tsx

@@ -63,7 +63,12 @@ function Probe({ seen }: { seen: Seen }) {
   const accent = useAccentOnSurface();
   seen.accent = accent.startsWith("$") ? (theme[accent.slice(1)]?.val ?? accent) : accent;
   seen.identity = useIdentityInkOnSurface();
-  seen.surfaces = [theme.color1?.val ?? "", theme.color2?.val ?? ""];
+  // A dark overlay paints `$color5`, so dark accent ink holds AA there too (FZ-8400).
+  seen.surfaces = [
+    theme.color1?.val ?? "",
+    theme.color2?.val ?? "",
+    ...(String(seen.name).startsWith("dark") ? [theme.color5?.val ?? ""] : []),
+  ];
   seen.accentSteps = Array.from({ length: 12 }, (_, i) => theme[`accent${i + 1}`]?.val ?? "");
   return null;
 }

package/src/theme/chartPalette.spec.ts

@@ -113,7 +113,7 @@ describe("resolveChartPalette", () => {
     }
   });
 
-  it("retains the dark cycle order while deepening its failing violet slot", () => {
+  it("retains the dark cycle order while lightening its failing violet slot", () => {
     const palette = resolveChartPalette({ scheme: "dark", identitySolid: "#aaaaaa" });
     expect(palette.categorical).toEqual([
       Colors.blueDark.blue9,
@@ -122,7 +122,7 @@ describe("resolveChartPalette", () => {
       Colors.amberDark.amber9,
       Colors.pinkDark.pink9,
       Colors.tealDark.teal9,
-      Colors.violetDark.violet10,
+      Colors.violetDark.violet11,
       Colors.redDark.red9,
     ]);
   });

package/src/theme/chartPalette.ts

@@ -48,8 +48,8 @@ export interface ResolveChartPaletteInput {
   /** Ordered alternatives when the identity cannot meet the mark contrast floor. */
   identityCandidates?: readonly (string | undefined)[];
   /**
-   * The active colour theme's page and Card fills (`$color2` and `$color3`
-   * under v5's templates, the same in every sub-theme of that colour). A
+   * The active colour theme's page and Card fills (`$background` and the
+   * LC-151 card step, the same in every sub-theme of that colour). A
    * tint's surfaces are deeper than the reference whites, so the identity
    * must clear them too, and one palette serves a chart on the page or in a
    * Card.
@@ -67,8 +67,8 @@ export interface ResolveChartPaletteInput {
  * Fixed categorical hue cycle: Radix solids ordered so neighbouring
  * entries sit far apart on the hue wheel (min adjacent distance ~78°).
  * Light blue, orange, green, amber and teal deepen within their hue to clear
- * 3:1 on every built page and Card surface. Dark violet deepens for tinted
- * card backgrounds.
+ * 3:1 on every built page and Card surface. Dark violet lightens to step 11
+ * to clear the tinted `$color4` cards (FZ-8400).
  */
 const categoricalHueCycle = [
   { family: "blue", light: Colors.blue.blue10, dark: Colors.blueDark.blue9 },
@@ -77,7 +77,7 @@ const categoricalHueCycle = [
   { family: "amber", light: Colors.amber.amber11, dark: Colors.amberDark.amber9 },
   { family: "pink", light: Colors.pink.pink9, dark: Colors.pinkDark.pink9 },
   { family: "teal", light: Colors.teal.teal11, dark: Colors.tealDark.teal9 },
-  { family: "violet", light: Colors.violet.violet9, dark: Colors.violetDark.violet10 },
+  { family: "violet", light: Colors.violet.violet9, dark: Colors.violetDark.violet11 },
   { family: "red", light: Colors.red.red9, dark: Colors.redDark.red9 },
 ] as const;
 
@@ -298,10 +298,10 @@ export function useChartPalette(): ChartPalette {
   const isTint = nameParts.length > 1 && tintHueNames.has(nameParts[1]);
   const color9 = theme.color9?.val;
   const accent = theme.accentBackground?.val;
-  const page = theme.color2?.val;
-  // The Card fill on the LC-151 ladder: the grouped white step in light, one
-  // step above the page in dark.
-  const card = (scheme === "light" ? theme.color1 : theme.color3)?.val;
+  const page = (theme.background ?? theme.color2)?.val;
+  // The Card fill on the LC-151 ladder: the grouped white step in light,
+  // `$color4` in dark (FZ-8400).
+  const card = (scheme === "light" ? theme.color1 : theme.color4)?.val;
   const identitySolid = isTint ? (color9 ?? accent) : (accent ?? color9);
   const color10 = theme.color10?.val;
   const color11 = theme.color11?.val;

package/src/theme/colorRules.ts

@@ -116,6 +116,19 @@ export function isLightGround(ground: string): boolean {
   return hex !== null && relativeLuminance(hex) > 0.5;
 }
 
+/**
+ * The ground an off Switch track is measured over (LC-172): the page in light,
+ * the `$color4` card or field in dark, where grouped layouts put a switch and
+ * where UISwitch composites its system fill over the cell (FZ-8400).
+ */
+export function switchOffGround(scope: {
+  background?: string;
+  color4?: string;
+}): string | undefined {
+  if (!scope.background) return undefined;
+  return isLightGround(scope.background) ? scope.background : (scope.color4 ?? scope.background);
+}
+
 /** HIG's system fill at `alpha` composited over `ground`, as an opaque hex colour. */
 export function systemFillHex(ground: string, alpha: number): string | null {
   const hex = normalizeToHex(ground);

package/src/theme/controlEdges.spec.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from "vitest";
+import { contrastRatio, minContrastRatio, normalizeToHex, relativeLuminance } from "./colorRules";
+import { createThemesBuilder } from "./createThemes";
+import { resolveThemeThroughParents } from "./dedupeInherited";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+
+const themes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const intents = new Set(["error", "warning", "success"]);
+
+function ratio(a: string | undefined, b: string | undefined) {
+  const aHex = normalizeToHex(a ?? "");
+  const bHex = normalizeToHex(b ?? "");
+  if (!aHex || !bHex) throw new Error(`Expected opaque colours: ${a}, ${b}`);
+  return contrastRatio(relativeLuminance(aHex), relativeLuminance(bHex));
+}
+
+const resolve = (name: string) =>
+  resolveThemeThroughParents(themes, name) as unknown as Record<string, string>;
+
+const scopes = Object.keys(themes).filter(
+  (name) => /^(light|dark)(_[a-z]+)?$/.test(name) && !/_(accent|active)$/.test(name),
+);
+const hueScopes = scopes.filter((name) => !intents.has(name.split("_")[1] ?? ""));
+const intentScopes = scopes.filter((name) => intents.has(name.split("_")[1] ?? ""));
+
+describe("LC-299 CONTROL-EDGE: control edges clear WCAG 1.4.11's 3:1", () => {
+  it("covers both schemes and every preset hue", () => {
+    for (const hue of ["blue", "purple", "green", "orange", "pink"]) {
+      expect(hueScopes).toContain(`light_${hue}`);
+      expect(hueScopes).toContain(`dark_${hue}`);
+    }
+  });
+
+  for (const scope of hueScopes) {
+    it(`${scope}: field edges hold 3:1 on the page and on their own fill`, () => {
+      const page = resolve(scope);
+      for (const control of ["Input", "TextArea", "SelectTrigger", "InputContainerFrame"]) {
+        const field = resolve(`${scope}_${control}`);
+        for (const key of ["borderColorField", "borderColorFieldHover"]) {
+          expect(
+            ratio(field[key], page.background),
+            `${control} ${key} on page`,
+          ).toBeGreaterThanOrEqual(minContrastRatio);
+          expect(
+            ratio(field[key], field.background),
+            `${control} ${key} on its fill`,
+          ).toBeGreaterThanOrEqual(minContrastRatio);
+        }
+      }
+    });
+
+    it(`${scope}: the segmented frame edge holds 3:1 on the page`, () => {
+      const page = resolve(scope);
+      expect(ratio(page.borderColorControl, page.background)).toBeGreaterThanOrEqual(
+        minContrastRatio,
+      );
+    });
+
+    it(`${scope}: the off Switch track edge`, () => {
+      const page = resolve(scope);
+      const track = resolve(`${scope}_Switch`);
+      if (scope.startsWith("light")) {
+        expect(ratio(track.switchTrackOffBorder, page.background)).toBeGreaterThanOrEqual(
+          minContrastRatio,
+        );
+      } else {
+        expect(track.switchTrackOffBorder).toBe(track.switchTrackOff);
+      }
+    });
+  }
+
+  for (const scope of intentScopes) {
+    it(`${scope}: an intent field edge comes from its own ramp and holds 3:1`, () => {
+      const scheme = scope.split("_")[0]!;
+      const own = Array.from({ length: 12 }, (_, index) => themes[scope]![`color${index + 1}`]);
+      const pages = hueScopes.filter((name) => name.startsWith(`${scheme}_`)).concat(scheme);
+      for (const control of ["Input", "TextArea", "SelectTrigger", "InputContainerFrame"]) {
+        const field = resolve(`${scope}_${control}`);
+        for (const key of ["borderColorField", "borderColorFieldHover"]) {
+          expect(own, `${control} ${key}`).toContain(field[key]);
+          for (const page of pages)
+            expect(
+              ratio(field[key], resolve(page).background),
+              `${control} ${key} on ${page}`,
+            ).toBeGreaterThanOrEqual(minContrastRatio);
+          expect(
+            ratio(field[key], field.background),
+            `${control} ${key} on its fill`,
+          ).toBeGreaterThanOrEqual(minContrastRatio);
+        }
+      }
+    });
+  }
+
+  it("picks a neutral edge, not a tint that reads as the accent", () => {
+    for (const scope of hueScopes) {
+      const scheme = scope.split("_")[0]!;
+      const neutral = Array.from(
+        { length: 12 },
+        (_, index) => themes[scheme]![`color${index + 1}`],
+      );
+      const page = resolve(scope);
+      expect(neutral, `${scope} field`).toContain(page.borderColorField);
+      expect(neutral, `${scope} control`).toContain(page.borderColorControl);
+    }
+  });
+});

package/src/theme/controlTiers.ts

@@ -4,11 +4,11 @@
  *
  * - `tinted`, in content: a filled wash with no edge, the preset's radius and
  *   the size token's height. Light washes at `$color3` (#ededed on the stock
- *   ramp), dark one step further up at `$color4`, because dark `$color3` sits
- *   a single lightness point off the page and the button would vanish. On an
- *   elevated ground (`useElevatedSurface()`: an overlay frame or an unnested
- *   Panel) dark climbs one more step to `$color5`, because the dark elevated
- *   tint is `$color4` itself (HIG: a control's fill sits above the elevated
+ *   ramp), dark at `$color5`, one step above the `$color4` card and field it
+ *   usually sits in (LC-151, FZ-8400). On an elevated ground
+ *   (`useElevatedSurface()`: an overlay frame or an unnested Panel) dark
+ *   climbs one more step to `$color6`, because the dark elevated tint is
+ *   `$color5` itself (HIG: a control's fill sits above the elevated
  *   background it is on). Light's elevated ground is the page step, so its
  *   wash stays put.
  * - `plain`, inside a bar (`useBarSurface()`): ink only at rest, the tinted
@@ -30,11 +30,11 @@ export interface ControlTierPaint {
 }
 
 const lightWash: ControlTierPaint = { rest: "$color3", hover: "$color4", press: "$color5" };
-const darkWash: ControlTierPaint = { rest: "$color4", hover: "$color5", press: "$color6" };
+const darkWash: ControlTierPaint = { rest: "$color5", hover: "$color6", press: "$color7" };
 const darkElevatedWash: ControlTierPaint = {
-  rest: "$color5",
-  hover: "$color6",
-  press: "$color7",
+  rest: "$color6",
+  hover: "$color7",
+  press: "$color8",
 };
 
 /** The tinted wash for a scheme and ground: rest, hover and press fills. */
@@ -43,6 +43,15 @@ export function controlTierWash(dark: boolean, elevated = false): ControlTierPai
   return elevated ? darkElevatedWash : darkWash;
 }
 
+/**
+ * A Slider or Progress track: `$color5`, a step above a dark `$color4` card;
+ * on a dark elevated ground `$color6`, a step above the `$color5` overlay
+ * (FZ-7944, FZ-8400). Light keeps `$color5`.
+ */
+export function controlTrackFill(dark: boolean, elevated = false): string {
+  return dark && elevated ? "$color6" : "$color5";
+}
+
 /** Rest, hover and press fills for a tier in a scheme, on the page or an elevated ground. */
 export function controlTierPaint(
   tier: ControlTier,