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

package/dist/Theme/tokens/builders/brandInk.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildBrandInk = buildBrandInk;
+const buildBrandTokens_1 = require("./buildBrandTokens");
+const color_1 = require("./color");
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+// Lavender's primary saturation. Each brand's ramps scale away from it.
+const REFERENCE_SATURATION = 55.5;
+const SECONDARY = {
+    50: [39.4, 0.8231],
+    100: [41.0, 0.61132],
+    200: [37.7, 0.39479],
+    300: [27.4, 0.18614],
+    400: [28.4, 0.10269],
+    500: [52.4, 0.00831],
+    600: [55.1, 0.00573],
+    700: [55.6, 0.00386],
+    800: [60.0, 0.00245],
+    900: [57.1, 0.00141],
+};
+const TEXT = {
+    50: [25.9, 0.86267],
+    100: [32.4, 0.63853],
+    200: [32.7, 0.48344],
+    300: [30.6, 0.30607],
+    400: [29.2, 0.21515],
+    500: [26.3, 0.10787],
+    600: [26.6, 0.08786],
+    700: [26.7, 0.05281],
+    800: [27.4, 0.03145],
+    900: [29.0, 0.01826],
+};
+const HEADER = {
+    50: [31.3, 0.83382],
+    100: [31.0, 0.59779],
+    200: [30.6, 0.44729],
+    300: [29.3, 0.27622],
+    400: [30.0, 0.19238],
+    500: [29.9, 0.10467],
+    600: [29.9, 0.08682],
+    700: [29.7, 0.05281],
+    800: [29.1, 0.0319],
+    900: [29.9, 0.01915],
+};
+const PLACEHOLDER = {
+    50: [30.4, 0.87913],
+    100: [35.4, 0.67128],
+    200: [36.1, 0.53513],
+    300: [34.7, 0.37333],
+    400: [31.4, 0.30462],
+    500: [28.2, 0.19307],
+    600: [22.8, 0.15818],
+    700: [22.0, 0.09196],
+    800: [21.5, 0.05448],
+    900: [22.3, 0.03206],
+};
+const DISABLED = {
+    50: [33.3, 0.90353],
+    100: [38.9, 0.80618],
+    200: [40.7, 0.71546],
+    300: [41.0, 0.60545],
+    400: [39.6, 0.53328],
+    500: [40.5, 0.43688],
+    600: [28.2, 0.35566],
+    700: [13.4, 0.20289],
+    800: [11.4, 0.1171],
+    900: [11.2, 0.06724],
+};
+// Lightness is monotonic in luminance for a fixed hue/saturation, so bisection converges.
+const atLuminance = (anchor, saturation, target) => {
+    let low = 0;
+    let high = 100;
+    for (let i = 0; i < 30; i += 1) {
+        const mid = (low + high) / 2;
+        if ((0, color_1.relativeLuminance)((0, color_1.withLightness)(anchor, mid, saturation)) < target)
+            low = mid;
+        else
+            high = mid;
+    }
+    return (0, color_1.withLightness)(anchor, (low + high) / 2, saturation);
+};
+const ramp = (anchor, profile) => {
+    const ratio = (0, color_1.hexToHsl)(anchor).s / REFERENCE_SATURATION;
+    const scale = {};
+    for (const rung of RUNGS) {
+        const [saturation, luminance] = profile[rung];
+        scale[rung] = atLuminance(anchor, Math.min(100, saturation * ratio), luminance);
+    }
+    return scale;
+};
+const brandRamp = (anchor, profile) => {
+    const scale = ramp(anchor, profile);
+    return { ...scale, opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(scale[500]) };
+};
+/** Brand-hued ink ramps at lavender's verified luminances, so contrast carries over. */
+function buildBrandInk(primary500) {
+    const secondary = brandRamp(primary500, SECONDARY);
+    return {
+        secondary,
+        tertiary: { ...secondary },
+        text: ramp(primary500, TEXT),
+        header: ramp(primary500, HEADER),
+        placeholder: ramp(primary500, PLACEHOLDER),
+        disabled: ramp(primary500, DISABLED),
+    };
+}

package/dist/Theme/tokens/types.d.ts

@@ -130,6 +130,11 @@ export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" |
         background: ColorScale;
     };
 };
+/** Utility scales carrying no brand identity. The only tokens a brand may inherit. */
+export type NeutralPaletteKey = "transparent" | "black" | "white" | "semantic" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+export type NeutralPaletteTokens = Pick<BrandPaletteSource, NeutralPaletteKey>;
+/** Everything a brand must state itself — never by spreading another brand. */
+export type BrandIdentityTokens = Omit<BrandPaletteSource, NeutralPaletteKey>;
 /** Brand identities shipped by the library. */
 export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate" | "emerald" | "rosewood" | "storefront" | "zinc";
 /** User-selectable color mode. `system` follows the OS setting. */

package/dist/esm/Components/Header/HeaderActions.js

@@ -3,21 +3,25 @@ import { Box, Text } from "@chakra-ui/react";
 import React from "react";
 import { CirclePlus, SquarePen } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import Select from "../Select/Select.js";
 import VeritcalDivider from "../Divider/Divider.js";
-const HeaderActions = ({ select, edit, create, }) => {
+const HeaderActions = ({ select, edit, create, surface, }) => {
     var _a, _b;
     const { colors } = useCustomTheme();
+    const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    const ink = liftToContrast(colors.secondary[500], canvas, AA_NORMAL_TEXT);
+    const iconInk = liftToContrast(colors.secondary[500], canvas, AA_NON_TEXT);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
         elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { 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(_jsxs(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: [_jsx(SquarePen, { size: 16, color: colors.text[500] }), _jsx(Text, { color: accentTextOnCanvas(colors.secondary, colors.backgroundColor.main), children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push(_jsxs(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: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push(_jsxs(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: [_jsx(CirclePlus, { size: 16, color: colors.text[500] }), _jsxs(Text, { color: accentTextOnCanvas(colors.secondary, colors.backgroundColor.main), children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push(_jsxs(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: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return (_jsx(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(VeritcalDivider, {}), el] }, i))) }));
 };

package/dist/esm/Components/PlanPill/PlanPill.js

@@ -3,7 +3,7 @@ import { Box, Flex, Text } from "@chakra-ui/react";
 import { AlertCircle, Clock, Sparkles } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { onGradient } from "../../Theme/tokens/builders/accentText.js";
-import { ACCENT_GRADIENT, chipBorder, chipFill, inkSafeGradient, statusGradient, } from "./planPillGradient.js";
+import { chipBorder, chipFill, inkSafeGradient, statusGradient, } from "./planPillGradient.js";
 const TONE_ICON = {
     normal: Sparkles,
     warning: Clock,
@@ -13,7 +13,7 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const theme = useCustomTheme();
     const c = theme.colors;
     const toneGradient = {
-        normal: ACCENT_GRADIENT,
+        normal: inkSafeGradient(c.gradient),
         warning: statusGradient(c.semantic.warning),
         danger: statusGradient(c.semantic.error),
     };

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/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;

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

@@ -0,0 +1,116 @@
+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. */
+export const sharedBoxShadow = {
+    error: "#F2463A47",
+    default: "#00000033",
+};
+/** Utility scales shared by every brand — never theme-specific. */
+export const neutralTokens = {
+    transparent: "transparent",
+    black: "#000",
+    white: "#fff",
+    semantic,
+    red,
+    orange,
+    yellow,
+    green,
+    teal,
+    blue,
+    cyan,
+    purple,
+    pink,
+};

package/dist/esm/Theme/tokens/brands/radiant/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 = "#cf4e3a"; // warm red (terracotta leaning)
 const primary = {
     50: "#fdf1ee",
@@ -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 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
@@ -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/rosewood/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 = "#d16a7e"; // muted warm rose (not neon pink)
 const primary = {
     50: "#fdf2f5",
@@ -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.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
@@ -127,8 +129,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/skyline/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 = "#1a3a6b"; // was #0088cc — deep navy
 const primary = {
     50: "#e8ecf4",
@@ -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.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
@@ -121,8 +123,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/slate/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 = "#6b7280"; // was #475569 — pure neutral gray, no blue cast
 const primary = {
     50: "#f9fafb",
@@ -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.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
@@ -125,8 +127,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/storefront/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 = "#004f4b"; // deep spruce teal — storefront/retail brand anchor
 const primary = {
     50: "#eafaf9",
@@ -15,7 +16,8 @@ const primary = {
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
 const palette = {
-    ...lavenderPalette,
+    ...neutralTokens,
+    ...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
@@ -115,8 +117,7 @@ const palette = {
     },
     boxShadow: {
         primary: buildPrimaryShadowTint(PRIMARY_500),
-        error: lavenderPalette.boxShadow.error,
-        default: lavenderPalette.boxShadow.default,
+        ...sharedBoxShadow,
     },
 };
 export default palette;