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

package/dist/Components/Header/HeaderActions.d.ts

@@ -1,5 +1,7 @@
 import { OptionProp } from "../Select/SelectProps";
-declare const HeaderActions: ({ select, edit, create, }: {
+declare const HeaderActions: ({ select, edit, create, surface, }: {
+    /** Background this is drawn on. Header's bar is dark in BOTH modes — pass it there. */
+    surface?: string;
     select?: {
         isSelect?: boolean;
         options?: OptionProp[];

package/dist/Components/Header/HeaderActions.js

@@ -9,20 +9,24 @@ const react_2 = __importDefault(require("react"));
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const Select_1 = __importDefault(require("../Select/Select"));
 const Divider_1 = __importDefault(require("../Divider/Divider"));
-const HeaderActions = ({ select, edit, create, }) => {
+const HeaderActions = ({ select, edit, create, surface, }) => {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    const ink = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, accentText_1.AA_NORMAL_TEXT);
+    const iconInk = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, outlineRung_1.AA_NON_TEXT);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
         elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: colors.text[500] }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: colors.text[500] }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), el] }, i))) }));
 };

package/dist/Components/PlanPill/PlanPill.js

@@ -15,7 +15,7 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
     const toneGradient = {
-        normal: planPillGradient_1.ACCENT_GRADIENT,
+        normal: (0, planPillGradient_1.inkSafeGradient)(c.gradient),
         warning: (0, planPillGradient_1.statusGradient)(c.semantic.warning),
         danger: (0, planPillGradient_1.statusGradient)(c.semantic.error),
     };

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: {
@@ -294,20 +199,8 @@ const palette = {
     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,
+};

package/dist/Theme/tokens/brands/radiant/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 = "#cf4e3a"; // warm red (terracotta leaning)
 const primary = {
     50: "#fdf1ee",
@@ -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 4.37/2.15 against from/to. Same hue, darker.
     // Both nudged one step further (4.509/4.502 -> 4.601/4.617): 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/rosewood/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 = "#d16a7e"; // muted warm rose (not neon pink)
 const primary = {
     50: "#fdf2f5",
@@ -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.46/2.69 against from/to. Same hue, darker.
     // Both nudged one step further (4.520/4.505 -> 4.609/4.607): the first pass cleared AA by
@@ -132,8 +131,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/skyline/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 = "#1a3a6b"; // was #0088cc — deep navy
 const primary = {
     50: "#e8ecf4",
@@ -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.14 there (`from` already passed at 11.28, unchanged).
     // Nudged one step further (4.515 -> 4.600): 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/slate/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 = "#6b7280"; // was #475569 — pure neutral gray, no blue cast
 const primary = {
     50: "#f9fafb",
@@ -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.98 there (`from` already passed at 4.83, unchanged).
     // Nudged one step further (4.520 -> 4.608): the first pass cleared AA by <0.02, too thin a
@@ -130,8 +129,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/storefront/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 = "#004f4b"; // deep spruce teal — storefront/retail brand anchor
 const primary = {
     50: "#eafaf9",
@@ -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),
     // Same hue as primary, darker stop for the "to" end — mirrors emerald's gradient pattern.
     // White gradient-button text verified AA at both stops (4.98 / 6.96).
     gradient: { from: "#0c7d77", to: "#095e90" }, // spruce teal → deep blue
@@ -120,8 +119,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/builders/brandInk.d.ts

@@ -0,0 +1,11 @@
+import type { BrandScale, ColorScale } from "../types";
+export type BrandInkRamps = {
+    secondary: BrandScale;
+    tertiary: BrandScale;
+    text: ColorScale;
+    header: ColorScale;
+    placeholder: ColorScale;
+    disabled: ColorScale;
+};
+/** Brand-hued ink ramps at lavender's verified luminances, so contrast carries over. */
+export declare function buildBrandInk(primary500: string): BrandInkRamps;