@workday/canvas-kit-react 16.0.12 → 16.0.14

package/dist/es6/common/lib/CanvasProvider.d.ts

@@ -7,6 +7,17 @@ import { CanvasProviderTheme, CanvasThemingScope, EmotionCanvasTheme } from './t
  * a numerical or legacy theme is used.
  */
 export declare const CanvasBrandStyleContext: React.Context<React.CSSProperties>;
+/**
+ * Context for providing the `data-theme` value to popup containers.
+ *
+ * Token stylesheets scope their variables to an attribute selector (e.g. Sana's
+ * `[data-theme="sana-canvas"]` block defines ~300 variables — palette, shape, depth, type).
+ * Portaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they
+ * never inherit a nested `data-theme` and none of those variables resolve. Forwarding the
+ * attribute itself lets the popup container match the same selector, so the whole theme applies
+ * through normal cascade — rather than trying to mirror every variable as an inline style.
+ */
+export declare const CanvasThemeAttributeContext: React.Context<string | undefined>;
 export interface CanvasProviderProps {
     /**
      * ⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.

package/dist/es6/common/lib/CanvasProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAOnB,MAAM,WAAW,CAAC;AASnB;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,oCAA+C,CAAC;AAEpF,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,QA+E1B,CAAC;AAEH,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAC5C,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBF;AAED,eAAO,MAAM,uBAAuB,UAI3B,mBAAmB,GAAG,SAAS,aAC3B,MAAM,cAAc,CAAC,WAAW,CAAC,eAC/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYhC,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CA2EzD,CAAC"}
+{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAOnB,MAAM,WAAW,CAAC;AASnB;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,oCAA+C,CAAC;AAEpF;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,mCAAqD,CAAC;AAE9F,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,QA+E1B,CAAC;AAEH,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAC5C,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBF;AAED,eAAO,MAAM,uBAAuB,UAI3B,mBAAmB,GAAG,SAAS,aAC3B,MAAM,cAAc,CAAC,WAAW,CAAC,eAC/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYhC,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CAoFzD,CAAC"}

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

@@ -13,10 +13,21 @@ import { sanaCanvasProviderTheme } from './theming/sanaTheme';
  * a numerical or legacy theme is used.
  */
 export const CanvasBrandStyleContext = React.createContext({});
+/**
+ * Context for providing the `data-theme` value to popup containers.
+ *
+ * Token stylesheets scope their variables to an attribute selector (e.g. Sana's
+ * `[data-theme="sana-canvas"]` block defines ~300 variables — palette, shape, depth, type).
+ * Portaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they
+ * never inherit a nested `data-theme` and none of those variables resolve. Forwarding the
+ * attribute itself lets the popup container match the same selector, so the whole theme applies
+ * through normal cascade — rather than trying to mirror every variable as an inline style.
+ */
+export const CanvasThemeAttributeContext = React.createContext(undefined);
 /**
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
  */
-export const defaultBranding = createStyles({ name: "2dk42t", 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: "2q4lsh", 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;
@@ -54,7 +65,7 @@ theme, elemProps, themeScope) => {
     });
 };
 export const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
-    var _a;
+    var _a, _b;
     // Add console warning for unnecessary sanaCanvasProviderTheme usage
     React.useEffect(() => {
         if (process.env.NODE_ENV !== 'production') {
@@ -75,6 +86,10 @@ export const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
     const cache = getCache();
     // Read parent context to support nested scoped providers
     const parentBrandStyle = React.useContext(CanvasBrandStyleContext);
+    const parentThemeAttribute = React.useContext(CanvasThemeAttributeContext);
+    // `data-theme` on this provider wins; otherwise inherit from a parent provider so nested
+    // providers keep forwarding the outer theme attribute to popups.
+    const themeAttribute = (_a = props['data-theme']) !== null && _a !== void 0 ? _a : parentThemeAttribute;
     // Popup forwarding only needs CSS custom properties (not consumer layout styles).
     const mergedBrandStyle = React.useMemo(() => {
         const merged = {};
@@ -93,7 +108,7 @@ export const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
         : 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 }));
+            : ((_b = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _b === void 0 ? void 0 : _b.direction) || defaultCanvasTheme.direction, className: className, ...elemProps, style: style, children: children }));
+    const wrappedContent = (_jsx(CanvasThemeAttributeContext.Provider, { value: themeAttribute, children: _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: "3kzzko", styles: "white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" });
+const ellipsisStyles = createStyles({ name: "34k5l8", 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: "28h2ca", styles: "box-sizing:border-box;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);" }
+    base: { name: "193vzu", 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.map

@@ -1 +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;;;;;;;;;CAS1B,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;AAED,6EAA6E;AAC7E,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,CAAC,OAAO,CAAC,GAAG,SAAS,EACrD,KAAK,EAAE,KAAK,CAAC,aAAa,QAK3B;AAaD;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,KAAK,EAAE,KAAK,CAAC,aAAa,QAmD3B;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,QA6CxB;AAED,qFAAqF;AACrF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,QAoB3B"}
+{"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;;;;;;;;;CAS1B,CAAC;AASX,KAAK,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AA2B9E,+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;AAED,6EAA6E;AAC7E,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,CAAC,OAAO,CAAC,GAAG,SAAS,EACrD,KAAK,EAAE,KAAK,CAAC,aAAa,QAK3B;AAaD;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,KAAK,EAAE,KAAK,CAAC,aAAa,QAmD3B;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,QA6CxB;AAED,qFAAqF;AACrF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,QAoB3B"}

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

@@ -50,6 +50,11 @@ const EXTENDED_BRAND_TOKEN_MAP = {
     neutral150: '--cnvs-brand-neutral-150',
     neutral850: '--cnvs-brand-neutral-850',
     neutralA150: '--cnvs-brand-neutral-a150',
+    neutralA850: '--cnvs-brand-neutral-a850',
+    primaryA300: '--cnvs-brand-primary-a300',
+    criticalA300: '--cnvs-brand-critical-a300',
+    cautionA300: '--cnvs-brand-caution-a300',
+    positiveA300: '--cnvs-brand-positive-a300',
 };
 const setStyleVar = (style, token, value) => {
     // @ts-ignore - CSS custom property key

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

@@ -2,6 +2,29 @@ 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`.
+ *
+ * Mirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of
+ * `primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a
+ * stronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana
+ * overrides. Every other key is intentionally omitted — Sana does not define a distinct value
+ * for it, so writing it here would only reference the very variable being written (a `var()`
+ * cycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).
+ *
+ * `action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define
+ * `--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are
+ * derived downstream from the root theme. Forcing them here would pin values the root is meant
+ * to own.
+ *
+ * Ramp values must reference `base.*` (the underlying palette), never `brand.*` of the same
+ * name — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS
+ * variable, so referencing `brand.*` here would create that same self-reference cycle. The
+ * `system.color.brand.*` overrides are the exception: they target *different* CSS variables
+ * (`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.
+ *
+ * Note this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand
+ * system colors) comes from the stylesheet's `[data-theme="sana-canvas"]` block — pass
+ * `data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups
+ * so the full theme applies there too.
  */
 export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
 /**
@@ -18,6 +41,14 @@ export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
  * - 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.
  *
+ * Pass `data-theme="sana-canvas"` alongside it. That attribute is forwarded to popup stack
+ * containers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to
+ * portaled content through the stylesheet's own `[data-theme="sana-canvas"]` block — this preset
+ * covers brand tokens, the attribute covers everything else.
+ *
+ * `action.*` and selected-state tokens are not set by this preset — Sana does not define them,
+ * and they resolve from the root theme.
+ *
  * @example
  * ```tsx
  * // Preferred — control <html>
@@ -25,8 +56,10 @@ export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
  * // <html data-theme="sana-canvas">
  * <CanvasProvider><App /></CanvasProvider>
  *
- * // No access to <html> — required for popup parity
- * <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
+ * // No access to <html> — pass both for full parity, including portaled popups
+ * <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
+ *   <App />
+ * </CanvasProvider>
  * ```
  */
 export declare const sanaCanvasProviderTheme: CanvasNumericalBrandTheme;

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

@@ -1 +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"}
+{"version":3,"file":"sanaTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/sanaTheme.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,SAAS,CAAC;AAavD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,wBAAwB,EAAE,yBAiEtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,uBAAuB,2BAA2B,CAAC"}

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

@@ -15,88 +15,109 @@
  * | `sanaCanvasNumericalTheme` | Numerical `brand` shape for popup forwarding |
  * | `sanaCanvasProviderTheme` | Same — pass to root `CanvasProvider` when `<html>` is unavailable |
  */
+import { cssVar } from '@workday/canvas-kit-styling';
 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`.
+ * `base.sana` is a pre-built map of `var(--token, fallback)` strings exported by
+ * canvas-tokens-web specifically for these Sana-only base-palette steps — use them directly,
+ * not `cssVar()` (which expects a bare variable name, not an already-wrapped `var()` string).
+ * Referencing `base.*` (not `brand.*` of the same name) avoids a `var()` self-reference cycle:
+ * CanvasProvider writes each ramp entry onto the identically-named `--cnvs-brand-*` variable, so
+ * `brand.sana.neutral150` (itself `var(--cnvs-brand-neutral-150, ...)`) would point right back at
+ * the variable being written.
  */
-const sanaBrandNeutral = {
-    '150': '--cnvs-brand-neutral-150',
-    '850': '--cnvs-brand-neutral-850',
-    A150: '--cnvs-brand-neutral-a150',
-};
+const sanaBasePalette = base.sana;
 /**
  * Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
  * Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
+ *
+ * Mirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of
+ * `primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a
+ * stronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana
+ * overrides. Every other key is intentionally omitted — Sana does not define a distinct value
+ * for it, so writing it here would only reference the very variable being written (a `var()`
+ * cycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).
+ *
+ * `action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define
+ * `--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are
+ * derived downstream from the root theme. Forcing them here would pin values the root is meant
+ * to own.
+ *
+ * Ramp values must reference `base.*` (the underlying palette), never `brand.*` of the same
+ * name — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS
+ * variable, so referencing `brand.*` here would create that same self-reference cycle. The
+ * `system.color.brand.*` overrides are the exception: they target *different* CSS variables
+ * (`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.
+ *
+ * Note this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand
+ * system colors) comes from the stylesheet's `[data-theme="sana-canvas"]` block — pass
+ * `data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups
+ * so the full theme applies there too.
  */
 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),
+            A300: sanaBasePalette.blueA300,
         },
         critical: {
-            '500': varRef(brand.critical500),
-            '600': varRef(brand.critical600),
-            '700': varRef(brand.critical700),
-            A25: varRef(brand.criticalA25),
-            A50: varRef(brand.criticalA50),
+            A300: sanaBasePalette.redA300,
         },
         caution: {
-            '400': varRef(brand.caution400),
-            '500': varRef(brand.caution500),
-            A25: varRef(brand.cautionA25),
-            A50: varRef(brand.cautionA50),
+            A300: sanaBasePalette.amberA300,
         },
         positive: {
-            '600': varRef(brand.positive600),
-            '800': varRef(brand.positive800),
-            A25: varRef(brand.positiveA25),
-            A50: varRef(brand.positiveA50),
+            A300: sanaBasePalette.greenA300,
+        },
+        neutral: {
+            '25': cssVar(base.neutral25),
+            '50': cssVar(base.neutral50),
+            '100': cssVar(base.neutral100),
+            '150': sanaBasePalette.neutral150,
+            '200': cssVar(base.neutral200),
+            '300': cssVar(base.neutral300),
+            '400': cssVar(base.neutral400),
+            '500': cssVar(base.neutral500),
+            '600': cssVar(base.neutral600),
+            '700': cssVar(base.neutral700),
+            '800': cssVar(base.neutral800),
+            '850': sanaBasePalette.neutral850,
+            '900': cssVar(base.neutral900),
+            '950': cssVar(base.neutral950),
+            '975': cssVar(base.neutral975),
+            A25: cssVar(base.neutralA25),
+            A50: cssVar(base.neutralA50),
+            A100: cssVar(base.neutralA100),
+            A150: sanaBasePalette.neutralA150,
+            A200: cssVar(base.neutralA200),
+            A300: cssVar(base.neutralA300),
+            A400: cssVar(base.neutralA400),
+            A500: cssVar(base.neutralA500),
+            A600: cssVar(base.neutralA600),
+            A700: cssVar(base.neutralA700),
+            A800: cssVar(base.neutralA800),
+            A850: sanaBasePalette.neutralA850,
+            A900: cssVar(base.neutralA900),
+            A950: cssVar(base.neutralA950),
+            A975: cssVar(base.neutralA975),
         },
     },
-    selected: {
-        fg: varRef(brand.neutralA900),
-        surface: varRef(brand.neutralA100),
+    system: {
+        color: {
+            brand: {
+                accent: {
+                    primary: cssVar(brand.neutral975),
+                    action: cssVar(brand.neutral975),
+                },
+                fg: {
+                    primary: {
+                        default: cssVar(brand.neutralA900),
+                        strong: cssVar(brand.neutralA950),
+                    },
+                },
+            },
+        },
     },
 };
 /**
@@ -113,6 +134,14 @@ export const sanaCanvasNumericalTheme = {
  * - 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.
  *
+ * Pass `data-theme="sana-canvas"` alongside it. That attribute is forwarded to popup stack
+ * containers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to
+ * portaled content through the stylesheet's own `[data-theme="sana-canvas"]` block — this preset
+ * covers brand tokens, the attribute covers everything else.
+ *
+ * `action.*` and selected-state tokens are not set by this preset — Sana does not define them,
+ * and they resolve from the root theme.
+ *
  * @example
  * ```tsx
  * // Preferred — control <html>
@@ -120,8 +149,10 @@ export const sanaCanvasNumericalTheme = {
  * // <html data-theme="sana-canvas">
  * <CanvasProvider><App /></CanvasProvider>
  *
- * // No access to <html> — required for popup parity
- * <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
+ * // No access to <html> — pass both for full parity, including portaled popups
+ * <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
+ *   <App />
+ * </CanvasProvider>
  * ```
  */
 export const sanaCanvasProviderTheme = sanaCanvasNumericalTheme;

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

@@ -285,12 +285,12 @@ export type EmotionCanvasTheme = {
  *
  * 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>>;
+export type CanvasBrandRamp = Partial<Record<'25' | '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | '975' | 'A25' | 'A50' | 'A100' | 'A200' | 'A300', string>>;
 /**
- * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not
- * exported for primary/critical/caution/positive families.
+ * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150` / `A850`), plus the
+ * extended alpha steps (`A400`–`A975`) that only the neutral family exposes.
  */
-export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150', string>>;
+export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150' | 'A400' | 'A500' | 'A600' | 'A700' | 'A800' | 'A850' | 'A900' | 'A950' | 'A975', string>>;
 /** Semantic keys for `brand.action.*` CSS variables (PrimaryButton, etc.). */
 export type CanvasActionBrandRamp = Partial<Record<'base' | 'lightest' | 'lighter' | 'light' | 'dark' | 'darkest' | 'darker' | 'accent', string>>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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"}

package/dist/es6/expandable/lib/Expandable.js

@@ -10,7 +10,7 @@ import { ExpandableTarget } from './ExpandableTarget';
 import { ExpandableTitle } from './ExpandableTitle';
 import { useExpandableModel } from './hooks/useExpandableModel';
 export const expandableContainerStencil = createStencil({
-    base: { name: "3vy05e", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "2urtj", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "expandable-container-f664d5");
 /**
  * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a

package/dist/es6/expandable/lib/ExpandableAvatar.js

@@ -5,7 +5,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 export const expandableAvatarStencil = createStencil({
     extends: avatarStencil,
-    base: { name: "4amu3v", styles: "box-sizing:border-box;flex-shrink:0;" }
+    base: { name: "3xm7y2", styles: "box-sizing:border-box;flex-shrink:0;" }
 }, "expandable-avatar-65308e");
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`

package/dist/es6/expandable/lib/ExpandableContent.js

@@ -6,7 +6,7 @@ import { system } from '@workday/canvas-tokens-web';
 import { useExpandableContent } from './hooks/useExpandableContent';
 import { useExpandableModel } from './hooks/useExpandableModel';
 export const expandableContentStencil = createStencil({
-    base: { name: "2yshvo", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "26s6da", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "expandable-content-25e157");
 export const ExpandableContent = createSubcomponent('div')({
     modelHook: useExpandableModel,

package/dist/es6/expandable/lib/ExpandableIcon.js

@@ -9,34 +9,34 @@ import { useExpandableIcon } from './hooks/useExpandableIcon';
 import { useExpandableModel } from './hooks/useExpandableModel';
 export const expandableIconStencil = createStencil({
     extends: systemIconStencil,
-    base: { name: "nud47", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
+    base: { name: "22mbl", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
     modifiers: {
         isExpanded: {
-            true: { name: "i6ecj", styles: "" },
-            false: { name: "18yxil", styles: "" }
+            true: { name: "38ukbt", styles: "" },
+            false: { name: "qidk3", styles: "" }
         },
         position: {
-            start: { name: "35v9wu", styles: "" },
-            end: { name: "19c5ll", styles: "" },
-            only: { name: "2uhybm", styles: "" }
+            start: { name: "1u43s4", styles: "" },
+            end: { name: "aq0sb", styles: "" },
+            only: { name: "2uzgvu", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { position: 'end', isExpanded: false },
-            styles: { name: "2idv17", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+            styles: { name: "g8vsl", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
         },
         {
             modifiers: { position: 'end', isExpanded: true },
-            styles: { name: "2jd4q2", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+            styles: { name: "kfvmp", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
         },
         {
             modifiers: { position: 'start', isExpanded: false },
-            styles: { name: "1z0w4r", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
+            styles: { name: "4ckz4w", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
         },
         {
             modifiers: { position: 'start', isExpanded: true },
-            styles: { name: "24ig6m", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
+            styles: { name: "3j3oft", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
         }
     ]
 }, "expandable-icon-af0853");

package/dist/es6/expandable/lib/ExpandableTarget.js

@@ -8,7 +8,7 @@ import { useExpandableModel } from './hooks/useExpandableModel';
 import { useExpandableTarget } from './hooks/useExpandableTarget';
 export const expandableTargetStencil = createStencil({
     extends: cornerShapeStencil,
-    base: { name: "3twas2", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
+    base: { name: "tzgex", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
 }, "expandable-target-6f2998");
 export const ExpandableTarget = createSubcomponent('button')({
     modelHook: useExpandableModel,

package/dist/es6/expandable/lib/ExpandableTitle.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const expandableTitleStencil = createStencil({
-    base: { name: "37hsgd", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
+    base: { name: "2wagfb", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
 }, "expandable-title-afdcf8");
 export const ExpandableTitle = createComponent('div')({
     displayName: 'Expandable.Title',

package/dist/es6/form-field/lib/FormFieldField.js

@@ -4,7 +4,7 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 export const formFieldFieldStencil = createStencil({
-    base: { name: "3dv8bz", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "28mna", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "form-field-field-a35e82");
 export const FormFieldField = createSubcomponent('div')({
     displayName: 'FormField.Field',

package/dist/es6/form-field/lib/FormFieldGroupLabel.js

@@ -7,15 +7,15 @@ import { system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 export const formFieldGroupLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "6i0wn", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "2sxjz2", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "13fqkt", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
+            true: { name: "3izpxo", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
         },
         orientation: {
-            vertical: { name: "130yd8", styles: "width:100%;" },
-            horizontalStart: { name: "38ake7", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
-            horizontalEnd: { name: "y0377", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
+            vertical: { name: "323fby", styles: "width:100%;" },
+            horizontalStart: { name: "3o4jcw", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
+            horizontalEnd: { name: "2ih4pe", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {

package/dist/es6/form-field/lib/FormFieldGroupList.js

@@ -5,11 +5,11 @@ import { base, system } from '@workday/canvas-tokens-web';
 import { useFormFieldModel } from './hooks';
 const formFieldGroupListStencil = createStencil({
     extends: cornerShapeStencil,
-    base: { name: "omf6k", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "42spoz", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "2z44fm", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" },
-            caution: { name: "3zih1b", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" }
+            error: { name: "23qy9q", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" },
+            caution: { name: "2se4dl", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" }
         }
     }
 }, "form-field-group-list-284850");