pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/typing-indicator/TypingIndicator.js

@@ -11,24 +11,81 @@
  * A screen-reader user who is not focused on the thread would otherwise learn someone is typing only
  * by chance, on their next swipe past this element.
  *
- * Each dot loops a BARE `motion.timing` over a 0→1 driver and interpolates that into the
- * min→max→min opacity pulse. `Animated.loop` only runs natively (`_startNativeLoop`) when the
- * animation it wraps reports `_isUsingNativeDriver()`, which `Animated.sequence` returns `false`
- * for unconditionally — a looped sequence therefore restarts every leg from the JS thread, forever.
- * The stagger is `TimingOptions.delay` (one JS timeout per dot at start-up) rather than
- * `Animated.delay`, which is itself a `useNativeDriver: false` timing.
+ * Each dot loops a bare `motion.loop` over a 0→1 shared driver and interpolates that into the
+ * min→max→min opacity pulse on the UI thread. The stagger is `TimingOptions.delay` (one JS timeout
+ * per dot at start-up) rather than composing delays into the loop animation.
  */
 
 import { memo, useEffect, useMemo, useRef } from "react";
-import { Animated, View } from "react-native";
+import { View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
-import { useMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { resolveTypingIndicatorAccessibility, TYPING_DOT_MAX_OPACITY, TYPING_DOT_MIN_OPACITY, typingDotStructure, typingIndicatorStructure } from "./TypingIndicator.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DOT_COUNT = 3;
 /** The driver's midpoint: the peak of the pulse, and the resting value while motion is off. */
 const PULSE_PEAK = 0.5;
+const TypingDot = /*#__PURE__*/memo(function TypingDot({
+  index,
+  pulsing,
+  cycleMs,
+  baseStyle,
+  testID
+}) {
+  const motion = useMotion();
+  const driver = useAnimatedValue(PULSE_PEAK);
+  const running = useRef(null);
+  const startTimer = useRef(null);
+  useEffect(() => {
+    running.current?.stop();
+    if (startTimer.current !== null) {
+      clearTimeout(startTimer.current);
+      startTimer.current = null;
+    }
+    if (!pulsing) {
+      driver.value = PULSE_PEAK;
+      return undefined;
+    }
+    driver.value = 0;
+    const delayMs = index * cycleMs / DOT_COUNT;
+    const startLoop = () => {
+      running.current = motion.loop(driver, 1, {
+        duration: "deliberate"
+      });
+      running.current.start();
+    };
+    if (delayMs > 0) {
+      startTimer.current = setTimeout(startLoop, delayMs);
+    } else {
+      startLoop();
+    }
+    return () => {
+      running.current?.stop();
+      if (startTimer.current !== null) clearTimeout(startTimer.current);
+    };
+  }, [pulsing, cycleMs, index, motion, driver]);
+  useEffect(() => () => {
+    running.current?.stop();
+    if (startTimer.current !== null) clearTimeout(startTimer.current);
+  }, []);
+  const dotStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(driver.value, [0, PULSE_PEAK, 1], [TYPING_DOT_MIN_OPACITY, TYPING_DOT_MAX_OPACITY, TYPING_DOT_MIN_OPACITY])
+  }));
+  if (!pulsing) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: [baseStyle, {
+        opacity: TYPING_DOT_MAX_OPACITY
+      }]
+    });
+  }
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    testID: testID,
+    style: [baseStyle, dotStyle]
+  });
+});
 export const TypingIndicator = /*#__PURE__*/memo(function TypingIndicator({
   size = "md",
   style,
@@ -38,49 +95,14 @@ export const TypingIndicator = /*#__PURE__*/memo(function TypingIndicator({
   const motion = useMotion();
   const a11y = resolveTypingIndicatorAccessibility();
   useAnnounce(a11y.accessibilityLabel);
-  const drivers = useRef(Array.from({
-    length: DOT_COUNT
-  }, () => new Animated.Value(PULSE_PEAK))).current;
-  const loops = useRef([]);
   const cycleMs = motion.duration("deliberate");
   const pulsing = motion.decorative && cycleMs > 0;
-  useEffect(() => {
-    loops.current.forEach(loop => loop.stop());
-    loops.current = [];
-    if (!pulsing) {
-      drivers.forEach(driver => driver.setValue(PULSE_PEAK));
-      return undefined;
-    }
-    loops.current = drivers.map((driver, index) => {
-      // Each iteration replays from wherever the driver sits when the loop starts.
-      driver.setValue(0);
-      const loop = Animated.loop(motion.timing(driver, 1, {
-        duration: "deliberate",
-        delay: index * cycleMs / DOT_COUNT
-      }));
-      loop.start();
-      return loop;
-    });
-    return () => {
-      loops.current.forEach(loop => loop.stop());
-      loops.current = [];
-    };
-  }, [drivers, pulsing, cycleMs, motion]);
-  useEffect(() => () => loops.current.forEach(loop => loop.stop()), []);
   const dotColor = theme.colors.fg.muted;
-  const dotStyles = useMemo(() => {
-    const base = [typingDotStructure(theme, {
-      size
-    }), {
-      backgroundColor: dotColor
-    }];
-    return drivers.map(driver => [base, {
-      opacity: driver.interpolate({
-        inputRange: [0, PULSE_PEAK, 1],
-        outputRange: [TYPING_DOT_MIN_OPACITY, TYPING_DOT_MAX_OPACITY, TYPING_DOT_MIN_OPACITY]
-      })
-    }]);
-  }, [theme, size, dotColor, drivers]);
+  const dotBaseStyle = useMemo(() => [typingDotStructure(theme, {
+    size
+  }), {
+    backgroundColor: dotColor
+  }], [theme, size, dotColor]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     accessible: a11y.accessible,
@@ -89,9 +111,14 @@ export const TypingIndicator = /*#__PURE__*/memo(function TypingIndicator({
     style: [typingIndicatorStructure(theme, {
       size
     }), style],
-    children: dotStyles.map((dotStyle, index) => /*#__PURE__*/_jsx(Animated.View, {
-      testID: testID === undefined ? undefined : `${testID}-dot-${index}`,
-      style: dotStyle
+    children: Array.from({
+      length: DOT_COUNT
+    }, (_, index) => /*#__PURE__*/_jsx(TypingDot, {
+      index: index,
+      pulsing: pulsing,
+      cycleMs: cycleMs,
+      baseStyle: dotBaseStyle,
+      testID: testID === undefined ? undefined : `${testID}-dot-${index}`
     }, index))
   });
 });

package/lib/module/modules/typing-indicator/TypingIndicatorProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=TypingIndicatorProps.js.map

package/lib/module/modules/upgrade-button/MODULE.md

@@ -0,0 +1,3 @@
+# upgrade-button/ — a primary CTA for billing upgrade flows
+
+Primary CTA for billing upgrade flows. Composes `Button`.

package/lib/module/modules/upgrade-button/UpgradeButton.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { memo } from "react";
+import { Button } from "../button/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const UpgradeButton = /*#__PURE__*/memo(function UpgradeButton({
+  onPress,
+  label = "Upgrade",
+  disabled,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(Button, {
+    label: label,
+    variant: "solid",
+    tone: "accent",
+    onPress: onPress,
+    disabled: disabled,
+    style: style,
+    testID: testID
+  });
+});
+//# sourceMappingURL=UpgradeButton.js.map

package/lib/module/modules/upgrade-button/UpgradeButtonProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=UpgradeButtonProps.js.map

package/lib/module/modules/upgrade-button/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { UpgradeButton } from "./UpgradeButton.js";
+//# sourceMappingURL=index.js.map

package/lib/module/theme/MODULE.md

@@ -93,3 +93,5 @@ above.
 - Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
 - List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
 - `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+PixelizeProvider logs a dev-only warning when interLoaded is false (see README typography).

package/lib/module/theme/platform/MODULE.md

@@ -62,12 +62,8 @@ to `default` (the Android shape), whose only meaningful field — `elevation`
     lets `#rrggbbaa` carry translucency alone — one colour value, correct on both platforms. Also
     note the prop **defaults to 0** (no shadow), so it must always be set.
   - `shadowOffset` is always explicit because iOS defaults it to `(0, -3)`, not `(0, 0)`.
-- **Web** — same shape as iOS (`shadowColor` + `shadowOffset` + `shadowOpacity: 1` +
-  `shadowRadius`), but **unhalved**: the iOS halving corrects an iOS-only rendering quirk, and the
-  token's `blur` already IS the original web/CSS value (see `tokens/primitives/elevation.ts`'s doc
-  comment), so it passes straight through. `react-native-web`'s style preprocessor converts these
-  legacy shadow props into a real CSS `box-shadow` — confirmed empirically via
-  `react-native-web/dist/cjs/exports/StyleSheet/preprocess`.
+- **Web** — a single `boxShadow` CSS string (`x y blur color`, unhalved blur — same token as iOS
+  uses before the `/2` halving). Avoids deprecated `shadow*` style props on react-native-web.
 - **Android** — `elevation` + `shadowColor` only. Android ignores offset/opacity/radius, and tints
   from `shadowColor` only on **API 28+** (below that the shadow is the platform default black).
   A view also needs a **background colour** for `elevation` to cast anything.

package/lib/module/theme/platform/elevation.native.js

@@ -14,13 +14,7 @@ export function elevation(token) {
       shadowRadius: layer.blur / 2
     },
     web: {
-      shadowColor: layer.color,
-      shadowOffset: {
-        width: layer.x,
-        height: layer.y
-      },
-      shadowOpacity: 1,
-      shadowRadius: layer.blur
+      boxShadow: `${layer.x}px ${layer.y}px ${layer.blur}px ${layer.color}`
     },
     default: {
       shadowColor: layer.color,

package/lib/module/theme/provider/PixelizeProvider.js

@@ -64,6 +64,12 @@ export function PixelizeProvider({
     if (typeof __DEV__ !== 'undefined' && !__DEV__) return;
     console.warn('[pixelize-native-library] <PixelizeProvider> has no `storage` adapter, so the theme choice is ' + 'kept in memory and lost on app restart. Pass ' + 'storage={createAsyncStorageAdapter(AsyncStorage)} to persist it.');
   }, [storageProp]);
+  useEffect(() => {
+    if (interLoaded) return;
+    if (process.env.JEST_WORKER_ID !== undefined) return;
+    if (typeof __DEV__ === 'undefined' || !__DEV__) return;
+    console.warn('[pixelize-native-library] Inter is not loaded — register the faces with expo-font and pass ' + 'interLoaded to <PixelizeProvider>. See README.md#typography.');
+  }, [interLoaded]);
   useEffect(() => {
     let cancelled = false;
     Promise.resolve(storage.getItem(storageKey)).then(raw => {

package/lib/module/theme/tokens/MODULE.md

@@ -22,6 +22,10 @@ same on web and RN, so translucency uses 8-digit hex.
 
 **A token that is wrong here is fixed here.** Web is a sibling, not an upstream — the drift gate is
 per-repo by design and never reads the other repo. Flag the same defect for web; do not wait for it.
+`builders/gradientInk.ts` + `__tests__/gradientInk.test.ts` / `gradientTone.test.ts` gate gradient-button
+ink on every brand × mode. `paletteFromAccent()` builds a full `PaletteProps` from a hex accent.
+`primitives/controlSizes.ts` centralises mobile control heights (44/52/56dp).
+
 `brands/slate/palette.light.ts` `table.hover[500]` carried a Cyrillic homoglyph (`"#dfdfе2"`,
 U+0435) on both sides for an unknown period; mobile's copy was fixed 2026-08-31, web's still ships it.
 

package/lib/module/theme/tokens/THEME-CONTRACT.md

@@ -88,9 +88,9 @@ Adding a brand is the mirror image: one `palette.light.ts` exporting a `BrandPal
 138 assertions. It also asserts every colour value in every palette parses, and that no brand file
 writes a derived token by hand.
 
-`slate`'s `table.hover[500]` shipped a Cyrillic `е` (U+0435) inside `"#dfdfе2"` — a valid-looking
-string that RN resolves to no colour at all. It was fixed here on 2026-08-31 and the parse assertion
-is what keeps it fixed. **Web's `slate` palette still carries it.**
+`slate`'s `table.hover[500]` once shipped a Cyrillic `е` (U+0435) inside `"#dfdfе2"` — a valid-looking
+string that RN resolves to no colour at all. Both repos now ship ASCII-only palette files; the parse
+assertion in `paletteContrast.test.ts` is what keeps it fixed.
 
 ## Known gap
 
@@ -100,6 +100,35 @@ has to know that. Dark needs no such lift (5.05–9.89:1) because `buildDarkPale
 status ramps rather than copying them. **Light is the worse mode**: every defect this contract
 resolves was light-only.
 
+## A role colour's lightness direction is not fixed across modes
+
+`bg.sunken` (`background[200]`) is **darker** than `bg.surface` (`background[50]`) in light mode and
+**lighter** than it in dark mode. Measured on `zinc`: light `background[50]` `#ffffff` (L=100.0) vs
+`background[200]` `#f4f4f5` (L=95.9); dark `background[50]` `#0e0e11` (L=6.1) vs `background[200]`
+`#18181b` (L=10.0) — the pair inverts because dark surfaces are built from `SURFACE_TARGETS`
+(`buildDarkPalette.ts`), where `50: 7` sits *below* `200: 11`, the opposite order from light mode's
+hand-authored ramp. A component that reasons "sunken means recessed, so it's darker" is right in
+light and backwards in dark.
+
+**Apply:** never infer a surface's relative lightness from its token name or its light-mode value.
+Compare the actual resolved colours for the mode you're in — `roleColors()` already resolves the
+right token per mode; don't hand-derive "darker than X" from a name.
+
+## An elevation token is not a dark-mode boundary
+
+`elevation` (`tokens/primitives/elevation.ts`) layers are pure black-alpha (`#0000001a` etc.) and
+carry no colour-mode of their own. `platform/elevation.native.ts`'s `elevation()` applies that same
+black shadow regardless of mode — on a dark backdrop a black shadow is barely distinguishable from
+the surface it's supposed to lift off, so a floating surface built from the raw token alone reads as
+flat in dark mode. `platform/floatingSurface.native.ts`'s `floatingSurfaceStyle` exists specifically
+to fix this: in dark mode it swaps in a lighter `DARK_AMBIENT` shadow plus an inset highlight, and
+adds a 1px top hairline at the `lg` level, none of which the raw `elevation` token provides.
+
+**Apply:** a surface that floats and can render in dark mode needs `floatingSurfaceStyle` (or, at
+minimum, a hairline edge) — never the raw `elevation` token alone. (Internal to this repo only:
+`floatingSurfaceStyle` is not re-exported through any public subpath, so this applies to components
+built here, not to consumer apps.)
+
 ## Placeholder ink is not muted text
 
 `fg.muted` is body copy. Six components used it as their `placeholderTextColor`, so an empty field
@@ -135,3 +164,24 @@ on every enabled field.
 untouched whenever the authored rung already clears. `surfaceRungs.test.ts` deliberately does **not**
 sweep `placeholder[500]` — what ships is `fg.placeholder`, not the raw rung. Web's mirror of this
 lives in `Theme/CHROME-CONSISTENCY.md`.
+
+## Dark-mode surface tint (mobile vs web — owner decision)
+
+`buildDarkPalette.ts` matches web on algorithm and target tables, but mobile keeps brand hue on dark
+surfaces (`SURFACE_SAT = 14`, `GRAY_SAT = 6`) where web uses neutral grey (`0` / `0`). Borders also
+differ slightly (`BORDER_TARGETS` 50–400). **Mobile is intentionally tinted for OLED**; web is
+neutral. Both are valid — pick one canonical behaviour and align both repos; do not change mobile
+unilaterally in a palette port.
+
+## Control size scale (mobile vs web)
+
+Web `CONTROL_SIZES` (`tokens/primitives/controlSizes.ts`) uses 24–56 **px** heights with **`sm`
+default**. Mobile `CONTROL_HEIGHTS` uses 44/52/56 **dp** with **`md` default** — the 44dp floor is
+WCAG 2.5.5 / Apple HIG, not a drift bug. Shared `fontSizes` (12…128) still drive label sizes via
+`CONTROL_LABEL_FONT_SIZE`.
+
+## Line-height vocabulary
+
+Mobile primitives use `tight` / `snug` / `relaxed` / `loose` (ratios stored in `lineHeights.ts`).
+Web's older names (`shorter` / `short` / `tall` / `taller`) are not duplicated here — mobile is
+canonical for this repo.

package/lib/module/theme/tokens/brands/emerald/palette.light.js

@@ -21,9 +21,10 @@ const primary = {
 // No `tertiary` override — emerald inherits lavender's purple tertiary, as web ships it.
 export const source = {
   ...lavenderSource,
+  // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 3.38/2.43.
   gradient: {
-    from: "#0f9d8a",
-    to: "#06b6d4"
+    from: "#0d8474",
+    to: "#048096"
   },
   primary,
   gray: {
@@ -32,7 +33,8 @@ export const source = {
     200: "#dce5e5",
     300: "#c3d2d2",
     400: "#9fb3b3",
-    500: "#7c9191",
+    // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
+    500: "#617474",
     600: "#5e7070",
     700: "#475555",
     800: "#2f3a3a",

package/lib/module/theme/tokens/brands/lavender/palette.light.js

@@ -210,7 +210,7 @@ const backgroundColor = {
   secondary: "#f2edf8",
   tertiary: "#ebe3f4",
   quaternary: "#e2d8ef",
-  light: "#fdfcfe",
+  light: "#ffffff",
   medium: "#e8e0f2",
   accent: "#e0d5ed",
   subtle: "#f5f1fa",
@@ -337,10 +337,10 @@ const disabled = {
   900: "#4b4759"
 };
 
-// Two-tone brand gradient (violet → pink). Each brand overrides with its own pair.
+// Single-hue gradient: white clears AA by margin, not by hundredths. See gradientTone.test.ts.
 const gradient = {
-  from: "#8B3FC8",
-  to: "#EC4899"
+  from: "#8b3fc8",
+  to: "#762d9d"
 };
 export const source = {
   gradient,

package/lib/module/theme/tokens/brands/meadow/palette.light.js

@@ -21,7 +21,7 @@ export const source = {
   ...lavenderSource,
   gradient: {
     from: "#2d6a4f",
-    to: "#14b8a6"
+    to: "#0f8376"
   },
   primary,
   tertiary: {
@@ -33,7 +33,7 @@ export const source = {
     200: "#dce5e0",
     300: "#c4d2cb",
     400: "#93a99f",
-    500: "#637d72",
+    500: "#5c7369",
     600: "#445f52",
     700: "#344a3f",
     800: "#24342b",

package/lib/module/theme/tokens/brands/radiant/palette.light.js

@@ -22,8 +22,8 @@ const primary = {
 export const source = {
   ...lavenderSource,
   gradient: {
-    from: "#cf4e3a",
-    to: "#f59e0b"
+    from: "#cd4733",
+    to: "#a36807"
   },
   primary,
   gray: {
@@ -32,7 +32,7 @@ export const source = {
     200: "#e2dad5",
     300: "#cec2bb",
     400: "#b3a39a",
-    500: "#928077",
+    500: "#796861",
     600: "#6e6058",
     700: "#534841",
     800: "#39312c",

package/lib/module/theme/tokens/brands/rosewood/palette.light.js

@@ -22,8 +22,8 @@ const primary = {
 export const source = {
   ...lavenderSource,
   gradient: {
-    from: "#d16a7e",
-    to: "#fb7185"
+    from: "#c74962",
+    to: "#ea0727"
   },
   primary,
   gray: {
@@ -32,7 +32,7 @@ export const source = {
     200: "#e4dada",
     300: "#d0c1c1",
     400: "#b4a2a2",
-    500: "#927f7f",
+    500: "#796666",
     600: "#6e5e5e",
     700: "#534747",
     800: "#3a3030",

package/lib/module/theme/tokens/brands/skyline/palette.light.js

@@ -21,7 +21,7 @@ export const source = {
   ...lavenderSource,
   gradient: {
     from: "#1a3a6b",
-    to: "#38bdf8"
+    to: "#067db2"
   },
   primary,
   tertiary: {
@@ -33,7 +33,7 @@ export const source = {
     200: "#d3dae8",
     300: "#b0bcd4",
     400: "#8094b0",
-    500: "#566d8c",
+    500: "#566c8b",
     600: "#3d526b",
     700: "#2e3f54",
     800: "#202d3d",

package/lib/module/theme/tokens/brands/slate/palette.light.js

@@ -20,8 +20,8 @@ const primary = {
 export const source = {
   ...lavenderSource,
   gradient: {
-    from: "#6b7280",
-    to: "#818cf8"
+    from: "#666d7a",
+    to: "#4a4e59"
   },
   primary,
   tertiary: {
@@ -33,7 +33,7 @@ export const source = {
     200: "#e5e7eb",
     300: "#d1d5db",
     400: "#9ca3af",
-    500: "#6b7280",
+    500: "#686e7c",
     600: "#4b5563",
     700: "#374151",
     800: "#1f2937",

package/lib/module/theme/tokens/builders/accentText.js

@@ -9,7 +9,16 @@
  * that fixes those, rather than shipping broken until someone notices.
  */
 
-import { AA_TEXT, contrastRatio } from "./color.js";
+import { AA_TEXT, contrastRatio, relativeLuminance } from "./color.js";
+const AA_NORMAL_TEXT = AA_TEXT;
+const ACCENT_TEXT_SEARCH = [500, 600, 700, 800, 900];
+export const pickAccentText = (primary, canvas) => {
+  const found = ACCENT_TEXT_SEARCH.find(rung => contrastRatio(primary[rung], canvas) >= AA_NORMAL_TEXT);
+  const rung = found ?? 900;
+  return primary[rung];
+};
+export const accentTextOnCanvas = (scale, canvas) => pickAccentText(scale, canvas);
+export const onGradient = (from, to, white, black) => onFilled(relativeLuminance(from) >= relativeLuminance(to) ? from : to, white, black);
 
 /** The two candidate labels. Near-white and near-black, not #fff/#000 — the shadcn look. */
 export const ON_ACCENT_LIGHT = "#fafafa";

package/lib/module/theme/tokens/builders/buildBrandScale.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { mixHex } from "./color.js";
+import { buildPrimaryOpacity } from "./buildBrandTokens.js";
+const LOW_RUNG_WEIGHTS = {
+  50: 0.08,
+  100: 0.2,
+  200: 0.38,
+  300: 0.58,
+  400: 0.8
+};
+const HIGH_RUNG_WEIGHTS = {
+  600: 0.8,
+  700: 0.58,
+  800: 0.38,
+  900: 0.2
+};
+const RUNG_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+export function buildRamp(hex500, towardLowRungs, towardHighRungs) {
+  const ramp = {
+    500: hex500
+  };
+  for (const [rung, weight] of Object.entries(LOW_RUNG_WEIGHTS)) {
+    const key = Number(rung);
+    ramp[key] = mixHex(towardLowRungs, hex500, weight);
+  }
+  for (const [rung, weight] of Object.entries(HIGH_RUNG_WEIGHTS)) {
+    const key = Number(rung);
+    ramp[key] = mixHex(towardHighRungs, hex500, weight);
+  }
+  for (const key of RUNG_KEYS) {
+    if (!ramp[key]) ramp[key] = hex500;
+  }
+  return ramp;
+}
+export function buildBrandScale(hex500, towardLow, towardHigh) {
+  return {
+    ...buildRamp(hex500, towardLow, towardHigh),
+    opacity: buildPrimaryOpacity(hex500)
+  };
+}
+//# sourceMappingURL=buildBrandScale.js.map

package/lib/module/theme/tokens/builders/gradientInk.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { AA_TEXT } from "./color.js";
+import { liftToContrast } from "./liftToContrast.js";
+import { onGradient } from "./accentText.js";
+const inkSafeStop = hex => liftToContrast(hex, "#ffffff", AA_TEXT);
+export const inkSafeGradient = gradient => ({
+  from: inkSafeStop(gradient.from),
+  to: inkSafeStop(gradient.to)
+});
+export const resolveGradient = (gradient, white, black) => {
+  const {
+    from,
+    to
+  } = inkSafeGradient(gradient);
+  return {
+    from,
+    to,
+    ink: onGradient(from, to, white, black)
+  };
+};
+export const gradientCss = (g, angle = "135deg") => `linear-gradient(${angle}, ${g.from} 0%, ${g.to} 100%)`;
+//# sourceMappingURL=gradientInk.js.map

package/lib/module/theme/tokens/builders/paletteFromAccent.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import { palettes } from "../brands/index.js";
+import { buildBrandScale } from "./buildBrandScale.js";
+import finalizePalette from "./finalizePalette.js";
+import { inkSafeGradient } from "./gradientInk.js";
+function stripSemanticText(palette) {
+  const {
+    semanticText: _semanticText,
+    ...source
+  } = palette;
+  return source;
+}
+export function paletteFromAccent(accentHex, brand, mode) {
+  const base = palettes[brand][mode];
+  const source = stripSemanticText(base);
+  const towardLow = mode === "light" ? source.white : source.black;
+  const towardHigh = mode === "light" ? source.black : source.white;
+  const primary = buildBrandScale(accentHex, towardLow, towardHigh);
+  const gradient = inkSafeGradient({
+    from: primary[500],
+    to: primary[700]
+  });
+  return finalizePalette({
+    ...source,
+    primary,
+    gradient
+  });
+}
+//# sourceMappingURL=paletteFromAccent.js.map

package/lib/module/theme/tokens/builders/skeletonShimmer.js

@@ -0,0 +1,22 @@
+"use strict";
+
+import { contrastRatio } from "./color.js";
+import { liftToContrast } from "./liftToContrast.js";
+
+/** Decorative shimmer band — must clear this against `background[200]` (skeleton base). */
+export const SKELETON_SHIMMER_CONTRAST = 1.35;
+const SHIMMER_CANDIDATE_RUNGS = [300, 100, 400, 50];
+
+/**
+ * Skeleton-only highlight fill. Derived from the background ramp against sunken (`[200]`), never from
+ * `backgroundColor.muted` — that token is shared with hover surfaces and other AA ink measurements.
+ */
+export function skeletonShimmerHighlight(p) {
+  const base = p.background[200];
+  for (const rung of SHIMMER_CANDIDATE_RUNGS) {
+    const candidate = p.background[rung];
+    if (contrastRatio(candidate, base) >= SKELETON_SHIMMER_CONTRAST) return candidate;
+  }
+  return liftToContrast(p.background[300], base, SKELETON_SHIMMER_CONTRAST);
+}
+//# sourceMappingURL=skeletonShimmer.js.map

package/lib/module/theme/tokens/index.js

@@ -27,6 +27,9 @@ export * from "./builders/liftToContrast.js";
 export * from "./builders/placeholderInk.js";
 export * from "./builders/semanticText.js";
 export * from "./builders/finalizePalette.js";
+export * from "./builders/gradientInk.js";
+export * from "./builders/buildBrandScale.js";
+export { paletteFromAccent } from "./builders/paletteFromAccent.js";
 export * from "./roles/index.js";
 export * from "./assertPalette.js";
 //# sourceMappingURL=index.js.map