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

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

@@ -0,0 +1,483 @@
+import { colorSpace, maybeWrapCSSVariables } from '@workday/canvas-kit-styling';
+import { brand, system } from '@workday/canvas-tokens-web';
+import { defaultCanvasTheme } from './theme';
+import { isNumericalTheme, } from './types';
+/** True when a semantic theme intentionally passes a non-empty `canvas.palette`. */
+export function hasExplicitSemanticPalette(theme) {
+    var _a;
+    return (!isNumericalTheme(theme) &&
+        !!((_a = theme.canvas) === null || _a === void 0 ? void 0 : _a.palette) &&
+        Object.keys(theme.canvas.palette).length > 0);
+}
+/** Tokens that change when a consumer sets only their primary brand color. */
+export const BRAND_SCOPE_PRIMARY_BUNDLE = {
+    action: ['base', 'dark', 'darkest', 'accent'],
+    accent: ['primary', 'action'],
+    selected: {
+        fg: system.color.brand.fg.selected,
+        surface: system.color.brand.surface.selected,
+    },
+};
+/**
+ * Independently brandable tokens — writable when explicitly provided,
+ * but NEVER derived from primary.main / brand.primary.600.
+ */
+export const BRAND_SCOPE_INDEPENDENT = {
+    focus: {
+        primary: system.color.brand.focus.primary,
+        brandToken: brand.primary500,
+        semanticKey: 'focusOutline',
+    },
+    border: {
+        primary: system.color.brand.border.primary,
+        brandToken: brand.primary500,
+        semanticKey: 'focusOutline',
+    },
+};
+const commonTokenMapping = {
+    focusOutline: brand.common.focus,
+    alertInner: brand.common.caution.inner,
+    alertOuter: brand.common.caution.outer,
+    errorInner: 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] = maybeWrapCSSVariables(value);
+};
+/** Maps a numerical brand ramp onto `brand.<color><rampKey>` CSS variables. */
+export 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'
+            ? brand.action[rampKey]
+            : // @ts-ignore - dynamic token lookup
+                ((_b = brand[`${color}${rampKey}`]) !== null && _b !== void 0 ? _b : EXTENDED_BRAND_TOKEN_MAP[`${color}${rampKey}`]);
+        if (token) {
+            setStyleVar(style, token, value);
+        }
+    });
+}
+/** Called when consumer sets only `primary.main` or `brand.primary['600']`. */
+export function applyPrimaryBrandBundle(primaryColor, style) {
+    const value = maybeWrapCSSVariables(primaryColor);
+    setStyleVar(style, brand.primary.base, value);
+    setStyleVar(style, brand.primary600, value);
+    setStyleVar(style, brand.action.base, value);
+    if (system.color.brand.accent.primary) {
+        setStyleVar(style, system.color.brand.accent.primary, value);
+    }
+    if (system.color.brand.accent.action) {
+        setStyleVar(style, system.color.brand.accent.action, value);
+    }
+    const selectedFg = colorSpace.pressed({
+        color: `var(${brand.primary600})`,
+        fallback: value,
+        colorType: 'accent',
+    });
+    const selectedSurface = colorSpace.darken({
+        color: system.color.bg.default,
+        fallback: 'white',
+        mixinColor: `var(${brand.primary600})`,
+        mixinValue: '0.11',
+    });
+    setStyleVar(style, brand.primary700, selectedFg);
+    setStyleVar(style, brand.primary.dark, selectedFg);
+    setStyleVar(style, brand.primaryA50, selectedSurface);
+    if (BRAND_SCOPE_PRIMARY_BUNDLE.selected.fg) {
+        setStyleVar(style, BRAND_SCOPE_PRIMARY_BUNDLE.selected.fg, selectedFg);
+    }
+    if (BRAND_SCOPE_PRIMARY_BUNDLE.selected.surface) {
+        setStyleVar(style, BRAND_SCOPE_PRIMARY_BUNDLE.selected.surface, selectedSurface);
+    }
+    const hoverColor = colorSpace.hover({
+        color: `var(${brand.action.base})`,
+        fallback: value,
+        colorType: 'accent',
+    });
+    const pressedColor = colorSpace.pressed({
+        color: `var(${brand.action.base})`,
+        fallback: value,
+        colorType: 'accent',
+    });
+    setStyleVar(style, brand.action.dark, hoverColor);
+    setStyleVar(style, brand.action.darkest, pressedColor);
+}
+/** Called when consumer sets only `error.main` or `brand.critical['600']`. */
+export function applyCriticalBrandBundle(criticalColor, style) {
+    var _a;
+    const value = maybeWrapCSSVariables(criticalColor);
+    setStyleVar(style, brand.error.base, value);
+    setStyleVar(style, brand.critical600, value);
+    setStyleVar(style, brand.critical500, value);
+    if (system.color.brand.accent.critical) {
+        setStyleVar(style, system.color.brand.accent.critical, value);
+    }
+    if ((_a = system.color.brand.fg.critical) === null || _a === void 0 ? void 0 : _a.default) {
+        setStyleVar(style, system.color.brand.fg.critical.default, value);
+    }
+    if (system.color.brand.border.critical) {
+        setStyleVar(style, system.color.brand.border.critical, value);
+    }
+    if (system.color.brand.focus.critical) {
+        setStyleVar(style, system.color.brand.focus.critical, value);
+    }
+}
+/** Called when consumer sets only `alert.main` or `brand.caution['400']`. */
+export function applyCautionBrandBundle(cautionColor, style) {
+    var _a, _b, _c;
+    const value = maybeWrapCSSVariables(cautionColor);
+    setStyleVar(style, brand.alert.base, value);
+    setStyleVar(style, brand.caution400, value);
+    setStyleVar(style, brand.caution500, value);
+    if (system.color.brand.accent.caution) {
+        setStyleVar(style, system.color.brand.accent.caution, value);
+    }
+    if ((_a = system.color.brand.fg.caution) === null || _a === void 0 ? void 0 : _a.default) {
+        setStyleVar(style, system.color.brand.fg.caution.default, value);
+    }
+    if (system.color.brand.border.caution) {
+        setStyleVar(style, system.color.brand.border.caution, value);
+    }
+    if ((_b = system.color.brand.focus.caution) === null || _b === void 0 ? void 0 : _b.inner) {
+        setStyleVar(style, system.color.brand.focus.caution.inner, value);
+    }
+    if ((_c = system.color.brand.focus.caution) === null || _c === void 0 ? void 0 : _c.outer) {
+        setStyleVar(style, system.color.brand.focus.caution.outer, value);
+    }
+}
+/** Called when consumer sets only `success.main` or `brand.positive['600']`. */
+export function applyPositiveBrandBundle(positiveColor, style) {
+    var _a;
+    const value = maybeWrapCSSVariables(positiveColor);
+    setStyleVar(style, brand.success.base, value);
+    setStyleVar(style, brand.positive600, value);
+    if (system.color.brand.accent.positive) {
+        setStyleVar(style, system.color.brand.accent.positive, value);
+    }
+    if ((_a = system.color.brand.fg.positive) === null || _a === void 0 ? void 0 : _a.default) {
+        setStyleVar(style, system.color.brand.fg.positive.default, value);
+    }
+}
+/** Called when consumer sets only `neutral.main` or `brand.neutral['600']`. */
+export function applyNeutralBrandBundle(neutralColor, style) {
+    const value = maybeWrapCSSVariables(neutralColor);
+    setStyleVar(style, brand.neutral.base, value);
+    setStyleVar(style, brand.neutral600, value);
+}
+/** Writes first-class selected shortcuts from numerical theme input. */
+export function writeSelectedShortcuts(selected, style) {
+    if (!selected) {
+        return;
+    }
+    if (selected.fg && BRAND_SCOPE_PRIMARY_BUNDLE.selected.fg) {
+        setStyleVar(style, BRAND_SCOPE_PRIMARY_BUNDLE.selected.fg, selected.fg);
+    }
+    if (selected.surface && BRAND_SCOPE_PRIMARY_BUNDLE.selected.surface) {
+        setStyleVar(style, BRAND_SCOPE_PRIMARY_BUNDLE.selected.surface, selected.surface);
+    }
+}
+function writeFocusBorderBundle(value, style) {
+    setStyleVar(style, brand.common.focusOutline, value);
+    setStyleVar(style, brand.primary500, value);
+    if (BRAND_SCOPE_INDEPENDENT.focus.primary) {
+        setStyleVar(style, BRAND_SCOPE_INDEPENDENT.focus.primary, value);
+    }
+    if (BRAND_SCOPE_INDEPENDENT.border.primary) {
+        setStyleVar(style, BRAND_SCOPE_INDEPENDENT.border.primary, value);
+    }
+}
+/** Writes focus/border from explicit common or brand.primary.500 input — never from primary.main. */
+export function writeIndependentBrandTokens(theme, style) {
+    var _a, _b, _c, _d;
+    if (!theme) {
+        return;
+    }
+    if (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 === defaultCanvasTheme.palette.common[key]) {
+            return;
+        }
+        const value = maybeWrapCSSVariables(rawValue);
+        // @ts-ignore
+        setStyleVar(style, brand.common[key], value);
+        // @ts-ignore
+        setStyleVar(style, commonTokenMapping[key], value);
+        if (key === 'focusOutline') {
+            writeFocusBorderBundle(value, style);
+        }
+        if (key === 'alertInner' && ((_a = system.color.brand.focus.caution) === null || _a === void 0 ? void 0 : _a.inner)) {
+            setStyleVar(style, system.color.brand.focus.caution.inner, value);
+        }
+        if (key === 'alertOuter' && system.color.brand.border.caution) {
+            setStyleVar(style, system.color.brand.border.caution, value);
+        }
+        if (key === 'errorInner') {
+            if (system.color.brand.focus.critical) {
+                setStyleVar(style, system.color.brand.focus.critical, value);
+            }
+            if (system.color.brand.border.critical) {
+                setStyleVar(style, system.color.brand.border.critical, value);
+            }
+        }
+    });
+}
+/** Walks nested system override object and sets matching system CSS vars. */
+export 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 = 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, []);
+}
+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`. */
+export 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] !== defaultCanvasTheme.palette.common[key]) {
+                    const value = maybeWrapCSSVariables(palette.common[key]);
+                    // @ts-ignore
+                    setStyleVar(style, brand.common[key], value);
+                    // @ts-ignore
+                    setStyleVar(style, commonTokenMapping[key], value);
+                    if (key === 'focusOutline') {
+                        writeFocusBorderBundle(value, style);
+                    }
+                    if (key === 'alertInner' && ((_a = system.color.brand.focus.caution) === null || _a === void 0 ? void 0 : _a.inner)) {
+                        setStyleVar(style, system.color.brand.focus.caution.inner, value);
+                    }
+                    if (key === 'alertOuter' && system.color.brand.border.caution) {
+                        setStyleVar(style, system.color.brand.border.caution, value);
+                    }
+                    if (key === 'errorInner') {
+                        if (system.color.brand.focus.critical) {
+                            setStyleVar(style, system.color.brand.focus.critical, value);
+                        }
+                        if (system.color.brand.border.critical) {
+                            setStyleVar(style, 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] !== defaultCanvasTheme.palette[color][key]) {
+                    // @ts-ignore
+                    const value = maybeWrapCSSVariables(palette[color][key]);
+                    // @ts-ignore
+                    setStyleVar(style, brand[color][mappedKeys[key]], value);
+                    if (key !== 'contrast' && key in numericalTokenMapping) {
+                        const newBrandColor = brandColorMapping[color];
+                        const numericalSuffix = numericalTokenMapping[key];
+                        // @ts-ignore
+                        const numericalToken = brand[newBrandColor + numericalSuffix];
+                        if (numericalToken) {
+                            setStyleVar(style, numericalToken, value);
+                        }
+                        if (key === 'main') {
+                            // @ts-ignore
+                            const systemAccentToken = system.color.brand.accent[newBrandColor];
+                            if (systemAccentToken) {
+                                setStyleVar(style, systemAccentToken, value);
+                            }
+                            // @ts-ignore
+                            const systemFgToken = (_a = 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 = system.color.brand.fg[newBrandColor]) === null || _b === void 0 ? void 0 : _b.strong;
+                            if (systemFgStrongToken) {
+                                setStyleVar(style, systemFgStrongToken, value);
+                            }
+                            if (newBrandColor === 'primary' && system.color.brand.fg.selected) {
+                                setStyleVar(style, system.color.brand.fg.selected, value);
+                            }
+                            if (newBrandColor === 'critical') {
+                                if (system.color.brand.focus.critical) {
+                                    setStyleVar(style, system.color.brand.focus.critical, value);
+                                }
+                                if (system.color.brand.border.critical) {
+                                    setStyleVar(style, system.color.brand.border.critical, value);
+                                }
+                            }
+                            if (newBrandColor === 'caution') {
+                                if ((_c = system.color.brand.focus.caution) === null || _c === void 0 ? void 0 : _c.outer) {
+                                    setStyleVar(style, system.color.brand.focus.caution.outer, value);
+                                }
+                                if (system.color.brand.border.caution) {
+                                    setStyleVar(style, system.color.brand.border.caution, value);
+                                }
+                            }
+                        }
+                        else if (key === 'lighter') {
+                            // @ts-ignore
+                            const surfaceStrongToken = (_d = system.color.brand.surface[newBrandColor]) === null || _d === void 0 ? void 0 : _d.strong;
+                            if (surfaceStrongToken) {
+                                setStyleVar(style, surfaceStrongToken, value);
+                            }
+                            if (newBrandColor === 'primary' && system.color.brand.surface.selected) {
+                                setStyleVar(style, system.color.brand.surface.selected, value);
+                            }
+                        }
+                        else if (key === 'lightest') {
+                            // @ts-ignore
+                            const surfaceDefaultToken = (_e = system.color.brand.surface[newBrandColor]) === null || _e === void 0 ? void 0 : _e.default;
+                            if (surfaceDefaultToken) {
+                                setStyleVar(style, surfaceDefaultToken, value);
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    });
+}
+/** Writes numerical theme — brand scope applies per-family shortcuts; remaining keys write 1:1. */
+export 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);
+}
+/** Brand-scope semantic path — reads raw input only, not useTheme-filled palette. */
+export 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);
+}

package/dist/es6/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/es6/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/es6/common/lib/theming/index.js

@@ -14,6 +14,7 @@ export { default as styled, 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/es6/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/es6/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"}

package/dist/es6/common/lib/theming/sanaTheme.js

@@ -0,0 +1,127 @@
+/**
+ * Sana Canvas theme presets.
+ *
+ * Sana is a distinct theme from classic Canvas — not a delta on `defaultCanvasTheme`.
+ * Full visual treatment (fonts, shapes, system surfaces) comes from global CSS:
+ * import `@workday/canvas-tokens-web/css/sana/_variables.css` and set
+ * `data-theme="sana-canvas"` on `<html>`.
+ *
+ * These JS presets reference Sana brand CSS variables so `CanvasProvider` can forward
+ * them to popup containers (menus, selects, modals). Keep in sync with
+ * `@workday/canvas-tokens-web/css/sana/_variables.css`.
+ *
+ * | Preset | Use case |
+ * |--------|----------|
+ * | `sanaCanvasNumericalTheme` | Numerical `brand` shape for popup forwarding |
+ * | `sanaCanvasProviderTheme` | Same — pass to root `CanvasProvider` when `<html>` is unavailable |
+ */
+import { base, brand } from '@workday/canvas-tokens-web';
+/** Reference a canvas-tokens CSS variable (resolves under `[data-theme="sana-canvas"]`). */
+const varRef = (token) => `var(${token})`;
+/**
+ * Sana extends the neutral ramp with steps not yet exported from canvas-tokens-web JS.
+ * Defined in `@workday/canvas-tokens-web/css/sana/_variables.css`.
+ */
+const sanaBrandNeutral = {
+    '150': '--cnvs-brand-neutral-150',
+    '850': '--cnvs-brand-neutral-850',
+    A150: '--cnvs-brand-neutral-a150',
+};
+/**
+ * Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
+ * Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
+ */
+export const sanaCanvasNumericalTheme = {
+    // Explicit brand vars only — multi-key ramps write 1:1; no system shortcut bundles run.
+    themeScope: 'brand',
+    brand: {
+        action: {
+            base: varRef(brand.neutral975),
+            dark: varRef(brand.neutral950),
+            darkest: varRef(brand.neutral900),
+            accent: varRef(base.neutral0),
+            lightest: varRef(brand.neutral25),
+            lighter: varRef(brand.neutral50),
+            light: varRef(brand.neutral200),
+        },
+        neutral: {
+            '25': varRef(brand.neutral25),
+            '50': varRef(brand.neutral50),
+            '100': varRef(brand.neutral100),
+            '150': varRef(sanaBrandNeutral['150']),
+            '200': varRef(brand.neutral200),
+            '300': varRef(brand.neutral300),
+            '400': varRef(brand.neutral400),
+            '500': varRef(brand.neutral500),
+            '600': varRef(brand.neutral600),
+            '700': varRef(brand.neutral700),
+            '800': varRef(brand.neutral800),
+            '850': varRef(sanaBrandNeutral['850']),
+            '900': varRef(brand.neutral900),
+            '950': varRef(brand.neutral950),
+            '975': varRef(brand.neutral975),
+            A25: varRef(brand.neutralA25),
+            A50: varRef(brand.neutralA50),
+            A100: varRef(brand.neutralA100),
+            A150: varRef(sanaBrandNeutral.A150),
+            A200: varRef(brand.neutralA200),
+        },
+        primary: {
+            '500': varRef(brand.primary500),
+            '600': varRef(brand.primary600),
+            '700': varRef(brand.primary700),
+            A25: varRef(brand.primaryA25),
+            A50: varRef(brand.primaryA50),
+            A100: varRef(brand.primaryA100),
+        },
+        critical: {
+            '500': varRef(brand.critical500),
+            '600': varRef(brand.critical600),
+            '700': varRef(brand.critical700),
+            A25: varRef(brand.criticalA25),
+            A50: varRef(brand.criticalA50),
+        },
+        caution: {
+            '400': varRef(brand.caution400),
+            '500': varRef(brand.caution500),
+            A25: varRef(brand.cautionA25),
+            A50: varRef(brand.cautionA50),
+        },
+        positive: {
+            '600': varRef(brand.positive600),
+            '800': varRef(brand.positive800),
+            A25: varRef(brand.positiveA25),
+            A50: varRef(brand.positiveA50),
+        },
+    },
+    selected: {
+        fg: varRef(brand.neutralA900),
+        surface: varRef(brand.neutralA100),
+    },
+};
+/**
+ * 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 const sanaCanvasProviderTheme = sanaCanvasNumericalTheme;