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

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

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanaCanvasProviderTheme = exports.sanaCanvasNumericalTheme = void 0;
+/**
+ * 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 |
+ */
+const canvas_tokens_web_1 = require("@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`.
+ */
+exports.sanaCanvasNumericalTheme = {
+    // Explicit brand vars only — multi-key ramps write 1:1; no system shortcut bundles run.
+    themeScope: 'brand',
+    brand: {
+        action: {
+            base: varRef(canvas_tokens_web_1.brand.neutral975),
+            dark: varRef(canvas_tokens_web_1.brand.neutral950),
+            darkest: varRef(canvas_tokens_web_1.brand.neutral900),
+            accent: varRef(canvas_tokens_web_1.base.neutral0),
+            lightest: varRef(canvas_tokens_web_1.brand.neutral25),
+            lighter: varRef(canvas_tokens_web_1.brand.neutral50),
+            light: varRef(canvas_tokens_web_1.brand.neutral200),
+        },
+        neutral: {
+            '25': varRef(canvas_tokens_web_1.brand.neutral25),
+            '50': varRef(canvas_tokens_web_1.brand.neutral50),
+            '100': varRef(canvas_tokens_web_1.brand.neutral100),
+            '150': varRef(sanaBrandNeutral['150']),
+            '200': varRef(canvas_tokens_web_1.brand.neutral200),
+            '300': varRef(canvas_tokens_web_1.brand.neutral300),
+            '400': varRef(canvas_tokens_web_1.brand.neutral400),
+            '500': varRef(canvas_tokens_web_1.brand.neutral500),
+            '600': varRef(canvas_tokens_web_1.brand.neutral600),
+            '700': varRef(canvas_tokens_web_1.brand.neutral700),
+            '800': varRef(canvas_tokens_web_1.brand.neutral800),
+            '850': varRef(sanaBrandNeutral['850']),
+            '900': varRef(canvas_tokens_web_1.brand.neutral900),
+            '950': varRef(canvas_tokens_web_1.brand.neutral950),
+            '975': varRef(canvas_tokens_web_1.brand.neutral975),
+            A25: varRef(canvas_tokens_web_1.brand.neutralA25),
+            A50: varRef(canvas_tokens_web_1.brand.neutralA50),
+            A100: varRef(canvas_tokens_web_1.brand.neutralA100),
+            A150: varRef(sanaBrandNeutral.A150),
+            A200: varRef(canvas_tokens_web_1.brand.neutralA200),
+        },
+        primary: {
+            '500': varRef(canvas_tokens_web_1.brand.primary500),
+            '600': varRef(canvas_tokens_web_1.brand.primary600),
+            '700': varRef(canvas_tokens_web_1.brand.primary700),
+            A25: varRef(canvas_tokens_web_1.brand.primaryA25),
+            A50: varRef(canvas_tokens_web_1.brand.primaryA50),
+            A100: varRef(canvas_tokens_web_1.brand.primaryA100),
+        },
+        critical: {
+            '500': varRef(canvas_tokens_web_1.brand.critical500),
+            '600': varRef(canvas_tokens_web_1.brand.critical600),
+            '700': varRef(canvas_tokens_web_1.brand.critical700),
+            A25: varRef(canvas_tokens_web_1.brand.criticalA25),
+            A50: varRef(canvas_tokens_web_1.brand.criticalA50),
+        },
+        caution: {
+            '400': varRef(canvas_tokens_web_1.brand.caution400),
+            '500': varRef(canvas_tokens_web_1.brand.caution500),
+            A25: varRef(canvas_tokens_web_1.brand.cautionA25),
+            A50: varRef(canvas_tokens_web_1.brand.cautionA50),
+        },
+        positive: {
+            '600': varRef(canvas_tokens_web_1.brand.positive600),
+            '800': varRef(canvas_tokens_web_1.brand.positive800),
+            A25: varRef(canvas_tokens_web_1.brand.positiveA25),
+            A50: varRef(canvas_tokens_web_1.brand.positiveA50),
+        },
+    },
+    selected: {
+        fg: varRef(canvas_tokens_web_1.brand.neutralA900),
+        surface: varRef(canvas_tokens_web_1.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>
+ * ```
+ */
+exports.sanaCanvasProviderTheme = exports.sanaCanvasNumericalTheme;

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

@@ -273,5 +273,167 @@ declare module '@emotion/react' {
 export type EmotionCanvasTheme = {
     canvas: CanvasTheme;
 };
+/**
+ * Numerical brand ramp keys. Each key maps 1:1 to a `--cnvs-brand-{family}-{key}` CSS variable.
+ *
+ * Common keys:
+ * - `'600'` — main accent / button fill / default brand fg
+ * - `'700'` — strong fg / selected text (when not using `selected.fg`)
+ * - `'500'` — focus rings and border primary (independent of `'600'`)
+ * - `'A50'` — selected surface tint (when not using `selected.surface`)
+ * - `'25'` / `'A25'` — subtle brand surfaces
+ *
+ * Neutral-only Sana steps (`'150'`, `'850'`, `'A150'`) live on {@link CanvasNeutralBrandRamp}.
+ */
+export type CanvasBrandRamp = Partial<Record<'25' | '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | '975' | 'A25' | 'A50' | 'A100' | 'A200', string>>;
+/**
+ * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not
+ * exported for primary/critical/caution/positive families.
+ */
+export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150', string>>;
+/** Semantic keys for `brand.action.*` CSS variables (PrimaryButton, etc.). */
+export type CanvasActionBrandRamp = Partial<Record<'base' | 'lightest' | 'lighter' | 'light' | 'dark' | 'darkest' | 'darker' | 'accent', string>>;
+/**
+ * Controls how partial theme input is expanded.
+ *
+ * - `'brand'` (default): predictable, design-aligned behavior. Setting only
+ *   `brand.primary['600']` themes PrimaryButton and selected list/menu
+ *   states. Other keys write only their CSS variable — no auto-generated ramps.
+ * - `'full'`: legacy behavior for the deprecated `canvas.palette` shape — auto-fills
+ *   lightest→darkest via `shiftColor` and forwards to many `system.color.brand.*`
+ *   tokens. On the numerical `brand` shape, `'full'` disables the primary shortcut
+ *   and writes each ramp key literally.
+ */
+export type CanvasThemingScope = 'brand' | 'full';
+/**
+ * Preferred theme input for `CanvasProvider`. Each value maps directly to brand CSS
+ * variables unless noted as a shortcut below.
+ *
+ * @example Minimal — brand buttons + selected states only
+ * ```tsx
+ * <CanvasProvider theme={{brand: {primary: {'600': base.magenta600}}}} />
+ * ```
+ *
+ * @example Explicit — focus independent of primary
+ * ```tsx
+ * <CanvasProvider theme={{
+ *   brand: {primary: {'600': base.red600, '500': base.blue500}},
+ *   selected: {fg: base.red700, surface: base.redA50},
+ * }} />
+ * ```
+ *
+ * @see sanaCanvasProviderTheme when `<html>` is unavailable and popups need Sana brand forwarding
+ */
+export interface CanvasNumericalBrandTheme {
+    brand?: {
+        /**
+         * Primary brand ramp (`--cnvs-brand-primary-*`).
+         *
+         * **Shortcut (brand scope only):** when `'600'` is the only key under `primary`,
+         * also sets:
+         * - `PrimaryButton` — `brand.action.base`, `accent.primary`, `accent.action`
+         * - Selected `Menu.Item` — `system.color.brand.fg.selected`, `surface.selected`
+         *
+         * Does **not** set focus rings — use `'500'` or `canvas.palette.common.focusOutline`.
+         *
+         * | Key | CSS variable | Typical consumers |
+         * |-----|--------------|-------------------|
+         * | `'600'` | `--cnvs-brand-primary-600` | PrimaryButton, brand links, accent.primary |
+         * | `'700'` | `--cnvs-brand-primary-700` | Strong primary fg, selected text |
+         * | `'500'` | `--cnvs-brand-primary-500` | Focus rings, border primary |
+         * | `'A50'` | `--cnvs-brand-primary-A50` | Selected/hover surfaces |
+         */
+        primary?: CanvasBrandRamp;
+        /**
+         * Button-specific ramp (`--cnvs-brand-action-*`). PrimaryButton reads
+         * these **before** `brand.primary`.
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `base` | PrimaryButton background |
+         * | `dark` / `darkest` | PrimaryButton hover / pressed |
+         * | `accent` | PrimaryButton label color |
+         */
+        action?: CanvasActionBrandRamp;
+        /**
+         * Critical/error ramp (`--cnvs-brand-critical-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'600'` | TextInput error, DeleteButton, critical fg |
+         * | `'500'` | Critical focus ring, error border |
+         * | `'A25'` / `'A50'` | Error surface tints |
+         */
+        critical?: CanvasBrandRamp;
+        /**
+         * Caution/warning ramp (`--cnvs-brand-caution-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'400'` | Caution accent, TextInput caution |
+         * | `'500'` | Caution focus outer, caution border |
+         * | `'A25'` / `'A50'` | Caution surface tints |
+         */
+        caution?: CanvasBrandRamp;
+        /**
+         * Positive/success ramp (`--cnvs-brand-positive-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'600'` | Checkbox/Radio checked, success fg |
+         * | `'A25'` / `'A50'` | Success surface tints |
+         */
+        positive?: CanvasBrandRamp;
+        /**
+         * Neutral brand ramp (`--cnvs-brand-neutral-*`). Sana Canvas uses `base.neutral*`
+         * instead of legacy `base.slate*` — see {@link sanaCanvasNumericalTheme}.
+         *
+         * Affects brand-neutral text, borders, and surfaces where components reference
+         * `brand.neutral.*` or `system.color.brand` tokens tied to neutral.
+         */
+        neutral?: CanvasNeutralBrandRamp;
+    };
+    /**
+     * Selected-state shortcuts. Prefer these over indirect `brand.primary['700']` /
+     * `brand.primary.A50` when customizing list/menu selection.
+     *
+     * | Key | CSS variable | Typical consumers |
+     * |-----|--------------|-------------------|
+     * | `fg` | `--cnvs-sys-color-brand-fg-selected` | Menu.Item, SegmentedControl selected text |
+     * | `surface` | `--cnvs-sys-color-brand-surface-selected` | Menu.Item, list selected background |
+     */
+    selected?: {
+        /** Selected text/icon color */
+        fg?: string;
+        /** Selected row/chip background */
+        surface?: string;
+    };
+    /**
+     * Escape hatch for `system.color.brand.*` tokens not covered by `brand` ramps.
+     * Keys mirror the token path, e.g. `{color: {brand: {focus: {primary: '#00f'}}}}`.
+     */
+    system?: {
+        color?: {
+            brand?: Record<string, unknown>;
+        };
+    };
+    /** Text direction for the provider subtree. */
+    direction?: ContentDirection;
+    /**
+     * @default 'brand'
+     * @see CanvasThemingScope
+     */
+    themeScope?: CanvasThemingScope;
+}
+/**
+ * Theme input accepted by {@link CanvasProvider}.
+ * - Numerical `brand` shape (preferred)
+ * - Deprecated `canvas.palette` shape (legacy)
+ */
+export type CanvasProviderTheme = (PartialEmotionCanvasTheme & {
+    themeScope?: CanvasThemingScope;
+}) | CanvasNumericalBrandTheme;
+export declare function isNumericalTheme(theme: CanvasProviderTheme | undefined): theme is CanvasNumericalBrandTheme;
+export declare function resolveThemingScope(theme: CanvasProviderTheme | undefined): CanvasThemingScope;
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF;;;;;;;;OAQG;IACH,WAAW,EAAE;QACX;;;;;;;;;;;;;;;;;;;;;WAqBG;QACH,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACH,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA6CG;QACH,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KAC1C,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAE7E,MAAM,MAAM,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AAEtE,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,MAAM,EAAE,WAAW,CAAC;KACrB;CACF;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentDirection = void 0;
+exports.resolveThemingScope = exports.isNumericalTheme = exports.ContentDirection = void 0;
 /**
  * Direction of page content for internationalization
  * @deprecated ⚠️ `ContentDirection` is deprecated. Use the `:dir()` CSS pseudo-class selector and CSS logical properties instead. For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) and [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
@@ -10,3 +10,83 @@ var ContentDirection;
     ContentDirection["LTR"] = "ltr";
     ContentDirection["RTL"] = "rtl";
 })(ContentDirection = exports.ContentDirection || (exports.ContentDirection = {}));
+function isNumericalTheme(theme) {
+    if (!theme) {
+        return false;
+    }
+    if ('canvas' in theme) {
+        return false;
+    }
+    // `direction` / `themeScope` alone are valid numerical themes (e.g. RTL-only).
+    return ('brand' in theme ||
+        'system' in theme ||
+        'selected' in theme ||
+        'direction' in theme ||
+        'themeScope' in theme);
+}
+exports.isNumericalTheme = isNumericalTheme;
+const EXTENDED_RAMP_KEYS = new Set([
+    '25',
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+    '950',
+    '975',
+    'A25',
+    'A50',
+    'A100',
+    'A200',
+    'lightest',
+    'lighter',
+    'light',
+    'main',
+    'dark',
+    'darkest',
+    'contrast',
+]);
+function resolveThemingScope(theme) {
+    var _a, _b;
+    if (!theme) {
+        return 'brand';
+    }
+    if (theme.themeScope) {
+        return theme.themeScope;
+    }
+    if (isNumericalTheme(theme)) {
+        return (_a = theme.themeScope) !== null && _a !== void 0 ? _a : 'brand';
+    }
+    const palette = (_b = theme.canvas) === null || _b === void 0 ? void 0 : _b.palette;
+    if (!palette) {
+        return 'brand';
+    }
+    if (palette.common && Object.keys(palette.common).length > 0) {
+        const commonOnlyFocus = Object.keys(palette.common).length === 1 && palette.common.focusOutline != null;
+        if (!commonOnlyFocus) {
+            return 'full';
+        }
+    }
+    for (const color of ['primary', 'error', 'alert', 'success', 'neutral']) {
+        const colorPalette = palette[color];
+        if (!colorPalette) {
+            continue;
+        }
+        for (const key of Object.keys(colorPalette)) {
+            // `main` alone uses brand-scope bundles for every semantic palette color.
+            if (key === 'main') {
+                continue;
+            }
+            if (EXTENDED_RAMP_KEYS.has(key)) {
+                return 'full';
+            }
+        }
+    }
+    return 'brand';
+}
+exports.resolveThemingScope = resolveThemingScope;

package/dist/commonjs/pill/lib/Pill.d.ts

@@ -15,7 +15,7 @@ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<
     variant: {
         readOnly: {
             [x: string]: string | {
-                [x: string]: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))" | "--cnvs-sys-color-bg-default";
+                [x: string]: "--cnvs-sys-color-bg-default" | "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
                 borderColor: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
             } | {
                 [x: string]: "--cnvs-sys-color-bg-default";
@@ -24,7 +24,7 @@ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<
             border: string;
             cursor: string;
             '&:hover, &.hover': {
-                [x: string]: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))" | "--cnvs-sys-color-bg-default";
+                [x: string]: "--cnvs-sys-color-bg-default" | "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
                 borderColor: "var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)))";
             };
             '&:focus-visible, &.focus': {

package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,mEAEf,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,KAClD,MAAM,SAAS,CAAC,WAAW,CAwF7B,CAAC"}
+{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,mEAEf,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,KAClD,MAAM,SAAS,CAAC,WAAW,CA2F7B,CAAC"}

package/dist/commonjs/popup/lib/hooks/usePopupStack.js

@@ -4,8 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePopupStack = void 0;
-const react_1 = require("@emotion/react");
-const react_2 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
 const common_1 = require("@workday/canvas-kit-react/common");
 /**
@@ -52,11 +51,11 @@ const common_1 = require("@workday/canvas-kit-react/common");
  */
 const usePopupStack = (ref, target) => {
     const { elementRef, localRef } = (0, common_1.useLocalRef)(ref);
-    const theme = react_2.default.useContext(react_1.ThemeContext);
-    const { style } = (0, common_1.useCanvasThemeToCssVars)(theme, {});
-    const firstLoadRef = react_2.default.useRef(true); // React 19 can call a useState more than once, so we need to track if we've already created a container
+    // Read brand style from the context provided by CanvasProvider
+    const style = react_1.default.useContext(common_1.CanvasBrandStyleContext);
+    const firstLoadRef = react_1.default.useRef(true); // React 19 can call a useState more than once, so we need to track if we've already created a container
     // useState function input ensures we only create a container once.
-    const [popupRef] = react_2.default.useState(() => {
+    const [popupRef] = react_1.default.useState(() => {
         if (firstLoadRef.current) {
             const container = canvas_kit_popup_stack_1.PopupStack.createContainer();
             elementRef(container);
@@ -65,22 +64,25 @@ const usePopupStack = (ref, target) => {
         }
         return localRef.current;
     });
-    // Forward only theme overrides (style) to the popup container when a theme was provided via
-    // CanvasProvider theme prop. We do NOT apply defaultBranding (className) so we don't create a
-    // cascade barrier—only the CSS variables the consumer overrode are set. This effect runs
-    // before PopupStack.add below so the container has the theme before it's shown (avoids blue→magenta flash).
-    react_2.default.useLayoutEffect(() => {
+    // Forward only CSS custom properties to the popup container when a theme was provided via
+    // CanvasProvider. We do NOT apply defaultBranding (className) so we don't create a cascade
+    // barrier. Filter to `--*` keys and string values so consumer layout styles from the provider
+    // are not copied onto the popup stack. Runs before PopupStack.add to avoid a theme flash.
+    react_1.default.useLayoutEffect(() => {
         const element = localRef.current;
         if (!element) {
             return undefined;
         }
-        const styleKeys = Object.keys(style);
+        const styleKeys = Object.keys(style).filter(key => key.startsWith('--'));
         if (styleKeys.length === 0) {
             return undefined;
         }
         for (const key of styleKeys) {
-            // @ts-ignore - token keys are CSS custom property names
-            element.style.setProperty(key, style[key]);
+            const value = style[key];
+            if (typeof value !== 'string') {
+                continue;
+            }
+            element.style.setProperty(key, value);
         }
         // No cleanup: leave theme on container so reopening doesn't flash
         return undefined;
@@ -88,7 +90,7 @@ const usePopupStack = (ref, target) => {
     // We useLayoutEffect to ensure proper timing of registration of the element to the popup stack.
     // Without this, the timing is unpredictable when mixed with other frameworks. Other frameworks
     // should also register as soon as the element is available
-    react_2.default.useLayoutEffect(() => {
+    react_1.default.useLayoutEffect(() => {
         if (popupRef !== localRef.current) {
             throw Error(`The 'ref' passed to usePopupStack should not be applied to a React element. This will cause a runtime error where the PopupStack and React compete for the element. Instead use ReactDOM.createPortal(<YourComponent />, ref.current)`);
         }
@@ -108,7 +110,7 @@ const usePopupStack = (ref, target) => {
     // Popup.Target), find the nearest element with a `dir` attribute: start from the focused element
     // (the trigger) or body, then use closest('[dir]'). Prefer reading getAttribute('dir') when
     // present to avoid getComputedStyle.
-    react_2.default.useLayoutEffect(() => {
+    react_1.default.useLayoutEffect(() => {
         var _a, _b, _c;
         const targetEl = target ? ('current' in target ? target.current : target) : undefined;
         let elementToCheck = targetEl !== null && targetEl !== void 0 ? targetEl : undefined;

package/dist/commonjs/testing/lib/StaticStates.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { PartialEmotionCanvasTheme, StyleRewriteFn } from '@workday/canvas-kit-react/common';
+import { CanvasProviderTheme, StyleRewriteFn } from '@workday/canvas-kit-react/common';
 export declare const convertToStaticStates: StyleRewriteFn;
 export declare const StaticStates: React.FC<React.PropsWithChildren<{
-    theme?: PartialEmotionCanvasTheme;
+    theme?: CanvasProviderTheme;
     className?: React.HTMLAttributes<HTMLElement>['className'];
 } & React.HTMLAttributes<HTMLElement>>>;
 //# sourceMappingURL=StaticStates.d.ts.map

package/dist/commonjs/testing/lib/StaticStates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../testing/lib/StaticStates.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,yBAAyB,EACzB,cAAc,EAEf,MAAM,kCAAkC,CAAC;AAG1C,eAAO,MAAM,qBAAqB,EAAE,cAoBnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CACjC,KAAK,CAAC,iBAAiB,CACrB;IACE,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;CAC5D,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CACtC,CAeF,CAAC"}
+{"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../testing/lib/StaticStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,mBAAmB,EAGnB,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAG1C,eAAO,MAAM,qBAAqB,EAAE,cAoBnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CACjC,KAAK,CAAC,iBAAiB,CACrB;IACE,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;CAC5D,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CACtC,CAcF,CAAC"}

package/dist/commonjs/testing/lib/StaticStates.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StaticStates = exports.convertToStaticStates = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@emotion/react");
 const common_1 = require("@workday/canvas-kit-react/common");
 const convertToStaticStates = obj => {
     if (!obj) {
@@ -23,8 +24,10 @@ const convertToStaticStates = obj => {
 };
 exports.convertToStaticStates = convertToStaticStates;
 const StaticStates = ({ children, theme, className, ...elemProps }) => {
-    const localTheme = (0, common_1.useTheme)(theme);
+    const localTheme = (0, common_1.useTheme)(theme && !(0, common_1.isNumericalTheme)(theme) ? theme : undefined);
     localTheme._styleRewriteFn = exports.convertToStaticStates;
-    return ((0, jsx_runtime_1.jsx)(common_1.CanvasProvider, { theme: localTheme, className: className, ...elemProps, "data-theme": "sana-canvas", children: children }));
+    // Nest ThemeProvider *inside* CanvasProvider so CanvasProvider's own ThemeProvider
+    // (used for legacy Emotion theme consumers) does not wipe `_styleRewriteFn`.
+    return ((0, jsx_runtime_1.jsx)(common_1.CanvasProvider, { className: className, ...elemProps, theme: theme, children: (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { theme: localTheme, children: children }) }));
 };
 exports.StaticStates = StaticStates;