@workday/canvas-kit-react 11.0.0-alpha.726-next.0 → 11.0.0-alpha.758-next.0

package/dist/es6/icon/lib/AccentIcon.js

@@ -1,8 +1,13 @@
 import * as React from 'react';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { CanvasIconTypes } from '@workday/design-assets-types';
-import { Icon } from './Icon';
 import { createComponent, getColor } from '@workday/canvas-kit-react/common';
+import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { base } from '@workday/canvas-tokens-web';
+import { Svg, svgStencil, transformColorNameToToken } from './Svg';
+/**
+ * @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead.
+ */
 export const accentIconStyles = ({ color = colors.blueberry500, transparent = false, }) => ({
     '& .color-500': {
         fill: getColor(color),
@@ -11,9 +16,28 @@ export const accentIconStyles = ({ color = colors.blueberry500, transparent = fa
         fill: transparent ? 'transparent' : colors.frenchVanilla100,
     },
 });
+export const accentIconStencil = createStencil({
+    extends: svgStencil,
+    vars: {
+        color: '',
+    },
+    base: { name: "8ab799", styles: "--cnvs-svg-size:3.5rem;& .color-500{fill:var(--cnvs-accent-icon-color, var(--cnvs-base-palette-blueberry-500));}& .french-vanilla-100{fill:var(--cnvs-base-palette-french-vanilla-100);}" },
+    modifiers: {
+        transparent: {
+            true: { name: "0b6c92", styles: "& .french-vanilla-100{fill:transparent;}" }
+        }
+    }
+}, "cnvs-accent-icon");
 export const AccentIcon = createComponent('span')({
     displayName: 'AccentIcon',
-    Component: ({ transparent = false, size = 56, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
-        return (React.createElement(Icon, Object.assign({ src: icon, type: CanvasIconTypes.Accent, styles: accentIconStyles({ color, transparent }), size: size, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    Component: ({ transparent, size, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
+        return (React.createElement(Svg, Object.assign({ src: icon, type: CanvasIconTypes.Accent, as: Element, ref: ref }, handleCsProp(elemProps, [
+            accentIconStencil({
+                color: transformColorNameToToken(color),
+                size: typeof size === 'number' ? px2rem(size) : undefined,
+                shouldMirror,
+                transparent,
+            }),
+        ]))));
     },
 });

package/dist/es6/icon/lib/AppletIcon.d.ts

@@ -1,7 +1,10 @@
 import { BrandingColor } from '@workday/canvas-kit-react/tokens';
 import { CanvasAppletIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
-import { IconProps } from './Icon';
+import { SvgProps } from './Svg';
+/**
+ * @deprecated Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`.
+ */
 export interface AppletIconStyles {
     /**
      * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
@@ -9,8 +12,11 @@ export interface AppletIconStyles {
      */
     color?: BrandingColor;
 }
+/**
+ * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
+ */
 export declare const appletIconStyles: ({ color, }: AppletIconStyles) => CSSObject;
-export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shouldMirror'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
     /**
      * The icon to display from `@workday/canvas-applet-icons-web`.
      */
@@ -21,6 +27,29 @@ export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shou
      */
     size?: number;
 }
+export declare const appletIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    color200: string;
+    color300: string;
+    color400: string;
+    color500: string;
+}, never>, {
+    color200: string;
+    color300: string;
+    color400: string;
+    color500: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    /**
+     * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
+     * @default AppletIcon.Colors.Blueberry
+     */
+    size: string;
+}, never, never>, never>;
 export declare const AppletIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AppletIconProps> & {
     Colors: typeof BrandingColor;
 };

package/dist/es6/icon/lib/AppletIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU;;CAuBrB,CAAC"}
+{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAKhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9F;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;IAhE5B;;;OAGG;;wBA0FH,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}

package/dist/es6/icon/lib/AppletIcon.js

@@ -1,8 +1,13 @@
 import * as React from 'react';
 import { colors, BrandingColor } from '@workday/canvas-kit-react/tokens';
 import { CanvasIconTypes } from '@workday/design-assets-types';
-import { Icon } from './Icon';
+import { Svg, svgStencil } from './Svg';
 import { createComponent } from '@workday/canvas-kit-react/common';
+import { handleCsProp, createStencil, px2rem, cssVar } from '@workday/canvas-kit-styling';
+import { base } from '@workday/canvas-tokens-web';
+/**
+ * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
+ */
 export const appletIconStyles = ({ color = BrandingColor.Blueberry, }) => {
     // Check if valid color
     if (!Object.keys(BrandingColor)
@@ -38,10 +43,28 @@ export const appletIconStyles = ({ color = BrandingColor.Blueberry, }) => {
         },
     };
 };
+export const appletIconStencil = createStencil({
+    extends: svgStencil,
+    vars: {
+        color200: '',
+        color300: '',
+        color400: '',
+        color500: '',
+    },
+    base: { name: "ce2e64", styles: "--cnvs-svg-size:5.75rem;& .color-100{fill:var(--cnvs-base-palette-french-vanilla-100);}& .color-200{fill:var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blueberry-200));}& .color-300{fill:var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blueberry-300));}& .color-400{fill:var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));}& .color-400-alpha-20{fill:var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));}& .color-500{fill:var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blueberry-400));}" }
+}, "cnvs-applet-icon");
 export const AppletIcon = createComponent('span')({
     displayName: 'AppletIcon',
-    Component: ({ size = 92, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
-        return (React.createElement(Icon, Object.assign({ src: icon, type: CanvasIconTypes.Applet, styles: appletIconStyles({ color }), as: Element, size: size, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    Component: ({ size, icon, color, ...elemProps }, ref, Element) => {
+        const colors = color && {
+            color200: base[`${color}200`],
+            color300: base[`${color}300`],
+            color400: base[`${color}400`],
+            color500: base[`${color}500`],
+        };
+        return (React.createElement(Svg, Object.assign({ src: icon, type: CanvasIconTypes.Applet, as: Element, ref: ref }, handleCsProp(elemProps, [
+            appletIconStencil({ ...colors, size: size ? px2rem(size) : undefined }),
+        ]))));
     },
     subComponents: {
         Colors: BrandingColor,

package/dist/es6/icon/lib/Graphic.d.ts

@@ -1,15 +1,20 @@
 import { CanvasGraphic } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { SvgProps } from './Svg';
+/**
+ * @deprecated Interface `GraphicStyles` will be removed in a future version. `grow` prop will be moved inside `GraphicProps`.
+ */
 export interface GraphicStyles {
     /**
      * The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions.
      * @default width of graphic
+     * @deprecated Use `cs` to set width, `cs={{"& svg": {width: '1rem'}}}`
      */
     width?: number | string;
     /**
      * The height of the Graphic in `px`. If the Graphic's `height` is set, its `width` will be set to `100%`.
      * @default height of graphic
+     * @deprecated Use `cs` to set height, `cs={{"& svg": {height: '1rem'}}}`
      */
     height?: number | string;
     /**
@@ -18,12 +23,26 @@ export interface GraphicStyles {
      */
     grow?: boolean;
 }
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
     /**
      * The graphic to display from `@workday/canvas-graphics-web`.
      */
     src: CanvasGraphic;
 }
+/**
+ * @deprecated `graphicStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `graphicStencil` instead.
+ */
 export declare const graphicStyles: ({ width, height, grow }: GraphicStyles) => CSSObject;
+export declare const graphicStencil: import("@workday/canvas-kit-styling").Stencil<{
+    grow: {
+        true: {
+            width: string;
+            '& svg': {
+                width: string;
+                height: string;
+            };
+        };
+    };
+}, {}, never, never>;
 export declare const Graphic: import("@workday/canvas-kit-react/common").ElementComponent<"span", GraphicProps>;
 //# sourceMappingURL=Graphic.d.ts.map

package/dist/es6/icon/lib/Graphic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC;IACjF;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF,eAAO,MAAM,OAAO,mFAmBlB,CAAC"}
+{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAIpC;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IACxF;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAOF,eAAO,MAAM,cAAc;;;;;;;;;;oBAkBzB,CAAC;AAEH,eAAO,MAAM,OAAO,mFAkBlB,CAAC"}

package/dist/es6/icon/lib/Graphic.js

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { CanvasIconTypes } from '@workday/design-assets-types';
 import { Svg } from './Svg';
 import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, createVars, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+/**
+ * @deprecated `graphicStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `graphicStencil` instead.
+ */
 export const graphicStyles = ({ width, height, grow }) => {
     if (grow) {
         return {
@@ -30,9 +34,27 @@ export const graphicStyles = ({ width, height, grow }) => {
     }
     return {};
 };
+/**
+ * @deprecated Part of supporting deprecated `height` and `width` props
+ */
+const graphicVars = createVars({ id: "cnvs-graphic", args: ["height", "width"] });
+export const graphicStencil = createStencil({
+    base: { name: "a19511", styles: "& svg{width:var(--cnvs-graphic-width, 100%);height:var(--cnvs-graphic-height, 100%);}" },
+    modifiers: {
+        grow: {
+            true: { name: "f2369d", styles: "width:100%;& svg{width:100%;height:100%;}" }
+        }
+    }
+}, "cnvs-graphic");
 export const Graphic = createComponent('span')({
     displayName: 'Graphic',
-    Component: ({ grow = false, src, width, height, shouldMirror, ...elemProps }, ref, Element) => {
-        return (React.createElement(Svg, Object.assign({ src: src, styles: graphicStyles({ width, height, grow }), type: CanvasIconTypes.Graphic, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    Component: ({ grow, width, height, ...elemProps }, ref, Element) => {
+        return (React.createElement(Svg, Object.assign({ type: CanvasIconTypes.Graphic, as: Element, ref: ref }, handleCsProp(elemProps, [
+            graphicStencil({ grow }),
+            {
+                [graphicVars.height]: typeof height === 'number' ? px2rem(height) : height,
+                [graphicVars.width]: typeof width === 'number' ? px2rem(width) : width,
+            },
+        ]))));
     },
 });

package/dist/es6/icon/lib/Svg.d.ts

@@ -1,9 +1,7 @@
-import { CSSObject } from '@emotion/styled';
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
 import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface SvgProps extends BoxProps {
     src: CanvasIcon;
-    styles?: CSSObject;
     type: CanvasIconTypes;
     /**
      * If set to `true`, transform the SVG's x-axis to mirror the graphic
@@ -11,5 +9,17 @@ export interface SvgProps extends BoxProps {
      */
     shouldMirror?: boolean;
 }
+export declare const svgStencil: import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    /** set width and height of svg element */
+    size: string;
+}, never, never>;
+/** @deprecated */
+export declare const transformColorNameToToken: (color?: string | undefined) => string | undefined;
 export declare const Svg: import("@workday/canvas-kit-react/common").ElementComponent<"span", SvgProps>;
 //# sourceMappingURL=Svg.d.ts.map

package/dist/es6/icon/lib/Svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAeD,eAAO,MAAM,GAAG,+EAmBd,CAAC"}
+{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU;;;;;;;IAEnB,0CAA0C;;gBAmB5C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,oDAKrC,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}

package/dist/es6/icon/lib/Svg.js

@@ -1,17 +1,31 @@
 import * as React from 'react';
 import { validateIconType } from './utils';
-import { createComponent, styled } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-react/layout';
-const StyledIconSpan = styled(Box.as('span'))({
-    display: 'inline-block',
-    '> svg': { display: 'block' },
-}, ({ shouldMirror, styles }) => ({
-    ...styles,
-    transform: shouldMirror ? 'scaleX(-1)' : undefined,
-}));
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { base } from '@workday/canvas-tokens-web';
+export const svgStencil = createStencil({
+    vars: {
+        /** set width and height of svg element */
+        size: '',
+    },
+    base: { name: "1ea8e4", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--cnvs-svg-size);height:var(--cnvs-svg-size);}" },
+    modifiers: {
+        shouldMirror: {
+            true: { name: "4302e3", styles: "transform:scaleX(-1);" }
+        }
+    }
+}, "cnvs-svg");
+/** @deprecated */
+export const transformColorNameToToken = (color) => {
+    if (color && color in base) {
+        return base[color];
+    }
+    return color;
+};
 export const Svg = createComponent('span')({
     displayName: 'Svg',
-    Component: ({ src, type, ...elemProps }, ref, Element) => {
+    Component: ({ shouldMirror, src, type, ...elemProps }, ref, Element) => {
         try {
             validateIconType(src, type);
         }
@@ -19,6 +33,6 @@ export const Svg = createComponent('span')({
             console.error(e);
             return null;
         }
-        return (React.createElement(StyledIconSpan, Object.assign({ as: Element, dangerouslySetInnerHTML: { __html: src.svg } }, elemProps, { ref: ref })));
+        return (React.createElement(Element, Object.assign({ ref: ref, dangerouslySetInnerHTML: { __html: src.svg } }, mergeStyles(elemProps, svgStencil({ shouldMirror })))));
     },
 });

package/dist/es6/icon/lib/SystemIcon.d.ts

@@ -1,46 +1,73 @@
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
-import { IconProps } from './Icon';
-import { SystemPropValues } from '@workday/canvas-kit-react/layout';
+import { SvgProps } from './Svg';
+/**
+ * @deprecated Interface `SystemIconStyles` will be removed in a future version. `accent`, `color`, background props will be moved inside `GraphicProps`.
+ */
 export interface SystemIconStyles {
     /**
      * The accent color of the SystemIcon. This overrides `color`.
      */
-    accent?: SystemPropValues['color'];
+    accent?: string;
     /**
      * The accent color of the SystemIcon on hover. This overrides `colorHover`.
+     * @deprecated `accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * ```tsx
+     * '&:hover': {
+     *   [systemIconStencil.vars.accent]: desiredAccentHoverColor
+     * }
+     * ```
      */
-    accentHover?: SystemPropValues['color'];
+    accentHover?: string;
     /**
      * The background color of the SystemIcon.
      * @default transparent
      */
-    background?: SystemPropValues['color'];
+    background?: string;
     /**
      * The background color of the SystemIcon on hover.
      * @default transparent
+     * @deprecated `backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * ```tsx
+     * '&:hover': {
+     *   [systemIconStencil.vars.background]: desiredBackgroundHoverColor
+     * }
+     * ```
      */
-    backgroundHover?: SystemPropValues['color'];
+    backgroundHover?: string;
     /**
-     * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
-     * @default iconColors.standard
+     * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
+     * @default base.licorice200
      */
-    color?: SystemPropValues['color'];
+    color?: string;
     /**
-     * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
-     * @default iconColors.hover
+     * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
+     * @default base.licorice200
+     * @deprecated `colorHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * ```tsx
+     * '&:hover': {
+     *   [systemIconStencil.vars.color]: desiredColorHoverColor
+     * }
+     * ```
      */
-    colorHover?: SystemPropValues['color'];
+    colorHover?: string;
     /**
      * The fill color of the SystemIcon. This overrides `color`.
+     * @deprecated `fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`.
      */
-    fill?: SystemPropValues['color'];
+    fill?: string;
     /**
      * The fill color of the SystemIcon on hover. This overrides `colorHover`.
+     * @deprecated `fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * ```tsx
+     * '&:hover': {
+     *   [systemIconStencil.vars.fill]: desiredFillHoverColor
+     * }
+     * ```
      */
-    fillHover?: SystemPropValues['color'];
+    fillHover?: string;
 }
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'fill' | 'type'> {
+export interface SystemIconProps extends SystemIconStyles, Omit<SvgProps, 'src' | 'type' | 'fill' | 'background' | 'color'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */
@@ -48,8 +75,44 @@ export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src'
     /**
      * The size of the SystemIcon in `px`.
      */
-    size?: number | string | undefined;
+    size?: number | string;
 }
+/**
+ * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
+ * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
+ * - Style overrides using the `systemIconStencil`:
+ *   ```tsx
+ *   // styling container
+ *
+ *   ```
+ */
 export declare const systemIconStyles: ({ accent, accentHover, background, backgroundHover, color, colorHover, fill, fillHover, }: SystemIconStyles) => CSSObject;
+export declare const systemIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    /**
+     * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+     * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+     * wish to change the accent layer independently, also set the `accentColor` variable
+     */
+    color: string;
+    accentColor: string;
+    backgroundColor: string;
+}, never>, {
+    /**
+     * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+     * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+     * wish to change the accent layer independently, also set the `accentColor` variable
+     */
+    color: string;
+    accentColor: string;
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    size: string;
+}, never, never>, never>;
 export declare const SystemIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", SystemIconProps>;
 //# sourceMappingURL=SystemIcon.d.ts.map

package/dist/es6/icon/lib/SystemIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACpC;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,sFA4CrB,CAAC"}
+{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;IAJH;;;;OAIG;;;;;;;;;;;;wBAmCL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA0CrB,CAAC"}

package/dist/es6/icon/lib/SystemIcon.js

@@ -1,8 +1,19 @@
 import * as React from 'react';
 import { iconColors } from '@workday/canvas-kit-react/tokens';
 import { CanvasIconTypes } from '@workday/design-assets-types';
-import { Icon } from './Icon';
 import { createComponent, getColor } from '@workday/canvas-kit-react/common';
+import { cssVar, createStencil, handleCsProp, px2rem, createVars } from '@workday/canvas-kit-styling';
+import { base } from '@workday/canvas-tokens-web';
+import { Svg, svgStencil, transformColorNameToToken } from './Svg';
+/**
+ * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
+ * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
+ * - Style overrides using the `systemIconStencil`:
+ *   ```tsx
+ *   // styling container
+ *
+ *   ```
+ */
 export const systemIconStyles = ({ accent, accentHover, background = 'transparent', backgroundHover = 'transparent', color = iconColors.standard, colorHover = iconColors.hover, fill, fillHover, }) => ({
     '& .wd-icon-fill': {
         fill: getColor(fill) || getColor(color),
@@ -23,19 +34,45 @@ export const systemIconStyles = ({ accent, accentHover, background = 'transparen
         fill: getColor(backgroundHover),
     },
 });
+/**
+ * @deprecated These variables are being used for backward compatibility with existing hover props. Please use the following instead:
+ * ```tsx
+ * '&:hover': {
+ *   [systemIconStencil.vars.color]: desiredHoverColor
+ * }
+ * ```
+ */
+const deprecatedSystemIconVars = createVars({ id: "cnvs-deprecated-system-icon", args: ["colorHover", "fillHover", "accentHover", "backgroundHover"] });
+export const systemIconStencil = createStencil({
+    extends: svgStencil,
+    vars: {
+        /**
+         * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+         * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+         * wish to change the accent layer independently, also set the `accentColor` variable
+         */
+        color: '',
+        accentColor: '',
+        backgroundColor: 'transparent',
+    },
+    base: { name: "67a1c3", styles: "--cnvs-system-icon-backgroundColor:transparent;& .wd-icon-fill{fill:var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--cnvs-system-icon-accentColor, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)));}& .wd-icon-background{fill:var(--cnvs-system-icon-backgroundColor);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--cnvs-deprecated-system-icon-fillHover, var(--cnvs-deprecated-system-icon-colorHover, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--cnvs-deprecated-system-icon-accentHover, var(--cnvs-deprecated-system-icon-colorHover, var(--cnvs-system-icon-accentColor, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--cnvs-deprecated-system-icon-backgroundHover, var(--cnvs-system-icon-backgroundColor));}" }
+}, "cnvs-system-icon");
 export const SystemIcon = createComponent('span')({
     displayName: 'SystemIcon',
-    Component: ({ background = 'transparent', backgroundHover = 'transparent', color = iconColors.standard, colorHover = iconColors.hover, icon, accent, accentHover, fill, fillHover, size, shouldMirror, ...elemProps }, ref, Element) => {
-        const style = systemIconStyles({
-            accent,
-            accentHover,
-            background,
-            backgroundHover,
-            color,
-            colorHover,
-            fill,
-            fillHover,
-        });
-        return (React.createElement(Icon, Object.assign({ src: icon, type: CanvasIconTypes.System, size: size, as: Element, shouldMirror: shouldMirror, ref: ref, styles: style }, elemProps)));
+    Component: ({ size, background, backgroundHover, color, colorHover, icon, accent, accentHover, fill, fillHover, ...elemProps }, ref, Element) => {
+        return (React.createElement(Svg, Object.assign({ as: Element, src: icon, type: CanvasIconTypes.System, ref: ref }, handleCsProp(elemProps, [
+            systemIconStencil({
+                size: typeof size === 'number' ? px2rem(size) : size,
+                color: transformColorNameToToken(fill || color),
+                accentColor: transformColorNameToToken(accent || color),
+                backgroundColor: transformColorNameToToken(background),
+            }),
+            {
+                [deprecatedSystemIconVars.colorHover]: colorHover && cssVar(colorHover),
+                [deprecatedSystemIconVars.fillHover]: fillHover && cssVar(fillHover),
+                [deprecatedSystemIconVars.accentHover]: accentHover && cssVar(accentHover),
+                [deprecatedSystemIconVars.backgroundHover]: backgroundHover && cssVar(backgroundHover),
+            },
+        ]))));
     },
 });

package/dist/es6/icon/lib/SystemIconCircle.d.ts

@@ -1,6 +1,5 @@
 import { SystemIconProps } from './SystemIcon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { SystemPropValues } from '@workday/canvas-kit-react/layout';
 export declare enum SystemIconCircleSize {
     xs = 16,
     s = 24,
@@ -12,9 +11,9 @@ export declare enum SystemIconCircleSize {
 export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
     /**
      * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
-     * @default colors.soap300
+     * @default base.soap300
      */
-    background?: SystemPropValues['color'];
+    background?: string;
     /**
      * The icon to display from `@workday/canvas-accent-icons-web`.
      */

package/dist/es6/icon/lib/SystemIconCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FA8B3B,CAAC"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA6BD,eAAO,MAAM,gBAAgB,4FAwB3B,CAAC"}