npm - @workday/canvas-kit-react - Versions diffs - 14.1.19 → 14.2.0-0009-next.0 - Mend

@workday/canvas-kit-react 14.1.19 → 14.2.0-0009-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/common/lib/theming/index.ts CHANGED Viewed

@@ -1,8 +1,36 @@
 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';
+/**
+ * @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, 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';

package/common/lib/theming/types.ts CHANGED Viewed

@@ -23,6 +23,7 @@ type CanvasThemeCommonPalette = {
 /**
  * Direction of page content for internationalization
+ * @deprecated ⚠️ `ContentDirection` is deprecated. Use the `:dir()` CSS pseudo-class selector and CSS logical properties instead. For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) and [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
  */
 export enum ContentDirection {
   LTR = 'ltr',
@@ -31,8 +32,8 @@ export enum ContentDirection {
 /**
  * The format of a Canvas theme for components that support it.
+ * @deprecated ⚠️ `CanvasTheme` 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).
  */
 export interface CanvasTheme {
   palette: {
     common: CanvasThemeCommonPalette;
@@ -252,17 +253,34 @@ export interface Themeable {
 /**
  * For custom themes that do not overwrite every default.
+ * @deprecated ⚠️ `RecursivePartial` 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).
  */
 type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>;
 };
+/**
+ * @deprecated ⚠️ `PartialCanvasTheme` 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).
+ */
 export type PartialCanvasTheme = RecursivePartial<CanvasTheme>;
+/**
+ * @deprecated ⚠️ `PartialCanvasThemePalette` 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).
+ */
 export type PartialCanvasThemePalette = RecursivePartial<CanvasThemePalette>;
+/**
+ * @deprecated ⚠️ `PartialEmotionCanvasTheme` 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).
+ */
 export type PartialEmotionCanvasTheme = {canvas?: PartialCanvasTheme};
 declare module '@emotion/react' {
   export interface Theme {
     canvas: CanvasTheme;
   }
 }
+/**
+ * @deprecated ⚠️ `EmotionCanvasTheme` 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).
+ */
 export type EmotionCanvasTheme = {canvas: CanvasTheme};

package/common/lib/utils/colorUtils.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export function getColor(value?: CanvasColor | string) {
 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
 export const expandHex = (hex: string) => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  return hex.replace(shorthandRegex, function(m: string, r: string, g: string, b: string) {
+  return hex.replace(shorthandRegex, function (m: string, r: string, g: string, b: string) {
     return r + r + g + g + b + b;
   });
 };
@@ -37,6 +37,7 @@ const colorPriority = [
  * have a high enough contrast ratio, picks the first color of the following that meets 4.5:1 or higher:
  * [frenchVanilla100, blackPepper300, blackPepper400, blackPepper500, blackPepper600]
  * (https://www.w3.org/TR/WCAG20-TECHS/G18.html)
+ * @deprecated ⚠️ `pickForegroundColor` 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).
  */
 export const pickForegroundColor = (
   background: string,

package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts CHANGED Viewed

@@ -5,7 +5,13 @@ interface BackgroundColors {
     hover?: string;
     contrast?: string;
 }
+/**
+ * @deprecated ⚠️ `getPaletteColors` is 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 declare const getPaletteColors: (type: paletteSelection, theme: EmotionCanvasTheme) => BackgroundColors;
+/**
+ * @deprecated ⚠️ `useThemedPalette` 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).
+ */
 export declare const useThemedPalette: (type: paletteSelection) => BackgroundColors;
 export {};
 //# sourceMappingURL=useThemedPalette.d.ts.map

package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useThemedPalette.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useThemedPalette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAIlG,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzF,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,eAAO,MAAM,gBAAgB,SACrB,gBAAgB,SACf,kBAAkB,KACxB,gBAcF,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,gBAAgB,qBAItD,CAAC"}
1	+ {"version":3,"file":"useThemedPalette.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useThemedPalette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAIlG,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzF,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD;;GAEG;AACH,eAAO,MAAM,gBAAgB,SACrB,gBAAgB,SACf,kBAAkB,KACxB,gBAcF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,gBAAgB,qBAItD,CAAC"}

package/dist/commonjs/banner/lib/hooks/useThemedPalette.js CHANGED Viewed

@@ -19,6 +19,9 @@ const getPaletteColorsFromTheme = (palette, fallbackColors) => {
             : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.contrast,
     };
 };
+/**
+ * @deprecated ⚠️ `getPaletteColors` is 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).
+ */
 const getPaletteColors = (type, theme) => {
     const palette = theme.canvas.palette[type];
     switch (type) {
@@ -34,6 +37,9 @@ const getPaletteColors = (type, theme) => {
     }
 };
 exports.getPaletteColors = getPaletteColors;
+/**
+ * @deprecated ⚠️ `useThemedPalette` 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).
+ */
 const useThemedPalette = (type) => {
     const theme = (0, common_1.useTheme)();
     return (0, exports.getPaletteColors)(type, theme);

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { PartialEmotionCanvasTheme } from './theming';
 export interface CanvasProviderProps {
+    /**
+     * @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?: PartialEmotionCanvasTheme;
 }
 /**

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

	@@ -1 +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"}
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;;OAEG;IACH,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAYD;;GAEG;AACH,eAAO,MAAM,eAAe,QA0C1B,CAAC;AAEH,eAAO,MAAM,uBAAuB,UAI3B,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"}

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

@@ -18,8 +18,12 @@ const mappedKeys = {
 /**
  * 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: "40yd49", 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: "hnfk8", 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 = (
+/**
+ * @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 || {};

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,EAAE,EACzC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,EACvC,QAAQ,EAAE,CAAC,GACV,CAAC,CAoBH"}

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

@@ -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) {

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

@@ -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';
+/**
+ * @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, 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

package/dist/commonjs/common/lib/theming/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3E,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B;;;GAGG;AACH,cAAc,SAAS,CAAC;AACxB;;;GAGG;AACH,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3E;;;GAGG;AACH,cAAc,SAAS,CAAC;AACxB;;;GAGG;AACH,cAAc,YAAY,CAAC;AAC3B;;;GAGG;AACH,cAAc,iBAAiB,CAAC;AAChC;;;GAGG;AACH,cAAc,YAAY,CAAC;AAC3B;;;GAGG;AACH,cAAc,kBAAkB,CAAC"}

package/dist/commonjs/common/lib/theming/index.js CHANGED Viewed

@@ -19,12 +19,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterOutProps = exports.styled = void 0;
 __exportStar(require("./breakpoints"), exports);
+/**
+ * @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).
+ */
 __exportStar(require("./types"), exports);
+/**
+ * @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).
+ */
 var styled_1 = require("./styled");
 Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return __importDefault(styled_1).default; } });
 Object.defineProperty(exports, "filterOutProps", { enumerable: true, get: function () { return styled_1.filterOutProps; } });
+/**
+ * @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).
+ */
 __exportStar(require("./theme"), exports);
+/**
+ * @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).
+ */
 __exportStar(require("./useTheme"), exports);
+/**
+ * @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).
+ */
 __exportStar(require("./useThemedRing"), exports);
+/**
+ * @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).
+ */
 __exportStar(require("./useIsRTL"), exports);
+/**
+ * @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).
+ */
 __exportStar(require("./getObjectProxy"), exports);

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

@@ -19,6 +19,7 @@ type CanvasThemeCommonPalette = {
 };
 /**
  * Direction of page content for internationalization
+ * @deprecated ⚠️ `ContentDirection` is deprecated. Use the `:dir()` CSS pseudo-class selector and CSS logical properties instead. For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) and [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
  */
 export declare enum ContentDirection {
     LTR = "ltr",
@@ -26,6 +27,7 @@ export declare enum ContentDirection {
 }
 /**
  * The format of a Canvas theme for components that support it.
+ * @deprecated ⚠️ `CanvasTheme` 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).
  */
 export interface CanvasTheme {
     palette: {
@@ -244,12 +246,22 @@ export interface Themeable {
 }
 /**
  * For custom themes that do not overwrite every default.
+ * @deprecated ⚠️ `RecursivePartial` 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).
  */
 type RecursivePartial<T> = {
     [P in keyof T]?: RecursivePartial<T[P]>;
 };
+/**
+ * @deprecated ⚠️ `PartialCanvasTheme` 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).
+ */
 export type PartialCanvasTheme = RecursivePartial<CanvasTheme>;
+/**
+ * @deprecated ⚠️ `PartialCanvasThemePalette` 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).
+ */
 export type PartialCanvasThemePalette = RecursivePartial<CanvasThemePalette>;
+/**
+ * @deprecated ⚠️ `PartialEmotionCanvasTheme` 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).
+ */
 export type PartialEmotionCanvasTheme = {
     canvas?: PartialCanvasTheme;
 };
@@ -258,6 +270,9 @@ declare module '@emotion/react' {
         canvas: CanvasTheme;
     }
 }
+/**
+ * @deprecated ⚠️ `EmotionCanvasTheme` 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).
+ */
 export type EmotionCanvasTheme = {
     canvas: CanvasTheme;
 };

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

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

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentDirection = void 0;
 /**
  * Direction of page content for internationalization
+ * @deprecated ⚠️ `ContentDirection` is deprecated. Use the `:dir()` CSS pseudo-class selector and CSS logical properties instead. For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) and [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
  */
 var ContentDirection;
 (function (ContentDirection) {

package/dist/commonjs/common/lib/utils/colorUtils.d.ts CHANGED Viewed

@@ -13,6 +13,7 @@ export declare const expandHex: (hex: string) => string;
  * have a high enough contrast ratio, picks the first color of the following that meets 4.5:1 or higher:
  * [frenchVanilla100, blackPepper300, blackPepper400, blackPepper500, blackPepper600]
  * (https://www.w3.org/TR/WCAG20-TECHS/G18.html)
+ * @deprecated ⚠️ `pickForegroundColor` 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).
  */
 export declare const pickForegroundColor: (background: string, darkColor?: string, lightColor?: string) => string | undefined;
 //# sourceMappingURL=colorUtils.d.ts.map

package/dist/commonjs/common/lib/utils/colorUtils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/colorUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAS,MAAM,kCAAkC,CAAC;AAGrE;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,sBAKpD;AAGD,eAAO,MAAM,SAAS,QAAS,MAAM,WAKpC,CAAC;AAWF~~;;;;;;;GAOG~~;AACH,eAAO,MAAM,mBAAmB,eAClB,MAAM,cACN,MAAM,eACL,MAAM,uBAmBpB,CAAC"}
1	+ {"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/colorUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAS,MAAM,kCAAkC,CAAC;AAGrE;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,sBAKpD;AAGD,eAAO,MAAM,SAAS,QAAS,MAAM,WAKpC,CAAC;AAWF;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,eAClB,MAAM,cACN,MAAM,eACL,MAAM,uBAmBpB,CAAC"}

package/dist/commonjs/common/lib/utils/colorUtils.js CHANGED Viewed

@@ -41,6 +41,7 @@ const colorPriority = [
  * have a high enough contrast ratio, picks the first color of the following that meets 4.5:1 or higher:
  * [frenchVanilla100, blackPepper300, blackPepper400, blackPepper500, blackPepper600]
  * (https://www.w3.org/TR/WCAG20-TECHS/G18.html)
+ * @deprecated ⚠️ `pickForegroundColor` 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).
  */
 const pickForegroundColor = (background, darkColor, lightColor) => {
     const [bg, dark, light] = [getColor(background), getColor(darkColor), getColor(lightColor)];

package/dist/commonjs/pagination/lib/Pagination/Controls.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;~~AAMhE~~,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IACpF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,uBAAuB;CAAG;AAE3C,eAAO,MAAM,yBAAyB,iJAMpC,CAAC;~~AAEH~~,eAAO,MAAM,kBAAkB,6FAK7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,~~2FA2B5B~~,CAAC;AAEH,eAAO,MAAM,oBAAoB,~~2FA0B~~/B,CAAC;AAEH,eAAO,MAAM,gBAAgB,~~2FA0B3B~~,CAAC;AAEH,eAAO,MAAM,gBAAgB,~~2FA0B3B~~,CAAC"}
1	+ {"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKhE,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IACpF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,uBAAuB;CAAG;AAE3C,eAAO,MAAM,yBAAyB,iJAMpC,CAAC;AAYH,eAAO,MAAM,kBAAkB,6FAK7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,2FAyB5B,CAAC;AAEH,eAAO,MAAM,oBAAoB,2FAyB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAyB3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAyB3B,CAAC"}

package/dist/commonjs/pagination/lib/Pagination/Controls.js CHANGED Viewed

@@ -32,11 +32,13 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const button_1 = require("@workday/canvas-kit-react/button");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const useRTL_1 = require("./common/utils/useRTL");
 const usePaginationModel_1 = require("./usePaginationModel");
 exports.paginationControlsStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2wo4b3", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-space-x1);align-items:center;" }
-}, "pagination-controls-f02bc7");
+    base: { name: "5mqk0", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-space-x1);align-items:center;" }
+}, "pagination-controls-103bfc");
+const controlButtonStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "1e1nij", styles: "box-sizing:border-box;&:dir(rtl){& .wd-icon{transform:scaleX(-1);}}" }
+}, "control-button-595088");
 exports.PaginationControls = (0, common_1.createComponent)('div')({
     displayName: 'Pagination.Controls',
     Component(elemProps, ref, Element) {
@@ -55,9 +57,7 @@ exports.JumpToFirstButton = (0, common_1.createComponent)('button')({
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
             model.events.setCurrentPage(model.state.firstPage);
         };
-        const { shouldUseRTL } = (0, useRTL_1.useRTL)();
-        const icon = shouldUseRTL ? canvas_system_icons_web_1.chevron2xRightSmallIcon : canvas_system_icons_web_1.chevron2xLeftSmallIcon;
-        return ((0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
+        return ((0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: canvas_system_icons_web_1.chevron2xLeftSmallIcon, onClick: handleClick, ...(0, layout_1.mergeStyles)(restProps, controlButtonStencil()) }));
     },
 });
 exports.StepToPreviousButton = (0, common_1.createComponent)('button')({
@@ -72,9 +72,7 @@ exports.StepToPreviousButton = (0, common_1.createComponent)('button')({
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
             model.events.setCurrentPage(model.state.currentPage - 1);
         };
-        const { shouldUseRTL } = (0, useRTL_1.useRTL)();
-        const icon = shouldUseRTL ? canvas_system_icons_web_1.chevronRightSmallIcon : canvas_system_icons_web_1.chevronLeftSmallIcon;
-        return ((0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
+        return ((0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: canvas_system_icons_web_1.chevronLeftSmallIcon, onClick: handleClick, ...(0, layout_1.mergeStyles)(restProps, controlButtonStencil()) }));
     },
 });
 exports.StepToNextButton = (0, common_1.createComponent)('button')({
@@ -89,9 +87,7 @@ exports.StepToNextButton = (0, common_1.createComponent)('button')({
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
             model.events.setCurrentPage(model.state.currentPage + 1);
         };
-        const { shouldUseRTL } = (0, useRTL_1.useRTL)();
-        const icon = shouldUseRTL ? canvas_system_icons_web_1.chevronLeftSmallIcon : canvas_system_icons_web_1.chevronRightSmallIcon;
-        return ((0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
+        return ((0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: canvas_system_icons_web_1.chevronRightSmallIcon, onClick: handleClick, ...(0, layout_1.mergeStyles)(restProps, controlButtonStencil()) }));
     },
 });
 exports.JumpToLastButton = (0, common_1.createComponent)('button')({
@@ -106,8 +102,6 @@ exports.JumpToLastButton = (0, common_1.createComponent)('button')({
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
             model.events.setCurrentPage(model.state.lastPage);
         };
-        const { shouldUseRTL } = (0, useRTL_1.useRTL)();
-        const icon = shouldUseRTL ? canvas_system_icons_web_1.chevron2xLeftSmallIcon : canvas_system_icons_web_1.chevron2xRightSmallIcon;
-        return ((0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: icon, onClick: handleClick, ...restProps }));
+        return ((0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { ref: ref, as: Element, "aria-disabled": isDisabled || undefined, size: "small", icon: canvas_system_icons_web_1.chevron2xRightSmallIcon, onClick: handleClick, ...(0, layout_1.mergeStyles)(restProps, controlButtonStencil()) }));
     },
 });

package/dist/commonjs/testing/lib/ComponentStatesTable.js CHANGED Viewed

@@ -6,14 +6,14 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const Table = (0, common_1.styled)('table')({
     width: '100%',
     thead: {
-        textAlign: 'left',
-        paddingBottom: 16,
+        textAlign: 'start',
+        paddingBlockEnd: 16,
     },
     'td, th': {
         minWidth: 100,
-        paddingBottom: 16,
-        paddingRight: 16,
-        textAlign: 'left',
+        paddingBlockEnd: 16,
+        paddingInlineEnd: 16,
+        textAlign: 'start',
     },
 });
 const ComponentStatesTable = ({ rowProps, columnProps, children, }) => {

package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts CHANGED Viewed

@@ -5,7 +5,13 @@ interface BackgroundColors {
     hover?: string;
     contrast?: string;
 }
+/**
+ * @deprecated ⚠️ `getPaletteColors` is 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 declare const getPaletteColors: (type: paletteSelection, theme: EmotionCanvasTheme) => BackgroundColors;
+/**
+ * @deprecated ⚠️ `useThemedPalette` 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).
+ */
 export declare const useThemedPalette: (type: paletteSelection) => BackgroundColors;
 export {};
 //# sourceMappingURL=useThemedPalette.d.ts.map

package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useThemedPalette.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useThemedPalette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAIlG,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzF,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,eAAO,MAAM,gBAAgB,SACrB,gBAAgB,SACf,kBAAkB,KACxB,gBAcF,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,gBAAgB,qBAItD,CAAC"}
1	+ {"version":3,"file":"useThemedPalette.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useThemedPalette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAIlG,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzF,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD;;GAEG;AACH,eAAO,MAAM,gBAAgB,SACrB,gBAAgB,SACf,kBAAkB,KACxB,gBAcF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,gBAAgB,qBAItD,CAAC"}

package/dist/es6/banner/lib/hooks/useThemedPalette.js CHANGED Viewed

@@ -13,6 +13,9 @@ const getPaletteColorsFromTheme = (palette, fallbackColors) => {
             : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.contrast,
     };
 };
+/**
+ * @deprecated ⚠️ `getPaletteColors` is 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 const getPaletteColors = (type, theme) => {
     const palette = theme.canvas.palette[type];
     switch (type) {
@@ -27,6 +30,9 @@ export const getPaletteColors = (type, theme) => {
         }
     }
 };
+/**
+ * @deprecated ⚠️ `useThemedPalette` 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).
+ */
 export const useThemedPalette = (type) => {
     const theme = useTheme();
     return getPaletteColors(type, theme);

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { PartialEmotionCanvasTheme } from './theming';
 export interface CanvasProviderProps {
+    /**
+     * @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?: PartialEmotionCanvasTheme;
 }
 /**

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

	@@ -1 +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"}
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;;OAEG;IACH,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAYD;;GAEG;AACH,eAAO,MAAM,eAAe,QA0C1B,CAAC;AAEH,eAAO,MAAM,uBAAuB,UAI3B,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"}

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

@@ -15,8 +15,12 @@ const mappedKeys = {
 /**
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
  */
-export const defaultBranding = createStyles({ name: "40yd49", 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%);" });
-export const useCanvasThemeToCssVars = (theme, elemProps) => {
+export const defaultBranding = createStyles({ name: "hnfk8", 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%);" });
+export const useCanvasThemeToCssVars = (
+/**
+ * @deprecated ⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
+theme, elemProps) => {
     const filledTheme = useTheme(theme);
     const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' ');
     const style = elemProps.style || {};

package/dist/es6/common/lib/theming/getObjectProxy.d.ts CHANGED Viewed

@@ -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