fix(icon): Fix icon color references

Workday · Jun 12, 2020 · 48092a2 · 48092a2
1 parent 53b7f49
commit 48092a2
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 14 deletions.
diff --git a/modules/icon/css/README.md b/modules/icon/css/README.md
@@ -193,14 +193,14 @@ All system icon colors will accept colors from the
 > Icon color. This will define `data-accent-color` and `data-fill-color`. `data-accent-color` and
 > `data-fill-color` will override this property if defined.
 
-Default: `colors.primary.iconStandard`
+Default: `iconColors.standard`
 
 #### `data-hover-color`
 
 > Icon color on hover. This will define `data-hover-accent-color` and `data-hover-fill-color`.
 > `data-hover-accent-color` and `data-hover-fill-color` will override this property if defined.
 
-Default: `colors.primary.iconHover`
+Default: `iconColors.hover`
 
 #### `data-accent-color`
 
@@ -253,7 +253,7 @@ Default: `24`
 ## Default Options
 
 ```js
-initializeIcons((iconPath = null), (selector = '.wdc-icon'), iconRoot = document);
+initializeIcons((iconPath = null), (selector = '.wdc-icon'), (iconRoot = document));
 ```
 
 ## Icon Path
@@ -288,8 +288,8 @@ initializeIcons(null, '.wdc-custom-icon');
 
 ## Scope Icon Injection
 
-Pass a DOM Element to scope where to look for icons. You can use this to narrow the search instead of looking
-at the whole document or to target a shadowDOM
+Pass a DOM Element to scope where to look for icons. You can use this to narrow the search instead
+of looking at the whole document or to target a shadowDOM
 
 ```js
 initializeIcons(null, '.wdc-icon', myElement);

diff --git a/modules/icon/css/lib/canvas-kit-css-icon.js b/modules/icon/css/lib/canvas-kit-css-icon.js
@@ -196,11 +196,7 @@ function styleSystemIconHovers(selector, iconRoot = document) {
 
   // Style default hovers
   colorIconHoverClasses(hoverableSelector, ['.wd-icon-background'], 'transparent');
-  colorIconHoverClasses(
-    hoverableSelector,
-    ['.wd-icon-accent', '.wd-icon-fill'],
-    canvasColors.primary.iconHover
-  );
+  colorIconHoverClasses(hoverableSelector, ['.wd-icon-accent', '.wd-icon-fill'], iconColors.hover);
 
   // Style individual hovers
   const hoverableSystemIcons = iconRoot.querySelectorAll(hoverableSelector);

diff --git a/modules/icon/react/README.md b/modules/icon/react/README.md
@@ -208,15 +208,15 @@ Default: `24`
 > Icon color. This will define `accent` and `fill`. `accent` and `fill` will override this property
 > if defined.
 
-Default: `colors.primary.iconStandard`
+Default: `iconColors.standard`
 
 ---
 
 #### `colorHover: string`
 
 > Hover color of the icon. This will define `accentHover` and `fillHover`.
 
-Default: `colors.primary.iconHover`
+Default: `iconColors.hover`
 
 ---
 

diff --git a/modules/icon/react/lib/SystemIcon.tsx b/modules/icon/react/lib/SystemIcon.tsx
@@ -25,12 +25,12 @@ export interface SystemIconStyles {
   backgroundHover?: string;
   /**
    * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
-   * @default colors.primary.iconStandard
+   * @default iconColors.standard
    */
   color?: string;
   /**
    * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
-   * @default colors.primary.iconHover
+   * @default iconColors.hover
    */
   colorHover?: string;
   /**