@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/dist/commonjs/common/index.js

@@ -16,13 +16,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/parts"), exports);
 __exportStar(require("./lib/types"), exports);
-__exportStar(require("./lib/genericStyles"), exports);
 __exportStar(require("./lib/theming"), exports);
 __exportStar(require("./lib/styles"), exports);
 __exportStar(require("./lib/utils"), exports);
+__exportStar(require("./lib/genericStyles"), exports);
 __exportStar(require("./lib/AccessibleHide"), exports);
 __exportStar(require("./lib/AriaLiveRegion"), exports);
 __exportStar(require("./lib/CanvasProvider"), exports);
 __exportStar(require("./lib/EllipsisText"), exports);
-__exportStar(require("./lib/forwardFitTokens"), exports);
 __exportStar(require("./lib/responsive/useResponsiveContainerStyles"), exports);

package/dist/commonjs/common/lib/AccessibleHide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccessibleHide.d.ts","sourceRoot":"","sources":["../../../../common/lib/AccessibleHide.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAGhF;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAajB,CAAC;AAEX,eAAO,MAAM,oBAAoB,QAA+B,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,cAAc,+DAKzB,CAAC"}
+{"version":3,"file":"AccessibleHide.d.ts","sourceRoot":"","sources":["../../../../common/lib/AccessibleHide.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAA6B,MAAM,6BAA6B,CAAC;AAIhF;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAajB,CAAC;AAEX,eAAO,MAAM,oBAAoB,QAA+B,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,cAAc,+DAKzB,CAAC"}

package/dist/commonjs/common/lib/AccessibleHide.js

@@ -22,7 +22,7 @@ exports.accessibleHide = {
     padding: 0,
     border: 0,
 };
-exports.accessibleHideStyles = (0, canvas_kit_styling_1.createStyles)({ name: "24ct02", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
+exports.accessibleHideStyles = (0, canvas_kit_styling_1.createStyles)({ name: "mudm4", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" });
 /**
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
  */

package/dist/commonjs/common/lib/AriaLiveRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AriaLiveRegion.d.ts","sourceRoot":"","sources":["../../../../common/lib/AriaLiveRegion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,OAAO;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,2EAsBzB,CAAC"}
+{"version":3,"file":"AriaLiveRegion.d.ts","sourceRoot":"","sources":["../../../../common/lib/AriaLiveRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAIlE,MAAM,WAAW,mBAAoB,SAAQ,OAAO;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,2EAsBzB,CAAC"}

package/dist/commonjs/common/lib/AriaLiveRegion.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AriaLiveRegion = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const components_1 = require("./utils/components");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const components_1 = require("./utils/components");
 /**
  * A convenient wrapper for creating an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
  */

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

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { PartialEmotionCanvasTheme } from './theming';
 export interface CanvasProviderProps {
+    /**
+     * ⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.
+     * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#global-vs-scoped-theming).
+     *
+     * While we support theme overrides, we advise to use global theming via CSS Variables.
+     */
     theme?: PartialEmotionCanvasTheme;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAIlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAYD;;GAEG;AACH,eAAO,MAAM,eAAe,QA0C1B,CAAC;AAEH,eAAO,MAAM,uBAAuB,UAC3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CAgBzD,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,EAAC,yBAAyB,EAA+B,MAAM,WAAW,CAAC;AAElF,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkGD;;GAEG;AACH,eAAO,MAAM,eAAe,QAqF1B,CAAC;AAEH,eAAO,MAAM,uBAAuB,UAI3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiN7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CAgBzD,CAAC"}

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasProvider = exports.useCanvasThemeToCssVars = exports.defaultBranding = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@emotion/react");
-const theming_1 = require("./theming");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const theming_1 = require("./theming");
 const mappedKeys = {
     lightest: 'lightest',
     lighter: 'lighter',
@@ -15,11 +15,98 @@ const mappedKeys = {
     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',
+};
+/**
+ * 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`
+ */
+const commonTokenMapping = {
+    focusOutline: canvas_tokens_web_1.brand.common.focus,
+    alertInner: canvas_tokens_web_1.brand.common.caution.inner,
+    alertOuter: canvas_tokens_web_1.brand.common.caution.outer,
+    errorInner: canvas_tokens_web_1.brand.common.critical, // maps to brand.critical500
+};
 /**
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
  */
-exports.defaultBranding = (0, canvas_kit_styling_1.createStyles)({ name: "1qbeur", 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%);" });
-const useCanvasThemeToCssVars = (theme, elemProps) => {
+exports.defaultBranding = (0, canvas_kit_styling_1.createStyles)({ name: "1mj5cv", 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-dark);--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);" });
+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 = (0, theming_1.useTheme)(theme);
     const className = (elemProps.className || '').split(' ').concat(exports.defaultBranding).join(' ');
     const style = elemProps.style || {};
@@ -28,25 +115,186 @@ const useCanvasThemeToCssVars = (theme, elemProps) => {
         if (color === 'common') {
             ['focusOutline', 'alertInner', 'alertOuter', 'errorInner'].forEach(key => {
                 if (palette.common[key] !== theming_1.defaultCanvasTheme.palette.common[key]) {
+                    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common[key]);
+                    // Set deprecated token for backwards compatibility
                     //@ts-ignore
-                    style[canvas_tokens_web_1.brand.common.focusOutline] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common.focusOutline);
+                    style[canvas_tokens_web_1.brand.common[key]] = value;
+                    // Forward to new brand.common tokens
                     //@ts-ignore
-                    style[canvas_tokens_web_1.brand.common.alertInner] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common.alertInner);
-                    //@ts-ignore
-                    style[canvas_tokens_web_1.brand.common.alertOuter] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common.alertOuter);
-                    //@ts-ignore
-                    style[canvas_tokens_web_1.brand.common.errorInner] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette.common.errorInner);
+                    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[canvas_tokens_web_1.system.color.brand.focus.primary] = value;
+                        // system.color.brand.border.primary -> brand.primary.500
+                        // @ts-ignore
+                        style[canvas_tokens_web_1.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[canvas_tokens_web_1.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[canvas_tokens_web_1.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[canvas_tokens_web_1.system.color.brand.focus.critical] = value;
+                        // @ts-ignore
+                        style[canvas_tokens_web_1.system.color.brand.border.critical] = value;
+                    }
+                }
+            });
+        }
+        else {
+            ['lightest', 'lighter', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
+                var _a, _b, _c, _d, _e;
+                // 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] !== theming_1.defaultCanvasTheme.palette[color][key]) {
+                    const value = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette[color][key]);
+                    // Set deprecated token (e.g., brand.primary.base) for backwards compatibility
+                    // @ts-ignore
+                    style[canvas_tokens_web_1.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 = canvas_tokens_web_1.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 = canvas_tokens_web_1.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 = canvas_tokens_web_1.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 !== theming_1.defaultCanvasTheme.palette.common.focusOutline;
+                                if (!focusOutlineCustomized) {
+                                    // @ts-ignore
+                                    const focusToken = canvas_tokens_web_1.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 = canvas_tokens_web_1.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 = canvas_tokens_web_1.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 = canvas_tokens_web_1.system.color.brand.focus.critical;
+                                if (focusCriticalToken) {
+                                    // @ts-ignore
+                                    style[focusCriticalToken] = value;
+                                }
+                                // @ts-ignore
+                                const borderCriticalToken = canvas_tokens_web_1.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 = canvas_tokens_web_1.system.color.brand.focus.caution) === null || _c === void 0 ? void 0 : _c.outer;
+                                if (focusCautionOuterToken) {
+                                    // @ts-ignore
+                                    style[focusCautionOuterToken] = value;
+                                }
+                                // @ts-ignore
+                                const borderCautionToken = canvas_tokens_web_1.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 = canvas_tokens_web_1.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 = canvas_tokens_web_1.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 = canvas_tokens_web_1.system.color.brand.surface[newBrandColor]) === null || _e === void 0 ? void 0 : _e.default;
+                            if (surfaceDefaultToken) {
+                                // @ts-ignore
+                                style[surfaceDefaultToken] = value;
+                            }
+                        }
+                    }
                 }
             });
         }
-        ['lightest', 'lighter', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
-            // 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] !== theming_1.defaultCanvasTheme.palette[color][key]) {
-                // @ts-ignore
-                style[canvas_tokens_web_1.brand[color][mappedKeys[key]]] = (0, canvas_kit_styling_1.maybeWrapCSSVariables)(palette[color][key]);
-            }
-        });
     });
     return { ...elemProps, className, style };
 };

package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.d.ts

@@ -1,6 +1,6 @@
-import { breakpointKeys } from "@workday/canvas-kit-react/common";
-import type { AllStyleProps } from "@workday/canvas-kit-react/layout";
-export type BreakpointKeys = typeof breakpointKeys[number];
+import { breakpointKeys } from '@workday/canvas-kit-react/common';
+import type { AllStyleProps } from '@workday/canvas-kit-react/layout';
+export type BreakpointKeys = (typeof breakpointKeys)[number];
 type ResponsiveCSSObject<T> = {
     [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> & AllStyleProps;
 };

package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveContainerStyles.d.ts","sourceRoot":"","sources":["../../../../../common/lib/responsive/useResponsiveContainerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAqB,MAAM,kCAAkC,CAAC;AAC/F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGpE,MAAM,MAAM,cAAc,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAE3D,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,GAC5D,aAAa;CAChB,CAAC;AACF,KAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa;CAC9B,CAAC;AAsCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAC3E,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAE,MAAM,EACb,KAAK,KAAK,gBAOX"}
+{"version":3,"file":"useResponsiveContainerStyles.d.ts","sourceRoot":"","sources":["../../../../../common/lib/responsive/useResponsiveContainerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAW,MAAM,kCAAkC,CAAC;AAC7F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAIpE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,GAAG,aAAa;CAC/E,CAAC;AACF,KAAK,SAAS,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa;CAC9B,CAAC;AAwCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AAEH,wBAAgB,4BAA4B,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAC3E,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC9B,KAAK,EAAE,MAAM,EACb,KAAK,KAAK,gBAOX"}

package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.js

@@ -6,13 +6,14 @@ const isWithinBreakpoint_1 = require("../utils/isWithinBreakpoint");
 // Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
 const getSize = (width, breakpoints) => {
     const ranges = {
-        'zero': [0, breakpoints.s],
-        's': [breakpoints.s, breakpoints.m],
-        'm': [breakpoints.m, breakpoints.l],
-        'l': [breakpoints.l, breakpoints.xl],
-        'xl': [breakpoints.xl]
+        zero: [0, breakpoints.s],
+        s: [breakpoints.s, breakpoints.m],
+        m: [breakpoints.m, breakpoints.l],
+        l: [breakpoints.l, breakpoints.xl],
+        xl: [breakpoints.xl],
     };
-    return common_1.breakpointKeys.find((size) => (0, isWithinBreakpoint_1.isWithinBreakpoint)(width, ...ranges[size])) || 'zero';
+    return (common_1.breakpointKeys.find((size) => (0, isWithinBreakpoint_1.isWithinBreakpoint)(width, ...ranges[size])) ||
+        'zero');
 };
 // Returns responsive style objects that are within the current CanvasBreakpoint size
 function getStyles(key, styles) {
@@ -21,7 +22,7 @@ function getStyles(key, styles) {
     for (let i = 0; i <= breakpointSize; i++) {
         const breakpointName = common_1.breakpointKeys[i];
         // property is key of the style object
-        Object.keys(styles).forEach((property) => {
+        Object.keys(styles).forEach(property => {
             var _a, _b;
             const { zero, s, m, l, xl, ...base } = styles[property];
             const currentBreakpointStyles = (_a = styles[property][breakpointName]) !== null && _a !== void 0 ? _a : {};
@@ -29,7 +30,7 @@ function getStyles(key, styles) {
             responsiveStyles[property] = {
                 ...base,
                 ...previousBreakpointStyles,
-                ...currentBreakpointStyles
+                ...currentBreakpointStyles,
             };
         });
     }

package/dist/commonjs/common/lib/styles/errorRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errorRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/errorRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAKnC,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB;;;;;;EA8B3E;AAED,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB;;;;;;;;;;;;;;;;;EAyBtE"}
+{"version":3,"file":"errorRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/errorRing.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAEnC,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB;;;;;;EA8B3E;AAED,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB;;;;;;;;;;;;;;;;;EAyBtE"}

package/dist/commonjs/common/lib/styles/errorRing.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorRing = exports.getErrorColors = void 0;
-const types_1 = require("../types");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const types_1 = require("../types");
 function getErrorColors(error, theme) {
     if (error === types_1.ErrorType.Error) {
         if (theme) {
@@ -56,7 +56,7 @@ function errorRing(error, theme) {
         '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
             borderColor: errorColors.outer,
             boxShadow: `${errorBoxShadow},
-        0 0 0 2px ${(0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.color.border.inverse)},
+        0 0 0 2px ${(0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.color.border.inverse.default, canvas_tokens_web_1.base.neutral0)},
         0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline)}`,
         },
     };

package/dist/commonjs/common/lib/styles/focusRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB;;EAqBvD"}
+{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB;;EAsBvD"}

package/dist/commonjs/common/lib/styles/focusRing.js

@@ -58,7 +58,8 @@ function calculateFocusRing({ width, separation, inset, innerColor, outerColor,
 function focusRing(options = {}) {
     const { width = 2, separation = 0, animate = true, 
     // hard code CSS fallbacks for dynamic styles that don't use the static style transform
-    innerColor = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.color.border.inverse, 'rgba(255,255,255,1)'), outerColor = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,225,1)'), inset, } = options;
+    /* TODO: Update to `system.color.border.inverse.default` in v15. */
+    innerColor = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.color.border.inverse.default, canvas_tokens_web_1.base.neutral0), outerColor = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,225,1)'), inset, } = options;
     const args = {
         width: width,
         separation: separation,

package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hideMouseFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/hideMouseFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,cAClB,OAAO,MAAM,EAAE,cAAc,GAAG,CAAC,CAAC,KAC5C,OAAO,MAAM,EAAE,cAAc,GAAG,CAAC,CAcnC,CAAC"}
+{"version":3,"file":"hideMouseFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/hideMouseFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,cAClB,OAAO,MAAM,EAAE,cAAc,GAAG,CAAC,CAAC,KAC5C,OAAO,MAAM,EAAE,cAAc,GAAG,CAAC,CAcnC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"createCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/createCanvasTheme.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,EACX,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,eAAO,MAAM,UAAU,aACV,MAAM,yBA+BlB,CAAC;AAkCF,iBAAS,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,GAAG,WAAW,CAkB3E;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,6BAAmE,CAAC"}
+{"version":3,"file":"createCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/createCanvasTheme.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,WAAW,EAGX,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,eAAO,MAAM,UAAU,aACV,MAAM,yBA+BlB,CAAC;AAkCF,iBAAS,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,GAAG,WAAW,CAkB3E;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,6BAAmE,CAAC"}

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCanvasTheme = exports.shiftColor = void 0;
 const chroma_js_1 = __importDefault(require("chroma-js"));
 const canvas_colors_web_1 = __importDefault(require("@workday/canvas-colors-web"));
-const theme_1 = require("./theme");
-const types_1 = require("./types");
 const utils_1 = require("../utils");
 // Should these be exported?
 const deepMerge_1 = require("../utils/deepMerge");
 const memoize_1 = require("../utils/memoize");
+const theme_1 = require("./theme");
+const types_1 = require("./types");
 /**
  * @deprecated ⚠️ `shiftColor` is deprecated and will be removed in a future major version. While we work on an algorithm for color shifting, you can use [oklch from or with calc](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) to calculate colors.
  */

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

@@ -10,6 +10,7 @@ export type RecursivePartial<T> = {
  * This function will also handle nested properties.
  * @param target A partial object with up to the same shape as the `fallback` object
  * @param fallback A fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used
+ * @deprecated ⚠️ `getObjectProxy` is deprecated. This utility was used for theme object fallbacks. Now that we're shifting to a global theming approach based on CSS variables, this is no longer needed. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
 export declare function getObjectProxy<T extends {}>(target: RecursivePartial<T> | undefined, fallback: T): T;
 //# sourceMappingURL=getObjectProxy.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"getObjectProxy.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getObjectProxy.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;KAC/B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,EAAE,EACzC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,EACvC,QAAQ,EAAE,CAAC,GACV,CAAC,CAoBH"}
+{"version":3,"file":"getObjectProxy.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/getObjectProxy.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;KAC/B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,EAAE,EACzC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,EACvC,QAAQ,EAAE,CAAC,GACV,CAAC,CA0BH"}

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

@@ -7,6 +7,7 @@ exports.getObjectProxy = void 0;
  * This function will also handle nested properties.
  * @param target A partial object with up to the same shape as the `fallback` object
  * @param fallback A fallback object. If a property to be accessed from the proxy is not available on the target object, the fallback object will be used
+ * @deprecated ⚠️ `getObjectProxy` is deprecated. This utility was used for theme object fallbacks. Now that we're shifting to a global theming approach based on CSS variables, this is no longer needed. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
  */
 function getObjectProxy(target, fallback) {
     if (target) {
@@ -16,13 +17,19 @@ function getObjectProxy(target, fallback) {
                     // @ts-ignore
                     return getObjectProxy(target[prop], fallback[prop]);
                 }
-                const targetProp = target[prop];
+                const targetProp = Reflect.get(target, prop, receiver); //?
                 if (targetProp !== undefined) {
                     return targetProp;
                 }
                 return Reflect.get(fallback, prop, receiver);
             },
+            getOwnPropertyDescriptor(_target, prop) {
+                // the fallback has all the correct properties, so use the fallback for all property
+                // descriptors
+                return Reflect.getOwnPropertyDescriptor(fallback, prop); //Reflect.getOwnPropertyDescriptor(fallback, prop);
+            },
             ownKeys() {
+                // the fallback has all the correct properties, so use the fallback for all keys
                 return Reflect.ownKeys(fallback);
             },
         });

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

@@ -1,9 +1,37 @@
 export * from './breakpoints';
+/**
+ * @deprecated ⚠️ Theme types are deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './types';
-export { default as styled, StyleRewriteFn, filterOutProps } from './styled';
+/**
+ * @deprecated ⚠️ `styled` is deprecated. Use `createStyles` or `createStencil` from `@workday/canvas-kit-styling` instead.
+ * For more information, view our [Styling Docs](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--docs).
+ */
+export { default as styled, type StyleRewriteFn, filterOutProps } from './styled';
+/**
+ * @deprecated ⚠️ `defaultCanvasTheme` is deprecated. Use `defaultBranding` from `@workday/canvas-kit-react/common` instead.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './theme';
+/**
+ * @deprecated ⚠️ `useTheme` and `getTheme` are deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './useTheme';
+/**
+ * @deprecated ⚠️ `useThemedRing` is deprecated. Use `brand.common.focusOutline` CSS variable instead.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './useThemedRing';
+/**
+ * @deprecated ⚠️ `useIsRTL` is deprecated. Use `isElementRTL` or the `:dir()` CSS pseudo-class selector instead.
+ * For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir).
+ */
 export * from './useIsRTL';
+/**
+ * @deprecated ⚠️ `getObjectProxy` is deprecated. This utility was used for theme object fallbacks and is no longer needed.
+ * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export * from './getObjectProxy';
 //# sourceMappingURL=index.d.ts.map