@workday/canvas-kit-react 16.0.0-alpha.0499-next.0 → 16.0.0

package/dist/commonjs/common/lib/theming/brandScope.js

@@ -0,0 +1,499 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeBrandScopeSemantic = exports.writeNumericalTheme = exports.writeSemanticTheme = exports.writeSystemBrandOverrides = exports.writeIndependentBrandTokens = exports.writeSelectedShortcuts = exports.applyNeutralBrandBundle = exports.applyPositiveBrandBundle = exports.applyCautionBrandBundle = exports.applyCriticalBrandBundle = exports.applyPrimaryBrandBundle = exports.writeNumericalBrandRamp = exports.BRAND_SCOPE_INDEPENDENT = exports.BRAND_SCOPE_PRIMARY_BUNDLE = exports.hasExplicitSemanticPalette = void 0;
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const theme_1 = require("./theme");
+const types_1 = require("./types");
+/** True when a semantic theme intentionally passes a non-empty `canvas.palette`. */
+function hasExplicitSemanticPalette(theme) {
+    var _a;
+    return (!(0, types_1.isNumericalTheme)(theme) &&
+        !!((_a = theme.canvas) === null || _a === void 0 ? void 0 : _a.palette) &&
+        Object.keys(theme.canvas.palette).length > 0);
+}
+exports.hasExplicitSemanticPalette = hasExplicitSemanticPalette;
+/** Tokens that change when a consumer sets only their primary brand color. */
+exports.BRAND_SCOPE_PRIMARY_BUNDLE = {
+    action: ['base', 'dark', 'darkest', 'accent'],
+    accent: ['primary', 'action'],
+    selected: {
+        fg: canvas_tokens_web_1.system.color.brand.fg.selected,
+        surface: canvas_tokens_web_1.system.color.brand.surface.selected,
+    },
+};
+/**
+ * Independently brandable tokens — writable when explicitly provided,
+ * but NEVER derived from primary.main / brand.primary.600.
+ */
+exports.BRAND_SCOPE_INDEPENDENT = {
+    focus: {
+        primary: canvas_tokens_web_1.system.color.brand.focus.primary,
+        brandToken: canvas_tokens_web_1.brand.primary500,
+        semanticKey: 'focusOutline',
+    },
+    border: {
+        primary: canvas_tokens_web_1.system.color.brand.border.primary,
+        brandToken: canvas_tokens_web_1.brand.primary500,
+        semanticKey: 'focusOutline',
+    },
+};
+const commonTokenMapping = {
+    focusOutline: canvas_tokens_web_1.brand.common.focus,
+    alertInner: canvas_tokens_web_1.brand.common.caution.inner,
+    alertOuter: canvas_tokens_web_1.brand.common.caution.outer,
+    errorInner: canvas_tokens_web_1.brand.common.critical,
+};
+const brandColorMapping = {
+    primary: 'primary',
+    error: 'critical',
+    success: 'positive',
+    alert: 'caution',
+    neutral: 'neutral',
+};
+/** Brand ramp keys defined in Sana CSS but not yet exported from canvas-tokens-web. */
+const EXTENDED_BRAND_TOKEN_MAP = {
+    neutral150: '--cnvs-brand-neutral-150',
+    neutral850: '--cnvs-brand-neutral-850',
+    neutralA150: '--cnvs-brand-neutral-a150',
+};
+const setStyleVar = (style, token, value) => {
+    // @ts-ignore - CSS custom property key
+    style[token] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(value);
+};
+/** Maps a numerical brand ramp onto `brand.<color><rampKey>` CSS variables. */
+function writeNumericalBrandRamp(color, ramp, style, options) {
+    if (!ramp) {
+        return;
+    }
+    Object.keys(ramp).forEach(rampKey => {
+        var _a, _b;
+        if ((_a = options === null || options === void 0 ? void 0 : options.skipKeys) === null || _a === void 0 ? void 0 : _a.has(String(rampKey))) {
+            return;
+        }
+        const value = ramp[rampKey];
+        if (value == null) {
+            return;
+        }
+        const token = color === 'action'
+            ? canvas_tokens_web_1.brand.action[rampKey]
+            : // @ts-ignore - dynamic token lookup
+                ((_b = canvas_tokens_web_1.brand[`${color}${rampKey}`]) !== null && _b !== void 0 ? _b : EXTENDED_BRAND_TOKEN_MAP[`${color}${rampKey}`]);
+        if (token) {
+            setStyleVar(style, token, value);
+        }
+    });
+}
+exports.writeNumericalBrandRamp = writeNumericalBrandRamp;
+/** Called when consumer sets only `primary.main` or `brand.primary['600']`. */
+function applyPrimaryBrandBundle(primaryColor, style) {
+    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(primaryColor);
+    setStyleVar(style, canvas_tokens_web_1.brand.primary.base, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.primary600, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.action.base, value);
+    if (canvas_tokens_web_1.system.color.brand.accent.primary) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.accent.primary, value);
+    }
+    if (canvas_tokens_web_1.system.color.brand.accent.action) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.accent.action, value);
+    }
+    const selectedFg = canvas_kit_styling_1.colorSpace.pressed({
+        color: `var(${canvas_tokens_web_1.brand.primary600})`,
+        fallback: value,
+        colorType: 'accent',
+    });
+    const selectedSurface = canvas_kit_styling_1.colorSpace.darken({
+        color: canvas_tokens_web_1.system.color.bg.default,
+        fallback: 'white',
+        mixinColor: `var(${canvas_tokens_web_1.brand.primary600})`,
+        mixinValue: '0.11',
+    });
+    setStyleVar(style, canvas_tokens_web_1.brand.primary700, selectedFg);
+    setStyleVar(style, canvas_tokens_web_1.brand.primary.dark, selectedFg);
+    setStyleVar(style, canvas_tokens_web_1.brand.primaryA50, selectedSurface);
+    if (exports.BRAND_SCOPE_PRIMARY_BUNDLE.selected.fg) {
+        setStyleVar(style, exports.BRAND_SCOPE_PRIMARY_BUNDLE.selected.fg, selectedFg);
+    }
+    if (exports.BRAND_SCOPE_PRIMARY_BUNDLE.selected.surface) {
+        setStyleVar(style, exports.BRAND_SCOPE_PRIMARY_BUNDLE.selected.surface, selectedSurface);
+    }
+    const hoverColor = canvas_kit_styling_1.colorSpace.hover({
+        color: `var(${canvas_tokens_web_1.brand.action.base})`,
+        fallback: value,
+        colorType: 'accent',
+    });
+    const pressedColor = canvas_kit_styling_1.colorSpace.pressed({
+        color: `var(${canvas_tokens_web_1.brand.action.base})`,
+        fallback: value,
+        colorType: 'accent',
+    });
+    setStyleVar(style, canvas_tokens_web_1.brand.action.dark, hoverColor);
+    setStyleVar(style, canvas_tokens_web_1.brand.action.darkest, pressedColor);
+}
+exports.applyPrimaryBrandBundle = applyPrimaryBrandBundle;
+/** Called when consumer sets only `error.main` or `brand.critical['600']`. */
+function applyCriticalBrandBundle(criticalColor, style) {
+    var _a;
+    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(criticalColor);
+    setStyleVar(style, canvas_tokens_web_1.brand.error.base, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.critical600, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.critical500, value);
+    if (canvas_tokens_web_1.system.color.brand.accent.critical) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.accent.critical, value);
+    }
+    if ((_a = canvas_tokens_web_1.system.color.brand.fg.critical) === null || _a === void 0 ? void 0 : _a.default) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.fg.critical.default, value);
+    }
+    if (canvas_tokens_web_1.system.color.brand.border.critical) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.border.critical, value);
+    }
+    if (canvas_tokens_web_1.system.color.brand.focus.critical) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.critical, value);
+    }
+}
+exports.applyCriticalBrandBundle = applyCriticalBrandBundle;
+/** Called when consumer sets only `alert.main` or `brand.caution['400']`. */
+function applyCautionBrandBundle(cautionColor, style) {
+    var _a, _b, _c;
+    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(cautionColor);
+    setStyleVar(style, canvas_tokens_web_1.brand.alert.base, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.caution400, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.caution500, value);
+    if (canvas_tokens_web_1.system.color.brand.accent.caution) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.accent.caution, value);
+    }
+    if ((_a = canvas_tokens_web_1.system.color.brand.fg.caution) === null || _a === void 0 ? void 0 : _a.default) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.fg.caution.default, value);
+    }
+    if (canvas_tokens_web_1.system.color.brand.border.caution) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.border.caution, value);
+    }
+    if ((_b = canvas_tokens_web_1.system.color.brand.focus.caution) === null || _b === void 0 ? void 0 : _b.inner) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.caution.inner, value);
+    }
+    if ((_c = canvas_tokens_web_1.system.color.brand.focus.caution) === null || _c === void 0 ? void 0 : _c.outer) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.caution.outer, value);
+    }
+}
+exports.applyCautionBrandBundle = applyCautionBrandBundle;
+/** Called when consumer sets only `success.main` or `brand.positive['600']`. */
+function applyPositiveBrandBundle(positiveColor, style) {
+    var _a;
+    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(positiveColor);
+    setStyleVar(style, canvas_tokens_web_1.brand.success.base, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.positive600, value);
+    if (canvas_tokens_web_1.system.color.brand.accent.positive) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.accent.positive, value);
+    }
+    if ((_a = canvas_tokens_web_1.system.color.brand.fg.positive) === null || _a === void 0 ? void 0 : _a.default) {
+        setStyleVar(style, canvas_tokens_web_1.system.color.brand.fg.positive.default, value);
+    }
+}
+exports.applyPositiveBrandBundle = applyPositiveBrandBundle;
+/** Called when consumer sets only `neutral.main` or `brand.neutral['600']`. */
+function applyNeutralBrandBundle(neutralColor, style) {
+    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(neutralColor);
+    setStyleVar(style, canvas_tokens_web_1.brand.neutral.base, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.neutral600, value);
+}
+exports.applyNeutralBrandBundle = applyNeutralBrandBundle;
+/** Writes first-class selected shortcuts from numerical theme input. */
+function writeSelectedShortcuts(selected, style) {
+    if (!selected) {
+        return;
+    }
+    if (selected.fg && exports.BRAND_SCOPE_PRIMARY_BUNDLE.selected.fg) {
+        setStyleVar(style, exports.BRAND_SCOPE_PRIMARY_BUNDLE.selected.fg, selected.fg);
+    }
+    if (selected.surface && exports.BRAND_SCOPE_PRIMARY_BUNDLE.selected.surface) {
+        setStyleVar(style, exports.BRAND_SCOPE_PRIMARY_BUNDLE.selected.surface, selected.surface);
+    }
+}
+exports.writeSelectedShortcuts = writeSelectedShortcuts;
+function writeFocusBorderBundle(value, style) {
+    setStyleVar(style, canvas_tokens_web_1.brand.common.focusOutline, value);
+    setStyleVar(style, canvas_tokens_web_1.brand.primary500, value);
+    if (exports.BRAND_SCOPE_INDEPENDENT.focus.primary) {
+        setStyleVar(style, exports.BRAND_SCOPE_INDEPENDENT.focus.primary, value);
+    }
+    if (exports.BRAND_SCOPE_INDEPENDENT.border.primary) {
+        setStyleVar(style, exports.BRAND_SCOPE_INDEPENDENT.border.primary, value);
+    }
+}
+/** Writes focus/border from explicit common or brand.primary.500 input — never from primary.main. */
+function writeIndependentBrandTokens(theme, style) {
+    var _a, _b, _c, _d;
+    if (!theme) {
+        return;
+    }
+    if ((0, types_1.isNumericalTheme)(theme)) {
+        const focusValue = (_b = (_a = theme.brand) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b['500'];
+        if (focusValue) {
+            writeFocusBorderBundle(focusValue, style);
+        }
+        if (theme.system) {
+            writeSystemBrandOverrides(theme.system, style);
+        }
+        return;
+    }
+    const common = (_d = (_c = theme.canvas) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.common;
+    if (!common) {
+        return;
+    }
+    ['focusOutline', 'alertInner', 'alertOuter', 'errorInner'].forEach(key => {
+        var _a;
+        const rawValue = common[key];
+        if (rawValue == null) {
+            return;
+        }
+        if (rawValue === theme_1.defaultCanvasTheme.palette.common[key]) {
+            return;
+        }
+        const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(rawValue);
+        // @ts-ignore
+        setStyleVar(style, canvas_tokens_web_1.brand.common[key], value);
+        // @ts-ignore
+        setStyleVar(style, commonTokenMapping[key], value);
+        if (key === 'focusOutline') {
+            writeFocusBorderBundle(value, style);
+        }
+        if (key === 'alertInner' && ((_a = canvas_tokens_web_1.system.color.brand.focus.caution) === null || _a === void 0 ? void 0 : _a.inner)) {
+            setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.caution.inner, value);
+        }
+        if (key === 'alertOuter' && canvas_tokens_web_1.system.color.brand.border.caution) {
+            setStyleVar(style, canvas_tokens_web_1.system.color.brand.border.caution, value);
+        }
+        if (key === 'errorInner') {
+            if (canvas_tokens_web_1.system.color.brand.focus.critical) {
+                setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.critical, value);
+            }
+            if (canvas_tokens_web_1.system.color.brand.border.critical) {
+                setStyleVar(style, canvas_tokens_web_1.system.color.brand.border.critical, value);
+            }
+        }
+    });
+}
+exports.writeIndependentBrandTokens = writeIndependentBrandTokens;
+/** Walks nested system override object and sets matching system CSS vars. */
+function writeSystemBrandOverrides(systemOverrides, style) {
+    var _a;
+    const brandOverrides = (_a = systemOverrides === null || systemOverrides === void 0 ? void 0 : systemOverrides.color) === null || _a === void 0 ? void 0 : _a.brand;
+    if (!brandOverrides) {
+        return;
+    }
+    const walk = (node, path) => {
+        Object.entries(node).forEach(([key, val]) => {
+            var _a, _b;
+            if (val && typeof val === 'object') {
+                walk(val, [...path, key]);
+            }
+            else if (typeof val === 'string') {
+                let tokenNode = canvas_tokens_web_1.system.color.brand;
+                for (const seg of [...path, key]) {
+                    // @ts-ignore
+                    tokenNode = tokenNode === null || tokenNode === void 0 ? void 0 : tokenNode[seg];
+                }
+                if (typeof tokenNode === 'string') {
+                    const cssVarName = (_b = (_a = tokenNode.match(/--[\w-]+/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : tokenNode;
+                    setStyleVar(style, cssVarName, val);
+                }
+            }
+        });
+    };
+    walk(brandOverrides, []);
+}
+exports.writeSystemBrandOverrides = writeSystemBrandOverrides;
+const mappedKeys = {
+    lightest: 'lightest',
+    lighter: 'lighter',
+    light: 'light',
+    main: 'base',
+    dark: 'dark',
+    darkest: 'darkest',
+    contrast: 'accent',
+};
+const numericalTokenMapping = {
+    lightest: '25',
+    lighter: '50',
+    light: '200',
+    main: '600',
+    dark: '700',
+    darkest: '800',
+};
+/** Full-scope semantic writer — filled palette compared against defaults unless `writeAll`. */
+function writeSemanticTheme(palette, style, options) {
+    var _a;
+    const writeAll = (_a = options === null || options === void 0 ? void 0 : options.writeAll) !== null && _a !== void 0 ? _a : false;
+    ['common', 'primary', 'error', 'alert', 'success', 'neutral'].forEach(color => {
+        if (color === 'common') {
+            ['focusOutline', 'alertInner', 'alertOuter', 'errorInner'].forEach(key => {
+                var _a;
+                if (writeAll || palette.common[key] !== theme_1.defaultCanvasTheme.palette.common[key]) {
+                    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common[key]);
+                    // @ts-ignore
+                    setStyleVar(style, canvas_tokens_web_1.brand.common[key], value);
+                    // @ts-ignore
+                    setStyleVar(style, commonTokenMapping[key], value);
+                    if (key === 'focusOutline') {
+                        writeFocusBorderBundle(value, style);
+                    }
+                    if (key === 'alertInner' && ((_a = canvas_tokens_web_1.system.color.brand.focus.caution) === null || _a === void 0 ? void 0 : _a.inner)) {
+                        setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.caution.inner, value);
+                    }
+                    if (key === 'alertOuter' && canvas_tokens_web_1.system.color.brand.border.caution) {
+                        setStyleVar(style, canvas_tokens_web_1.system.color.brand.border.caution, value);
+                    }
+                    if (key === 'errorInner') {
+                        if (canvas_tokens_web_1.system.color.brand.focus.critical) {
+                            setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.critical, value);
+                        }
+                        if (canvas_tokens_web_1.system.color.brand.border.critical) {
+                            setStyleVar(style, canvas_tokens_web_1.system.color.brand.border.critical, value);
+                        }
+                    }
+                }
+            });
+        }
+        else {
+            ['lightest', 'lighter', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
+                var _a, _b, _c, _d, _e;
+                // @ts-ignore
+                if (writeAll || palette[color][key] !== theme_1.defaultCanvasTheme.palette[color][key]) {
+                    // @ts-ignore
+                    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette[color][key]);
+                    // @ts-ignore
+                    setStyleVar(style, canvas_tokens_web_1.brand[color][mappedKeys[key]], value);
+                    if (key !== 'contrast' && key in numericalTokenMapping) {
+                        const newBrandColor = brandColorMapping[color];
+                        const numericalSuffix = numericalTokenMapping[key];
+                        // @ts-ignore
+                        const numericalToken = canvas_tokens_web_1.brand[newBrandColor + numericalSuffix];
+                        if (numericalToken) {
+                            setStyleVar(style, numericalToken, value);
+                        }
+                        if (key === 'main') {
+                            // @ts-ignore
+                            const systemAccentToken = canvas_tokens_web_1.system.color.brand.accent[newBrandColor];
+                            if (systemAccentToken) {
+                                setStyleVar(style, systemAccentToken, value);
+                            }
+                            // @ts-ignore
+                            const systemFgToken = (_a = canvas_tokens_web_1.system.color.brand.fg[newBrandColor]) === null || _a === void 0 ? void 0 : _a.default;
+                            if (systemFgToken) {
+                                setStyleVar(style, systemFgToken, value);
+                            }
+                        }
+                        else if (key === 'dark') {
+                            // @ts-ignore
+                            const systemFgStrongToken = (_b = canvas_tokens_web_1.system.color.brand.fg[newBrandColor]) === null || _b === void 0 ? void 0 : _b.strong;
+                            if (systemFgStrongToken) {
+                                setStyleVar(style, systemFgStrongToken, value);
+                            }
+                            if (newBrandColor === 'primary' && canvas_tokens_web_1.system.color.brand.fg.selected) {
+                                setStyleVar(style, canvas_tokens_web_1.system.color.brand.fg.selected, value);
+                            }
+                            if (newBrandColor === 'critical') {
+                                if (canvas_tokens_web_1.system.color.brand.focus.critical) {
+                                    setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.critical, value);
+                                }
+                                if (canvas_tokens_web_1.system.color.brand.border.critical) {
+                                    setStyleVar(style, canvas_tokens_web_1.system.color.brand.border.critical, value);
+                                }
+                            }
+                            if (newBrandColor === 'caution') {
+                                if ((_c = canvas_tokens_web_1.system.color.brand.focus.caution) === null || _c === void 0 ? void 0 : _c.outer) {
+                                    setStyleVar(style, canvas_tokens_web_1.system.color.brand.focus.caution.outer, value);
+                                }
+                                if (canvas_tokens_web_1.system.color.brand.border.caution) {
+                                    setStyleVar(style, canvas_tokens_web_1.system.color.brand.border.caution, value);
+                                }
+                            }
+                        }
+                        else if (key === 'lighter') {
+                            // @ts-ignore
+                            const surfaceStrongToken = (_d = canvas_tokens_web_1.system.color.brand.surface[newBrandColor]) === null || _d === void 0 ? void 0 : _d.strong;
+                            if (surfaceStrongToken) {
+                                setStyleVar(style, surfaceStrongToken, value);
+                            }
+                            if (newBrandColor === 'primary' && canvas_tokens_web_1.system.color.brand.surface.selected) {
+                                setStyleVar(style, canvas_tokens_web_1.system.color.brand.surface.selected, value);
+                            }
+                        }
+                        else if (key === 'lightest') {
+                            // @ts-ignore
+                            const surfaceDefaultToken = (_e = canvas_tokens_web_1.system.color.brand.surface[newBrandColor]) === null || _e === void 0 ? void 0 : _e.default;
+                            if (surfaceDefaultToken) {
+                                setStyleVar(style, surfaceDefaultToken, value);
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    });
+}
+exports.writeSemanticTheme = writeSemanticTheme;
+/** Writes numerical theme — brand scope applies per-family shortcuts; remaining keys write 1:1. */
+function writeNumericalTheme(theme, style, scope) {
+    var _a, _b, _c;
+    const brandPalette = theme.brand;
+    const skipRamp = {};
+    if (scope === 'brand' && brandPalette) {
+        if (((_a = brandPalette.primary) === null || _a === void 0 ? void 0 : _a['600']) && Object.keys(brandPalette.primary).length === 1) {
+            applyPrimaryBrandBundle(brandPalette.primary['600'], style);
+            skipRamp.primary = new Set(['600']);
+            // Do not skip action keys — explicit `brand.action.*` must win over derived shades
+            // written by applyPrimaryBrandBundle (writeNumericalBrandRamp runs after).
+        }
+        // Only the main ramp key triggers the family shortcut. Lone `'500'` (focus/border) must
+        // write 1:1 and must not overwrite critical600 / caution400 via the bundle.
+        const critical = brandPalette.critical;
+        if ((critical === null || critical === void 0 ? void 0 : critical['600']) && Object.keys(critical).length === 1) {
+            applyCriticalBrandBundle(critical['600'], style);
+            skipRamp.critical = new Set(['600']);
+        }
+        const caution = brandPalette.caution;
+        if ((caution === null || caution === void 0 ? void 0 : caution['400']) && Object.keys(caution).length === 1) {
+            applyCautionBrandBundle(caution['400'], style);
+            skipRamp.caution = new Set(['400']);
+        }
+        if (((_b = brandPalette.positive) === null || _b === void 0 ? void 0 : _b['600']) && Object.keys(brandPalette.positive).length === 1) {
+            applyPositiveBrandBundle(brandPalette.positive['600'], style);
+            skipRamp.positive = new Set(['600']);
+        }
+        if (((_c = brandPalette.neutral) === null || _c === void 0 ? void 0 : _c['600']) && Object.keys(brandPalette.neutral).length === 1) {
+            applyNeutralBrandBundle(brandPalette.neutral['600'], style);
+            skipRamp.neutral = new Set(['600']);
+        }
+    }
+    if (brandPalette) {
+        ['primary', 'critical', 'caution', 'positive', 'neutral', 'action'].forEach(color => {
+            writeNumericalBrandRamp(color, brandPalette[color], style, { skipKeys: skipRamp[color] });
+        });
+    }
+    writeSelectedShortcuts(theme.selected, style);
+    writeIndependentBrandTokens(theme, style);
+}
+exports.writeNumericalTheme = writeNumericalTheme;
+/** Brand-scope semantic path — reads raw input only, not useTheme-filled palette. */
+function writeBrandScopeSemantic(theme, style) {
+    var _a, _b, _c, _d, _e, _f;
+    const palette = (_a = theme.canvas) === null || _a === void 0 ? void 0 : _a.palette;
+    if ((_b = palette === null || palette === void 0 ? void 0 : palette.primary) === null || _b === void 0 ? void 0 : _b.main) {
+        applyPrimaryBrandBundle(palette.primary.main, style);
+    }
+    if ((_c = palette === null || palette === void 0 ? void 0 : palette.error) === null || _c === void 0 ? void 0 : _c.main) {
+        applyCriticalBrandBundle(palette.error.main, style);
+    }
+    if ((_d = palette === null || palette === void 0 ? void 0 : palette.alert) === null || _d === void 0 ? void 0 : _d.main) {
+        applyCautionBrandBundle(palette.alert.main, style);
+    }
+    if ((_e = palette === null || palette === void 0 ? void 0 : palette.success) === null || _e === void 0 ? void 0 : _e.main) {
+        applyPositiveBrandBundle(palette.success.main, style);
+    }
+    if ((_f = palette === null || palette === void 0 ? void 0 : palette.neutral) === null || _f === void 0 ? void 0 : _f.main) {
+        applyNeutralBrandBundle(palette.neutral.main, style);
+    }
+    writeIndependentBrandTokens(theme, style);
+}
+exports.writeBrandScopeSemantic = writeBrandScopeSemantic;

package/dist/commonjs/common/lib/theming/index.d.ts

@@ -14,6 +14,7 @@ export { default as styled, type StyleRewriteFn, filterOutProps } from './styled
  * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
 export * from './theme';
+export * from './sanaTheme';
 /**
  * @deprecated ⚠️ `useTheme` and `getTheme` are deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead.
  * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).

package/dist/commonjs/common/lib/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B;;;GAGG;AACH,cAAc,SAAS,CAAC;AACxB;;;GAGG;AACH,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,KAAK,cAAc,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAChF;;;GAGG;AACH,cAAc,SAAS,CAAC;AACxB;;;GAGG;AACH,cAAc,YAAY,CAAC;AAC3B;;;GAGG;AACH,cAAc,iBAAiB,CAAC;AAChC;;;GAGG;AACH,cAAc,YAAY,CAAC;AAC3B;;;GAGG;AACH,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B;;;GAGG;AACH,cAAc,SAAS,CAAC;AACxB;;;GAGG;AACH,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,KAAK,cAAc,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAChF;;;GAGG;AACH,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B;;;GAGG;AACH,cAAc,YAAY,CAAC;AAC3B;;;GAGG;AACH,cAAc,iBAAiB,CAAC;AAChC;;;GAGG;AACH,cAAc,YAAY,CAAC;AAC3B;;;GAGG;AACH,cAAc,kBAAkB,CAAC"}

package/dist/commonjs/common/lib/theming/index.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "filterOutProps", { enumerable: true, get: functi
  * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
 __exportStar(require("./theme"), exports);
+__exportStar(require("./sanaTheme"), exports);
 /**
  * @deprecated ⚠️ `useTheme` and `getTheme` are deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead.
  * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).

package/dist/commonjs/common/lib/theming/sanaTheme.d.ts

@@ -0,0 +1,33 @@
+import type { CanvasNumericalBrandTheme } from './types';
+/**
+ * Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
+ * Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
+ */
+export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
+/**
+ * Pass to root `CanvasProvider` to forward Sana brand CSS variables onto popup containers
+ * (menus, selects, modals, tooltips).
+ *
+ * **When to use it**
+ * - **Required** when you cannot set `data-theme="sana-canvas"` on `<html>` (embedded apps,
+ *   microfrontends, third-party shells). Popups portal to `document.body` and will not inherit
+ *   a nested `data-theme` — this preset copies Sana brand vars onto the popup stack container.
+ * - Also useful in tests without global Sana CSS, or custom popup hosts outside normal cascade.
+ *
+ * **When you can skip it**
+ * - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
+ *   inherit brand variables from the document and no `theme` prop is needed.
+ *
+ * @example
+ * ```tsx
+ * // Preferred — control <html>
+ * import '@workday/canvas-tokens-web/css/sana/_variables.css';
+ * // <html data-theme="sana-canvas">
+ * <CanvasProvider><App /></CanvasProvider>
+ *
+ * // No access to <html> — required for popup parity
+ * <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
+ * ```
+ */
+export declare const sanaCanvasProviderTheme: CanvasNumericalBrandTheme;
+//# sourceMappingURL=sanaTheme.d.ts.map

package/dist/commonjs/common/lib/theming/sanaTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanaTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/sanaTheme.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,SAAS,CAAC;AAevD;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,yBAmEtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,uBAAuB,2BAA2B,CAAC"}