pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { brandThemes } from "../index.js";
+import ToasterProvider from "../../Components/Toaster/Toaster.js";
+import { reducedMotionGlobalStyles } from "../chakra/motion.js";
+import { getSystemColorMode, readStoredTheme, subscribeToSystemColorMode, writeStoredTheme, } from "./colorModeStorage.js";
+const DEFAULT_BRAND = "lavender";
+const DEFAULT_MODE = "system";
+const DEFAULT_STORAGE_KEY = "pixelize-theme";
+// NOTE: forces Chakra's own color mode to "light" always — a stale chakra-ui-color-mode key would otherwise re-fire un-migrated `_dark:` blocks.
+const forcedLightColorModeManager = {
+    type: "localStorage",
+    ssr: false,
+    get: () => "light",
+    set: () => { },
+};
+export const ThemeModeContext = createContext(undefined);
+// NOTE: Chakra's own color mode stays unsynced from resolvedMode — its built-in `_dark:` blocks assume the opposite ramp direction. Read mode via useThemeMode(), not useColorModeValue().
+export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, reducedMotion = "components", }) => {
+    const [mode, setModeState] = useState(() => { var _a; return (_a = (disablePersistence ? undefined : readStoredTheme(storageKey).mode)) !== null && _a !== void 0 ? _a : defaultMode; });
+    const [brand, setBrandState] = useState(() => { var _a; return (_a = (disablePersistence ? undefined : readStoredTheme(storageKey).brand)) !== null && _a !== void 0 ? _a : brandProp; });
+    const [systemMode, setSystemMode] = useState(getSystemColorMode);
+    useEffect(() => {
+        setSystemMode(getSystemColorMode());
+        return subscribeToSystemColorMode(setSystemMode);
+    }, []);
+    useEffect(() => {
+        if (disablePersistence)
+            return;
+        const stored = readStoredTheme(storageKey);
+        if (stored.mode)
+            setModeState(stored.mode);
+        if (stored.brand)
+            setBrandState(stored.brand);
+    }, [disablePersistence, storageKey]);
+    const prevBrandProp = useRef(brandProp);
+    useEffect(() => {
+        if (prevBrandProp.current === brandProp)
+            return;
+        prevBrandProp.current = brandProp;
+        setBrandState(brandProp);
+    }, [brandProp]);
+    const prevModeProp = useRef(defaultMode);
+    useEffect(() => {
+        if (prevModeProp.current === defaultMode)
+            return;
+        prevModeProp.current = defaultMode;
+        setModeState(defaultMode);
+    }, [defaultMode]);
+    const isFirstPersistRun = useRef(true);
+    useEffect(() => {
+        if (isFirstPersistRun.current) {
+            isFirstPersistRun.current = false;
+            return;
+        }
+        if (disablePersistence)
+            return;
+        writeStoredTheme(storageKey, { mode, brand });
+    }, [mode, brand, disablePersistence, storageKey]);
+    const resolvedMode = mode === "system" ? systemMode : mode;
+    // NOTE: the page re-themes in an interruptible second commit; the switcher paints first.
+    const appliedMode = useDeferredValue(resolvedMode);
+    const appliedBrand = useDeferredValue(brand);
+    // NOTE: sets CSS color-scheme so native chrome (select popups, date pickers) matches the mode.
+    useLayoutEffect(() => {
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
+    // NOTE: re-asserted after Chakra's own ColorModeProvider effect overwrites it back to "light".
+    useEffect(() => {
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
+    const onModeChangeRef = useRef(onModeChange);
+    const onBrandChangeRef = useRef(onBrandChange);
+    useLayoutEffect(() => {
+        onModeChangeRef.current = onModeChange;
+        onBrandChangeRef.current = onBrandChange;
+    }, [onModeChange, onBrandChange]);
+    const setMode = useCallback((next) => {
+        var _a;
+        setModeState(next);
+        (_a = onModeChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onModeChangeRef, next);
+    }, []);
+    const setBrand = useCallback((next) => {
+        var _a;
+        setBrandState(next);
+        (_a = onBrandChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onBrandChangeRef, next);
+    }, []);
+    const toggle = useCallback(() => setMode(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode, setMode]);
+    const value = useMemo(() => ({ mode, resolvedMode, setMode, toggle, brand, setBrand }), [mode, resolvedMode, setMode, toggle, brand, setBrand]);
+    // NOTE: keyed by value, not identity — themeOverrides is usually an inline literal.
+    const overridesKey = themeOverrides ? JSON.stringify(themeOverrides) : "";
+    const resolvedTheme = useMemo(() => {
+        const base = brandThemes[appliedBrand][appliedMode];
+        const extensions = [
+            ...(reducedMotion === "global" ? [{ styles: { global: reducedMotionGlobalStyles } }] : []),
+            ...(themeOverrides ? [themeOverrides] : []),
+        ];
+        return extensions.length ? extendTheme(base, ...extensions) : base;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [appliedBrand, appliedMode, overridesKey, reducedMotion]);
+    // NOTE: global.css ships var(--color-*) light-only — re-point them here in dark, clear in light.
+    useLayoutEffect(() => {
+        const root = document.documentElement;
+        root.dataset.mode = appliedMode;
+        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"];
+        const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+        const SEMANTIC_VARS = {
+            "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) => 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 (appliedMode === "dark") {
+            for (const s of HUE_SCALES)
+                for (const r of RUNGS)
+                    set(`${s}-${r}`, colors[s][r]);
+            for (const s of SEMANTIC_SCALES)
+                for (const r of RUNGS)
+                    set(`${s}-${r}`, semantic[s][r]);
+            for (const [name, val] of Object.entries(SEMANTIC_VARS))
+                set(name, val);
+        }
+        else {
+            for (const name of allRampNames)
+                clear(name);
+            for (const name of Object.keys(SEMANTIC_VARS))
+                clear(name);
+        }
+    }, [appliedMode, resolvedTheme]);
+    const themedTree = useMemo(() => (_jsx(ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: _jsx(ToasterProvider, { children: children }) })), [resolvedTheme, children]);
+    return _jsx(ThemeModeContext.Provider, { value: value, children: themedTree });
+};

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItemOption, MenuList, MenuOptionGroup, Text, Tooltip, } from "@chakra-ui/react";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { brandThemes } from "../index.js";
+import { lightPalettes } from "../tokens/brands/index.js";
+import { useCustomTheme } from "../useCustomTheme.js";
+import { useThemeMode } from "./useThemeMode.js";
+import { focusGlowShadow, focusVisibleRing } from "../chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../tokens/builders/outlineRung.js";
+const MODE_OPTIONS = [
+    { value: "light", label: "Light", Icon: Sun },
+    { value: "system", label: "System", Icon: Monitor },
+    { value: "dark", label: "Dark", Icon: Moon },
+];
+const SIZES = {
+    sm: { control: "sm", icon: 14 },
+    md: { control: "md", icon: 16 },
+    lg: { control: "lg", icon: 18 },
+};
+const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
+// NOTE: reads the brand's own palette, not its Chakra theme, so the picker builds no themes.
+const brandSwatchColor = (brand) => lightPalettes[brand].primary[500];
+const BrandSwatch = ({ brand }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(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 }));
+};
+// Palette already differs per mode, so tokens read straight from the active theme — no useColorModeValue needed.
+const useSwitcherColors = () => {
+    const { colors } = useCustomTheme();
+    return {
+        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],
+        focusRing: focusVisibleRing(colors),
+    };
+};
+const BrandMenu = ({ size }) => {
+    const { brand, setBrand } = useThemeMode();
+    const { mutedColor, menuColor, focusRing } = useSwitcherColors();
+    const brands = Object.keys(brandThemes);
+    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: focusRing, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: brand }), _jsx(Text, { as: "span", children: toBrandLabel(brand) })] }) }), _jsx(MenuList, { minW: "9rem", color: menuColor, children: _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
+};
+const IconVariant = ({ size, label, }) => {
+    const { resolvedMode, toggle } = useThemeMode();
+    const { mutedColor, hoverBg, focusRing } = useSwitcherColors();
+    const isDark = resolvedMode === "dark";
+    const Icon = isDark ? Moon : Sun;
+    const accessibleLabel = label !== null && label !== void 0 ? label : `Switch to ${isDark ? "light" : "dark"} mode`;
+    return (_jsx(Tooltip, { label: accessibleLabel, openDelay: 400, children: _jsx(IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }) }));
+};
+const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
+    const { mode, setMode } = useThemeMode();
+    const { trackBg, activeBg, activeColor, mutedColor, borderColor } = useSwitcherColors();
+    const { colors } = useCustomTheme();
+    // One tab stop, so the group wears the indicator: brand border plus the field bloom.
+    const focusBorder = liftToContrast(colors.primary[500], trackBg, AA_NON_TEXT);
+    const [showFocus, setShowFocus] = useState(false);
+    const optionRefs = useRef([]);
+    // APG radiogroup behavior: arrows move focus and selection together.
+    const handleKeyDown = (event, index) => {
+        var _a;
+        const forward = event.key === "ArrowRight" || event.key === "ArrowDown";
+        const backward = event.key === "ArrowLeft" || event.key === "ArrowUp";
+        if (!forward && !backward)
+            return;
+        event.preventDefault();
+        const next = (index + (forward ? 1 : -1) + MODE_OPTIONS.length) % MODE_OPTIONS.length;
+        setMode(MODE_OPTIONS[next].value);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (_jsxs(HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: showFocus ? focusBorder : borderColor, boxShadow: showFocus ? focusGlowShadow(colors) : undefined, borderRadius: "full", onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
+                const isSelected = mode === value;
+                return (_jsx(Button, { ref: (node) => {
+                        optionRefs.current[index] = node;
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, tabIndex: isSelected ? 0 : -1, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+            }), showBrandPicker && _jsx(BrandMenu, { size: size })] }));
+};
+const MenuVariant = ({ size, label, showBrandPicker, }) => {
+    var _a;
+    const { mode, brand, setMode, setBrand } = useThemeMode();
+    const { mutedColor, hoverBg, menuColor, focusRing } = useSwitcherColors();
+    const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
+    const brands = Object.keys(brandThemes);
+    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: _jsx(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }), _jsxs(MenuList, { minW: "10rem", color: menuColor, children: [_jsx(MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => (_jsx(MenuItemOption, { value: value, children: _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), _jsx(Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && (_jsxs(_Fragment, { children: [_jsx(MenuDivider, {}), _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
+};
+export const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
+    if (variant === "segmented") {
+        return (_jsx(SegmentedVariant, { size: size, label: ariaLabel, showBrandPicker: showBrandPicker }));
+    }
+    if (variant === "menu") {
+        return (_jsx(MenuVariant, { size: size, label: ariaLabel, showBrandPicker: showBrandPicker }));
+    }
+    return (_jsxs(HStack, { spacing: 1, display: "inline-flex", children: [_jsx(IconVariant, { size: size, label: ariaLabel }), showBrandPicker && _jsx(BrandMenu, { size: size })] }));
+};

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

@@ -0,0 +1,96 @@
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+// NOTE: stored values are untrusted — a stale/hand-edited entry must never reach brandThemes[brand] as undefined.
+const VALID_MODES = ["light", "dark", "system"];
+const VALID_BRANDS = [
+    "lavender",
+    "meadow",
+    "radiant",
+    "skyline",
+    "slate",
+    "emerald",
+    "rosewood",
+    "storefront",
+    "zinc",
+];
+const noop = () => { };
+/** Safari private mode throws on `localStorage` access rather than returning null. */
+const getStorage = () => {
+    var _a;
+    try {
+        if (typeof window === "undefined")
+            return null;
+        return (_a = window.localStorage) !== null && _a !== void 0 ? _a : null;
+    }
+    catch {
+        return null;
+    }
+};
+export const readStoredTheme = (storageKey) => {
+    const storage = getStorage();
+    if (!storage)
+        return {};
+    try {
+        const raw = storage.getItem(storageKey);
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object")
+            return {};
+        const { mode, brand } = parsed;
+        const stored = {};
+        if (mode && VALID_MODES.includes(mode))
+            stored.mode = mode;
+        if (brand && VALID_BRANDS.includes(brand))
+            stored.brand = brand;
+        return stored;
+    }
+    catch {
+        return {};
+    }
+};
+export const writeStoredTheme = (storageKey, value) => {
+    const storage = getStorage();
+    if (!storage)
+        return;
+    try {
+        storage.setItem(storageKey, JSON.stringify(value));
+    }
+    catch {
+        // Quota / private mode. Persistence is best-effort — never break the app over it.
+    }
+};
+export const getSystemColorMode = () => {
+    try {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return "light";
+        }
+        return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+    }
+    catch {
+        return "light";
+    }
+};
+export const subscribeToSystemColorMode = (callback) => {
+    try {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return noop;
+        }
+        const query = window.matchMedia(DARK_QUERY);
+        const handler = (event) => {
+            callback(event.matches ? "dark" : "light");
+        };
+        if (typeof query.addEventListener === "function") {
+            query.addEventListener("change", handler);
+            return () => query.removeEventListener("change", handler);
+        }
+        // Safari < 14 only has the deprecated listener API.
+        if (typeof query.addListener === "function") {
+            query.addListener(handler);
+            return () => query.removeListener(handler);
+        }
+        return noop;
+    }
+    catch {
+        return noop;
+    }
+};

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

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+export const DEFAULT_FONT_SIZE = "100%";
+export const FONT_SIZE_OPTIONS = [
+    { id: "80%", label: "Small" },
+    { id: "90%", label: "Medium Small" },
+    { id: DEFAULT_FONT_SIZE, label: "Default" },
+    { id: "110%", label: "Medium Large" },
+    { id: "120%", label: "Large" },
+    { id: "130%", label: "Extra Large" },
+];
+// The value lands on html { font-size }, so a junk stored value must not reach it.
+export const isFontSize = (value) => !!value && FONT_SIZE_OPTIONS.some((option) => option.id === value);
+export const resolveFontSize = (value) => isFontSize(value) ? value : DEFAULT_FONT_SIZE;
+export const useFontSizeSync = (fontSize) => {
+    useEffect(() => {
+        document.documentElement.style.fontSize = resolveFontSize(fontSize);
+    }, [fontSize]);
+};

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

@@ -0,0 +1,4 @@
+export { PixelizeThemeProvider } from "./PixelizeThemeProvider.js";
+export { useThemeMode } from "./useThemeMode.js";
+export { ThemeSwitcher } from "./ThemeSwitcher.js";
+export { DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./fontSize.js";

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

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { ThemeModeContext } from "./PixelizeThemeProvider.js";
+export const useThemeMode = () => {
+    const context = useContext(ThemeModeContext);
+    if (!context) {
+        throw new Error("useThemeMode must be used inside <PixelizeThemeProvider>. Wrap your app (or at least the subtree that calls useThemeMode) in <PixelizeThemeProvider> from pixelize-design-library.");
+    }
+    return context;
+};

package/dist/esm/Theme/testing/testPalette.js

@@ -0,0 +1,19 @@
+import { lightPalettes, darkPalettes } from "../tokens/brands/index.js";
+const isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const deepMerge = (base, patch) => {
+    if (!isPlainObject(base) || !isPlainObject(patch))
+        return patch;
+    const out = { ...base };
+    for (const [key, value] of Object.entries(patch))
+        out[key] = deepMerge(base[key], value);
+    return out;
+};
+/** A complete palette for tests. Overrides layer onto a real brand, never replace a group. */
+export const testPalette = (options = {}) => {
+    const { brand = "lavender", mode = "light", overrides = {} } = options;
+    const base = mode === "dark" ? darkPalettes[brand] : lightPalettes[brand];
+    return deepMerge(base, overrides);
+};
+export const testTheme = (options = {}) => ({
+    colors: testPalette(options),
+});

package/dist/esm/Theme/themeProps.js

@@ -0,0 +1 @@
+import "@chakra-ui/react";

package/dist/esm/Theme/tokens/brands/emerald/palette.dark.js

@@ -0,0 +1,5 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
+import light from "./palette.light.js";
+const palette = lazyPalette(light, () => buildDarkPalette(light));
+export default palette;

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

@@ -0,0 +1,123 @@
+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",
+    100: "#c2ebe6",
+    200: "#8eddd4",
+    300: "#5acfc2",
+    400: "#2fb7a9",
+    500: PRIMARY_500,
+    600: "#0c8575",
+    700: "#096b5e",
+    800: "#065248",
+    900: "#043b35",
+    opacity: buildPrimaryOpacity(PRIMARY_500),
+};
+const palette = {
+    ...neutralTokens,
+    ...buildBrandInk(PRIMARY_500),
+    // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 3.38/2.43.
+    gradient: { from: "#0d8474", to: "#048096" }, // teal → cyan
+    primary,
+    // 🌫️ Neutral gray (slightly cool to match teal)
+    gray: {
+        50: "#f6f8f8",
+        100: "#edf2f2",
+        200: "#dce5e5",
+        300: "#c3d2d2",
+        400: "#9fb3b3",
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
+        500: "#617474",
+        600: "#5e7070",
+        700: "#475555",
+        800: "#2f3a3a",
+        900: "#1f2626",
+    },
+    // 🌊 Background system (very subtle teal tint)
+    backgroundColor: {
+        main: "#f7fbfb",
+        secondary: "#eef7f6",
+        tertiary: "#e5f1ef",
+        quaternary: "#dcebea",
+        light: "#fcfefe",
+        medium: "#e2efee",
+        accent: "#d5e7e5",
+        subtle: "#f4f9f9",
+        muted: "#cfe2e0",
+        neutral: "#e2efee",
+        base: "#fafdfd",
+        tableHeader: "#eef7f6",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#fbfefe",
+        200: "#eef7f6",
+        300: "#e5f1ef",
+        400: "#dcebea",
+        500: "#d2e4e2",
+        600: "#bdd1cf",
+        700: "#96a9a7",
+        800: "#707f7e",
+        900: "#545f5f",
+    },
+    border: {
+        50: "#fafeff",
+        100: "#edf5f4",
+        200: "#ddebea",
+        300: "#cde1df",
+        400: "#bdd6d4",
+        500: "#accbc9",
+        600: "#99b7b5",
+        700: "#788f8e",
+        800: "#5b6e6d",
+        900: "#455454",
+    },
+    boxborder: {
+        50: "#fafeff",
+        100: "#ecf4f3",
+        200: "#d9e7e5",
+        300: "#c6dad8",
+        400: "#b3cdcb",
+        500: "#a0c0be",
+        600: "#8dadab",
+        700: "#6e8786",
+        800: "#546868",
+        900: "#3f5050",
+    },
+    table: {
+        hover: {
+            50: "#fbfefe",
+            100: "#f0f7f7",
+            200: "#e6f1f1",
+            300: "#dceaea",
+            400: "#d2e3e3",
+            500: "#c8dcdc",
+            600: "#b4c7c7",
+            700: "#909f9f",
+            800: "#6c7777",
+            900: "#525b5b",
+        },
+    },
+    // 🌑 Sidebar (deep teal-black)
+    sidebar: {
+        background: {
+            50: "#eaf4f3",
+            100: "#cfe3e1",
+            200: "#3e6f6a",
+            300: "#5a8c86",
+            400: "#2f5a55",
+            500: "#0e1f1e", // charcoal teal (instead of near-black)
+            600: "#0b1918",
+            700: "#081312",
+            800: "#060e0d",
+            900: "#040908",
+        },
+    },
+    boxShadow: {
+        primary: buildPrimaryShadowTint(PRIMARY_500),
+        ...sharedBoxShadow,
+    },
+};
+export default palette;

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

@@ -0,0 +1,102 @@
+import lavender from "./lavender/palette.light.js";
+import meadow from "./meadow/palette.light.js";
+import radiant from "./radiant/palette.light.js";
+import skyline from "./skyline/palette.light.js";
+import slate from "./slate/palette.light.js";
+import emerald from "./emerald/palette.light.js";
+import rosewood from "./rosewood/palette.light.js";
+import storefront from "./storefront/palette.light.js";
+import zinc from "./zinc/palette.light.js";
+import lavenderDark from "./lavender/palette.dark.js";
+import meadowDark from "./meadow/palette.dark.js";
+import radiantDark from "./radiant/palette.dark.js";
+import skylineDark from "./skyline/palette.dark.js";
+import slateDark from "./slate/palette.dark.js";
+import emeraldDark from "./emerald/palette.dark.js";
+import rosewoodDark from "./rosewood/palette.dark.js";
+import storefrontDark from "./storefront/palette.dark.js";
+import zincDark from "./zinc/palette.dark.js";
+import { pickAccentText, onFilled } from "../builders/accentText.js";
+import { withOutlineRung } from "../builders/outlineRung.js";
+import { withSidebarTokens } from "../builders/sidebarAccent.js";
+import { buildMutedText } from "../builders/mutedText.js";
+import { buildSemanticText, buildOnSemantic } from "../builders/semanticText.js";
+import { withPlaceholderRung, withTableHoverRung } from "../builders/resolvedRungs.js";
+import { buildFocusRing, withFocusRing } from "../builders/focusRing.js";
+import { withSurfaceRungs } from "../builders/surfaceRungs.js";
+import { buildSurfaceRaised, withSurfaceRaised } from "../builders/surfaceRaised.js";
+import { buildStar } from "../builders/star.js";
+import { lazyPalette } from "../builders/lazy.js";
+import { contrastRatio, mix } from "../builders/color.js";
+export const LIGHT_CANVAS_STEP = 1.09;
+const CANVAS_MIX_STEP = 0.0025;
+const CANVAS_MIX_MAX = 0.5;
+const lightCanvas = (canvas, card, ink) => {
+    for (let weight = 0; weight < CANVAS_MIX_MAX; weight += CANVAS_MIX_STEP) {
+        const next = mix(canvas, ink, weight);
+        if (contrastRatio(next, card) >= LIGHT_CANVAS_STEP)
+            return next;
+    }
+    return mix(canvas, ink, CANVAS_MIX_MAX);
+};
+/** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
+export const finalizeLightPalette = (source) => ({
+    ...source,
+    backgroundColor: {
+        ...source.backgroundColor,
+        base: lightCanvas(source.backgroundColor.base, source.background[50], source.text[900]),
+    },
+    sidebar: withSidebarTokens(source),
+    accentText: pickAccentText(source.primary, source.backgroundColor.main),
+    textMuted: buildMutedText(source.text, source.backgroundColor.main),
+    semanticText: buildSemanticText(source.semantic, source.backgroundColor.main),
+    onPrimary: onFilled(source.primary[500], source.white, source.black),
+    onSemantic: buildOnSemantic(source.semantic, source.white, source.black),
+    focusRing: buildFocusRing(source),
+    surfaceRaised: buildSurfaceRaised(source),
+    star: buildStar(source.backgroundColor.main),
+});
+export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
+export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
+// NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
+const resolveRungs = (palette) => withFocusRing(withSurfaceRungs(withSurfaceRaised(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))))));
+const lightBrand = (source) => lazyPalette(source, () => resolveRungs(finalizeLightPalette(source)));
+/** Light palette per brand, derived on first read. `lavender` is the base the other eight extend. */
+export const lightPalettes = {
+    lavender: lightBrand(lavender),
+    meadow: lightBrand(meadow),
+    radiant: lightBrand(radiant),
+    skyline: lightBrand(skyline),
+    slate: lightBrand(slate),
+    emerald: lightBrand(emerald),
+    rosewood: lightBrand(rosewood),
+    storefront: lightBrand(storefront),
+    zinc: lightBrand(zinc),
+};
+/** Dark palette per brand, derived from the matching light palette on first read. */
+const darkBrand = (source, dark) => lazyPalette(source, () => resolveRungs(dark));
+export const darkPalettes = {
+    lavender: darkBrand(lavender, lavenderDark),
+    meadow: darkBrand(meadow, meadowDark),
+    radiant: darkBrand(radiant, radiantDark),
+    skyline: darkBrand(skyline, skylineDark),
+    slate: darkBrand(slate, slateDark),
+    emerald: darkBrand(emerald, emeraldDark),
+    rosewood: darkBrand(rosewood, rosewoodDark),
+    storefront: darkBrand(storefront, storefrontDark),
+    zinc: darkBrand(zinc, zincDark),
+};
+// Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
+// present on one map and missing on the other.
+export const palettes = {
+    lavender: { light: lightPalettes.lavender, dark: darkPalettes.lavender },
+    meadow: { light: lightPalettes.meadow, dark: darkPalettes.meadow },
+    radiant: { light: lightPalettes.radiant, dark: darkPalettes.radiant },
+    skyline: { light: lightPalettes.skyline, dark: darkPalettes.skyline },
+    slate: { light: lightPalettes.slate, dark: darkPalettes.slate },
+    emerald: { light: lightPalettes.emerald, dark: darkPalettes.emerald },
+    rosewood: { light: lightPalettes.rosewood, dark: darkPalettes.rosewood },
+    storefront: { light: lightPalettes.storefront, dark: darkPalettes.storefront },
+    zinc: { light: lightPalettes.zinc, dark: darkPalettes.zinc },
+};
+export const themeNames = Object.keys(lightPalettes);

package/dist/esm/Theme/tokens/brands/lavender/palette.dark.js

@@ -0,0 +1,5 @@
+import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
+import light from "./palette.light.js";
+const palette = lazyPalette(light, () => buildDarkPalette(light));
+export default palette;