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

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/emerald/palette.light.js

@@ -1,5 +1,6 @@
-import lavenderPalette from "../lavender/palette.light.js";
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { buildBrandInk } from "../../builders/brandInk.js";
 const PRIMARY_500 = "#0f9d8a"; // teal-emerald core (balanced, not too green/blue)
 const primary = {
     50: "#e6f7f5",
@@ -15,7 +16,8 @@ const primary = {
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
 const palette = {
-    ...lavenderPalette,
+    ...neutralTokens,
+    ...buildBrandInk(PRIMARY_500),
     // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
     // ends — the original pair let white drop to 3.38/2.43 against from/to. Same hue, darker.
     // Both nudged one step further (4.537/4.515 -> 4.618/4.616): the first pass cleared AA by
@@ -123,8 +125,7 @@ const palette = {
     },
     boxShadow: {
         primary: buildPrimaryShadowTint(PRIMARY_500),
-        error: lavenderPalette.boxShadow.error,
-        default: lavenderPalette.boxShadow.default,
+        ...sharedBoxShadow,
     },
 };
 export default palette;

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/lavender/palette.light.js

@@ -1,4 +1,5 @@
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
 const PRIMARY_500 = "#8B3FC8";
 const SECONDARY_ANCHOR = "#1e0f30";
 const primary = {
@@ -28,56 +29,6 @@ const secondary = {
     opacity: buildPrimaryOpacity(SECONDARY_ANCHOR),
 };
 const tertiary = { ...secondary };
-const semantic = {
-    success: {
-        50: "#e9f8ef",
-        100: "#bbe9cc",
-        200: "#9adeb4",
-        300: "#6ccf92",
-        400: "#4fc67d",
-        500: "#23b85c",
-        600: "#20a754",
-        700: "#198341",
-        800: "#136533",
-        900: "#0f4d27",
-    },
-    error: {
-        50: "#feedeb",
-        100: "#fbc6c2",
-        200: "#f9aaa4",
-        300: "#f6837b",
-        400: "#f56b61",
-        500: "#f2463a",
-        600: "#dc4035",
-        700: "#ac3229",
-        800: "#852720",
-        900: "#661d18",
-    },
-    warning: {
-        50: "#fff4ef",
-        100: "#ffddce",
-        200: "#ffccb7",
-        300: "#ffb596",
-        400: "#ffa781",
-        500: "#ff9162",
-        600: "#e88459",
-        700: "#b56746",
-        800: "#8c5036",
-        900: "#6b3d29",
-    },
-    info: {
-        50: "#eff9fc",
-        100: "#cdedf5",
-        200: "#b5e4f0",
-        300: "#94d7e9",
-        400: "#7fd0e5",
-        500: "#5fc4de",
-        600: "#56b2ea",
-        700: "#438b9e",
-        800: "#346c78",
-        900: "#28525d",
-    },
-};
 const gray = {
     50: "#f9f7fb",
     100: "#f0eaf6",
@@ -98,51 +49,6 @@ const gray = {
 };
 // These global color scales stay unchanged — they are
 // utility palettes, not theme-specific
-const red = {
-    50: "#feedeb", 100: "#fbc6c2", 200: "#f9aaa4", 300: "#f6837b",
-    400: "#f56b61", 500: "#f2463a", 600: "#dc4035", 700: "#ac3229",
-    800: "#852720", 900: "#661d18",
-};
-const orange = {
-    50: "#fff4ef", 100: "#ffddce", 200: "#ffccb7", 300: "#ffb596",
-    400: "#ffa781", 500: "#ff9162", 600: "#e88459", 700: "#b56746",
-    800: "#8c5036", 900: "#6b3d29",
-};
-const yellow = {
-    50: "#fefbec", 100: "#fdf1c5", 200: "#fbeba9", 300: "#fae281",
-    400: "#f9dc69", 500: "#f7d343", 600: "#e1c03d", 700: "#af9630",
-    800: "#887425", 900: "#68591c",
-};
-const green = {
-    50: "#e9f8ef", 100: "#bbe9cc", 200: "#9adeb4", 300: "#6ccf92",
-    400: "#4fc67d", 500: "#23b85c", 600: "#20a754", 700: "#198341",
-    800: "#136533", 900: "#0f4d27",
-};
-const teal = {
-    50: "#eff9fc", 100: "#cdedf5", 200: "#b5e4f0", 300: "#94d7e9",
-    400: "#7fd0e5", 500: "#5fc4de", 600: "#56b2ea", 700: "#438b9e",
-    800: "#346c78", 900: "#28525d",
-};
-const blue = {
-    50: "#ebf8ff", 100: "#bee3f8", 200: "#90cdf4", 300: "#63b3ed",
-    400: "#4299e1", 500: "#3182ce", 600: "#2b6cb0", 700: "#2c5282",
-    800: "#2a4365", 900: "#1a365d",
-};
-const cyan = {
-    50: "#edfdfd", 100: "#c4f1f9", 200: "#9decf9", 300: "#76e4f7",
-    400: "#0bc5ea", 500: "#00b5d8", 600: "#00a3c4", 700: "#0987a0",
-    800: "#086f83", 900: "#065666",
-};
-const purple = {
-    50: "#faf5ff", 100: "#e9d8fd", 200: "#d6bcfa", 300: "#b794f4",
-    400: "#9f7aea", 500: "#805ad5", 600: "#6b46c1", 700: "#553c9a",
-    800: "#44337a", 900: "#322659",
-};
-const pink = {
-    50: "#fff5f7", 100: "#fed7e2", 200: "#fbb6ce", 300: "#f687b3",
-    400: "#ed64a6", 500: "#d53f8c", 600: "#b83280", 700: "#97266d",
-    800: "#702459", 900: "#521b41",
-};
 const backgroundColor = {
     main: "#f9f7fc",
     secondary: "#f2edf8",
@@ -208,8 +114,7 @@ const placeholder = {
 };
 const boxShadow = {
     primary: buildPrimaryShadowTint(PRIMARY_500),
-    error: "#F2463A47",
-    default: "#00000033",
+    ...sharedBoxShadow,
 };
 const sidebar = {
     background: {
@@ -292,20 +197,8 @@ const palette = {
     primary,
     secondary,
     tertiary,
-    transparent: "transparent",
-    black: "#000",
-    white: "#fff",
-    semantic,
+    ...neutralTokens,
     gray,
-    red,
-    orange,
-    yellow,
-    green,
-    teal,
-    blue,
-    cyan,
-    purple,
-    pink,
     backgroundColor,
     background,
     text,

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

@@ -1,5 +1,6 @@
-import lavenderPalette from "../lavender/palette.light.js";
+import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { buildBrandInk } from "../../builders/brandInk.js";
 const PRIMARY_500 = "#2d6a4f"; // was #2caa3d — deeper, forest-toned
 const primary = {
     50: "#edf7f2",
@@ -15,7 +16,8 @@ const primary = {
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
 const palette = {
-    ...lavenderPalette,
+    ...neutralTokens,
+    ...buildBrandInk(PRIMARY_500),
     // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
     // original let white drop to 2.49 there (`from` already passed at 6.39, unchanged).
     // Nudged one step further (4.519 -> 4.627): the first pass cleared AA by <0.02, too thin a
@@ -121,8 +123,7 @@ const palette = {
     },
     boxShadow: {
         primary: buildPrimaryShadowTint(PRIMARY_500),
-        error: lavenderPalette.boxShadow.error,
-        default: lavenderPalette.boxShadow.default,
+        ...sharedBoxShadow,
     },
 };
 export default palette;