pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.1

package/dist/esm/Theme/chakra/Slider.styles.js

@@ -1,3 +1,4 @@
+import { paletteOf } from "./paletteFromTheme.js";
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { sliderAnatomy } from "@chakra-ui/anatomy";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(sliderAnatomy.keys);
@@ -8,15 +9,12 @@ const $thumbBg = cssVar("slider-thumb-bg");
  * every bare `<SliderThumb>` renders a literal white circle on the dark canvas regardless of mode,
  * same bug class as Menu/Modal but without even the dead `_dark` branch.
  */
-const baseStyle = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f;
-    return ({
-        thumb: {
-            [$thumbBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
-            bg: $thumbBg.reference,
-        },
-    });
-});
+const baseStyle = definePartsStyle(({ theme }) => ({
+    thumb: {
+        [$thumbBg.variable]: paletteOf(theme).backgroundColor.light,
+        bg: $thumbBg.reference,
+    },
+}));
 export const Slider = defineMultiStyleConfig({
     baseStyle,
 });

package/dist/esm/Theme/chakra/Tabs.styles.js

@@ -1,3 +1,4 @@
+import { paletteOf } from "./paletteFromTheme.js";
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { tabsAnatomy } from "@chakra-ui/anatomy";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
@@ -10,26 +11,20 @@ const $border = cssVar("tabs-border-color");
  * gated behind `_dark`, which this theme-swap app never triggers. Every selected `enclosed`/
  * `enclosed-colored` tab renders a white seam/fill on the dark canvas.
  */
-const variantEnclosed = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f;
-    return ({
-        tab: {
-            _selected: {
-                [$border.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
-            },
+const variantEnclosed = definePartsStyle(({ theme }) => ({
+    tab: {
+        _selected: {
+            [$border.variable]: paletteOf(theme).backgroundColor.light,
         },
-    });
-});
-const variantEnclosedColored = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f;
-    return ({
-        tab: {
-            _selected: {
-                [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
-            },
+    },
+}));
+const variantEnclosedColored = definePartsStyle(({ theme }) => ({
+    tab: {
+        _selected: {
+            [$bg.variable]: paletteOf(theme).backgroundColor.light,
         },
-    });
-});
+    },
+}));
 export const Tabs = defineMultiStyleConfig({
     variants: {
         enclosed: variantEnclosed,

package/dist/esm/Theme/chakra/componentStyles.js

@@ -1,4 +1,6 @@
-import { cssVar } from "@chakra-ui/react";
+import { paletteOf, scaleFor } from "./paletteFromTheme.js";
+import { alertAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, cssVar, } from "@chakra-ui/react";
 import { Button } from "../../Components/Button/Button.styles.js";
 import { Checkbox } from "../../Components/Checkbox/Checkbox.styles.js";
 import { Input } from "../../Components/Input/TextInput.styles.js";
@@ -27,14 +29,12 @@ const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a
 const Badge = {
     variants: {
         solid: ({ theme, colorScheme = "gray" }) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
-            const bg = swatch === null || swatch === void 0 ? void 0 : swatch[500];
-            const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#fff";
-            const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000";
+            const palette = paletteOf(theme);
+            const swatch = scaleFor(palette, colorScheme);
+            const bg = swatch[500];
             return {
                 bg,
-                color: isHexColor(bg) ? onFilled(bg, white, black) : swatch === null || swatch === void 0 ? void 0 : swatch[800],
+                color: isHexColor(bg) ? onFilled(bg, palette.white, palette.black) : swatch[800],
             };
         },
         // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
@@ -42,11 +42,11 @@ const Badge = {
         // it always takes the light-mode branch. Applied to our mode-reversed dark scales, that
         // branch's fixed rung pair (100/800) measures 4.06 in dark mode, just under AA.
         subtle: ({ theme, colorScheme = "gray" }) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
-            const bg = (_e = swatch === null || swatch === void 0 ? void 0 : swatch[100]) !== null && _e !== void 0 ? _e : swatch === null || swatch === void 0 ? void 0 : swatch[50];
+            const palette = paletteOf(theme);
+            const swatch = scaleFor(palette, colorScheme);
+            const bg = swatch[100];
             if (!isHexColor(bg))
-                return { bg, color: swatch === null || swatch === void 0 ? void 0 : swatch[800] };
+                return { bg, color: swatch[800] };
             // accentTextOnCanvas keeps brand hue by trying this scale's own rungs first, but some
             // narrow-gamut hues (e.g. yellow) don't reach far enough at either end to clear AA against
             // every bg they can land on in dark mode (measured 4.42 for a reversed-yellow badge) — its
@@ -56,9 +56,7 @@ const Badge = {
             const accent = accentTextOnCanvas(swatch, bg);
             if (contrastRatio(accent, bg) >= 4.5)
                 return { bg, color: accent };
-            const white = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.white) !== null && _g !== void 0 ? _g : "#fff";
-            const black = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.black) !== null && _j !== void 0 ? _j : "#000";
-            return { bg, color: onFilled(bg, white, black) };
+            return { bg, color: onFilled(bg, palette.white, palette.black) };
         },
     },
     defaultProps: {
@@ -72,16 +70,35 @@ const Badge = {
 // unfixed.
 const FormError = {
     baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d;
         // `icon` (FormErrorIcon) shares the same AA gap as `text` — both must be fixed together or
         // the icon stays on Chakra's raw `red.500`.
-        const color = accentTextOnCanvas((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.red, (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : "#ffffff");
+        const palette = paletteOf(theme);
+        const color = accentTextOnCanvas(palette.red, palette.backgroundColor.main);
         return {
             text: { color },
             icon: { color },
         };
     },
 };
+const $alertFg = cssVar("alert-fg");
+const $alertBg = cssVar("alert-bg");
+const { defineMultiStyleConfig: defineAlertStyles, definePartsStyle: defineAlertParts } = createMultiStyleConfigHelpers(alertAnatomy.keys);
+const Alert = defineAlertStyles({
+    variants: {
+        solid: defineAlertParts(({ theme, colorScheme = "gray" }) => {
+            const palette = paletteOf(theme);
+            const bg = scaleFor(palette, colorScheme)[500];
+            if (!isHexColor(bg))
+                return { container: {} };
+            return {
+                container: {
+                    [$alertBg.variable]: bg,
+                    [$alertFg.variable]: onFilled(bg, palette.white, palette.black),
+                },
+            };
+        }),
+    },
+});
 const $tooltipBg = cssVar("tooltip-bg");
 const $tooltipFg = cssVar("tooltip-fg");
 /**
@@ -95,13 +112,10 @@ const $tooltipFg = cssVar("tooltip-fg");
  * deliberately never remaps, so they stay a stable dark-bg/white-text pair in both modes.
  */
 const Tooltip = {
-    baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d;
-        return ({
-            [$tooltipBg.variable]: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.black) !== null && _b !== void 0 ? _b : "colors.gray.700",
-            [$tooltipFg.variable]: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white) !== null && _d !== void 0 ? _d : "colors.whiteAlpha.900",
-        });
-    },
+    baseStyle: ({ theme }) => ({
+        [$tooltipBg.variable]: theme.colors.black,
+        [$tooltipFg.variable]: theme.colors.white,
+    }),
 };
 const $skeletonStart = cssVar("skeleton-start-color");
 const $skeletonEnd = cssVar("skeleton-end-color");
@@ -115,15 +129,12 @@ const $skeletonEnd = cssVar("skeleton-end-color");
  * prop still wins via that mechanism, this only supplies the default the base style already owns.
  */
 const Skeleton = {
-    baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d, _e, _f;
-        return ({
-            [$skeletonStart.variable]: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray) === null || _b === void 0 ? void 0 : _b[100]) !== null && _c !== void 0 ? _c : "colors.gray.100",
-            [$skeletonEnd.variable]: (_f = (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]) !== null && _f !== void 0 ? _f : "colors.gray.400",
-            background: $skeletonStart.reference,
-            borderColor: $skeletonEnd.reference,
-        });
-    },
+    baseStyle: ({ theme }) => ({
+        [$skeletonStart.variable]: paletteOf(theme).gray[100],
+        [$skeletonEnd.variable]: paletteOf(theme).gray[300],
+        background: $skeletonStart.reference,
+        borderColor: $skeletonEnd.reference,
+    }),
 };
 // Chakra's `extendTheme` does not REPLACE a component's stock baseStyle when ours is also a
 // function — it calls BOTH and deep-merges the two returned plain objects, key by key. Chakra's
@@ -139,12 +150,9 @@ const Skeleton = {
 // behavior directly rather than only the function output).
 const Radio = {
     baseStyle: ({ theme, colorScheme }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const swatch = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme];
-        const fill = (_b = swatch === null || swatch === void 0 ? void 0 : swatch[500]) !== null && _b !== void 0 ? _b : (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500];
-        const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#ffffff";
-        const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000000";
-        const dot = onFilled(fill, white, black);
+        const palette = paletteOf(theme);
+        const fill = scaleFor(palette, colorScheme)[500];
+        const dot = onFilled(fill, palette.white, palette.black);
         // A browser probe found the checked radio's hover repeating its own resting `fill` —
         // Chakra's stock checked._hover (inherited from checkbox) lands on the SAME `bg`/`borderColor`
         // keys we do, so extendTheme's merge is a scalar overwrite here, not a coexisting selector;
@@ -153,7 +161,7 @@ const Radio = {
         const hoverFill = resolveHoverTint(fill, fill);
         return {
             control: {
-                borderColor: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.boxborder) === null || _k === void 0 ? void 0 : _k[500],
+                borderColor: palette.boxborder[500],
                 _checked: {
                     bg: `${fill} !important`,
                     borderColor: `${fill} !important`,
@@ -187,16 +195,17 @@ const $closeButtonBg = cssVar("close-button-bg");
  */
 const CloseButton = {
     baseStyle: ({ theme }) => {
-        var _a, _b, _c, _d, _e;
-        const dark = isDarkCanvas((_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff");
-        const alpha = dark ? (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.whiteAlpha : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blackAlpha;
+        const palette = paletteOf(theme);
+        const dark = isDarkCanvas(palette.backgroundColor.main);
+        const alpha = scaleFor(palette, dark ? "whiteAlpha" : "blackAlpha");
         return {
-            _hover: { [$closeButtonBg.variable]: alpha === null || alpha === void 0 ? void 0 : alpha[200] },
-            _active: { [$closeButtonBg.variable]: alpha === null || alpha === void 0 ? void 0 : alpha[300] },
+            _hover: { [$closeButtonBg.variable]: alpha[200] },
+            _active: { [$closeButtonBg.variable]: alpha[300] },
         };
     },
 };
 export const componentStyles = {
+    Alert,
     Checkbox,
     Radio,
     Input,

package/dist/esm/Theme/chakra/paletteFromTheme.js

@@ -0,0 +1,9 @@
+import { assertPixelizePalette } from "../assertPalette.js";
+/** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
+export const paletteOf = (theme) => assertPixelizePalette(theme);
+const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
+/**
+ * `colorScheme` is a consumer-supplied Chakra scale name, so this lookup is genuinely dynamic —
+ * it can name a built-in we never themed. An unknown name resolves to the neutral ramp.
+ */
+export const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };

package/dist/esm/Theme/provider/PixelizeThemeProvider.js

@@ -109,6 +109,11 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
     useLayoutEffect(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
+    // Chakra's ColorModeProvider re-writes color-scheme in a passive effect, after the layout
+    // effect above, and forcedLightColorModeManager pins it to "light". Re-assert after it.
+    useEffect(() => {
+        document.documentElement.style.colorScheme = resolvedMode;
+    }, [resolvedMode]);
     // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
     // invalidate the context value on every render of the consuming app. Written in a layout
     // effect, not during render — a render-phase write is unsafe under StrictMode's double

package/dist/esm/Theme/testing/testPalette.js

@@ -0,0 +1,19 @@
+import { lightPalettes, darkPalettes } from "../tokens/brands/index.js";
+const isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const deepMerge = (base, patch) => {
+    if (!isPlainObject(base) || !isPlainObject(patch))
+        return patch;
+    const out = { ...base };
+    for (const [key, value] of Object.entries(patch))
+        out[key] = deepMerge(base[key], value);
+    return out;
+};
+/** A complete palette for tests. Overrides layer onto a real brand, never replace a group. */
+export const testPalette = (options = {}) => {
+    const { brand = "lavender", mode = "light", overrides = {} } = options;
+    const base = mode === "dark" ? darkPalettes[brand] : lightPalettes[brand];
+    return deepMerge(base, overrides);
+};
+export const testTheme = (options = {}) => ({
+    colors: testPalette(options),
+});

package/dist/esm/Theme/tokens/brands/index.js

@@ -16,23 +16,27 @@ import emeraldDark from "./emerald/palette.dark.js";
 import rosewoodDark from "./rosewood/palette.dark.js";
 import storefrontDark from "./storefront/palette.dark.js";
 import zincDark from "./zinc/palette.dark.js";
-import { pickAccentText } from "../builders/accentText.js";
+import { pickAccentText, onFilled } from "../builders/accentText.js";
 import { withOutlineRung } from "../builders/outlineRung.js";
-/**
- * Derived here rather than hand-written into each brand's literal: it must track that brand's
- * own primary scale and canvas, and a stale hand-copied hex would silently fail AA.
- * Dark palettes get theirs inside `buildDarkPalette`.
- */
-const withAccentText = (palette) => {
-    var _a;
-    return ({
-        ...palette,
-        accentText: (_a = palette.accentText) !== null && _a !== void 0 ? _a : pickAccentText(palette.primary, palette.backgroundColor.main, "light"),
-    });
-};
+import { withSidebarTokens } from "../builders/sidebarAccent.js";
+import { buildMutedText } from "../builders/mutedText.js";
+import { buildSemanticText, buildOnSemantic } from "../builders/semanticText.js";
+import { withPlaceholderRung, withTableHoverRung } from "../builders/resolvedRungs.js";
+import { withSurfaceRungs } from "../builders/surfaceRungs.js";
+/** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
+export const finalizeLightPalette = (source) => ({
+    ...source,
+    sidebar: withSidebarTokens(source),
+    accentText: pickAccentText(source.primary, source.backgroundColor.main),
+    textMuted: buildMutedText(source.text, source.backgroundColor.main),
+    semanticText: buildSemanticText(source.semantic, source.backgroundColor.main),
+    onPrimary: onFilled(source.primary[500], source.white, source.black),
+    onSemantic: buildOnSemantic(source.semantic, source.white, source.black),
+});
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
-const lightBrand = (palette) => withOutlineRung(withAccentText(palette), "light");
+const resolveRungs = (palette) => withSurfaceRungs(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))));
+const lightBrand = (source) => resolveRungs(finalizeLightPalette(source));
 /** Light palette per brand. `lavender` is the base the other six extend. */
 export const lightPalettes = {
     lavender: lightBrand(lavender),
@@ -46,16 +50,17 @@ export const lightPalettes = {
     zinc: lightBrand(zinc),
 };
 /** Dark palette per brand, derived from the matching light palette. */
+const darkBrand = (dark) => resolveRungs(dark);
 export const darkPalettes = {
-    lavender: withOutlineRung(lavenderDark, "dark"),
-    meadow: withOutlineRung(meadowDark, "dark"),
-    radiant: withOutlineRung(radiantDark, "dark"),
-    skyline: withOutlineRung(skylineDark, "dark"),
-    slate: withOutlineRung(slateDark, "dark"),
-    emerald: withOutlineRung(emeraldDark, "dark"),
-    rosewood: withOutlineRung(rosewoodDark, "dark"),
-    storefront: withOutlineRung(storefrontDark, "dark"),
-    zinc: withOutlineRung(zincDark, "dark"),
+    lavender: darkBrand(lavenderDark),
+    meadow: darkBrand(meadowDark),
+    radiant: darkBrand(radiantDark),
+    skyline: darkBrand(skylineDark),
+    slate: darkBrand(slateDark),
+    emerald: darkBrand(emeraldDark),
+    rosewood: darkBrand(rosewoodDark),
+    storefront: darkBrand(storefrontDark),
+    zinc: darkBrand(zincDark),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

package/dist/esm/Theme/tokens/brands/slate/palette.light.js

@@ -102,7 +102,7 @@ const palette = {
             200: "#f1f1f3",
             300: "#ebebed",
             400: "#e5e5e8",
-            500: "#dfdfе2",
+            500: "#dfdfe2",
             600: "#cbcbcf",
             700: "#a0a0a5",
             800: "#787880",

package/dist/esm/Theme/tokens/brands/zinc/palette.dark.js

@@ -1,6 +1,6 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
-import { pickAccentText } from "../../builders/accentText.js";
+import { pickAccentText, onFilled } from "../../builders/accentText.js";
 import light from "./palette.light.js";
 /**
  * zinc dark is the shadcn dark look and INVERTS the primary: the filled button is near-white
@@ -192,7 +192,8 @@ const palette = {
     placeholder,
     disabled,
     table,
-    accentText: pickAccentText(primary, derived.backgroundColor.main, "dark"),
+    accentText: pickAccentText(primary, derived.backgroundColor.main),
+    onPrimary: onFilled(PRIMARY_500, derived.white, derived.black),
     boxShadow: {
         primary: buildPrimaryShadowTint(PRIMARY_500),
         error: derived.boxShadow.error,

package/dist/esm/Theme/tokens/builders/accentText.js

@@ -2,19 +2,11 @@ import { contrastRatio, relativeLuminance } from "./color.js";
 /** WCAG AA for normal-size text. Accent-as-text must clear this against the canvas. */
 const AA_NORMAL_TEXT = 4.5;
 /**
- * Rungs to try, ordered nearest-to-accent first. `primary[500]` is the true brand accent, so
- * it is always tried first and only stepped away from when it fails AA — that keeps brand
- * identity as strong as contrast allows instead of flattening every brand to one safe rung.
- *
- * Light canvases need darker rungs; dark canvases need lighter ones. Both walk 500 -> 900 because
- * BOTH ramps put their light end at 900: light mode runs light -> dark (so 900 is the darkest),
- * while every dark scale runs dark -> light (so 900 is the lightest). Same direction, opposite
- * meaning — walking 500 -> 100 for dark would step toward the canvas and land at ~1.4 contrast.
+ * Ordered nearest-to-accent first, so brand identity survives as far as contrast allows.
+ * One order serves both modes: light ramps run light -> dark and dark ramps run dark -> light,
+ * so 500 -> 900 always steps AWAY from that mode's own canvas.
  */
-const SEARCH_ORDER = {
-    light: [500, 600, 700, 800, 900],
-    dark: [500, 600, 700, 800, 900],
-};
+const SEARCH_ORDER = [500, 600, 700, 800, 900];
 /**
  * Pick the accent rung to use for accent-COLORED TEXT sitting on the canvas.
  *
@@ -32,20 +24,9 @@ const SEARCH_ORDER = {
  * sparse test theme mock, a hand-built scale) — treat a missing rung as "doesn't clear AA" and
  * keep walking rather than crashing `contrastRatio` on `undefined`.
  */
-export const pickAccentText = (primary, canvas, mode) => {
-    const safeInk = () => (contrastRatio("#ffffff", canvas) >= AA_NORMAL_TEXT ? "#ffffff" : "#000000");
-    if (!primary)
-        return safeInk();
-    const order = SEARCH_ORDER[mode];
-    const found = order.find((rung) => primary[rung] != null && contrastRatio(primary[rung], canvas) >= AA_NORMAL_TEXT);
-    if (found !== undefined)
-        return primary[found];
-    for (let i = order.length - 1; i >= 0; i--) {
-        const rung = primary[order[i]];
-        if (rung != null)
-            return rung;
-    }
-    return safeInk();
+export const pickAccentText = (primary, canvas) => {
+    const found = SEARCH_ORDER.find((rung) => contrastRatio(primary[rung], canvas) >= AA_NORMAL_TEXT);
+    return primary[found !== null && found !== void 0 ? found : SEARCH_ORDER[SEARCH_ORDER.length - 1]];
 };
 /** Canvas assumed when no Pixelize theme is mounted. Never painted; only fed to contrast math. */
 export const DEFAULT_CANVAS = "#ffffff";
@@ -64,7 +45,7 @@ export const isDarkCanvas = (canvas) => relativeLuminance(canvas) < DARK_CANVAS_
  * failures (radiant 4.15, emerald 3.24, rosewood 3.29). Those brands now step to the nearest rung
  * that clears AA, which changes their light pixels — the accepted cost of meeting WCAG.
  */
-export const accentTextOnCanvas = (scale, canvas) => pickAccentText(scale, canvas, relativeLuminance(canvas) < DARK_CANVAS_LUMINANCE ? "dark" : "light");
+export const accentTextOnCanvas = (scale, canvas) => pickAccentText(scale, canvas);
 /**
  * Ink for text drawn ON a filled swatch (a button/tag/badge fill), not the canvas. `white`/`black`
  * must be the mode-stable absolutes (`theme.colors.white` / `theme.colors.black`) — NOT a

package/dist/esm/Theme/tokens/builders/buildDarkPalette.js

@@ -1,6 +1,9 @@
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "./buildBrandTokens.js";
 import { contrastRatio, hexToHsl, hslToHex, withLightness } from "./color.js";
-import { pickAccentText } from "./accentText.js";
+import { pickAccentText, onFilled } from "./accentText.js";
+import { withSidebarTokens } from "./sidebarAccent.js";
+import { buildMutedText } from "./mutedText.js";
+import { buildSemanticText, buildOnSemantic } from "./semanticText.js";
 /**
  * Derives a brand's dark palette from its light palette.
  *
@@ -235,6 +238,12 @@ export function buildDarkPalette(light) {
     ]));
     const white = light.white;
     const primary = liftBrand(light.primary, white);
+    const semantic = {
+        success: liftAccent(light.semantic.success, white),
+        error: liftAccent(light.semantic.error, white),
+        warning: liftAccent(light.semantic.warning, white),
+        info: liftAccent(light.semantic.info, white),
+    };
     return {
         ...light,
         // Brand identity: hue preserved, accent lifted as far as the white label allows.
@@ -242,12 +251,7 @@ export function buildDarkPalette(light) {
         secondary: liftBrand(light.secondary, white),
         tertiary: liftBrand(light.tertiary, white),
         gradient: light.gradient,
-        semantic: {
-            success: liftAccent(light.semantic.success, white),
-            error: liftAccent(light.semantic.error, white),
-            warning: liftAccent(light.semantic.warning, white),
-            info: liftAccent(light.semantic.info, white),
-        },
+        semantic,
         // `white` stays white on purpose: it is the label color on filled buttons.
         transparent: light.transparent,
         black: light.black,
@@ -276,9 +280,13 @@ export function buildDarkPalette(light) {
         disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
         // Derived from the LIFTED accent against the dark canvas: the lift stops at the white-label
         // floor (~4.55), which leaves primary[500] short of AA as text, so text needs its own rung.
-        accentText: pickAccentText(primary, namedSurfaces.main, "dark"),
+        accentText: pickAccentText(primary, namedSurfaces.main),
+        textMuted: buildMutedText(fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT), namedSurfaces.main),
+        semanticText: buildSemanticText(semantic, namedSurfaces.main),
+        onPrimary: onFilled(primary[500], light.white, light.black),
+        onSemantic: buildOnSemantic(semantic, light.white, light.black),
         // Sidebar is already near-black in light mode, so it needs no inversion.
-        sidebar: light.sidebar,
+        sidebar: withSidebarTokens(light),
         boxShadow: {
             primary: buildPrimaryShadowTint(primary[500]),
             error: light.boxShadow.error,

package/dist/esm/Theme/tokens/builders/mutedText.js

@@ -0,0 +1,5 @@
+import { liftToContrast } from "./outlineRung.js";
+/** WCAG 1.4.3 — muted is still body text. */
+export const AA_NORMAL_TEXT = 4.5;
+/** Seeded from the ramp's muted rung so brand tint survives, then lifted until it clears AA. */
+export const buildMutedText = (text, canvas) => liftToContrast(text[400], canvas, AA_NORMAL_TEXT);

package/dist/esm/Theme/tokens/builders/outlineRung.js

@@ -1,5 +1,4 @@
-import { contrastRatio, hexToHsl, withLightness } from "./color.js";
-import { isDarkCanvas } from "./accentText.js";
+import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./color.js";
 /**
  * The floor a hover/active state's step off its own resting surface must clear to be seen at
  * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
@@ -9,23 +8,27 @@ export const MIN_PERCEPTIBLE_STEP = 1.15;
 /** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
 export const AA_NON_TEXT = 3;
 /**
- * Walks a hex toward `target` contrast against `backdrop`, keeping its hue and saturation so the
- * result still reads as the same colour. Darkens when `mode` is light, lightens when dark, and
- * stops at the FIRST passing step so nothing overshoots to black or white.
+ * Walks a hex toward `target` contrast against `backdrop`, keeping hue and saturation.
+ * Direction is DERIVED from the backdrop, never passed: a mode argument here was redundant
+ * with the backdrop in every call site, and a redundant argument is one that can be wrong.
+ * Tries the far side first, falls back to the near side, and stops at the first passing step.
  */
-export function liftToContrast(hex, backdrop, mode, target = AA_NON_TEXT) {
+export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
     if (contrastRatio(hex, backdrop) >= target)
         return hex;
-    const { s } = hexToHsl(hex);
-    const step = mode === "dark" ? 1 : -1;
-    let { l } = hexToHsl(hex);
-    while (l > 0 && l < 100) {
-        l += step;
-        const next = withLightness(hex, l, s);
-        if (contrastRatio(next, backdrop) >= target)
-            return next;
+    const { s, l: start } = hexToHsl(hex);
+    const away = relativeLuminance(backdrop) < 0.5 ? 1 : -1;
+    for (const step of [away, -away]) {
+        let l = start;
+        while (l > 0 && l < 100) {
+            l += step;
+            const next = withLightness(hex, l, s);
+            if (contrastRatio(next, backdrop) >= target)
+                return next;
+        }
     }
-    return withLightness(hex, mode === "dark" ? 100 : 0, s);
+    const ends = [withLightness(hex, 100, s), withLightness(hex, 0, s)];
+    return contrastRatio(ends[0], backdrop) >= contrastRatio(ends[1], backdrop) ? ends[0] : ends[1];
 }
 /**
  * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
@@ -36,7 +39,7 @@ export function liftToContrast(hex, backdrop, mode, target = AA_NON_TEXT) {
  * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
  * and outside 1.4.11.
  */
-export function withOutlineRung(palette, mode) {
+export function withOutlineRung(palette) {
     const current = palette.boxborder[500];
     // The border sits between the control's fill and the surface behind it; hold it to the
     // harder of the two.
@@ -44,7 +47,7 @@ export function withOutlineRung(palette, mode) {
         contrastRatio(current, palette.background[50])
         ? palette.backgroundColor.main
         : palette.background[50];
-    const resolved = liftToContrast(current, backdrop, mode);
+    const resolved = liftToContrast(current, backdrop);
     if (resolved === current)
         return palette;
     return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
@@ -58,6 +61,5 @@ export function withOutlineRung(palette, mode) {
  * its OWN list background, not necessarily the page canvas.
  */
 export function resolveHoverTint(seed, restSurface) {
-    const mode = isDarkCanvas(restSurface) ? "dark" : "light";
-    return liftToContrast(seed, restSurface, mode, MIN_PERCEPTIBLE_STEP);
+    return liftToContrast(seed, restSurface, MIN_PERCEPTIBLE_STEP);
 }

package/dist/esm/Theme/tokens/builders/resolvedRungs.js

@@ -0,0 +1,20 @@
+import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
+import { AA_NORMAL_TEXT } from "./accentText.js";
+/** Placeholder text measured 4.32:1 on a card for 8 of 9 brands — text, so held to 4.5:1. */
+export function withPlaceholderRung(palette) {
+    const resolved = liftToContrast(palette.placeholder[500], palette.background[50], AA_NORMAL_TEXT);
+    if (resolved === palette.placeholder[500])
+        return palette;
+    return { ...palette, placeholder: { ...palette.placeholder, 500: resolved } };
+}
+/** The hover row is a SURFACE, so it steps away from the ink rather than the ink moving. */
+export function withTableHoverRung(palette) {
+    const resolved = liftToContrast(palette.table.hover[500], palette.text[500], AA_NORMAL_TEXT);
+    if (resolved === palette.table.hover[500])
+        return palette;
+    return {
+        ...palette,
+        table: { hover: { ...palette.table.hover, 500: resolved } },
+    };
+}
+export { AA_NON_TEXT };

package/dist/esm/Theme/tokens/builders/semanticText.js

@@ -0,0 +1,17 @@
+import { liftToContrast } from "./outlineRung.js";
+import { AA_NORMAL_TEXT, onFilled } from "./accentText.js";
+export const SEMANTIC_TONES = ["success", "error", "warning", "info"];
+/**
+ * `semantic[tone][500]` is a FILL rung — as ink on a light canvas it measures 1.84-3.68:1 across
+ * every brand. Each tone is stepped here until it clears AA as text, so a call site that wants
+ * "error-coloured text" cannot pick the unreadable one.
+ */
+export const buildSemanticText = (semantic, canvas) => SEMANTIC_TONES.reduce((acc, tone) => {
+    acc[tone] = liftToContrast(semantic[tone][500], canvas, AA_NORMAL_TEXT);
+    return acc;
+}, {});
+/** Ink ON the fill, not on the canvas — the pair a CSS module needs but cannot compute. */
+export const buildOnSemantic = (semantic, white, black) => SEMANTIC_TONES.reduce((acc, tone) => {
+    acc[tone] = onFilled(semantic[tone][500], white, black);
+    return acc;
+}, {});