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

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,12 +18,9 @@ const primary = {
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
 const palette = {
-    ...palette_light_1.default,
-    // `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
-    // margin to trust against rounding/rendering variance.
-    gradient: { from: "#6b7280", to: "#5664f6" }, // slate gray → indigo
+    ...neutrals_1.neutralTokens,
+    ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
+    gradient: { from: "#666d7a", to: "#4a4e59" },
     primary,
     tertiary: { ...primary },
     gray: {
@@ -130,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/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;

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/chakra/Menu.styles.js

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { menuAnatomy } from "@chakra-ui/anatomy";
+import { paletteOf } from "./paletteFromTheme.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 const $bg = cssVar("menu-bg");
 /**
@@ -19,14 +20,14 @@ const $bg = cssVar("menu-bg");
  */
 const $itemBg = cssVar("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-    const hoverBg = (_g = (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[8]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#f7fafc";
-    const activeBg = (_p = (_l = (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[200]) !== null && _p !== void 0 ? _p : "#edf2f7";
+    const colors = paletteOf(theme);
+    const hoverBg = colors.primary.opacity[8];
+    const activeBg = colors.primary.opacity[16];
     return {
         list: {
-            [$bg.variable]: (_v = (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.backgroundColor) === null || _r === void 0 ? void 0 : _r.light) !== null && _s !== void 0 ? _s : (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50]) !== null && _v !== void 0 ? _v : "#fff",
+            [$bg.variable]: colors.backgroundColor.light,
             bg: $bg.reference,
-            color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : "inherit",
+            color: colors.text[900],
         },
         // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
         // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name

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

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { popoverAnatomy } from "@chakra-ui/anatomy";
+import { paletteOf } from "./paletteFromTheme.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
 const $popperBg = cssVar("popper-bg");
 const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
@@ -12,15 +13,15 @@ const $arrowShadowColor = 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 = 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.border[200],
+            color: colors.text[900],
         },
-    });
+    };
 });
 export const Popover = defineMultiStyleConfig({
     baseStyle,

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

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { switchAnatomy } from "@chakra-ui/anatomy";
+import { paletteOf } from "./paletteFromTheme.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);
 const $thumbBg = cssVar("switch-thumb-bg");
 /**
@@ -7,15 +8,12 @@ const $thumbBg = 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]: paletteOf(theme).backgroundColor.light,
+        bg: $thumbBg.reference,
+    },
+}));
 export const Switch = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -159,42 +159,40 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
      * `data-mode` for consumers that want to hook their own dark CSS.
      */
     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);
         }