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

package/dist/Theme/chakra/Popover.styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.popoverAnatomy.keys);
 const $popperBg = (0, react_1.cssVar)("popper-bg");
 const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
@@ -15,15 +16,19 @@ const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
  * fixing `$popperBg` here fixes the arrow fill too.
  */
 const baseStyle = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    return ({
+    const colors = (0, paletteFromTheme_1.paletteOf)(theme);
+    return {
         content: {
-            [$popperBg.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",
+            [$popperBg.variable]: colors.backgroundColor.light,
             bg: $popperBg.reference,
-            [$arrowShadowColor.variable]: (_m = (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border) === null || _h === void 0 ? void 0 : _h[200]) !== null && _j !== void 0 ? _j : (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[200]) !== null && _m !== void 0 ? _m : "#e2e8f0",
-            color: (_q = (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.text) === null || _p === void 0 ? void 0 : _p[900]) !== null && _q !== void 0 ? _q : "inherit",
+            [$arrowShadowColor.variable]: colors.boxborder[200],
+            color: colors.text[900],
+            // Matches Menu: a CHROME_RULE-weight edge, not Chakra's gray.200 hard edge.
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: colors.boxborder[200],
         },
-    });
+    };
 });
 exports.Popover = defineMultiStyleConfig({
     baseStyle,

package/dist/Theme/chakra/Switch.styles.d.ts

@@ -6,7 +6,7 @@ declare const $thumbBg: {
 export declare const Switch: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         thumb: {
-            [$thumbBg.variable]: any;
+            [$thumbBg.variable]: string;
             bg: string;
         };
     }) | undefined;

package/dist/Theme/chakra/Switch.styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.switchAnatomy.keys);
 const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
 /**
@@ -10,15 +11,12 @@ const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
  * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
  * regardless of mode.
  */
-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]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
+        bg: $thumbBg.reference,
+    },
+}));
 exports.Switch = defineMultiStyleConfig({
     baseStyle,
 });

package/dist/Theme/chakra/componentStyles.d.ts

@@ -70,26 +70,29 @@ export declare const componentStyles: {
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             list: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
             };
             item: {
                 bg: string;
                 _focus: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _hover: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _active: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
                 _expanded: {
-                    [x: string]: any;
+                    [x: string]: string;
                     bg: string;
                 };
             };
@@ -139,9 +142,12 @@ export declare const componentStyles: {
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             content: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
-                color: any;
+                color: string;
+                borderWidth: string;
+                borderStyle: string;
+                borderColor: string;
             };
         }) | undefined;
         sizes?: {
@@ -188,7 +194,7 @@ export declare const componentStyles: {
     Switch: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             thumb: {
-                [x: string]: any;
+                [x: string]: string;
                 bg: string;
             };
         }) | undefined;

package/dist/Theme/chakra/createBrandTheme.js

@@ -9,6 +9,7 @@ const common_web_1 = __importDefault(require("./common.web"));
 const fonts_web_1 = __importDefault(require("./fonts.web"));
 const componentStyles_1 = require("./componentStyles");
 const accentText_1 = require("../tokens/builders/accentText");
+const scrollbar_1 = require("../tokens/builders/scrollbar");
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -89,22 +90,8 @@ const createBrandTheme = (palette, options = {}) => {
                             color: (0, accentText_1.onFilled)(palette.primary[500], palette.white, palette.black),
                         },
                         // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
-                        // OS's generic dark gray, not brand-aware — style it explicitly so it matches the
-                        // canvas instead of floating as a mismatched gray bar.
-                        "::-webkit-scrollbar": {
-                            width: "10px",
-                            height: "10px",
-                        },
-                        "::-webkit-scrollbar-track": {
-                            background: palette.backgroundColor.main,
-                        },
-                        "::-webkit-scrollbar-thumb": {
-                            background: palette.gray[600],
-                            borderRadius: "6px",
-                        },
-                        "::-webkit-scrollbar-thumb:hover": {
-                            background: palette.gray[500],
-                        },
+                        // OS's generic dark gray, not brand-aware.
+                        ...(0, scrollbar_1.globalScrollbarStyles)(palette),
                         // Chrome/Edge autofill paints its own opaque yellow/white fill behind the input
                         // text via `-webkit-box-shadow` (not `background`), so a plain `bg` override never
                         // reaches it — a bright light box survives on every dark autofilled field unless

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -165,42 +165,40 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
      * `data-mode` for consumers that want to hook their own dark CSS.
      */
     (0, react_1.useLayoutEffect)(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
         const root = document.documentElement;
         root.dataset.mode = resolvedMode;
-        const colors = resolvedTheme.colors;
-        const sem = (_a = colors.semantic) !== null && _a !== void 0 ? _a : {};
-        const gray = colors.gray;
+        const { colors } = resolvedTheme;
+        const { gray, semantic } = colors;
         const HUE_SCALES = [
             "primary", "gray", "red", "orange", "yellow",
             "green", "teal", "blue", "cyan", "purple", "pink",
         ];
-        const SEMANTIC_SCALES = ["success", "error", "warning", "info"]; // nested under colors.semantic
+        const SEMANTIC_SCALES = ["success", "error", "warning", "info"];
         const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-        // Single-value semantic vars → palette scale+rung. The dark gray ramp runs dark(50) → light(900),
-        // so low rungs read as surfaces and high rungs as text — correct in dark, cleared in light.
+        // The dark gray ramp runs dark(50) → light(900), so low rungs read as surfaces
+        // and high rungs as text — correct in dark, cleared in light.
         const SEMANTIC_VARS = {
-            "text-heading": gray === null || gray === void 0 ? void 0 : gray[900], "text-body": gray === null || gray === void 0 ? void 0 : gray[700],
-            "text-subtle": gray === null || gray === void 0 ? void 0 : gray[500], "text-input": gray === null || gray === void 0 ? void 0 : gray[500],
-            "bg-main": gray === null || gray === void 0 ? void 0 : gray[50], "bg-secondary": gray === null || gray === void 0 ? void 0 : gray[100], "bg-tertiary": gray === null || gray === void 0 ? void 0 : gray[100],
-            "bg-quaternary": gray === null || gray === void 0 ? void 0 : gray[200], "bg-light": gray === null || gray === void 0 ? void 0 : gray[50], "bg-medium": gray === null || gray === void 0 ? void 0 : gray[100],
-            "bg-accent": gray === null || gray === void 0 ? void 0 : gray[200], "bg-subtle": gray === null || gray === void 0 ? void 0 : gray[100], "bg-muted": gray === null || gray === void 0 ? void 0 : gray[200],
-            "bg-neutral": gray === null || gray === void 0 ? void 0 : gray[100], "bg-base": gray === null || gray === void 0 ? void 0 : gray[50], "bg-table-header": gray === null || gray === void 0 ? void 0 : gray[100],
-            "border-default": gray === null || gray === void 0 ? void 0 : gray[200], "border-light": gray === null || gray === void 0 ? void 0 : gray[100],
-            "border-dark": gray === null || gray === void 0 ? void 0 : gray[300], "border-input": gray === null || gray === void 0 ? void 0 : gray[300],
-            "border-error": (_b = sem.error) === null || _b === void 0 ? void 0 : _b[500], "border-success": (_c = sem.success) === null || _c === void 0 ? void 0 : _c[500],
-            "border-warning": (_d = sem.warning) === null || _d === void 0 ? void 0 : _d[500], "border-info": (_e = sem.info) === null || _e === void 0 ? void 0 : _e[500],
+            "text-heading": gray[900], "text-body": gray[700],
+            "text-subtle": gray[500], "text-input": gray[500],
+            "bg-main": gray[50], "bg-secondary": gray[100], "bg-tertiary": gray[100],
+            "bg-quaternary": gray[200], "bg-light": gray[50], "bg-medium": gray[100],
+            "bg-accent": gray[200], "bg-subtle": gray[100], "bg-muted": gray[200],
+            "bg-neutral": gray[100], "bg-base": gray[50], "bg-table-header": gray[100],
+            "border-default": gray[200], "border-light": gray[100],
+            "border-dark": gray[300], "border-input": gray[300],
+            "border-error": semantic.error[500], "border-success": semantic.success[500],
+            "border-warning": semantic.warning[500], "border-info": semantic.info[500],
         };
-        const set = (name, val) => val && root.style.setProperty(`--color-${name}`, val);
+        const set = (name, val) => root.style.setProperty(`--color-${name}`, val);
         const clear = (name) => root.style.removeProperty(`--color-${name}`);
         const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
         if (resolvedMode === "dark") {
             for (const s of HUE_SCALES)
                 for (const r of RUNGS)
-                    set(`${s}-${r}`, (_f = colors[s]) === null || _f === void 0 ? void 0 : _f[r]);
+                    set(`${s}-${r}`, colors[s][r]);
             for (const s of SEMANTIC_SCALES)
                 for (const r of RUNGS)
-                    set(`${s}-${r}`, (_g = sem[s]) === null || _g === void 0 ? void 0 : _g[r]);
+                    set(`${s}-${r}`, semantic[s][r]);
             for (const [name, val] of Object.entries(SEMANTIC_VARS))
                 set(name, val);
         }

package/dist/Theme/provider/ThemeSwitcher.js

@@ -25,33 +25,26 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
  * the dot always matches what selecting that brand actually looks like,
  * regardless of which brand/mode is currently active.
  */
-const brandSwatchColor = (brand) => {
-    var _a, _b, _c, _d, _e;
-    return (_e = (_d = (_c = (_b = (_a = index_1.brandThemes[brand]) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.400";
+const brandSwatchColor = (brand) => index_1.brandThemes[brand].light.colors.primary[500];
+const BrandSwatch = ({ brand }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));
 };
-const BrandSwatch = ({ brand }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
 /**
  * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
  * are read straight from the active theme — no `useColorModeValue` pairing needed here.
- * Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
  */
 const useSwitcherColors = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    const colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return {
-        trackBg: (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.secondary) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : "gray.100",
-        activeBg: (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : colors === null || colors === void 0 ? void 0 : colors.white) !== null && _g !== void 0 ? _g : "white",
-        activeColor: (_l = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[900]) !== null && _l !== void 0 ? _l : "inherit",
-        mutedColor: (_q = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600]) !== null && _q !== void 0 ? _q : "gray.600",
-        hoverBg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "gray.100",
-        borderColor: (_w = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.border) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200]) !== null && _w !== void 0 ? _w : "gray.200",
-        // `--menu-bg` (and its hover/focus/active states) is now fixed centrally in the theme's
-        // Menu component style (Theme/chakra/Menu.styles.ts) — every MenuList gets it from there.
-        // Re-deriving it here too and pushing it back via `sx` on every render caused a redundant
-        // Emotion style recompute per render, which showed up as flicker while hovering/scrolling
-        // this list. Keep menuColor (Menu.styles.ts doesn't set list `color` per this component's
-        // needs) but stop duplicating menuBg.
-        menuColor: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[900]) !== null && _0 !== void 0 ? _0 : "gray.900",
+        trackBg: colors.backgroundColor.secondary,
+        activeBg: colors.backgroundColor.main,
+        activeColor: colors.primary[500],
+        mutedColor: colors.text[600],
+        hoverBg: colors.gray[100],
+        borderColor: colors.boxborder[200],
+        // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
+        menuColor: colors.text[900],
     };
 };
 const BrandMenu = ({ size }) => {

package/dist/Theme/tokens/brands/emerald/palette.light.js

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const palette_light_1 = __importDefault(require("../lavender/palette.light"));
+const neutrals_1 = require("../neutrals");
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const brandInk_1 = require("../../builders/brandInk");
 const PRIMARY_500 = "#0f9d8a"; // teal-emerald core (balanced, not too green/blue)
 const primary = {
     50: "#e6f7f5",
@@ -20,7 +18,8 @@ const primary = {
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
 const palette = {
-    ...palette_light_1.default,
+    ...neutrals_1.neutralTokens,
+    ...(0, brandInk_1.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
@@ -128,8 +127,7 @@ const palette = {
     },
     boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
-        error: palette_light_1.default.boxShadow.error,
-        default: palette_light_1.default.boxShadow.default,
+        ...neutrals_1.sharedBoxShadow,
     },
 };
 exports.default = palette;

package/dist/Theme/tokens/brands/lavender/palette.light.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const neutrals_1 = require("../neutrals");
 const PRIMARY_500 = "#8B3FC8";
 const SECONDARY_ANCHOR = "#1e0f30";
 const primary = {
@@ -30,56 +31,6 @@ const secondary = {
     opacity: (0, buildBrandTokens_1.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",
@@ -100,51 +51,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",
@@ -210,8 +116,7 @@ const placeholder = {
 };
 const boxShadow = {
     primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
-    error: "#F2463A47",
-    default: "#00000033",
+    ...neutrals_1.sharedBoxShadow,
 };
 const sidebar = {
     background: {
@@ -283,31 +188,15 @@ const disabled = {
     800: "#625d75",
     900: "#4b4759",
 };
-// Two-tone brand gradient (violet → pink). Each theme overrides with its own pair.
-// `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-// original let white drop to 3.53 there (`from` already passed at 5.76, unchanged).
-// Nudged one step further (4.511 -> 4.609): the first pass cleared AA by <0.02, too thin a
-// margin to trust against rounding/rendering variance.
-const gradient = { from: "#8B3FC8", to: "#df187a" };
+// Single-hue gradient: white clears AA by margin, not by hundredths. See gradientTone.test.ts.
+const gradient = { from: "#8b3fc8", to: "#762d9d" };
 const palette = {
     gradient,
     primary,
     secondary,
     tertiary,
-    transparent: "transparent",
-    black: "#000",
-    white: "#fff",
-    semantic,
+    ...neutrals_1.neutralTokens,
     gray,
-    red,
-    orange,
-    yellow,
-    green,
-    teal,
-    blue,
-    cyan,
-    purple,
-    pink,
     backgroundColor,
     background,
     text,

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

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const palette_light_1 = __importDefault(require("../lavender/palette.light"));
+const neutrals_1 = require("../neutrals");
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const brandInk_1 = require("../../builders/brandInk");
 const PRIMARY_500 = "#2d6a4f"; // was #2caa3d — deeper, forest-toned
 const primary = {
     50: "#edf7f2",
@@ -20,7 +18,8 @@ const primary = {
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
 const palette = {
-    ...palette_light_1.default,
+    ...neutrals_1.neutralTokens,
+    ...(0, brandInk_1.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
@@ -126,8 +125,7 @@ const palette = {
     },
     boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
-        error: palette_light_1.default.boxShadow.error,
-        default: palette_light_1.default.boxShadow.default,
+        ...neutrals_1.sharedBoxShadow,
     },
 };
 exports.default = palette;

package/dist/Theme/tokens/brands/neutrals.d.ts

@@ -0,0 +1,8 @@
+import type { NeutralPaletteTokens } from "../types";
+/** Non-brand shadow tints. Only `primary` is brand-derived. */
+export declare const sharedBoxShadow: {
+    error: string;
+    default: string;
+};
+/** Utility scales shared by every brand — never theme-specific. */
+export declare const neutralTokens: NeutralPaletteTokens;

package/dist/Theme/tokens/brands/neutrals.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.neutralTokens = exports.sharedBoxShadow = void 0;
+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 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",
+};
+/** Non-brand shadow tints. Only `primary` is brand-derived. */
+exports.sharedBoxShadow = {
+    error: "#F2463A47",
+    default: "#00000033",
+};
+/** Utility scales shared by every brand — never theme-specific. */
+exports.neutralTokens = {
+    transparent: "transparent",
+    black: "#000",
+    white: "#fff",
+    semantic,
+    red,
+    orange,
+    yellow,
+    green,
+    teal,
+    blue,
+    cyan,
+    purple,
+    pink,
+};