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

package/dist/es6/common/lib/CanvasProvider.js

@@ -1,305 +1,99 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CacheProvider, ThemeProvider } from '@emotion/react';
-import { createStyles, getCache, maybeWrapCSSVariables } from '@workday/canvas-kit-styling';
+import * as React from 'react';
+import { createStyles, getCache } from '@workday/canvas-kit-styling';
 import { base, brand, system } from '@workday/canvas-tokens-web';
-import { defaultCanvasTheme, useTheme } from './theming';
-const mappedKeys = {
-    lightest: 'lightest',
-    lighter: 'lighter',
-    light: 'light',
-    main: 'base',
-    dark: 'dark',
-    darkest: 'darkest',
-    contrast: 'accent',
-};
-/**
- * Mapping from deprecated theme palette keys to new numerical brand tokens.
- * This ensures backwards compatibility when consumers use the old theme format.
- * For example: palette.primary.main -> brand.primary600
- */
-const numericalTokenMapping = {
-    lightest: '25',
-    lighter: '50',
-    light: '200',
-    main: '600',
-    dark: '700',
-    darkest: '800',
-};
-/**
- * Mapping from deprecated theme palette colors to new brand token names.
- * For example:
- * `primary` -> `primary`
- * `error` -> `critical`
- * `success` -> `positive`
- * `alert` -> `caution`
- * `neutral` -> `neutral`
- */
-const brandColorMapping = {
-    primary: 'primary',
-    error: 'critical',
-    success: 'positive',
-    alert: 'caution',
-    neutral: 'neutral',
-};
+import { defaultCanvasTheme, getTheme, isNumericalTheme, resolveThemingScope, useTheme, } from './theming';
+import { hasExplicitSemanticPalette, writeBrandScopeSemantic, writeNumericalTheme, writeSemanticTheme, } from './theming/brandScope';
+import { sanaCanvasProviderTheme } from './theming/sanaTheme';
 /**
- * Mapping from deprecated common palette keys to new brand.common tokens.
- *
- * ## Brandable System Tokens
- *
- * These are all the `system.color.brand.*` tokens that can be customized via theming.
- * Each token references a brand token that can be overridden through the CanvasProvider theme prop.
- *
- * ### Focus Tokens
- * - `system.color.brand.focus.primary` → `brand.primary.500` → Controlled by `focusOutline` (separately from `palette.primary.main`, which controls `brand.primary.600`)
- * - `system.color.brand.focus.critical` → `brand.critical.500` → Controlled by `palette.error.dark` or `errorInner`
- * - `system.color.brand.focus.caution.inner` → `brand.caution.400` → Controlled by `palette.alert.main` or `alertInner`
- * - `system.color.brand.focus.caution.outer` → `brand.caution.500` → Controlled by `palette.alert.dark` or `alertOuter`
- *
- * ### Border Tokens
- * - `system.color.brand.border.primary` → `brand.primary.500` → Controlled by `focusOutline` (separately from `palette.primary.main`, which controls `brand.primary.600`)
- * - `system.color.brand.border.critical` → `brand.critical.500` → Controlled by `palette.error.dark` or `errorInner`
- * - `system.color.brand.border.caution` → `brand.caution.500` → Controlled by `palette.alert.dark` or `alertOuter`
- *
- * ### Surface Tokens
- * - `system.color.brand.surface.primary.default` → `brand.primary.A25` → Controlled by `palette.primary.lightest`
- * - `system.color.brand.surface.primary.strong` → `brand.primary.A50` → Controlled by `palette.primary.lighter`
- * - `system.color.brand.surface.critical.default` → `brand.critical.A25` → Controlled by `palette.error.lightest`
- * - `system.color.brand.surface.critical.strong` → `brand.critical.A50` → Controlled by `palette.error.lighter`
- * - `system.color.brand.surface.caution.default` → `brand.caution.A25` → Controlled by `palette.alert.lightest`
- * - `system.color.brand.surface.caution.strong` → `brand.caution.A50` → Controlled by `palette.alert.lighter`
- * - `system.color.brand.surface.positive.default` → `brand.positive.A25` → Controlled by `palette.success.lightest`
- * - `system.color.brand.surface.positive.strong` → `brand.positive.A50` → Controlled by `palette.success.lighter`
- * - `system.color.brand.surface.selected` → `brand.primary.A50` → Controlled by `palette.primary.lighter`
- *
- * ### Accent Tokens
- * - `system.color.brand.accent.primary` → `brand.primary.600` → Controlled by `palette.primary.main`
- * - `system.color.brand.accent.critical` → `brand.critical.600` → Controlled by `palette.error.main`
- * - `system.color.brand.accent.caution` → `brand.caution.400` → Controlled by `palette.alert.main`
- * - `system.color.brand.accent.positive` → `brand.positive.600` → Controlled by `palette.success.main`
- * - `system.color.brand.accent.action` → `brand.primary.600` → Controlled by `palette.primary.main`
- *
- * ### Foreground (Text/Icon) Tokens
- * - `system.color.brand.fg.primary.default` → `brand.primary.600` → Controlled by `palette.primary.main`
- * - `system.color.brand.fg.primary.strong` → `brand.primary.700` → Controlled by `palette.primary.dark`
- * - `system.color.brand.fg.critical.default` → `brand.critical.600` → Controlled by `palette.error.main`
- * - `system.color.brand.fg.critical.strong` → `brand.critical.700` → Controlled by `palette.error.dark`
- * - `system.color.brand.fg.caution.default` → `brand.caution.600` → Controlled by `palette.alert.darkest`
- * - `system.color.brand.fg.caution.strong` → `brand.caution.700` → Controlled by `palette.alert.dark` (Note: no direct mapping, inherits default)
- * - `system.color.brand.fg.positive.default` → `brand.positive.600` → Controlled by `palette.success.main`
- * - `system.color.brand.fg.positive.strong` → `brand.positive.700` → Controlled by `palette.success.dark`
- * - `system.color.brand.fg.selected` → `brand.primary.700` → Controlled by `palette.primary.dark`
+ * Context for providing brand CSS variables to popup containers.
+ * This carries the resolved CSS variable style map from CanvasProvider
+ * to usePopupStack for proper popup theming, regardless of whether
+ * a numerical or legacy theme is used.
  */
-const commonTokenMapping = {
-    focusOutline: brand.common.focus,
-    alertInner: brand.common.caution.inner,
-    alertOuter: brand.common.caution.outer,
-    errorInner: brand.common.critical, // maps to brand.critical500
-};
+export const CanvasBrandStyleContext = React.createContext({});
 /**
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
  */
-export const defaultBranding = createStyles({ name: "20wd8t", styles: "--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-amber-400);--cnvs-brand-common-alert-outer:var(--cnvs-base-palette-amber-500);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-red-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blue-500);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-slate-800);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-slate-700);--cnvs-brand-neutral-base:var(--cnvs-base-palette-slate-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-slate-200);--cnvs-brand-neutral-lighter:var(--cnvs-base-palette-slate-50);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-slate-25);--cnvs-brand-success-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-800);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-700);--cnvs-brand-success-base:var(--cnvs-base-palette-green-600);--cnvs-brand-success-light:var(--cnvs-base-palette-green-200);--cnvs-brand-success-lighter:var(--cnvs-base-palette-green-50);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-25);--cnvs-brand-error-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-error-darkest:var(--cnvs-base-palette-red-800);--cnvs-brand-error-dark:var(--cnvs-base-palette-red-700);--cnvs-brand-error-base:var(--cnvs-base-palette-red-600);--cnvs-brand-error-light:var(--cnvs-base-palette-red-200);--cnvs-brand-error-lighter:var(--cnvs-base-palette-red-50);--cnvs-brand-error-lightest:var(--cnvs-base-palette-red-25);--cnvs-brand-alert-accent:var(--cnvs-base-palette-neutral-900);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-amber-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-amber-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-amber-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-amber-200);--cnvs-brand-alert-lighter:var(--cnvs-base-palette-amber-50);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-amber-25);--cnvs-brand-primary-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blue-800);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blue-700);--cnvs-brand-primary-base:var(--cnvs-base-palette-blue-600);--cnvs-brand-primary-light:var(--cnvs-base-palette-blue-200);--cnvs-brand-primary-lighter:var(--cnvs-base-palette-blue-50);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blue-25);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);--cnvs-sys-color-brand-focus-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-border-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-accent-primary:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-action:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-accent-caution:var(--cnvs-brand-alert-base);--cnvs-sys-color-brand-accent-positive:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-primary-default:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-fg-primary-strong:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-fg-critical-default:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-fg-critical-strong:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-fg-caution-default:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-caution-strong:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-positive-default:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-positive-strong:var(--cnvs-brand-success-dark);--cnvs-sys-color-brand-fg-selected:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-focus-critical:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-border-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-focus-caution-inner:var(--cnvs-brand-common-alert-inner);--cnvs-sys-color-brand-focus-caution-outer:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-border-caution:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-surface-primary-default:var(--cnvs-brand-primary-lightest);--cnvs-sys-color-brand-surface-primary-strong:var(--cnvs-brand-primary-lighter);--cnvs-sys-color-brand-surface-critical-default:var(--cnvs-brand-error-lightest);--cnvs-sys-color-brand-surface-critical-strong:var(--cnvs-brand-error-lighter);--cnvs-sys-color-brand-surface-caution-default:var(--cnvs-brand-alert-lightest);--cnvs-sys-color-brand-surface-caution-strong:var(--cnvs-brand-alert-lighter);--cnvs-sys-color-brand-surface-positive-default:var(--cnvs-brand-success-lightest);--cnvs-sys-color-brand-surface-positive-strong:var(--cnvs-brand-success-lighter);--cnvs-sys-color-brand-surface-selected:var(--cnvs-brand-primary-lighter);" });
+export const defaultBranding = createStyles({ name: "3z3im2", styles: "--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-amber-400);--cnvs-brand-common-alert-outer:var(--cnvs-base-palette-amber-500);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-red-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blue-500);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-slate-800);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-slate-700);--cnvs-brand-neutral-base:var(--cnvs-base-palette-slate-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-slate-200);--cnvs-brand-neutral-lighter:var(--cnvs-base-palette-slate-50);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-slate-25);--cnvs-brand-success-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-800);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-700);--cnvs-brand-success-base:var(--cnvs-base-palette-green-600);--cnvs-brand-success-light:var(--cnvs-base-palette-green-200);--cnvs-brand-success-lighter:var(--cnvs-base-palette-green-50);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-25);--cnvs-brand-error-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-error-darkest:var(--cnvs-base-palette-red-800);--cnvs-brand-error-dark:var(--cnvs-base-palette-red-700);--cnvs-brand-error-base:var(--cnvs-base-palette-red-600);--cnvs-brand-error-light:var(--cnvs-base-palette-red-200);--cnvs-brand-error-lighter:var(--cnvs-base-palette-red-50);--cnvs-brand-error-lightest:var(--cnvs-base-palette-red-25);--cnvs-brand-alert-accent:var(--cnvs-base-palette-neutral-900);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-amber-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-amber-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-amber-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-amber-200);--cnvs-brand-alert-lighter:var(--cnvs-base-palette-amber-50);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-amber-25);--cnvs-brand-primary-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blue-800);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blue-700);--cnvs-brand-primary-base:var(--cnvs-base-palette-blue-600);--cnvs-brand-primary-light:var(--cnvs-base-palette-blue-200);--cnvs-brand-primary-lighter:var(--cnvs-base-palette-blue-50);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blue-25);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);--cnvs-sys-color-brand-focus-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-border-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-accent-primary:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-action:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-accent-caution:var(--cnvs-brand-alert-base);--cnvs-sys-color-brand-accent-positive:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-primary-default:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-fg-primary-strong:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-fg-critical-default:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-fg-critical-strong:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-fg-caution-default:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-caution-strong:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-positive-default:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-positive-strong:var(--cnvs-brand-success-dark);--cnvs-sys-color-brand-fg-selected:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-focus-critical:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-border-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-focus-caution-inner:var(--cnvs-brand-common-alert-inner);--cnvs-sys-color-brand-focus-caution-outer:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-border-caution:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-surface-primary-default:var(--cnvs-brand-primary-lightest);--cnvs-sys-color-brand-surface-primary-strong:var(--cnvs-brand-primary-lighter);--cnvs-sys-color-brand-surface-critical-default:var(--cnvs-brand-error-lightest);--cnvs-sys-color-brand-surface-critical-strong:var(--cnvs-brand-error-lighter);--cnvs-sys-color-brand-surface-caution-default:var(--cnvs-brand-alert-lightest);--cnvs-sys-color-brand-surface-caution-strong:var(--cnvs-brand-alert-lighter);--cnvs-sys-color-brand-surface-positive-default:var(--cnvs-brand-success-lightest);--cnvs-sys-color-brand-surface-positive-strong:var(--cnvs-brand-success-lighter);--cnvs-sys-color-brand-surface-selected:var(--cnvs-brand-primary-lighter);" });
+/** Pure function — safe to call outside React hooks (e.g. usePopupStack). */
+export function canvasThemeToCssVars(theme, elemProps, options) {
+    var _a, _b;
+    const className = elemProps.className || '';
+    const style = { ...(elemProps.style || {}) };
+    const scope = (_a = options === null || options === void 0 ? void 0 : options.themeScope) !== null && _a !== void 0 ? _a : resolveThemingScope(theme);
+    if (!theme) {
+        return { ...elemProps, className, style };
+    }
+    if (isNumericalTheme(theme)) {
+        writeNumericalTheme(theme, style, scope);
+    }
+    else if (!hasExplicitSemanticPalette(theme)) {
+        // `{canvas: {}}` — no inline overrides; global CSS (e.g. Sana) cascades through.
+    }
+    else if (scope === 'brand') {
+        writeBrandScopeSemantic(theme, style);
+    }
+    else {
+        const filledTheme = (_b = options === null || options === void 0 ? void 0 : options.filledSemanticTheme) !== null && _b !== void 0 ? _b : getTheme(theme);
+        writeSemanticTheme(filledTheme.canvas.palette, style, { writeAll: true });
+    }
+    return { ...elemProps, className, style };
+}
 export const useCanvasThemeToCssVars = (
 /**
  * @deprecated ⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
-theme, elemProps) => {
-    const filledTheme = useTheme(theme);
-    const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' ');
-    const style = elemProps.style || {};
-    const { palette } = filledTheme.canvas;
-    ['common', 'primary', 'error', 'alert', 'success', 'neutral'].forEach(color => {
-        if (color === 'common') {
-            ['focusOutline', 'alertInner', 'alertOuter', 'errorInner'].forEach(key => {
-                if (palette.common[key] !== defaultCanvasTheme.palette.common[key]) {
-                    const value = maybeWrapCSSVariables(palette.common[key]);
-                    // Set deprecated token for backwards compatibility
-                    //@ts-ignore
-                    style[brand.common[key]] = value;
-                    // Forward to new brand.common tokens
-                    //@ts-ignore
-                    style[commonTokenMapping[key]] = value;
-                    // Additional system token forwarding for focusOutline
-                    if (key === 'focusOutline') {
-                        // system.color.brand.focus.primary -> brand.primary.500 (via brand.common.focus)
-                        // @ts-ignore
-                        style[system.color.brand.focus.primary] = value;
-                        // system.color.brand.border.primary -> brand.primary.500
-                        // @ts-ignore
-                        style[system.color.brand.border.primary] = value;
-                    }
-                    // Additional system token forwarding for alertInner
-                    if (key === 'alertInner') {
-                        // Forward alertInner to system.color.brand.focus.caution.inner
-                        // This token is used by components (e.g., TextInput with error="caution")
-                        // for inner focus ring styling. Maps to brand.caution400 via brand.common.caution.inner.
-                        // This ensures backwards compatibility when users customize alertInner in their theme.
-                        // @ts-ignore
-                        style[system.color.brand.focus.caution.inner] = value;
-                    }
-                    // Additional system token forwarding for alertOuter
-                    if (key === 'alertOuter') {
-                        // Forward alertOuter to system.color.brand.border.caution
-                        // This token is used by components (e.g., TextInput with error="caution")
-                        // for border and outer focus ring styling. Maps to brand.caution500 via brand.common.caution.outer.
-                        // This ensures backwards compatibility when users customize alertOuter in their theme.
-                        // @ts-ignore
-                        style[system.color.brand.border.caution] = value;
-                    }
-                    // Additional system token forwarding for errorInner
-                    if (key === 'errorInner') {
-                        // Forward errorInner to system.color.brand.focus.critical and system.color.brand.border.critical
-                        // These tokens are used by components (e.g., TextInput with error="error", Switch) for critical
-                        // focus ring and border styling. Maps to brand.critical500 via brand.common.errorInner.
-                        // This ensures backwards compatibility when users customize errorInner in their theme.
-                        // @ts-ignore
-                        style[system.color.brand.focus.critical] = value;
-                        // @ts-ignore
-                        style[system.color.brand.border.critical] = value;
-                    }
-                }
-            });
-        }
-        else {
-            ['lightest', 'lighter', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
-                var _a, _b, _c, _d, _e;
-                // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
-                //@ts-ignore
-                if (palette[color][key] !== defaultCanvasTheme.palette[color][key]) {
-                    const value = maybeWrapCSSVariables(palette[color][key]);
-                    // Set deprecated token (e.g., brand.primary.base) for backwards compatibility
-                    // @ts-ignore
-                    style[brand[color][mappedKeys[key]]] = value;
-                    // Forward to new numerical brand tokens (e.g., brand.primary600)
-                    // Skip 'contrast' as it doesn't map to numerical tokens
-                    if (key !== 'contrast' && key in numericalTokenMapping) {
-                        const newBrandColor = brandColorMapping[color];
-                        const numericalSuffix = numericalTokenMapping[key];
-                        // @ts-ignore - Dynamically access brand tokens like brand.primary600
-                        const numericalToken = brand[newBrandColor + numericalSuffix];
-                        if (numericalToken) {
-                            // @ts-ignore
-                            style[numericalToken] = value;
-                        }
-                        // Forward to all relevant system.color.brand.* tokens
-                        // These system tokens reference the numerical brand tokens, so updating them ensures full compatibility
-                        if (key === 'main') {
-                            // system.color.brand.accent.{color} -> brand.{color}.600 (except caution -> 400)
-                            // @ts-ignore
-                            const systemAccentToken = system.color.brand.accent[newBrandColor];
-                            if (systemAccentToken) {
-                                // @ts-ignore
-                                style[systemAccentToken] = value;
-                            }
-                            // system.color.brand.fg.{color}.default -> brand.{color}.600
-                            // @ts-ignore
-                            const systemFgToken = (_a = system.color.brand.fg[newBrandColor]) === null || _a === void 0 ? void 0 : _a.default;
-                            if (systemFgToken) {
-                                // @ts-ignore
-                                style[systemFgToken] = value;
-                            }
-                            // system.color.brand.focus.primary (maps to brand.primary.500 per docs)
-                            // For primary only, update focus when 'main' changes — unless focusOutline was customized (it takes precedence)
-                            if (newBrandColor === 'primary') {
-                                const focusOutlineCustomized = palette.common.focusOutline !== defaultCanvasTheme.palette.common.focusOutline;
-                                if (!focusOutlineCustomized) {
-                                    // @ts-ignore
-                                    const focusToken = system.color.brand.focus.primary;
-                                    if (focusToken) {
-                                        // @ts-ignore
-                                        style[focusToken] = value;
-                                    }
-                                }
-                            }
-                        }
-                        else if (key === 'dark') {
-                            // system.color.brand.fg.{color}.strong -> brand.{color}.700
-                            // @ts-ignore
-                            const systemFgStrongToken = (_b = system.color.brand.fg[newBrandColor]) === null || _b === void 0 ? void 0 : _b.strong;
-                            if (systemFgStrongToken) {
-                                // @ts-ignore
-                                style[systemFgStrongToken] = value;
-                            }
-                            // system.color.brand.fg.selected -> brand.primary.700 (for primary only)
-                            if (newBrandColor === 'primary') {
-                                // @ts-ignore
-                                const selectedToken = system.color.brand.fg.selected;
-                                if (selectedToken) {
-                                    // @ts-ignore
-                                    style[selectedToken] = value;
-                                }
-                            }
-                            // system.color.brand.focus.critical & system.color.brand.border.critical -> brand.critical.500 (palette.error.dark)
-                            if (newBrandColor === 'critical') {
-                                // @ts-ignore
-                                const focusCriticalToken = system.color.brand.focus.critical;
-                                if (focusCriticalToken) {
-                                    // @ts-ignore
-                                    style[focusCriticalToken] = value;
-                                }
-                                // @ts-ignore
-                                const borderCriticalToken = system.color.brand.border.critical;
-                                if (borderCriticalToken) {
-                                    // @ts-ignore
-                                    style[borderCriticalToken] = value;
-                                }
-                            }
-                            // system.color.brand.focus.caution.outer & system.color.brand.border.caution -> brand.caution.500 (palette.alert.dark)
-                            if (newBrandColor === 'caution') {
-                                // @ts-ignore
-                                const focusCautionOuterToken = (_c = system.color.brand.focus.caution) === null || _c === void 0 ? void 0 : _c.outer;
-                                if (focusCautionOuterToken) {
-                                    // @ts-ignore
-                                    style[focusCautionOuterToken] = value;
-                                }
-                                // @ts-ignore
-                                const borderCautionToken = system.color.brand.border.caution;
-                                if (borderCautionToken) {
-                                    // @ts-ignore
-                                    style[borderCautionToken] = value;
-                                }
-                            }
-                        }
-                        else if (key === 'lighter') {
-                            // system.color.brand.surface.{color}.strong -> brand.{color}.A50
-                            // Note: A50 tokens are different from regular 50 tokens but we'll forward the lighter value
-                            // @ts-ignore
-                            const surfaceStrongToken = (_d = system.color.brand.surface[newBrandColor]) === null || _d === void 0 ? void 0 : _d.strong;
-                            if (surfaceStrongToken) {
-                                // @ts-ignore
-                                style[surfaceStrongToken] = value;
-                            }
-                            // system.color.brand.surface.selected -> brand.primary.A50 (for primary only)
-                            if (newBrandColor === 'primary') {
-                                // @ts-ignore
-                                const selectedSurfaceToken = system.color.brand.surface.selected;
-                                if (selectedSurfaceToken) {
-                                    // @ts-ignore
-                                    style[selectedSurfaceToken] = value;
-                                }
-                            }
-                        }
-                        else if (key === 'lightest') {
-                            // system.color.brand.surface.{color}.default -> brand.{color}.A25
-                            // @ts-ignore
-                            const surfaceDefaultToken = (_e = system.color.brand.surface[newBrandColor]) === null || _e === void 0 ? void 0 : _e.default;
-                            if (surfaceDefaultToken) {
-                                // @ts-ignore
-                                style[surfaceDefaultToken] = value;
-                            }
-                        }
-                    }
-                }
-            });
-        }
+theme, elemProps, themeScope) => {
+    const filledTheme = useTheme(isNumericalTheme(theme) ? undefined : theme);
+    const resolvedScope = themeScope !== null && themeScope !== void 0 ? themeScope : resolveThemingScope(theme);
+    return canvasThemeToCssVars(theme, elemProps, {
+        themeScope: resolvedScope,
+        filledSemanticTheme: !isNumericalTheme(theme) && resolvedScope === 'full' ? filledTheme : undefined,
     });
-    return { ...elemProps, className, style };
 };
-export const CanvasProvider = ({ children, theme = { canvas: {} }, // default to empty theme to avoid breaking changes
-...props }) => {
+export const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
     var _a;
-    const { className, ...elemProps } = useCanvasThemeToCssVars(theme, props);
+    // Add console warning for unnecessary sanaCanvasProviderTheme usage
+    React.useEffect(() => {
+        if (process.env.NODE_ENV !== 'production') {
+            if (theme === sanaCanvasProviderTheme &&
+                typeof document !== 'undefined' &&
+                document.documentElement.getAttribute('data-theme') === 'sana-canvas') {
+                console.warn('Canvas Kit: You are passing sanaCanvasProviderTheme to CanvasProvider but ' +
+                    'data-theme="sana-canvas" is already set on <html>. The theme prop is not needed ' +
+                    'in this case and can be removed. Keep sanaCanvasProviderTheme when you cannot ' +
+                    'control <html> (embedded apps / microfrontends) so popups still get Sana brand ' +
+                    'variables. See: ' +
+                    'https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs');
+            }
+        }
+    }, [theme]);
+    // Computed className/style win over consumer props — do not re-spread `props` over them.
+    const { className, style, ...elemProps } = useCanvasThemeToCssVars(theme, props, themeScope);
     const cache = getCache();
-    const rest = { ...elemProps, ...props };
-    return (_jsx(CacheProvider, { value: cache, children: _jsx(ThemeProvider, { theme: theme, children: _jsx("div", { dir: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || defaultCanvasTheme.direction, ...rest, children: children }) }) }));
+    // Read parent context to support nested scoped providers
+    const parentBrandStyle = React.useContext(CanvasBrandStyleContext);
+    // Popup forwarding only needs CSS custom properties (not consumer layout styles).
+    const mergedBrandStyle = React.useMemo(() => {
+        const merged = {};
+        for (const [key, value] of Object.entries({ ...parentBrandStyle, ...style })) {
+            if (key.startsWith('--') && typeof value === 'string') {
+                // @ts-ignore - CSS custom property key
+                merged[key] = value;
+            }
+        }
+        return merged;
+    }, [parentBrandStyle, style]);
+    const emotionTheme = theme
+        ? isNumericalTheme(theme)
+            ? { canvas: defaultCanvasTheme }
+            : theme
+        : undefined;
+    const content = (_jsx("div", { dir: isNumericalTheme(theme)
+            ? theme.direction || defaultCanvasTheme.direction
+            : ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || defaultCanvasTheme.direction, className: className, ...elemProps, style: style, children: children }));
+    const wrappedContent = (_jsx(CanvasBrandStyleContext.Provider, { value: mergedBrandStyle, children: content }));
+    return (_jsx(CacheProvider, { value: cache, children: emotionTheme ? (_jsx(ThemeProvider, { theme: emotionTheme, children: wrappedContent })) : (wrappedContent) }));
 };

package/dist/es6/common/lib/EllipsisText.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createStyles, handleCsProp } from '@workday/canvas-kit-styling';
 import { createComponent } from './utils';
-const ellipsisStyles = createStyles({ name: "1zv6kd", styles: "white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" });
+const ellipsisStyles = createStyles({ name: "4ehrff", styles: "white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" });
 export const EllipsisText = createComponent('span')({
     displayName: 'EllipsisText',
     Component({ children, ...elemProps }, ref, Element) {

package/dist/es6/common/lib/styles/cornerShape.js

@@ -8,5 +8,5 @@ export const cornerShapeStencil = createStencil({
     vars: {
         shape: '',
     },
-    base: { name: "2vete6", styles: "box-sizing:border-box;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);" }
+    base: { name: "297zk6", styles: "box-sizing:border-box;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);" }
 }, "corner-shape-ccab68");

package/dist/es6/common/lib/theming/brandScope.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { CanvasActionBrandRamp, CanvasBrandRamp, CanvasNeutralBrandRamp, CanvasNumericalBrandTheme, CanvasProviderTheme, CanvasTheme, PartialEmotionCanvasTheme } from './types';
+/** True when a semantic theme intentionally passes a non-empty `canvas.palette`. */
+export declare function hasExplicitSemanticPalette(theme: CanvasProviderTheme): theme is PartialEmotionCanvasTheme;
+/** Tokens that change when a consumer sets only their primary brand color. */
+export declare const BRAND_SCOPE_PRIMARY_BUNDLE: {
+    readonly action: readonly ["base", "dark", "darkest", "accent"];
+    readonly accent: readonly ["primary", "action"];
+    readonly selected: {
+        readonly fg: "--cnvs-sys-color-brand-fg-selected";
+        readonly surface: "--cnvs-sys-color-brand-surface-selected";
+    };
+};
+/**
+ * Independently brandable tokens — writable when explicitly provided,
+ * but NEVER derived from primary.main / brand.primary.600.
+ */
+export declare const BRAND_SCOPE_INDEPENDENT: {
+    readonly focus: {
+        readonly primary: "--cnvs-sys-color-brand-focus-primary";
+        readonly brandToken: "--cnvs-brand-primary-500";
+        readonly semanticKey: "focusOutline";
+    };
+    readonly border: {
+        readonly primary: "--cnvs-sys-color-brand-border-primary";
+        readonly brandToken: "--cnvs-brand-primary-500";
+        readonly semanticKey: "focusOutline";
+    };
+};
+type BrandColor = 'primary' | 'critical' | 'caution' | 'positive' | 'neutral';
+/** Maps a numerical brand ramp onto `brand.<color><rampKey>` CSS variables. */
+export declare function writeNumericalBrandRamp(color: BrandColor | 'action', ramp: CanvasBrandRamp | CanvasNeutralBrandRamp | CanvasActionBrandRamp | undefined, style: React.CSSProperties, options?: {
+    skipKeys?: Set<string>;
+}): void;
+/** Called when consumer sets only `primary.main` or `brand.primary['600']`. */
+export declare function applyPrimaryBrandBundle(primaryColor: string, style: React.CSSProperties): void;
+/** Called when consumer sets only `error.main` or `brand.critical['600']`. */
+export declare function applyCriticalBrandBundle(criticalColor: string, style: React.CSSProperties): void;
+/** Called when consumer sets only `alert.main` or `brand.caution['400']`. */
+export declare function applyCautionBrandBundle(cautionColor: string, style: React.CSSProperties): void;
+/** Called when consumer sets only `success.main` or `brand.positive['600']`. */
+export declare function applyPositiveBrandBundle(positiveColor: string, style: React.CSSProperties): void;
+/** Called when consumer sets only `neutral.main` or `brand.neutral['600']`. */
+export declare function applyNeutralBrandBundle(neutralColor: string, style: React.CSSProperties): void;
+/** Writes first-class selected shortcuts from numerical theme input. */
+export declare function writeSelectedShortcuts(selected: CanvasNumericalBrandTheme['selected'] | undefined, style: React.CSSProperties): void;
+/** Writes focus/border from explicit common or brand.primary.500 input — never from primary.main. */
+export declare function writeIndependentBrandTokens(theme: CanvasProviderTheme | undefined, style: React.CSSProperties): void;
+/** Walks nested system override object and sets matching system CSS vars. */
+export declare function writeSystemBrandOverrides(systemOverrides: {
+    color?: {
+        brand?: Record<string, unknown>;
+    };
+} | undefined, style: React.CSSProperties): void;
+/** Full-scope semantic writer — filled palette compared against defaults unless `writeAll`. */
+export declare function writeSemanticTheme(palette: CanvasTheme['palette'], style: React.CSSProperties, options?: {
+    writeAll?: boolean;
+}): void;
+/** Writes numerical theme — brand scope applies per-family shortcuts; remaining keys write 1:1. */
+export declare function writeNumericalTheme(theme: CanvasNumericalBrandTheme, style: React.CSSProperties, scope: 'brand' | 'full'): void;
+/** Brand-scope semantic path — reads raw input only, not useTheme-filled palette. */
+export declare function writeBrandScopeSemantic(theme: PartialEmotionCanvasTheme, style: React.CSSProperties): void;
+export {};
+//# sourceMappingURL=brandScope.d.ts.map

package/dist/es6/common/lib/theming/brandScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brandScope.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/brandScope.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,sBAAsB,EACtB,yBAAyB,EACzB,mBAAmB,EACnB,WAAW,EACX,yBAAyB,EAE1B,MAAM,SAAS,CAAC;AAEjB,oFAAoF;AACpF,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,mBAAmB,GACzB,KAAK,IAAI,yBAAyB,CAMpC;AAED,8EAA8E;AAC9E,eAAO,MAAM,0BAA0B;;;;;;;CAO7B,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;CAW1B,CAAC;AASX,KAAK,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAsB9E,+EAA+E;AAC/E,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,UAAU,GAAG,QAAQ,EAC5B,IAAI,EAAE,eAAe,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,SAAS,EAClF,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,CAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAC,QA0BnC;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAiDvF;AAED,8EAA8E;AAC9E,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAmBzF;AAED,6EAA6E;AAC7E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAsBvF;AAED,gFAAgF;AAChF,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAYzF;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAKvF;AAED,wEAAwE;AACxE,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,SAAS,EAC3D,KAAK,EAAE,KAAK,CAAC,aAAa,QAW3B;AAaD,qGAAqG;AACrG,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,KAAK,EAAE,KAAK,CAAC,aAAa,QAuD3B;AAED,6EAA6E;AAC7E,wBAAgB,yBAAyB,CACvC,eAAe,EAAE;IAAC,KAAK,CAAC,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAC,CAAA;CAAC,GAAG,SAAS,EACxE,KAAK,EAAE,KAAK,CAAC,aAAa,QAyB3B;AAqBD,+FAA+F;AAC/F,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,EAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,CAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,QA+G/B;AAED,mGAAmG;AACnG,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,KAAK,EAAE,OAAO,GAAG,MAAM,QA4CxB;AAED,qFAAqF;AACrF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,QAoB3B"}