@workday/canvas-kit-react 8.4.4 → 8.5.0-313-next.0

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

@@ -1,45 +1,46 @@
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
+import { SystemPropValues } from '@workday/canvas-kit-react/layout';
 export interface SystemIconStyles {
     /**
      * The accent color of the SystemIcon. This overrides `color`.
      */
-    accent?: string;
+    accent?: SystemPropValues['color'];
     /**
      * The accent color of the SystemIcon on hover. This overrides `colorHover`.
      */
-    accentHover?: string;
+    accentHover?: SystemPropValues['color'];
     /**
      * The background color of the SystemIcon.
      * @default transparent
      */
-    background?: string;
+    background?: SystemPropValues['color'];
     /**
      * The background color of the SystemIcon on hover.
      * @default transparent
      */
-    backgroundHover?: string;
+    backgroundHover?: SystemPropValues['color'];
     /**
      * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
      * @default iconColors.standard
      */
-    color?: string;
+    color?: SystemPropValues['color'];
     /**
      * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
      * @default iconColors.hover
      */
-    colorHover?: string;
+    colorHover?: SystemPropValues['color'];
     /**
      * The fill color of the SystemIcon. This overrides `color`.
      */
-    fill?: string;
+    fill?: SystemPropValues['color'];
     /**
      * The fill color of the SystemIcon on hover. This overrides `colorHover`.
      */
-    fillHover?: string;
+    fillHover?: SystemPropValues['color'];
 }
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'color' | 'fill' | 'type' | 'background'> {
+export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'fill' | 'type'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */

package/dist/commonjs/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;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IACnE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,kEA4CrB,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;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,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;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,kEA4CrB,CAAC"}

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

@@ -47,26 +47,27 @@ var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var design_assets_types_1 = require("@workday/design-assets-types");
 var Icon_1 = require("./Icon");
 var common_1 = require("@workday/canvas-kit-react/common");
+var utils_1 = require("./utils");
 var systemIconStyles = function (_a) {
     var accent = _a.accent, accentHover = _a.accentHover, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? tokens_1.iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? tokens_1.iconColors.hover : _e, fill = _a.fill, fillHover = _a.fillHover;
     return ({
         '& .wd-icon-fill': {
-            fill: fill || color,
+            fill: utils_1.getColor(fill) || utils_1.getColor(color),
         },
         ':hover .wd-icon-fill': {
-            fill: fillHover || colorHover,
+            fill: utils_1.getColor(fillHover) || utils_1.getColor(colorHover),
         },
         '& .wd-icon-accent, & .wd-icon-accent2': {
-            fill: accent || color,
+            fill: utils_1.getColor(accent) || utils_1.getColor(color),
         },
         ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
-            fill: accentHover || colorHover,
+            fill: utils_1.getColor(accentHover) || utils_1.getColor(colorHover),
         },
         '& .wd-icon-background': {
-            fill: background,
+            fill: utils_1.getColor(background),
         },
         ':hover .wd-icon-background': {
-            fill: backgroundHover,
+            fill: utils_1.getColor(backgroundHover),
         },
     });
 };

package/dist/commonjs/icon/lib/utils.d.ts

@@ -1,3 +1,5 @@
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
+import { CanvasColor } from '@workday/canvas-kit-react/tokens';
 export declare function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes): void;
+export declare function getColor(value?: CanvasColor | string): string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/dist/commonjs/icon/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../icon/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAEzE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,QAI/E"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../icon/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAC,WAAW,EAAS,MAAM,kCAAkC,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,QAI/E;AAED,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,sBAKpD"}

package/dist/commonjs/icon/lib/utils.js

@@ -1,9 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateIconType = void 0;
+exports.getColor = exports.validateIconType = void 0;
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 function validateIconType(icon, expectedType) {
     if (icon.type !== expectedType) {
         throw icon.name + ": Icon type \"" + icon.type + "\" does not match expected type \"" + expectedType + "\"";
     }
 }
 exports.validateIconType = validateIconType;
+function getColor(value) {
+    if (value in tokens_1.colors) {
+        return tokens_1.colors[value];
+    }
+    return value;
+}
+exports.getColor = getColor;

package/dist/commonjs/layout/index.d.ts

@@ -12,6 +12,7 @@ export * from './lib/utils/grid';
 export * from './lib/utils/gridItem';
 export * from './lib/utils/layout';
 export * from './lib/utils/other';
+export * from './lib/utils/systemProps';
 export * from './lib/utils/position';
 export { SpaceStyleProps, spaceStyleFnConfigs } from './lib/utils/space';
 export { AllStyleProps, CommonStyleProps } from './lib/utils/styleProps';

package/dist/commonjs/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/commonjs/layout/index.js

@@ -27,6 +27,7 @@ __exportStar(require("./lib/utils/grid"), exports);
 __exportStar(require("./lib/utils/gridItem"), exports);
 __exportStar(require("./lib/utils/layout"), exports);
 __exportStar(require("./lib/utils/other"), exports);
+__exportStar(require("./lib/utils/systemProps"), exports);
 __exportStar(require("./lib/utils/position"), exports);
 var space_1 = require("./lib/utils/space");
 Object.defineProperty(exports, "spaceStyleFnConfigs", { enumerable: true, get: function () { return space_1.spaceStyleFnConfigs; } });

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

@@ -1,45 +1,46 @@
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
+import { SystemPropValues } from '@workday/canvas-kit-react/layout';
 export interface SystemIconStyles {
     /**
      * The accent color of the SystemIcon. This overrides `color`.
      */
-    accent?: string;
+    accent?: SystemPropValues['color'];
     /**
      * The accent color of the SystemIcon on hover. This overrides `colorHover`.
      */
-    accentHover?: string;
+    accentHover?: SystemPropValues['color'];
     /**
      * The background color of the SystemIcon.
      * @default transparent
      */
-    background?: string;
+    background?: SystemPropValues['color'];
     /**
      * The background color of the SystemIcon on hover.
      * @default transparent
      */
-    backgroundHover?: string;
+    backgroundHover?: SystemPropValues['color'];
     /**
      * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
      * @default iconColors.standard
      */
-    color?: string;
+    color?: SystemPropValues['color'];
     /**
      * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
      * @default iconColors.hover
      */
-    colorHover?: string;
+    colorHover?: SystemPropValues['color'];
     /**
      * The fill color of the SystemIcon. This overrides `color`.
      */
-    fill?: string;
+    fill?: SystemPropValues['color'];
     /**
      * The fill color of the SystemIcon on hover. This overrides `colorHover`.
      */
-    fillHover?: string;
+    fillHover?: SystemPropValues['color'];
 }
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'color' | 'fill' | 'type' | 'background'> {
+export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'fill' | 'type'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */

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;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IACnE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,kEA4CrB,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;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,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;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,kEA4CrB,CAAC"}

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

@@ -25,26 +25,27 @@ import { iconColors } from '@workday/canvas-kit-react/tokens';
 import { CanvasIconTypes } from '@workday/design-assets-types';
 import { Icon } from './Icon';
 import { createComponent } from '@workday/canvas-kit-react/common';
+import { getColor } from './utils';
 export var systemIconStyles = function (_a) {
     var accent = _a.accent, accentHover = _a.accentHover, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? iconColors.hover : _e, fill = _a.fill, fillHover = _a.fillHover;
     return ({
         '& .wd-icon-fill': {
-            fill: fill || color,
+            fill: getColor(fill) || getColor(color),
         },
         ':hover .wd-icon-fill': {
-            fill: fillHover || colorHover,
+            fill: getColor(fillHover) || getColor(colorHover),
         },
         '& .wd-icon-accent, & .wd-icon-accent2': {
-            fill: accent || color,
+            fill: getColor(accent) || getColor(color),
         },
         ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
-            fill: accentHover || colorHover,
+            fill: getColor(accentHover) || getColor(colorHover),
         },
         '& .wd-icon-background': {
-            fill: background,
+            fill: getColor(background),
         },
         ':hover .wd-icon-background': {
-            fill: backgroundHover,
+            fill: getColor(backgroundHover),
         },
     });
 };

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

@@ -1,3 +1,5 @@
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
+import { CanvasColor } from '@workday/canvas-kit-react/tokens';
 export declare function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes): void;
+export declare function getColor(value?: CanvasColor | string): string | undefined;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../icon/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAEzE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,QAI/E"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../icon/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAC,WAAW,EAAS,MAAM,kCAAkC,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,QAI/E;AAED,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,sBAKpD"}

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

@@ -1,5 +1,12 @@
+import { colors } from '@workday/canvas-kit-react/tokens';
 export function validateIconType(icon, expectedType) {
     if (icon.type !== expectedType) {
         throw icon.name + ": Icon type \"" + icon.type + "\" does not match expected type \"" + expectedType + "\"";
     }
 }
+export function getColor(value) {
+    if (value in colors) {
+        return colors[value];
+    }
+    return value;
+}

package/dist/es6/layout/index.d.ts

@@ -12,6 +12,7 @@ export * from './lib/utils/grid';
 export * from './lib/utils/gridItem';
 export * from './lib/utils/layout';
 export * from './lib/utils/other';
+export * from './lib/utils/systemProps';
 export * from './lib/utils/position';
 export { SpaceStyleProps, spaceStyleFnConfigs } from './lib/utils/space';
 export { AllStyleProps, CommonStyleProps } from './lib/utils/styleProps';

package/dist/es6/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvF,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/es6/layout/index.js

@@ -12,6 +12,7 @@ export * from './lib/utils/grid';
 export * from './lib/utils/gridItem';
 export * from './lib/utils/layout';
 export * from './lib/utils/other';
+export * from './lib/utils/systemProps';
 export * from './lib/utils/position';
 export { spaceStyleFnConfigs } from './lib/utils/space';
 export * from './lib/utils/text';

package/icon/lib/SystemIcon.tsx

@@ -4,49 +4,51 @@ import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import {Icon, IconProps} from './Icon';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {getColor} from './utils';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export interface SystemIconStyles {
   /**
    * The accent color of the SystemIcon. This overrides `color`.
    */
-  accent?: string;
+  accent?: SystemPropValues['color'];
   /**
    * The accent color of the SystemIcon on hover. This overrides `colorHover`.
    */
-  accentHover?: string;
+  accentHover?: SystemPropValues['color'];
   /**
    * The background color of the SystemIcon.
    * @default transparent
    */
-  background?: string;
+  background?: SystemPropValues['color'];
   /**
    * The background color of the SystemIcon on hover.
    * @default transparent
    */
-  backgroundHover?: string;
+  backgroundHover?: SystemPropValues['color'];
   /**
    * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
    * @default iconColors.standard
    */
-  color?: string;
+  color?: SystemPropValues['color'];
   /**
    * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
    * @default iconColors.hover
    */
-  colorHover?: string;
+  colorHover?: SystemPropValues['color'];
   /**
    * The fill color of the SystemIcon. This overrides `color`.
    */
-  fill?: string;
+  fill?: SystemPropValues['color'];
   /**
    * The fill color of the SystemIcon on hover. This overrides `colorHover`.
    */
-  fillHover?: string;
+  fillHover?: SystemPropValues['color'];
 }
 
 export interface SystemIconProps
   extends SystemIconStyles,
-    Omit<IconProps, 'src' | 'color' | 'fill' | 'type' | 'background'> {
+    Omit<IconProps, 'src' | 'fill' | 'type'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -69,22 +71,22 @@ export const systemIconStyles = ({
   fillHover,
 }: SystemIconStyles): CSSObject => ({
   '& .wd-icon-fill': {
-    fill: fill || color,
+    fill: getColor(fill) || getColor(color),
   },
   ':hover .wd-icon-fill': {
-    fill: fillHover || colorHover,
+    fill: getColor(fillHover) || getColor(colorHover),
   },
   '& .wd-icon-accent, & .wd-icon-accent2': {
-    fill: accent || color,
+    fill: getColor(accent) || getColor(color),
   },
   ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
-    fill: accentHover || colorHover,
+    fill: getColor(accentHover) || getColor(colorHover),
   },
   '& .wd-icon-background': {
-    fill: background,
+    fill: getColor(background),
   },
   ':hover .wd-icon-background': {
-    fill: backgroundHover,
+    fill: getColor(backgroundHover),
   },
 });
 

package/icon/lib/utils.ts

@@ -1,7 +1,15 @@
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
+import {CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
 
 export function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes) {
   if (icon.type !== expectedType) {
     throw `${icon.name}: Icon type "${icon.type}" does not match expected type "${expectedType}"`;
   }
 }
+
+export function getColor(value?: CanvasColor | string) {
+  if (value! in colors) {
+    return colors[value as keyof typeof colors];
+  }
+  return value;
+}

package/layout/index.ts

@@ -13,6 +13,7 @@ export * from './lib/utils/grid';
 export * from './lib/utils/gridItem';
 export * from './lib/utils/layout';
 export * from './lib/utils/other';
+export * from './lib/utils/systemProps';
 export * from './lib/utils/position';
 export {SpaceStyleProps, spaceStyleFnConfigs} from './lib/utils/space';
 export {AllStyleProps, CommonStyleProps} from './lib/utils/styleProps';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.4.4",
+  "version": "8.5.0-313-next.0+2ff85113",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.4.4",
+    "@workday/canvas-kit-popup-stack": "^8.5.0-313-next.0+2ff85113",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "006cbb935cf6779b654e238fd088dabe95875b1a"
+  "gitHead": "2ff85113385db28d809f20c1134fe62bb752a952"
 }