From 2bda30d2f565b7506e61c79bf54315135fc0b831 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 17 Jun 2021 15:29:59 -0500
Subject: [PATCH 01/21] feat(colors): add initial hover colors

---
 .../__snapshots__/modules-test.js.snap        | 30 ++++++++
 packages/colors/src/colors.js                 | 76 +++++++++++++++++++
 2 files changed, 106 insertions(+)

diff --git a/packages/colors/__tests__/__snapshots__/modules-test.js.snap b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
index 81a4ec030654..50858444d8b7 100644
--- a/packages/colors/__tests__/__snapshots__/modules-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
@@ -194,38 +194,68 @@ Object {
   "green-80": "#044317",
   "green-90": "#022d0d",
   "magenta-10": "#fff0f7",
+  "magenta-10-hover": "#ffe0ef",
   "magenta-100": "#2a0a18",
+  "magenta-100-hover": "#53142f",
   "magenta-20": "#ffd6e8",
+  "magenta-20-hover": "#ffbdda",
   "magenta-30": "#ffafd2",
+  "magenta-30-hover": "#ff94c3",
   "magenta-40": "#ff7eb6",
+  "magenta-40-hover": "#ff57a0",
   "magenta-50": "#ee5396",
+  "magenta-50-hover": "#e3176f",
   "magenta-60": "#d02670",
+  "magenta-60-hover": "#b0215f",
   "magenta-70": "#9f1853",
+  "magenta-70-hover": "#bf1d63",
   "magenta-80": "#740937",
+  "magenta-80-hover": "#8e0b43",
   "magenta-90": "#510224",
+  "magenta-90-hover": "#68032e",
   "orange-40": "#ff832b",
   "orange-60": "#ba4e00",
   "orange-70": "#8a3800",
   "purple-10": "#f6f2ff",
+  "purple-10-hover": "#eee6ff",
   "purple-100": "#1c0f30",
+  "purple-100-hover": "#341c59",
   "purple-20": "#e8daff",
+  "purple-20-hover": "#dcc7ff",
   "purple-30": "#d4bbff",
+  "purple-30-hover": "#c5a3ff",
   "purple-40": "#be95ff",
+  "purple-40-hover": "#ae7aff",
   "purple-50": "#a56eff",
+  "purple-50-hover": "#9352ff",
   "purple-60": "#8a3ffc",
+  "purple-60-hover": "#7822fb",
   "purple-70": "#6929c4",
+  "purple-70-hover": "#7c3dd6",
   "purple-80": "#491d8b",
+  "purple-80-hover": "#5b24ad",
   "purple-90": "#31135e",
+  "purple-90-hover": "#40197b",
   "red-10": "#fff1f1",
+  "red-10-hover": "#ffe0e0",
   "red-100": "#2d0709",
+  "red-100-hover": "#540d11",
   "red-20": "#ffd7d9",
+  "red-20-hover": "#ffc2c5",
   "red-30": "#ffb3b8",
+  "red-30-hover": "#ff99a0",
   "red-40": "#ff8389",
+  "red-40-hover": "#ff6168",
   "red-50": "#fa4d56",
+  "red-50-hover": "#ee0713",
   "red-60": "#da1e28",
+  "red-60-hover": "#b81922",
   "red-70": "#a2191f",
+  "red-70-hover": "#c21e25",
   "red-80": "#750e13",
+  "red-80-hover": "#921118",
   "red-90": "#520408",
+  "red-90-hover": "#66050a",
   "teal-10": "#d9fbfb",
   "teal-100": "#081a1c",
   "teal-20": "#9ef0f0",
diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index dbecc515a5b3..62deff15225b 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -31,6 +31,7 @@ export const red70 = '#a2191f';
 export const red80 = '#750e13';
 export const red90 = '#520408';
 export const red100 = '#2d0709';
+
 export const red = {
   10: red10,
   20: red20,
@@ -44,6 +45,29 @@ export const red = {
   100: red100,
 };
 
+export const red100Hover = '#540d11';
+export const red90Hover = '#66050a';
+export const red80Hover = '#921118';
+export const red70Hover = '#c21e25';
+export const red60Hover = '#b81922';
+export const red50Hover = '#ee0713';
+export const red40Hover = '#ff6168';
+export const red30Hover = '#ff99a0';
+export const red20Hover = '#ffc2c5';
+export const red10Hover = '#ffe0e0';
+export const redHover = {
+  100: red100Hover,
+  90: red90Hover,
+  80: red80Hover,
+  70: red70Hover,
+  60: red60Hover,
+  50: red50Hover,
+  40: red40Hover,
+  30: red30Hover,
+  20: red20Hover,
+  10: red10Hover,
+};
+
 export const magenta10 = '#fff0f7';
 export const magenta20 = '#ffd6e8';
 export const magenta30 = '#ffafd2';
@@ -67,6 +91,29 @@ export const magenta = {
   100: magenta100,
 };
 
+export const magenta100Hover = '#53142f';
+export const magenta90Hover = '#68032e';
+export const magenta80Hover = '#8e0b43';
+export const magenta70Hover = '#bf1d63';
+export const magenta60Hover = '#b0215f';
+export const magenta50Hover = '#e3176f';
+export const magenta40Hover = '#ff57a0';
+export const magenta30Hover = '#ff94c3';
+export const magenta20Hover = '#ffbdda';
+export const magenta10Hover = '#ffe0ef';
+export const magentaHover = {
+  100: magenta100Hover,
+  90: magenta90Hover,
+  80: magenta80Hover,
+  70: magenta70Hover,
+  60: magenta60Hover,
+  50: magenta50Hover,
+  40: magenta40Hover,
+  30: magenta30Hover,
+  20: magenta20Hover,
+  10: magenta10Hover,
+};
+
 export const purple10 = '#f6f2ff';
 export const purple20 = '#e8daff';
 export const purple30 = '#d4bbff';
@@ -90,6 +137,29 @@ export const purple = {
   100: purple100,
 };
 
+export const purple100Hover = '#341c59';
+export const purple90Hover = '#40197b';
+export const purple80Hover = '#5b24ad';
+export const purple70Hover = '#7c3dd6';
+export const purple60Hover = '#7822fb';
+export const purple50Hover = '#9352ff';
+export const purple40Hover = '#ae7aff';
+export const purple30Hover = '#c5a3ff';
+export const purple20Hover = '#dcc7ff';
+export const purple10Hover = '#eee6ff';
+export const purpleHover = {
+  100: purple100Hover,
+  90: purple90Hover,
+  80: purple80Hover,
+  70: purple70Hover,
+  60: purple60Hover,
+  50: purple50Hover,
+  40: purple40Hover,
+  30: purple30Hover,
+  20: purple20Hover,
+  10: purple10Hover,
+};
+
 export const blue10 = '#edf5ff';
 export const blue20 = '#d0e2ff';
 export const blue30 = '#a6c8ff';
@@ -283,3 +353,9 @@ export const colors = {
     50: yellow50,
   },
 };
+
+export const unstable_hoverColors = {
+  redHover,
+  magentaHover,
+  purpleHover,
+};

From ae669edf9c687eee96bdff0d27ccbed7c30480ac Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 17 Jun 2021 15:30:16 -0500
Subject: [PATCH 02/21] refactor(colors): update build task to work with hover
 colors

---
 packages/colors/package.json   |  1 -
 packages/colors/tasks/build.js | 83 ++++++++++++++++++++++------------
 2 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/packages/colors/package.json b/packages/colors/package.json
index 3779dd6e445d..164f0482b54b 100644
--- a/packages/colors/package.json
+++ b/packages/colors/package.json
@@ -40,7 +40,6 @@
     "@carbon/scss-generator": "^10.13.0",
     "@carbon/test-utils": "^10.16.0",
     "change-case": "^4.1.1",
-    "core-js": "^3.6.5",
     "fs-extra": "^8.1.0",
     "node-sass": "^6.0.0",
     "rimraf": "^3.0.0"
diff --git a/packages/colors/tasks/build.js b/packages/colors/tasks/build.js
index 3dd9d817bab3..5a43294d0098 100644
--- a/packages/colors/tasks/build.js
+++ b/packages/colors/tasks/build.js
@@ -9,19 +9,12 @@
 
 'use strict';
 
-require('core-js/features/array/flat-map');
-
+const { colors, unstable_hoverColors: hoverColors } = require('@carbon/colors');
 const { types: t, generate } = require('@carbon/scss-generator');
 const { paramCase } = require('change-case');
 const fs = require('fs-extra');
 const path = require('path');
-const { colors } = require('../lib');
 
-const SCSS_DIR = path.resolve(__dirname, '../scss');
-const COLORS_ENTRYPOINT = path.join(SCSS_DIR, 'colors.scss');
-const INDEX_ENTRYPOINT = path.join(SCSS_DIR, 'index.scss');
-const MIXINS_ENTRYPOINT = path.join(SCSS_DIR, 'mixins.scss');
-const MODULES_ENTRYPOINT = path.resolve(SCSS_DIR, '..', 'index.scss');
 const FILE_BANNER = t.Comment(` Code generated by @carbon/colors. DO NOT EDIT.
 
  Copyright IBM Corp. 2018, 2020
@@ -41,7 +34,7 @@ async function build() {
   //
   // We want to convert this into a flat array of variable descriptors that we
   // can use to create mixins. This flat array will look like:
-  // type ColorValues = Array<{ name: string, value: string }>
+  // type ColorValues = Array<{ swatch: string, grade: string, value: string }>
   const colorValues = Object.keys(colors).reduce((acc, key) => {
     const swatch = paramCase(key);
     const values = Object.keys(colors[key]).reduce((acc, grade) => {
@@ -56,6 +49,22 @@ async function build() {
     return acc.concat(...values);
   }, []);
 
+  // Build up our collection of hover color values. This structure is a little
+  // different than our other color format because of how we format the name to
+  // include the grade in between the swatch name and the hover keyword
+  const hoverColorValues = Object.keys(hoverColors).reduce((acc, key) => {
+    const swatch = paramCase(key.replace(/Hover/, ''));
+    const values = Object.keys(hoverColors[key]).reduce((acc, grade) => {
+      const value = hoverColors[key][grade];
+      return acc.concat({
+        name: `${swatch}-${grade}-hover`,
+        value,
+      });
+    }, []);
+
+    return acc.concat(...values);
+  }, []);
+
   const colorMapProperties = t.SassMap({
     properties: Object.keys(colors).flatMap((swatch) => {
       const value = t.SassMap({
@@ -103,6 +112,16 @@ async function build() {
     });
   });
 
+  for (const color of hoverColorValues) {
+    variables.push(
+      t.Assignment({
+        id: t.Identifier(color.name),
+        init: t.SassColor(color.value),
+        default: true,
+      })
+    );
+  }
+
   variables.push(
     t.Assignment({
       id: t.Identifier('ibm-color-map'),
@@ -181,19 +200,11 @@ async function build() {
     FILE_BANNER,
     t.Newline(),
 
-    t.Comment(`/ Value for black
-/ @access public
-/ @group @carbon/colors`),
     t.Assignment({
       id: t.Identifier('black'),
       init: t.SassColor('#000000'),
       default: true,
     }),
-    t.Newline(),
-
-    t.Comment(`/ Value for white
-/ @access public
-/ @group @carbon/colors`),
     t.Assignment({
       id: t.Identifier('white'),
       init: t.SassColor('#ffffff'),
@@ -201,20 +212,26 @@ async function build() {
     }),
     t.Newline(),
 
-    ...colorValues.flatMap(({ grade, swatch, value }) => {
-      return [
-        t.Comment(`/ Value for ${swatch}-${grade} from the IBM Design Language
-/ @access public
-/ @group @carbon/colors`),
-        t.Assignment({
-          id: t.Identifier(`${swatch}-${grade}`),
-          init: t.SassColor(value),
-          default: true,
-        }),
-        t.Newline(),
-      ];
+    ...colorValues.map(({ grade, swatch, value }) => {
+      return t.Assignment({
+        id: t.Identifier(`${swatch}-${grade}`),
+        init: t.SassColor(value),
+        default: true,
+      });
+    }),
+
+    t.Newline(),
+
+    ...hoverColorValues.map(({ name, value }) => {
+      return t.Assignment({
+        id: t.Identifier(name),
+        init: t.SassColor(value),
+        default: true,
+      });
     }),
 
+    t.Newline(),
+
     t.Comment(`/ Colors from the IBM Design Language
 / @access public
 / @group @carbon/colors`),
@@ -240,11 +257,17 @@ async function build() {
     }),
   ]);
 
+  const SCSS_DIR = path.resolve(__dirname, '../scss');
+  const COLORS_ENTRYPOINT = path.join(SCSS_DIR, 'colors.scss');
+  const INDEX_ENTRYPOINT = path.join(SCSS_DIR, 'index.scss');
+  const MIXINS_ENTRYPOINT = path.join(SCSS_DIR, 'mixins.scss');
+  const MODULES_ENTRYPOINT = path.resolve(SCSS_DIR, '..', 'index.scss');
+
   await fs.ensureDir(SCSS_DIR);
   await Promise.all([
-    fs.writeFile(MIXINS_ENTRYPOINT, generate(mixins).code),
     fs.writeFile(COLORS_ENTRYPOINT, generate(entrypoint).code),
     fs.writeFile(INDEX_ENTRYPOINT, generate(entrypoint).code),
+    fs.writeFile(MIXINS_ENTRYPOINT, generate(mixins).code),
     fs.writeFile(MODULES_ENTRYPOINT, generate(sassModule).code),
   ]);
 }

From 40b6fb231cd28a9af23f9df2a59a1d3d1f7a8f59 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Mon, 21 Jun 2021 10:15:45 -0500
Subject: [PATCH 03/21] styles(colors): added blueHover

---
 packages/colors/src/colors.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index 62deff15225b..b897a9982745 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -183,6 +183,30 @@ export const blue = {
   100: blue100,
 };
 
+export const blue100Hover = '#001F75';
+export const blue90Hover = '#00258A';
+export const blue80Hover = '#0039C7';
+export const blue70Hover = '#0053FF';
+export const blue60Hover = '#0050E6';
+export const blue50Hover = '#1F70FF';
+export const blue40Hover = '#5C97FF';
+export const blue30Hover = '#B8D3FF';
+export const blue20Hover = '#B8D3FF';
+export const blue10Hover = '#DBEBFF';
+
+export const blueHover = {
+  100: blue100Hover,
+  90: blue90Hover,
+  80: blue80Hover,
+  70: blue70Hover,
+  60: blue60Hover,
+  50: blue50Hover,
+  40: blue40Hover,
+  30: blue30Hover,
+  20: blue20Hover,
+  10: blue10Hover,
+};
+
 export const cyan10 = '#e5f6ff';
 export const cyan20 = '#bae6ff';
 export const cyan30 = '#82cfff';

From 950faee076fa8264f5cdf6b01e808eec6e63a59e Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Mon, 21 Jun 2021 10:29:46 -0500
Subject: [PATCH 04/21] style(colors): added cyan hover

---
 packages/colors/src/colors.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index b897a9982745..f37846edafc9 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -230,6 +230,31 @@ export const cyan = {
   100: cyan100,
 };
 
+export const cyan10Hover = '#CCEEFF';
+export const cyan20Hover = '#99DAFF';
+export const cyan30Hover = '#57BEFF';
+export const cyan40Hover = '#059FFF';
+export const cyan50Hover = '#0F7EC8';
+export const cyan60Hover = '#005FA3';
+export const cyan70Hover = '#0066BD';
+export const cyan80Hover = '#00498A';
+export const cyan90Hover = '#013360';
+export const cyan100Hover = '#0B2947';
+
+export const cyanHover = {
+  10: cyan10Hover,
+  20: cyan20Hover,
+  30: cyan30Hover,
+  40: cyan40Hover,
+  50: cyan50Hover,
+  60: cyan60Hover,
+  70: cyan70Hover,
+  80: cyan80Hover,
+  90: cyan90Hover,
+  100: cyan10Hover,
+};
+
+
 export const teal10 = '#d9fbfb';
 export const teal20 = '#9ef0f0';
 export const teal30 = '#3ddbd9';

From 74fddf32bd9731a592ebfacc9561468a640b9e70 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Mon, 21 Jun 2021 13:26:46 -0500
Subject: [PATCH 05/21] styles(colors): hover states all updated

---
 packages/colors/src/colors.js | 199 ++++++++++++++++++++++++++++++++--
 1 file changed, 191 insertions(+), 8 deletions(-)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index f37846edafc9..7201c903171c 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -11,15 +11,102 @@ export const black100 = black;
 export const white = '#ffffff';
 export const white0 = white;
 
-export const yellow = '#f1c21b';
-export const yellow30 = yellow;
-export const yellow40 = '#d2a106';
-export const yellow50 = '#b28600';
+export const yellow10 = '#FCF4D6';
+export const yellow20 = '#FDDC69';
+export const yellow30 = '#F1C21B';
+export const yellow40 = '#D2A106';
+export const yellow50 = '#B28600';
+export const yellow60 = '#8E6A00';
+export const yellow70 = '#684E00';
+export const yellow80 = '#483700';
+export const yellow90 = '#302400';
+export const yellow100 = '#1C1500';
 
-export const orange = '#ff832b';
-export const orange40 = orange;
+export const yellow = {
+  10: yellow10,
+  20: yellow20,
+  30: yellow30,
+  40: yellow40,
+  50: yellow50,
+  60: yellow60,
+  70: yellow70,
+  80: yellow80,
+  90: yellow90,
+  100: yellow100,
+};
+
+export const yellow10Hover = '#f8e6a0';
+export const yellow20Hover = '#fccd27';
+export const yellow30Hover = '#ddb00e';
+export const yellow40Hover = '#bc9005';
+export const yellow50Hover = '#9e7700';
+export const yellow60Hover = '#755800';
+export const yellow70Hover = '#806000';
+export const yellow80Hover = '#5c4600';
+export const yellow90Hover = '#3d2e00';
+export const yellow100Hover = '#332600';
+
+export const yellowHover = {
+  10: yellow10Hover,
+  20: yellow20Hover,
+  30: yellow30Hover,
+  40: yellow40Hover,
+  50: yellow50Hover,
+  60: yellow60Hover,
+  70: yellow70Hover,
+  80: yellow80Hover,
+  90: yellow90Hover,
+  100: yellow100Hover,
+};
+
+export const orange10 = '#fff2e8';
+export const orange20 = '#ffd9be';
+export const orange30 = '#ffb784';
+export const orange40 = '#ff832b';
+export const orange50 = '#eb6200';
 export const orange60 = '#ba4e00';
 export const orange70 = '#8a3800';
+export const orange80 = '#5e2900';
+export const orange90 = '#3e1a00';
+export const orange100 = '#231000';
+
+export const orange = {
+  10: orange10,
+  20: orange20,
+  30: orange30,
+  40: orange40,
+  50: orange50,
+  60: orange60,
+  70: orange70,
+  80: orange80,
+  90: orange90,
+  100: orange100,
+};
+
+export const orange10Hover = '#FFE2CC';
+export const orange20Hover = '#FFC69E';
+export const orange30Hover = '#FF9D57';
+export const orange40Hover = '#FA6800';
+export const orange50Hover = '#CC5500';
+export const orange60Hover = '#9E4200';
+export const orange70Hover = '#A84400';
+export const orange80Hover = '#753300';
+export const orange90Hover = '#522200';
+export const orange100Hover = '#421E00';
+
+export const orangeHover = {
+  10: orange10Hover,
+  20: orange20Hover,
+  30: orange30Hover,
+  40: orange40Hover,
+  50: orange50Hover,
+  60: orange60Hover,
+  70: orange70Hover,
+  80: orange80Hover,
+  90: orange90Hover,
+  100: orange100Hover,
+};
+
 
 export const red10 = '#fff1f1';
 export const red20 = '#ffd7d9';
@@ -278,6 +365,30 @@ export const teal = {
   100: teal100,
 };
 
+export const teal10Hover = '#ACF6F6';
+export const teal20Hover = '#57E5E5';
+export const teal30Hover = '#25CAC8';
+export const teal40Hover = '#07ABA9';
+export const teal50Hover = '#008A87';
+export const teal60Hover = '#006B68';
+export const teal70Hover = '#007070';
+export const teal80Hover = '#005357';
+export const teal90Hover = '#033940';
+export const teal100Hover = '#0F3034';
+
+export const tealHover = {
+  10: teal10Hover,
+  20: teal20Hover,
+  30: teal30Hover,
+  40: teal40Hover,
+  50: teal50Hover,
+  60: teal60Hover,
+  70: teal70Hover,
+  80: teal80Hover,
+  90: teal90Hover,
+  100: teal100Hover,
+};
+
 export const green10 = '#defbe6';
 export const green20 = '#a7f0ba';
 export const green30 = '#6fdc8c';
@@ -299,7 +410,31 @@ export const green = {
   80: green80,
   90: green90,
   100: green100,
-};
+}
+
+export const green10Hover = '#B6F6C8';
+export const green20Hover = '#74E792';
+export const green30Hover = '#36CE5E';
+export const green40Hover = '#3BAB5A';
+export const green50Hover = '#208E3F';
+export const green60Hover = '#166F31';
+export const green70Hover = '#11742F';
+export const green80Hover = '#05521C';
+export const green90Hover = '#033B11';
+export const green100Hover = '#0D300F';
+
+export const greenHover = {
+  10: green10Hover,
+  20: green20Hover,
+  30: green30Hover,
+  40: green40Hover,
+  50: green50Hover,
+  60: green60Hover,
+  70: green70Hover,
+  80: green80Hover,
+  90: green90Hover,
+  100: green100Hover,
+}
 
 export const coolGray10 = '#f2f4f8';
 export const coolGray20 = '#dde1e6';
@@ -324,6 +459,30 @@ export const coolGray = {
   100: coolGray100,
 };
 
+export const coolGray10Hover = '#E4E9F1';
+export const coolGray20Hover = '#CDD3DA';
+export const coolGray30Hover = '#ADB5BD';
+export const coolGray40Hover = '#9199A1';
+export const coolGray50Hover = '#757B85';
+export const coolGray60Hover = '#585E64';
+export const coolGray70Hover = '#5D646A';
+export const coolGray80Hover = '#434A51';
+export const coolGray90Hover = '#2B3236';
+export const coolGray100Hover = '#222A2F';
+
+export const coolGrayHover = {
+  10: coolGray10Hover,
+  20: coolGray20Hover,
+  30: coolGray30Hover,
+  40: coolGray40Hover,
+  50: coolGray50Hover,
+  60: coolGray60Hover,
+  70: coolGray70Hover,
+  80: coolGray80Hover,
+  90: coolGray90Hover,
+  100: coolGray100Hover,
+};
+
 export const gray10 = '#f4f4f4';
 export const gray20 = '#e0e0e0';
 export const gray30 = '#c6c6c6';
@@ -347,6 +506,30 @@ export const gray = {
   100: gray100,
 };
 
+export const gray10Hover = '#E8E8E8';
+export const gray20Hover = '#D1D1D1';
+export const gray30Hover = '#B5B5B5';
+export const gray40Hover = '#999999';
+export const gray50Hover = '#7A7A7A';
+export const gray60Hover = '#5E5E5E';
+export const gray70Hover = '#636363';
+export const gray80Hover = '#474747';
+export const gray90Hover = '#333333';
+export const gray100Hover = '#292929';
+
+export const grayHover = {
+  10: gray10Hover,
+  20: gray20Hover,
+  30: gray30Hover,
+  40: gray40Hover,
+  50: gray50Hover,
+  60: gray60Hover,
+  70: gray70Hover,
+  80: gray80Hover,
+  90: gray90Hover,
+  100: gray100Hover,
+};
+
 export const warmGray10 = '#f7f3f2';
 export const warmGray20 = '#e5e0df';
 export const warmGray30 = '#cac5c4';
@@ -371,7 +554,7 @@ export const warmGray = {
 };
 
 // Deprecated ☠️
-export const yellow20 = '#fdd13a';
+// export const yellow20 = '#fdd13a';
 
 export const colors = {
   black: {

From 4d3d3f0066657e868e67824d0de13c935f37a020 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Mon, 21 Jun 2021 13:44:39 -0500
Subject: [PATCH 06/21] style(colors): fixed case senstivity

---
 packages/colors/src/colors.js | 170 ++++++++++++++++++----------------
 1 file changed, 91 insertions(+), 79 deletions(-)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index 7201c903171c..6b1a35d2f792 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -11,17 +11,16 @@ export const black100 = black;
 export const white = '#ffffff';
 export const white0 = white;
 
-export const yellow10 = '#FCF4D6';
-export const yellow20 = '#FDDC69';
-export const yellow30 = '#F1C21B';
-export const yellow40 = '#D2A106';
-export const yellow50 = '#B28600';
-export const yellow60 = '#8E6A00';
-export const yellow70 = '#684E00';
+export const yellow10 = '#fcf4d6';
+export const yellow20 = '#fddc69';
+export const yellow30 = '#f1c21b';
+export const yellow40 = '#d2a106';
+export const yellow50 = '#b28600';
+export const yellow60 = '#8e6a00';
+export const yellow70 = '#684e00';
 export const yellow80 = '#483700';
 export const yellow90 = '#302400';
-export const yellow100 = '#1C1500';
-
+export const yellow100 = '#1c1500';
 export const yellow = {
   10: yellow10,
   20: yellow20,
@@ -45,7 +44,6 @@ export const yellow70Hover = '#806000';
 export const yellow80Hover = '#5c4600';
 export const yellow90Hover = '#3d2e00';
 export const yellow100Hover = '#332600';
-
 export const yellowHover = {
   10: yellow10Hover,
   20: yellow20Hover,
@@ -69,7 +67,6 @@ export const orange70 = '#8a3800';
 export const orange80 = '#5e2900';
 export const orange90 = '#3e1a00';
 export const orange100 = '#231000';
-
 export const orange = {
   10: orange10,
   20: orange20,
@@ -83,17 +80,16 @@ export const orange = {
   100: orange100,
 };
 
-export const orange10Hover = '#FFE2CC';
-export const orange20Hover = '#FFC69E';
-export const orange30Hover = '#FF9D57';
-export const orange40Hover = '#FA6800';
-export const orange50Hover = '#CC5500';
-export const orange60Hover = '#9E4200';
-export const orange70Hover = '#A84400';
+export const orange10Hover = '#ffe2cc';
+export const orange20Hover = '#ffc69e';
+export const orange30Hover = '#ff9d57';
+export const orange40Hover = '#fa6800';
+export const orange50Hover = '#cc5500';
+export const orange60Hover = '#9e4200';
+export const orange70Hover = '#a84400';
 export const orange80Hover = '#753300';
 export const orange90Hover = '#522200';
-export const orange100Hover = '#421E00';
-
+export const orange100Hover = '#421e00';
 export const orangeHover = {
   10: orange10Hover,
   20: orange20Hover,
@@ -118,7 +114,6 @@ export const red70 = '#a2191f';
 export const red80 = '#750e13';
 export const red90 = '#520408';
 export const red100 = '#2d0709';
-
 export const red = {
   10: red10,
   20: red20,
@@ -270,17 +265,16 @@ export const blue = {
   100: blue100,
 };
 
-export const blue100Hover = '#001F75';
-export const blue90Hover = '#00258A';
-export const blue80Hover = '#0039C7';
-export const blue70Hover = '#0053FF';
-export const blue60Hover = '#0050E6';
-export const blue50Hover = '#1F70FF';
-export const blue40Hover = '#5C97FF';
-export const blue30Hover = '#B8D3FF';
-export const blue20Hover = '#B8D3FF';
-export const blue10Hover = '#DBEBFF';
-
+export const blue100Hover = '#001f75';
+export const blue90Hover = '#00258a';
+export const blue80Hover = '#0039c7';
+export const blue70Hover = '#0053ff';
+export const blue60Hover = '#0050e6';
+export const blue50Hover = '#1f70ff';
+export const blue40Hover = '#5c97ff';
+export const blue30Hover = '#b8d3ff';
+export const blue20Hover = '#b8d3ff';
+export const blue10Hover = '#dbebff';
 export const blueHover = {
   100: blue100Hover,
   90: blue90Hover,
@@ -317,17 +311,16 @@ export const cyan = {
   100: cyan100,
 };
 
-export const cyan10Hover = '#CCEEFF';
-export const cyan20Hover = '#99DAFF';
-export const cyan30Hover = '#57BEFF';
-export const cyan40Hover = '#059FFF';
-export const cyan50Hover = '#0F7EC8';
-export const cyan60Hover = '#005FA3';
-export const cyan70Hover = '#0066BD';
-export const cyan80Hover = '#00498A';
+export const cyan10Hover = '#cceeff';
+export const cyan20Hover = '#99daff';
+export const cyan30Hover = '#57beff';
+export const cyan40Hover = '#059fff';
+export const cyan50Hover = '#0f7ec8';
+export const cyan60Hover = '#005fa3';
+export const cyan70Hover = '#0066bd';
+export const cyan80Hover = '#00498a';
 export const cyan90Hover = '#013360';
-export const cyan100Hover = '#0B2947';
-
+export const cyan100Hover = '#0b2947';
 export const cyanHover = {
   10: cyan10Hover,
   20: cyan20Hover,
@@ -341,7 +334,6 @@ export const cyanHover = {
   100: cyan10Hover,
 };
 
-
 export const teal10 = '#d9fbfb';
 export const teal20 = '#9ef0f0';
 export const teal30 = '#3ddbd9';
@@ -365,17 +357,16 @@ export const teal = {
   100: teal100,
 };
 
-export const teal10Hover = '#ACF6F6';
-export const teal20Hover = '#57E5E5';
-export const teal30Hover = '#25CAC8';
-export const teal40Hover = '#07ABA9';
-export const teal50Hover = '#008A87';
-export const teal60Hover = '#006B68';
+export const teal10Hover = '#acf6f6';
+export const teal20Hover = '#57e5e5';
+export const teal30Hover = '#25cac8';
+export const teal40Hover = '#07aba9';
+export const teal50Hover = '#008a87';
+export const teal60Hover = '#006b68';
 export const teal70Hover = '#007070';
 export const teal80Hover = '#005357';
 export const teal90Hover = '#033940';
-export const teal100Hover = '#0F3034';
-
+export const teal100Hover = '#0f3034';
 export const tealHover = {
   10: teal10Hover,
   20: teal20Hover,
@@ -412,17 +403,16 @@ export const green = {
   100: green100,
 }
 
-export const green10Hover = '#B6F6C8';
-export const green20Hover = '#74E792';
-export const green30Hover = '#36CE5E';
-export const green40Hover = '#3BAB5A';
-export const green50Hover = '#208E3F';
-export const green60Hover = '#166F31';
-export const green70Hover = '#11742F';
-export const green80Hover = '#05521C';
-export const green90Hover = '#033B11';
-export const green100Hover = '#0D300F';
-
+export const green10Hover = '#b6f6c8';
+export const green20Hover = '#74e792';
+export const green30Hover = '#36ce5e';
+export const green40Hover = '#3bab5a';
+export const green50Hover = '#208e3f';
+export const green60Hover = '#166f31';
+export const green70Hover = '#11742f';
+export const green80Hover = '#05521c';
+export const green90Hover = '#033b11';
+export const green100Hover = '#0d300f';
 export const greenHover = {
   10: green10Hover,
   20: green20Hover,
@@ -459,17 +449,16 @@ export const coolGray = {
   100: coolGray100,
 };
 
-export const coolGray10Hover = '#E4E9F1';
-export const coolGray20Hover = '#CDD3DA';
-export const coolGray30Hover = '#ADB5BD';
-export const coolGray40Hover = '#9199A1';
-export const coolGray50Hover = '#757B85';
-export const coolGray60Hover = '#585E64';
-export const coolGray70Hover = '#5D646A';
-export const coolGray80Hover = '#434A51';
-export const coolGray90Hover = '#2B3236';
-export const coolGray100Hover = '#222A2F';
-
+export const coolGray10Hover = '#e4e9f1';
+export const coolGray20Hover = '#cdd3da';
+export const coolGray30Hover = '#adb5bd';
+export const coolGray40Hover = '#9199a1';
+export const coolGray50Hover = '#757b85';
+export const coolGray60Hover = '#585e64';
+export const coolGray70Hover = '#5d646a';
+export const coolGray80Hover = '#434a51';
+export const coolGray90Hover = '#2b3236';
+export const coolGray100Hover = '#222a2f';
 export const coolGrayHover = {
   10: coolGray10Hover,
   20: coolGray20Hover,
@@ -506,17 +495,16 @@ export const gray = {
   100: gray100,
 };
 
-export const gray10Hover = '#E8E8E8';
-export const gray20Hover = '#D1D1D1';
-export const gray30Hover = '#B5B5B5';
+export const gray10Hover = '#e8e8e8';
+export const gray20Hover = '#d1d1d1';
+export const gray30Hover = '#b5b5b5';
 export const gray40Hover = '#999999';
-export const gray50Hover = '#7A7A7A';
-export const gray60Hover = '#5E5E5E';
+export const gray50Hover = '#7a7a7a';
+export const gray60Hover = '#5e5e5e';
 export const gray70Hover = '#636363';
 export const gray80Hover = '#474747';
 export const gray90Hover = '#333333';
 export const gray100Hover = '#292929';
-
 export const grayHover = {
   10: gray10Hover,
   20: gray20Hover,
@@ -553,6 +541,30 @@ export const warmGray = {
   100: warmGray100,
 };
 
+export const warmGray10Hover = '#F0E8E6';
+export const warmGray20Hover = '#D8D0CF';
+export const warmGray30Hover = '#B9B3B1';
+export const warmGray40Hover = '#9C9696';
+export const warmGray50Hover = '#7F7B7B';
+export const warmGray60Hover = '#605D5D';
+export const warmGray70Hover = '#696363';
+export const warmGray80Hover = '#4C4848';
+export const warmGray90Hover = '#343232';
+export const warmGray100Hover = '#2C2626';
+
+export const warmGrayHover = {
+  10: warmGray10Hover,
+  20: warmGray20Hover,
+  30: warmGray30Hover,
+  40: warmGray40Hover,
+  50: warmGray50Hover,
+  60: warmGray60Hover,
+  70: warmGray70Hover,
+  80: warmGray80Hover,
+  90: warmGray90Hover,
+  100: warmGray100Hover,
+};
+
 // Deprecated ☠️
 // export const yellow20 = '#fdd13a';
 

From 9da94e2e33730e688b8ae1d02270b4948544af9a Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Mon, 21 Jun 2021 13:50:30 -0500
Subject: [PATCH 07/21] style(color): case-senstivity on warmgray

---
 packages/colors/src/colors.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index 6b1a35d2f792..c4442284e0bd 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -541,16 +541,16 @@ export const warmGray = {
   100: warmGray100,
 };
 
-export const warmGray10Hover = '#F0E8E6';
-export const warmGray20Hover = '#D8D0CF';
-export const warmGray30Hover = '#B9B3B1';
-export const warmGray40Hover = '#9C9696';
-export const warmGray50Hover = '#7F7B7B';
-export const warmGray60Hover = '#605D5D';
+export const warmGray10Hover = '#f0e8e6';
+export const warmGray20Hover = '#d8d0cf';
+export const warmGray30Hover = '#b9b3b1';
+export const warmGray40Hover = '#9c9696';
+export const warmGray50Hover = '#7f7b7b';
+export const warmGray60Hover = '#605d5d';
 export const warmGray70Hover = '#696363';
-export const warmGray80Hover = '#4C4848';
+export const warmGray80Hover = '#4c4848';
 export const warmGray90Hover = '#343232';
-export const warmGray100Hover = '#2C2626';
+export const warmGray100Hover = '#2c2626';
 
 export const warmGrayHover = {
   10: warmGray10Hover,

From fb2a8c48641243722364ef1fc3f0d57137f3ea44 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Mon, 21 Jun 2021 14:03:16 -0500
Subject: [PATCH 08/21] fix(colors): yarn format

---
 packages/colors/src/colors.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index c4442284e0bd..05c1aff345cd 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -103,7 +103,6 @@ export const orangeHover = {
   100: orange100Hover,
 };
 
-
 export const red10 = '#fff1f1';
 export const red20 = '#ffd7d9';
 export const red30 = '#ffb3b8';
@@ -401,7 +400,7 @@ export const green = {
   80: green80,
   90: green90,
   100: green100,
-}
+};
 
 export const green10Hover = '#b6f6c8';
 export const green20Hover = '#74e792';
@@ -424,7 +423,7 @@ export const greenHover = {
   80: green80Hover,
   90: green90Hover,
   100: green100Hover,
-}
+};
 
 export const coolGray10 = '#f2f4f8';
 export const coolGray20 = '#dde1e6';

From 37e368bc5cda58aeceb3a97fbfea4287332ec50f Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Tue, 22 Jun 2021 14:43:36 -0500
Subject: [PATCH 09/21] fix(colors): updated unstable_hoverColors

---
 .../__snapshots__/colors-test.js.snap         | 15 +++++++++-
 .../__snapshots__/modules-test.js.snap        | 30 -------------------
 packages/colors/src/colors.js                 | 24 +++++++--------
 3 files changed, 26 insertions(+), 43 deletions(-)

diff --git a/packages/colors/__tests__/__snapshots__/colors-test.js.snap b/packages/colors/__tests__/__snapshots__/colors-test.js.snap
index 830d1c42d42f..2890f698105a 100644
--- a/packages/colors/__tests__/__snapshots__/colors-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/colors-test.js.snap
@@ -78,9 +78,16 @@ Object {
     "90": "#510224",
   },
   "orange": Object {
+    "10": "#fff2e8",
+    "100": "#231000",
+    "20": "#ffd9be",
+    "30": "#ffb784",
     "40": "#ff832b",
+    "50": "#eb6200",
     "60": "#ba4e00",
     "70": "#8a3800",
+    "80": "#5e2900",
+    "90": "#3e1a00",
   },
   "purple": Object {
     "10": "#f6f2ff",
@@ -134,10 +141,16 @@ Object {
     "0": "#ffffff",
   },
   "yellow": Object {
-    "20": "#fdd13a",
+    "10": "#fcf4d6",
+    "100": "#1c1500",
+    "20": "#fddc69",
     "30": "#f1c21b",
     "40": "#d2a106",
     "50": "#b28600",
+    "60": "#8e6a00",
+    "70": "#684e00",
+    "80": "#483700",
+    "90": "#302400",
   },
 }
 `;
diff --git a/packages/colors/__tests__/__snapshots__/modules-test.js.snap b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
index 50858444d8b7..81a4ec030654 100644
--- a/packages/colors/__tests__/__snapshots__/modules-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
@@ -194,68 +194,38 @@ Object {
   "green-80": "#044317",
   "green-90": "#022d0d",
   "magenta-10": "#fff0f7",
-  "magenta-10-hover": "#ffe0ef",
   "magenta-100": "#2a0a18",
-  "magenta-100-hover": "#53142f",
   "magenta-20": "#ffd6e8",
-  "magenta-20-hover": "#ffbdda",
   "magenta-30": "#ffafd2",
-  "magenta-30-hover": "#ff94c3",
   "magenta-40": "#ff7eb6",
-  "magenta-40-hover": "#ff57a0",
   "magenta-50": "#ee5396",
-  "magenta-50-hover": "#e3176f",
   "magenta-60": "#d02670",
-  "magenta-60-hover": "#b0215f",
   "magenta-70": "#9f1853",
-  "magenta-70-hover": "#bf1d63",
   "magenta-80": "#740937",
-  "magenta-80-hover": "#8e0b43",
   "magenta-90": "#510224",
-  "magenta-90-hover": "#68032e",
   "orange-40": "#ff832b",
   "orange-60": "#ba4e00",
   "orange-70": "#8a3800",
   "purple-10": "#f6f2ff",
-  "purple-10-hover": "#eee6ff",
   "purple-100": "#1c0f30",
-  "purple-100-hover": "#341c59",
   "purple-20": "#e8daff",
-  "purple-20-hover": "#dcc7ff",
   "purple-30": "#d4bbff",
-  "purple-30-hover": "#c5a3ff",
   "purple-40": "#be95ff",
-  "purple-40-hover": "#ae7aff",
   "purple-50": "#a56eff",
-  "purple-50-hover": "#9352ff",
   "purple-60": "#8a3ffc",
-  "purple-60-hover": "#7822fb",
   "purple-70": "#6929c4",
-  "purple-70-hover": "#7c3dd6",
   "purple-80": "#491d8b",
-  "purple-80-hover": "#5b24ad",
   "purple-90": "#31135e",
-  "purple-90-hover": "#40197b",
   "red-10": "#fff1f1",
-  "red-10-hover": "#ffe0e0",
   "red-100": "#2d0709",
-  "red-100-hover": "#540d11",
   "red-20": "#ffd7d9",
-  "red-20-hover": "#ffc2c5",
   "red-30": "#ffb3b8",
-  "red-30-hover": "#ff99a0",
   "red-40": "#ff8389",
-  "red-40-hover": "#ff6168",
   "red-50": "#fa4d56",
-  "red-50-hover": "#ee0713",
   "red-60": "#da1e28",
-  "red-60-hover": "#b81922",
   "red-70": "#a2191f",
-  "red-70-hover": "#c21e25",
   "red-80": "#750e13",
-  "red-80-hover": "#921118",
   "red-90": "#520408",
-  "red-90-hover": "#66050a",
   "teal-10": "#d9fbfb",
   "teal-100": "#081a1c",
   "teal-20": "#9ef0f0",
diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index 05c1aff345cd..67e391c7c9e0 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -577,11 +577,7 @@ export const colors = {
   gray,
   green,
   magenta,
-  orange: {
-    40: orange40,
-    60: orange60,
-    70: orange70,
-  },
+  orange,
   purple,
   red,
   teal,
@@ -589,16 +585,20 @@ export const colors = {
   white: {
     0: white,
   },
-  yellow: {
-    20: yellow20,
-    30: yellow30,
-    40: yellow40,
-    50: yellow50,
-  },
+  yellow,
 };
 
 export const unstable_hoverColors = {
-  redHover,
+  blueHover,
+  coolGrayHover,
+  cyanHover,
+  grayHover,
+  greenHover,
   magentaHover,
+  orangeHover,
   purpleHover,
+  redHover,
+  tealHover,
+  warmGrayHover,
+  yellowHover,
 };

From 191d2c43860172c27f3627f5f68718374f53bb7c Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Tue, 22 Jun 2021 14:50:08 -0500
Subject: [PATCH 10/21] fix(colors): hoverColor testing

---
 .../__snapshots__/colors-test.js.snap         | 149 ++++++++++++++++++
 packages/colors/__tests__/colors-test.js      |   6 +-
 2 files changed, 154 insertions(+), 1 deletion(-)

diff --git a/packages/colors/__tests__/__snapshots__/colors-test.js.snap b/packages/colors/__tests__/__snapshots__/colors-test.js.snap
index 2890f698105a..bfb452bbbcf0 100644
--- a/packages/colors/__tests__/__snapshots__/colors-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/colors-test.js.snap
@@ -154,3 +154,152 @@ Object {
   },
 }
 `;
+
+exports[`unstable_hoverColors 1`] = `
+Object {
+  "blueHover": Object {
+    "10": "#dbebff",
+    "100": "#001f75",
+    "20": "#b8d3ff",
+    "30": "#b8d3ff",
+    "40": "#5c97ff",
+    "50": "#1f70ff",
+    "60": "#0050e6",
+    "70": "#0053ff",
+    "80": "#0039c7",
+    "90": "#00258a",
+  },
+  "coolGrayHover": Object {
+    "10": "#e4e9f1",
+    "100": "#222a2f",
+    "20": "#cdd3da",
+    "30": "#adb5bd",
+    "40": "#9199a1",
+    "50": "#757b85",
+    "60": "#585e64",
+    "70": "#5d646a",
+    "80": "#434a51",
+    "90": "#2b3236",
+  },
+  "cyanHover": Object {
+    "10": "#cceeff",
+    "100": "#cceeff",
+    "20": "#99daff",
+    "30": "#57beff",
+    "40": "#059fff",
+    "50": "#0f7ec8",
+    "60": "#005fa3",
+    "70": "#0066bd",
+    "80": "#00498a",
+    "90": "#013360",
+  },
+  "grayHover": Object {
+    "10": "#e8e8e8",
+    "100": "#292929",
+    "20": "#d1d1d1",
+    "30": "#b5b5b5",
+    "40": "#999999",
+    "50": "#7a7a7a",
+    "60": "#5e5e5e",
+    "70": "#636363",
+    "80": "#474747",
+    "90": "#333333",
+  },
+  "greenHover": Object {
+    "10": "#b6f6c8",
+    "100": "#0d300f",
+    "20": "#74e792",
+    "30": "#36ce5e",
+    "40": "#3bab5a",
+    "50": "#208e3f",
+    "60": "#166f31",
+    "70": "#11742f",
+    "80": "#05521c",
+    "90": "#033b11",
+  },
+  "magentaHover": Object {
+    "10": "#ffe0ef",
+    "100": "#53142f",
+    "20": "#ffbdda",
+    "30": "#ff94c3",
+    "40": "#ff57a0",
+    "50": "#e3176f",
+    "60": "#b0215f",
+    "70": "#bf1d63",
+    "80": "#8e0b43",
+    "90": "#68032e",
+  },
+  "orangeHover": Object {
+    "10": "#ffe2cc",
+    "100": "#421e00",
+    "20": "#ffc69e",
+    "30": "#ff9d57",
+    "40": "#fa6800",
+    "50": "#cc5500",
+    "60": "#9e4200",
+    "70": "#a84400",
+    "80": "#753300",
+    "90": "#522200",
+  },
+  "purpleHover": Object {
+    "10": "#eee6ff",
+    "100": "#341c59",
+    "20": "#dcc7ff",
+    "30": "#c5a3ff",
+    "40": "#ae7aff",
+    "50": "#9352ff",
+    "60": "#7822fb",
+    "70": "#7c3dd6",
+    "80": "#5b24ad",
+    "90": "#40197b",
+  },
+  "redHover": Object {
+    "10": "#ffe0e0",
+    "100": "#540d11",
+    "20": "#ffc2c5",
+    "30": "#ff99a0",
+    "40": "#ff6168",
+    "50": "#ee0713",
+    "60": "#b81922",
+    "70": "#c21e25",
+    "80": "#921118",
+    "90": "#66050a",
+  },
+  "tealHover": Object {
+    "10": "#acf6f6",
+    "100": "#0f3034",
+    "20": "#57e5e5",
+    "30": "#25cac8",
+    "40": "#07aba9",
+    "50": "#008a87",
+    "60": "#006b68",
+    "70": "#007070",
+    "80": "#005357",
+    "90": "#033940",
+  },
+  "warmGrayHover": Object {
+    "10": "#f0e8e6",
+    "100": "#2c2626",
+    "20": "#d8d0cf",
+    "30": "#b9b3b1",
+    "40": "#9c9696",
+    "50": "#7f7b7b",
+    "60": "#605d5d",
+    "70": "#696363",
+    "80": "#4c4848",
+    "90": "#343232",
+  },
+  "yellowHover": Object {
+    "10": "#f8e6a0",
+    "100": "#332600",
+    "20": "#fccd27",
+    "30": "#ddb00e",
+    "40": "#bc9005",
+    "50": "#9e7700",
+    "60": "#755800",
+    "70": "#806000",
+    "80": "#5c4600",
+    "90": "#3d2e00",
+  },
+}
+`;
diff --git a/packages/colors/__tests__/colors-test.js b/packages/colors/__tests__/colors-test.js
index ddd3c757e478..f56d290bcefb 100644
--- a/packages/colors/__tests__/colors-test.js
+++ b/packages/colors/__tests__/colors-test.js
@@ -9,8 +9,12 @@
 
 'use strict';
 
-import { colors } from '../src';
+import { colors, unstable_hoverColors } from '../src';
 
 test('colors', () => {
   expect(colors).toMatchSnapshot();
 });
+
+test('unstable_hoverColors', () => {
+  expect(unstable_hoverColors).toMatchSnapshot();
+});

From 5e25782e1bf1c2a1b774cae9ca5c03cd669803d7 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 23 Jun 2021 12:44:09 -0500
Subject: [PATCH 11/21] test(colors): update snapshot

---
 .../__snapshots__/modules-test.js.snap        | 150 +++++++++++++++++-
 1 file changed, 148 insertions(+), 2 deletions(-)

diff --git a/packages/colors/__tests__/__snapshots__/modules-test.js.snap b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
index 81a4ec030654..e84630f7e7cf 100644
--- a/packages/colors/__tests__/__snapshots__/modules-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
@@ -5,15 +5,25 @@ Object {
   "black": "#000000",
   "black-100": "#000000",
   "blue-10": "#edf5ff",
+  "blue-10-hover": "#dbebff",
   "blue-100": "#001141",
+  "blue-100-hover": "#001f75",
   "blue-20": "#d0e2ff",
+  "blue-20-hover": "#b8d3ff",
   "blue-30": "#a6c8ff",
+  "blue-30-hover": "#b8d3ff",
   "blue-40": "#78a9ff",
+  "blue-40-hover": "#5c97ff",
   "blue-50": "#4589ff",
+  "blue-50-hover": "#1f70ff",
   "blue-60": "#0f62fe",
+  "blue-60-hover": "#0050e6",
   "blue-70": "#0043ce",
+  "blue-70-hover": "#0053ff",
   "blue-80": "#002d9c",
+  "blue-80-hover": "#0039c7",
   "blue-90": "#001d6c",
+  "blue-90-hover": "#00258a",
   "colors": Object {
     "black": Object {
       "100": "#000000",
@@ -91,9 +101,16 @@ Object {
       "90": "#510224",
     },
     "orange": Object {
+      "10": "#fff2e8",
+      "100": "#231000",
+      "20": "#ffd9be",
+      "30": "#ffb784",
       "40": "#ff832b",
+      "50": "#eb6200",
       "60": "#ba4e00",
       "70": "#8a3800",
+      "80": "#5e2900",
+      "90": "#3e1a00",
     },
     "purple": Object {
       "10": "#f6f2ff",
@@ -147,110 +164,239 @@ Object {
       "0": "#ffffff",
     },
     "yellow": Object {
-      "20": "#fdd13a",
+      "10": "#fcf4d6",
+      "100": "#1c1500",
+      "20": "#fddc69",
       "30": "#f1c21b",
       "40": "#d2a106",
       "50": "#b28600",
+      "60": "#8e6a00",
+      "70": "#684e00",
+      "80": "#483700",
+      "90": "#302400",
     },
   },
   "cool-gray-10": "#f2f4f8",
+  "cool-gray-10-hover": "#e4e9f1",
   "cool-gray-100": "#121619",
+  "cool-gray-100-hover": "#222a2f",
   "cool-gray-20": "#dde1e6",
+  "cool-gray-20-hover": "#cdd3da",
   "cool-gray-30": "#c1c7cd",
+  "cool-gray-30-hover": "#adb5bd",
   "cool-gray-40": "#a2a9b0",
+  "cool-gray-40-hover": "#9199a1",
   "cool-gray-50": "#878d96",
+  "cool-gray-50-hover": "#757b85",
   "cool-gray-60": "#697077",
+  "cool-gray-60-hover": "#585e64",
   "cool-gray-70": "#4d5358",
+  "cool-gray-70-hover": "#5d646a",
   "cool-gray-80": "#343a3f",
+  "cool-gray-80-hover": "#434a51",
   "cool-gray-90": "#21272a",
+  "cool-gray-90-hover": "#2b3236",
   "cyan-10": "#e5f6ff",
+  "cyan-10-hover": "#cceeff",
   "cyan-100": "#061727",
+  "cyan-100-hover": "#cceeff",
   "cyan-20": "#bae6ff",
+  "cyan-20-hover": "#99daff",
   "cyan-30": "#82cfff",
+  "cyan-30-hover": "#57beff",
   "cyan-40": "#33b1ff",
+  "cyan-40-hover": "#059fff",
   "cyan-50": "#1192e8",
+  "cyan-50-hover": "#0f7ec8",
   "cyan-60": "#0072c3",
+  "cyan-60-hover": "#005fa3",
   "cyan-70": "#00539a",
+  "cyan-70-hover": "#0066bd",
   "cyan-80": "#003a6d",
+  "cyan-80-hover": "#00498a",
   "cyan-90": "#012749",
+  "cyan-90-hover": "#013360",
   "gray-10": "#f4f4f4",
+  "gray-10-hover": "#e8e8e8",
   "gray-100": "#161616",
+  "gray-100-hover": "#292929",
   "gray-20": "#e0e0e0",
+  "gray-20-hover": "#d1d1d1",
   "gray-30": "#c6c6c6",
+  "gray-30-hover": "#b5b5b5",
   "gray-40": "#a8a8a8",
+  "gray-40-hover": "#999999",
   "gray-50": "#8d8d8d",
+  "gray-50-hover": "#7a7a7a",
   "gray-60": "#6f6f6f",
+  "gray-60-hover": "#5e5e5e",
   "gray-70": "#525252",
+  "gray-70-hover": "#636363",
   "gray-80": "#393939",
+  "gray-80-hover": "#474747",
   "gray-90": "#262626",
+  "gray-90-hover": "#333333",
   "green-10": "#defbe6",
+  "green-10-hover": "#b6f6c8",
   "green-100": "#071908",
+  "green-100-hover": "#0d300f",
   "green-20": "#a7f0ba",
+  "green-20-hover": "#74e792",
   "green-30": "#6fdc8c",
+  "green-30-hover": "#36ce5e",
   "green-40": "#42be65",
+  "green-40-hover": "#3bab5a",
   "green-50": "#24a148",
+  "green-50-hover": "#208e3f",
   "green-60": "#198038",
+  "green-60-hover": "#166f31",
   "green-70": "#0e6027",
+  "green-70-hover": "#11742f",
   "green-80": "#044317",
+  "green-80-hover": "#05521c",
   "green-90": "#022d0d",
+  "green-90-hover": "#033b11",
   "magenta-10": "#fff0f7",
+  "magenta-10-hover": "#ffe0ef",
   "magenta-100": "#2a0a18",
+  "magenta-100-hover": "#53142f",
   "magenta-20": "#ffd6e8",
+  "magenta-20-hover": "#ffbdda",
   "magenta-30": "#ffafd2",
+  "magenta-30-hover": "#ff94c3",
   "magenta-40": "#ff7eb6",
+  "magenta-40-hover": "#ff57a0",
   "magenta-50": "#ee5396",
+  "magenta-50-hover": "#e3176f",
   "magenta-60": "#d02670",
+  "magenta-60-hover": "#b0215f",
   "magenta-70": "#9f1853",
+  "magenta-70-hover": "#bf1d63",
   "magenta-80": "#740937",
+  "magenta-80-hover": "#8e0b43",
   "magenta-90": "#510224",
+  "magenta-90-hover": "#68032e",
+  "orange-10": "#fff2e8",
+  "orange-10-hover": "#ffe2cc",
+  "orange-100": "#231000",
+  "orange-100-hover": "#421e00",
+  "orange-20": "#ffd9be",
+  "orange-20-hover": "#ffc69e",
+  "orange-30": "#ffb784",
+  "orange-30-hover": "#ff9d57",
   "orange-40": "#ff832b",
+  "orange-40-hover": "#fa6800",
+  "orange-50": "#eb6200",
+  "orange-50-hover": "#cc5500",
   "orange-60": "#ba4e00",
+  "orange-60-hover": "#9e4200",
   "orange-70": "#8a3800",
+  "orange-70-hover": "#a84400",
+  "orange-80": "#5e2900",
+  "orange-80-hover": "#753300",
+  "orange-90": "#3e1a00",
+  "orange-90-hover": "#522200",
   "purple-10": "#f6f2ff",
+  "purple-10-hover": "#eee6ff",
   "purple-100": "#1c0f30",
+  "purple-100-hover": "#341c59",
   "purple-20": "#e8daff",
+  "purple-20-hover": "#dcc7ff",
   "purple-30": "#d4bbff",
+  "purple-30-hover": "#c5a3ff",
   "purple-40": "#be95ff",
+  "purple-40-hover": "#ae7aff",
   "purple-50": "#a56eff",
+  "purple-50-hover": "#9352ff",
   "purple-60": "#8a3ffc",
+  "purple-60-hover": "#7822fb",
   "purple-70": "#6929c4",
+  "purple-70-hover": "#7c3dd6",
   "purple-80": "#491d8b",
+  "purple-80-hover": "#5b24ad",
   "purple-90": "#31135e",
+  "purple-90-hover": "#40197b",
   "red-10": "#fff1f1",
+  "red-10-hover": "#ffe0e0",
   "red-100": "#2d0709",
+  "red-100-hover": "#540d11",
   "red-20": "#ffd7d9",
+  "red-20-hover": "#ffc2c5",
   "red-30": "#ffb3b8",
+  "red-30-hover": "#ff99a0",
   "red-40": "#ff8389",
+  "red-40-hover": "#ff6168",
   "red-50": "#fa4d56",
+  "red-50-hover": "#ee0713",
   "red-60": "#da1e28",
+  "red-60-hover": "#b81922",
   "red-70": "#a2191f",
+  "red-70-hover": "#c21e25",
   "red-80": "#750e13",
+  "red-80-hover": "#921118",
   "red-90": "#520408",
+  "red-90-hover": "#66050a",
   "teal-10": "#d9fbfb",
+  "teal-10-hover": "#acf6f6",
   "teal-100": "#081a1c",
+  "teal-100-hover": "#0f3034",
   "teal-20": "#9ef0f0",
+  "teal-20-hover": "#57e5e5",
   "teal-30": "#3ddbd9",
+  "teal-30-hover": "#25cac8",
   "teal-40": "#08bdba",
+  "teal-40-hover": "#07aba9",
   "teal-50": "#009d9a",
+  "teal-50-hover": "#008a87",
   "teal-60": "#007d79",
+  "teal-60-hover": "#006b68",
   "teal-70": "#005d5d",
+  "teal-70-hover": "#007070",
   "teal-80": "#004144",
+  "teal-80-hover": "#005357",
   "teal-90": "#022b30",
+  "teal-90-hover": "#033940",
   "warm-gray-10": "#f7f3f2",
+  "warm-gray-10-hover": "#f0e8e6",
   "warm-gray-100": "#171414",
+  "warm-gray-100-hover": "#2c2626",
   "warm-gray-20": "#e5e0df",
+  "warm-gray-20-hover": "#d8d0cf",
   "warm-gray-30": "#cac5c4",
+  "warm-gray-30-hover": "#b9b3b1",
   "warm-gray-40": "#ada8a8",
+  "warm-gray-40-hover": "#9c9696",
   "warm-gray-50": "#8f8b8b",
+  "warm-gray-50-hover": "#7f7b7b",
   "warm-gray-60": "#726e6e",
+  "warm-gray-60-hover": "#605d5d",
   "warm-gray-70": "#565151",
+  "warm-gray-70-hover": "#696363",
   "warm-gray-80": "#3c3838",
+  "warm-gray-80-hover": "#4c4848",
   "warm-gray-90": "#272525",
+  "warm-gray-90-hover": "#343232",
   "white": "#ffffff",
   "white-0": "#ffffff",
-  "yellow-20": "#fdd13a",
+  "yellow-10": "#fcf4d6",
+  "yellow-10-hover": "#f8e6a0",
+  "yellow-100": "#1c1500",
+  "yellow-100-hover": "#332600",
+  "yellow-20": "#fddc69",
+  "yellow-20-hover": "#fccd27",
   "yellow-30": "#f1c21b",
+  "yellow-30-hover": "#ddb00e",
   "yellow-40": "#d2a106",
+  "yellow-40-hover": "#bc9005",
   "yellow-50": "#b28600",
+  "yellow-50-hover": "#9e7700",
+  "yellow-60": "#8e6a00",
+  "yellow-60-hover": "#755800",
+  "yellow-70": "#684e00",
+  "yellow-70-hover": "#806000",
+  "yellow-80": "#483700",
+  "yellow-80-hover": "#5c4600",
+  "yellow-90": "#302400",
+  "yellow-90-hover": "#3d2e00",
 }
 `;

From 6646089e542bfd600ee36720453c03ac3c621402 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 23 Jun 2021 12:55:11 -0500
Subject: [PATCH 12/21] chore(colors): add sideEffects flag and clean-up colors
 file

---
 packages/colors/package.json  | 3 ++-
 packages/colors/src/colors.js | 3 ---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/colors/package.json b/packages/colors/package.json
index 164f0482b54b..7b51d92f671f 100644
--- a/packages/colors/package.json
+++ b/packages/colors/package.json
@@ -49,5 +49,6 @@
     "name": "@carbon/colors",
     "sassDir": "scss",
     "needs": "^1.3.0"
-  }
+  },
+  "sideEffects": false
 }
diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index 67e391c7c9e0..8b4722bc332b 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -564,9 +564,6 @@ export const warmGrayHover = {
   100: warmGray100Hover,
 };
 
-// Deprecated ☠️
-// export const yellow20 = '#fdd13a';
-
 export const colors = {
   black: {
     100: black,

From c2dcc0ff42f51524665b9c3c499b3bd9cfb0d725 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 23 Jun 2021 12:58:31 -0500
Subject: [PATCH 13/21] chore(project): update yarn.lock

---
 yarn.lock | 1 -
 1 file changed, 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 68480144a187..5159252f7b96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1752,7 +1752,6 @@ __metadata:
     "@carbon/scss-generator": ^10.13.0
     "@carbon/test-utils": ^10.16.0
     change-case: ^4.1.1
-    core-js: ^3.6.5
     fs-extra: ^8.1.0
     node-sass: ^6.0.0
     rimraf: ^3.0.0

From f7e93c474dfb05e415080a61e876d68eb83e66b7 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 23 Jun 2021 14:52:03 -0500
Subject: [PATCH 14/21] fix(colors): resotre ywllow and orange colors

---
 packages/colors/src/colors.js                 |  10 +-
 .../__snapshots__/colors-test.js.snap         | 150 +++++++++++++++++-
 2 files changed, 154 insertions(+), 6 deletions(-)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index 8b4722bc332b..0c6eedbbaa01 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -21,7 +21,7 @@ export const yellow70 = '#684e00';
 export const yellow80 = '#483700';
 export const yellow90 = '#302400';
 export const yellow100 = '#1c1500';
-export const yellow = {
+const unstable_yellow = {
   10: yellow10,
   20: yellow20,
   30: yellow30,
@@ -33,6 +33,7 @@ export const yellow = {
   90: yellow90,
   100: yellow100,
 };
+export const yellow = yellow30;
 
 export const yellow10Hover = '#f8e6a0';
 export const yellow20Hover = '#fccd27';
@@ -67,7 +68,8 @@ export const orange70 = '#8a3800';
 export const orange80 = '#5e2900';
 export const orange90 = '#3e1a00';
 export const orange100 = '#231000';
-export const orange = {
+export const orange = orange40;
+const unstable_orange = {
   10: orange10,
   20: orange20,
   30: orange30,
@@ -574,7 +576,7 @@ export const colors = {
   gray,
   green,
   magenta,
-  orange,
+  orange: unstable_orange,
   purple,
   red,
   teal,
@@ -582,7 +584,7 @@ export const colors = {
   white: {
     0: white,
   },
-  yellow,
+  yellow: unstable_yellow,
 };
 
 export const unstable_hoverColors = {
diff --git a/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap b/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
index c06b38b8223e..1ddbcdc002ce 100644
--- a/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
+++ b/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
@@ -5,15 +5,25 @@ Object {
   "black": "#000000",
   "black-100": "#000000",
   "blue-10": "#edf5ff",
+  "blue-10-hover": "#dbebff",
   "blue-100": "#001141",
+  "blue-100-hover": "#001f75",
   "blue-20": "#d0e2ff",
+  "blue-20-hover": "#b8d3ff",
   "blue-30": "#a6c8ff",
+  "blue-30-hover": "#b8d3ff",
   "blue-40": "#78a9ff",
+  "blue-40-hover": "#5c97ff",
   "blue-50": "#4589ff",
+  "blue-50-hover": "#1f70ff",
   "blue-60": "#0f62fe",
+  "blue-60-hover": "#0050e6",
   "blue-70": "#0043ce",
+  "blue-70-hover": "#0053ff",
   "blue-80": "#002d9c",
+  "blue-80-hover": "#0039c7",
   "blue-90": "#001d6c",
+  "blue-90-hover": "#00258a",
   "colors": Object {
     "black": Object {
       "100": "#000000",
@@ -91,9 +101,16 @@ Object {
       "90": "#510224",
     },
     "orange": Object {
+      "10": "#fff2e8",
+      "100": "#231000",
+      "20": "#ffd9be",
+      "30": "#ffb784",
       "40": "#ff832b",
+      "50": "#eb6200",
       "60": "#ba4e00",
       "70": "#8a3800",
+      "80": "#5e2900",
+      "90": "#3e1a00",
     },
     "purple": Object {
       "10": "#f6f2ff",
@@ -147,110 +164,239 @@ Object {
       "0": "#ffffff",
     },
     "yellow": Object {
-      "20": "#fdd13a",
+      "10": "#fcf4d6",
+      "100": "#1c1500",
+      "20": "#fddc69",
       "30": "#f1c21b",
       "40": "#d2a106",
       "50": "#b28600",
+      "60": "#8e6a00",
+      "70": "#684e00",
+      "80": "#483700",
+      "90": "#302400",
     },
   },
   "cool-gray-10": "#f2f4f8",
+  "cool-gray-10-hover": "#e4e9f1",
   "cool-gray-100": "#121619",
+  "cool-gray-100-hover": "#222a2f",
   "cool-gray-20": "#dde1e6",
+  "cool-gray-20-hover": "#cdd3da",
   "cool-gray-30": "#c1c7cd",
+  "cool-gray-30-hover": "#adb5bd",
   "cool-gray-40": "#a2a9b0",
+  "cool-gray-40-hover": "#9199a1",
   "cool-gray-50": "#878d96",
+  "cool-gray-50-hover": "#757b85",
   "cool-gray-60": "#697077",
+  "cool-gray-60-hover": "#585e64",
   "cool-gray-70": "#4d5358",
+  "cool-gray-70-hover": "#5d646a",
   "cool-gray-80": "#343a3f",
+  "cool-gray-80-hover": "#434a51",
   "cool-gray-90": "#21272a",
+  "cool-gray-90-hover": "#2b3236",
   "cyan-10": "#e5f6ff",
+  "cyan-10-hover": "#cceeff",
   "cyan-100": "#061727",
+  "cyan-100-hover": "#cceeff",
   "cyan-20": "#bae6ff",
+  "cyan-20-hover": "#99daff",
   "cyan-30": "#82cfff",
+  "cyan-30-hover": "#57beff",
   "cyan-40": "#33b1ff",
+  "cyan-40-hover": "#059fff",
   "cyan-50": "#1192e8",
+  "cyan-50-hover": "#0f7ec8",
   "cyan-60": "#0072c3",
+  "cyan-60-hover": "#005fa3",
   "cyan-70": "#00539a",
+  "cyan-70-hover": "#0066bd",
   "cyan-80": "#003a6d",
+  "cyan-80-hover": "#00498a",
   "cyan-90": "#012749",
+  "cyan-90-hover": "#013360",
   "gray-10": "#f4f4f4",
+  "gray-10-hover": "#e8e8e8",
   "gray-100": "#161616",
+  "gray-100-hover": "#292929",
   "gray-20": "#e0e0e0",
+  "gray-20-hover": "#d1d1d1",
   "gray-30": "#c6c6c6",
+  "gray-30-hover": "#b5b5b5",
   "gray-40": "#a8a8a8",
+  "gray-40-hover": "#999999",
   "gray-50": "#8d8d8d",
+  "gray-50-hover": "#7a7a7a",
   "gray-60": "#6f6f6f",
+  "gray-60-hover": "#5e5e5e",
   "gray-70": "#525252",
+  "gray-70-hover": "#636363",
   "gray-80": "#393939",
+  "gray-80-hover": "#474747",
   "gray-90": "#262626",
+  "gray-90-hover": "#333333",
   "green-10": "#defbe6",
+  "green-10-hover": "#b6f6c8",
   "green-100": "#071908",
+  "green-100-hover": "#0d300f",
   "green-20": "#a7f0ba",
+  "green-20-hover": "#74e792",
   "green-30": "#6fdc8c",
+  "green-30-hover": "#36ce5e",
   "green-40": "#42be65",
+  "green-40-hover": "#3bab5a",
   "green-50": "#24a148",
+  "green-50-hover": "#208e3f",
   "green-60": "#198038",
+  "green-60-hover": "#166f31",
   "green-70": "#0e6027",
+  "green-70-hover": "#11742f",
   "green-80": "#044317",
+  "green-80-hover": "#05521c",
   "green-90": "#022d0d",
+  "green-90-hover": "#033b11",
   "magenta-10": "#fff0f7",
+  "magenta-10-hover": "#ffe0ef",
   "magenta-100": "#2a0a18",
+  "magenta-100-hover": "#53142f",
   "magenta-20": "#ffd6e8",
+  "magenta-20-hover": "#ffbdda",
   "magenta-30": "#ffafd2",
+  "magenta-30-hover": "#ff94c3",
   "magenta-40": "#ff7eb6",
+  "magenta-40-hover": "#ff57a0",
   "magenta-50": "#ee5396",
+  "magenta-50-hover": "#e3176f",
   "magenta-60": "#d02670",
+  "magenta-60-hover": "#b0215f",
   "magenta-70": "#9f1853",
+  "magenta-70-hover": "#bf1d63",
   "magenta-80": "#740937",
+  "magenta-80-hover": "#8e0b43",
   "magenta-90": "#510224",
+  "magenta-90-hover": "#68032e",
+  "orange-10": "#fff2e8",
+  "orange-10-hover": "#ffe2cc",
+  "orange-100": "#231000",
+  "orange-100-hover": "#421e00",
+  "orange-20": "#ffd9be",
+  "orange-20-hover": "#ffc69e",
+  "orange-30": "#ffb784",
+  "orange-30-hover": "#ff9d57",
   "orange-40": "#ff832b",
+  "orange-40-hover": "#fa6800",
+  "orange-50": "#eb6200",
+  "orange-50-hover": "#cc5500",
   "orange-60": "#ba4e00",
+  "orange-60-hover": "#9e4200",
   "orange-70": "#8a3800",
+  "orange-70-hover": "#a84400",
+  "orange-80": "#5e2900",
+  "orange-80-hover": "#753300",
+  "orange-90": "#3e1a00",
+  "orange-90-hover": "#522200",
   "purple-10": "#f6f2ff",
+  "purple-10-hover": "#eee6ff",
   "purple-100": "#1c0f30",
+  "purple-100-hover": "#341c59",
   "purple-20": "#e8daff",
+  "purple-20-hover": "#dcc7ff",
   "purple-30": "#d4bbff",
+  "purple-30-hover": "#c5a3ff",
   "purple-40": "#be95ff",
+  "purple-40-hover": "#ae7aff",
   "purple-50": "#a56eff",
+  "purple-50-hover": "#9352ff",
   "purple-60": "#8a3ffc",
+  "purple-60-hover": "#7822fb",
   "purple-70": "#6929c4",
+  "purple-70-hover": "#7c3dd6",
   "purple-80": "#491d8b",
+  "purple-80-hover": "#5b24ad",
   "purple-90": "#31135e",
+  "purple-90-hover": "#40197b",
   "red-10": "#fff1f1",
+  "red-10-hover": "#ffe0e0",
   "red-100": "#2d0709",
+  "red-100-hover": "#540d11",
   "red-20": "#ffd7d9",
+  "red-20-hover": "#ffc2c5",
   "red-30": "#ffb3b8",
+  "red-30-hover": "#ff99a0",
   "red-40": "#ff8389",
+  "red-40-hover": "#ff6168",
   "red-50": "#fa4d56",
+  "red-50-hover": "#ee0713",
   "red-60": "#da1e28",
+  "red-60-hover": "#b81922",
   "red-70": "#a2191f",
+  "red-70-hover": "#c21e25",
   "red-80": "#750e13",
+  "red-80-hover": "#921118",
   "red-90": "#520408",
+  "red-90-hover": "#66050a",
   "teal-10": "#d9fbfb",
+  "teal-10-hover": "#acf6f6",
   "teal-100": "#081a1c",
+  "teal-100-hover": "#0f3034",
   "teal-20": "#9ef0f0",
+  "teal-20-hover": "#57e5e5",
   "teal-30": "#3ddbd9",
+  "teal-30-hover": "#25cac8",
   "teal-40": "#08bdba",
+  "teal-40-hover": "#07aba9",
   "teal-50": "#009d9a",
+  "teal-50-hover": "#008a87",
   "teal-60": "#007d79",
+  "teal-60-hover": "#006b68",
   "teal-70": "#005d5d",
+  "teal-70-hover": "#007070",
   "teal-80": "#004144",
+  "teal-80-hover": "#005357",
   "teal-90": "#022b30",
+  "teal-90-hover": "#033940",
   "warm-gray-10": "#f7f3f2",
+  "warm-gray-10-hover": "#f0e8e6",
   "warm-gray-100": "#171414",
+  "warm-gray-100-hover": "#2c2626",
   "warm-gray-20": "#e5e0df",
+  "warm-gray-20-hover": "#d8d0cf",
   "warm-gray-30": "#cac5c4",
+  "warm-gray-30-hover": "#b9b3b1",
   "warm-gray-40": "#ada8a8",
+  "warm-gray-40-hover": "#9c9696",
   "warm-gray-50": "#8f8b8b",
+  "warm-gray-50-hover": "#7f7b7b",
   "warm-gray-60": "#726e6e",
+  "warm-gray-60-hover": "#605d5d",
   "warm-gray-70": "#565151",
+  "warm-gray-70-hover": "#696363",
   "warm-gray-80": "#3c3838",
+  "warm-gray-80-hover": "#4c4848",
   "warm-gray-90": "#272525",
+  "warm-gray-90-hover": "#343232",
   "white": "#ffffff",
   "white-0": "#ffffff",
-  "yellow-20": "#fdd13a",
+  "yellow-10": "#fcf4d6",
+  "yellow-10-hover": "#f8e6a0",
+  "yellow-100": "#1c1500",
+  "yellow-100-hover": "#332600",
+  "yellow-20": "#fddc69",
+  "yellow-20-hover": "#fccd27",
   "yellow-30": "#f1c21b",
+  "yellow-30-hover": "#ddb00e",
   "yellow-40": "#d2a106",
+  "yellow-40-hover": "#bc9005",
   "yellow-50": "#b28600",
+  "yellow-50-hover": "#9e7700",
+  "yellow-60": "#8e6a00",
+  "yellow-60-hover": "#755800",
+  "yellow-70": "#684e00",
+  "yellow-70-hover": "#806000",
+  "yellow-80": "#483700",
+  "yellow-80-hover": "#5c4600",
+  "yellow-90": "#302400",
+  "yellow-90-hover": "#3d2e00",
 }
 `;

From d7e9284a7af8bb986362b609bfee2bbb4bfa6639 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 24 Jun 2021 10:23:14 -0500
Subject: [PATCH 15/21] feat(colors): add white hover and black hover

---
 packages/colors/src/colors.js  | 4 ++++
 packages/colors/tasks/build.js | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index 0c6eedbbaa01..175871b08bb1 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -7,9 +7,11 @@
 
 export const black = '#000000';
 export const black100 = black;
+export const blackHover = '#212121';
 
 export const white = '#ffffff';
 export const white0 = white;
+export const whiteHover = '#e8e8e8';
 
 export const yellow10 = '#fcf4d6';
 export const yellow20 = '#fddc69';
@@ -588,6 +590,8 @@ export const colors = {
 };
 
 export const unstable_hoverColors = {
+  whiteHover,
+  blackHover,
   blueHover,
   coolGrayHover,
   cyanHover,
diff --git a/packages/colors/tasks/build.js b/packages/colors/tasks/build.js
index 5a43294d0098..7ee520064c28 100644
--- a/packages/colors/tasks/build.js
+++ b/packages/colors/tasks/build.js
@@ -54,6 +54,14 @@ async function build() {
   // include the grade in between the swatch name and the hover keyword
   const hoverColorValues = Object.keys(hoverColors).reduce((acc, key) => {
     const swatch = paramCase(key.replace(/Hover/, ''));
+
+    if (typeof hoverColors[key] !== 'object') {
+      return acc.concat({
+        name: `${swatch}-hover`,
+        value: hoverColors[key],
+      });
+    }
+
     const values = Object.keys(hoverColors[key]).reduce((acc, grade) => {
       const value = hoverColors[key][grade];
       return acc.concat({

From 1d4c44fb2f03bfd0aa1cc0191fc869a9432c103f Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 24 Jun 2021 10:23:52 -0500
Subject: [PATCH 16/21] test(colors): update snapshots

---
 packages/colors/__tests__/__snapshots__/colors-test.js.snap  | 2 ++
 packages/colors/__tests__/__snapshots__/modules-test.js.snap | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/colors/__tests__/__snapshots__/colors-test.js.snap b/packages/colors/__tests__/__snapshots__/colors-test.js.snap
index bfb452bbbcf0..eac441dc975c 100644
--- a/packages/colors/__tests__/__snapshots__/colors-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/colors-test.js.snap
@@ -157,6 +157,7 @@ Object {
 
 exports[`unstable_hoverColors 1`] = `
 Object {
+  "blackHover": "#212121",
   "blueHover": Object {
     "10": "#dbebff",
     "100": "#001f75",
@@ -289,6 +290,7 @@ Object {
     "80": "#4c4848",
     "90": "#343232",
   },
+  "whiteHover": "#e8e8e8",
   "yellowHover": Object {
     "10": "#f8e6a0",
     "100": "#332600",
diff --git a/packages/colors/__tests__/__snapshots__/modules-test.js.snap b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
index e84630f7e7cf..cffd861562e4 100644
--- a/packages/colors/__tests__/__snapshots__/modules-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
@@ -4,6 +4,7 @@ exports[`@carbon/colors Public API 1`] = `
 Object {
   "black": "#000000",
   "black-100": "#000000",
+  "black-hover": "#212121",
   "blue-10": "#edf5ff",
   "blue-10-hover": "#dbebff",
   "blue-100": "#001141",
@@ -378,6 +379,7 @@ Object {
   "warm-gray-90-hover": "#343232",
   "white": "#ffffff",
   "white-0": "#ffffff",
+  "white-hover": "#e8e8e8",
   "yellow-10": "#fcf4d6",
   "yellow-10-hover": "#f8e6a0",
   "yellow-100": "#1c1500",

From a6a692f4191df39943509dc92dc3ba4b7bd01638 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 24 Jun 2021 10:25:43 -0500
Subject: [PATCH 17/21] docs(colors): update example to include hover color

---
 packages/colors/examples/preview/index.html   | 16 ------
 .../examples/preview/src/components/App.js    | 34 +++++++++++-
 packages/colors/examples/preview/styles.scss  | 54 +++++++++++++++++++
 3 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/packages/colors/examples/preview/index.html b/packages/colors/examples/preview/index.html
index 88aa025e6264..14d1404bcf77 100644
--- a/packages/colors/examples/preview/index.html
+++ b/packages/colors/examples/preview/index.html
@@ -7,22 +7,6 @@
   <link rel="stylesheet" href="./styles.scss">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="./styles.scss" rel="stylesheet">
-  <style>
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    padding: 0;
-  }
-
-  body, code {
-    font-family: 'IBM Plex Mono', monospace;
-  }
-  </style>
 </head>
 <body>
   <div id="root"></div>
diff --git a/packages/colors/examples/preview/src/components/App.js b/packages/colors/examples/preview/src/components/App.js
index f550cdbfcadc..365573807e52 100644
--- a/packages/colors/examples/preview/src/components/App.js
+++ b/packages/colors/examples/preview/src/components/App.js
@@ -1,5 +1,21 @@
 import React from 'react';
-import { colors } from '@carbon/colors';
+import { colors, unstable_hoverColors } from '@carbon/colors';
+
+function getHoverColor(swatch, grade) {
+  for (const [key, value] of Object.entries(unstable_hoverColors)) {
+    if (!key.includes(swatch)) {
+      continue;
+    }
+
+    if (value[grade]) {
+      return value[grade];
+    }
+
+    return value;
+  }
+
+  throw new Error(`Unable to find hover color for: ${swatch}-${grade}`);
+}
 
 function Table({ children }) {
   return (
@@ -8,6 +24,7 @@ function Table({ children }) {
         <tr>
           <th>Token</th>
           <th>Value</th>
+          <th>Hover</th>
         </tr>
       </thead>
       <tbody>{children}</tbody>
@@ -36,6 +53,7 @@ export default function App() {
             return (
               <React.Fragment key={swatch}>
                 {Object.keys(colors[swatch]).map(grade => {
+                  const hoverColor = getHoverColor(swatch, grade);
                   return (
                     <tr key={`${swatch}-${grade}`}>
                       <td>
@@ -55,6 +73,20 @@ export default function App() {
                           {colors[swatch][grade]}
                         </div>
                       </td>
+                      <td>
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                          <div
+                            style={{
+                              width: 50,
+                              height: 50,
+                              backgroundColor: hoverColor,
+                              marginRight: '0.5rem',
+                              outline: '1px solid #8a3ffc',
+                            }}
+                          />
+                          {hoverColor}
+                        </div>
+                      </td>
                     </tr>
                   );
                 })}
diff --git a/packages/colors/examples/preview/styles.scss b/packages/colors/examples/preview/styles.scss
index e69de29bb2d1..63be0fb2335b 100644
--- a/packages/colors/examples/preview/styles.scss
+++ b/packages/colors/examples/preview/styles.scss
@@ -0,0 +1,54 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+
+// Reset
+html {
+  box-sizing: border-box;
+  font-size: 100%;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: 'IBM Plex Mono', monospace;
+  padding: 1rem;
+}
+
+table {
+  text-align: left;
+  vertical-align: middle;
+  width: 100%;
+  table-layout: fixed;
+}
+
+table,
+tr,
+td,
+th {
+  border: 1px solid black;
+}
+
+td,
+th {
+  padding: 1rem;
+}
+
+code {
+  font-size: 1rem;
+  font-family: inherit;
+}

From a11e8e3292192aafd2d16322e9fcd32f5e44c783 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 24 Jun 2021 11:27:06 -0500
Subject: [PATCH 18/21] test(styles): update snapshots

---
 .../styles/scss/__tests__/__snapshots__/colors-test.js.snap     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap b/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
index 1ddbcdc002ce..46f30f04ab26 100644
--- a/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
+++ b/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
@@ -4,6 +4,7 @@ exports[`@carbon/styles/scss/colors Public API 1`] = `
 Object {
   "black": "#000000",
   "black-100": "#000000",
+  "black-hover": "#212121",
   "blue-10": "#edf5ff",
   "blue-10-hover": "#dbebff",
   "blue-100": "#001141",
@@ -378,6 +379,7 @@ Object {
   "warm-gray-90-hover": "#343232",
   "white": "#ffffff",
   "white-0": "#ffffff",
+  "white-hover": "#e8e8e8",
   "yellow-10": "#fcf4d6",
   "yellow-10-hover": "#f8e6a0",
   "yellow-100": "#1c1500",

From de4e84a81770157b69bcfd7f7618a8215056790a Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 24 Jun 2021 14:56:48 -0500
Subject: [PATCH 19/21] fix(colors): update incorrect values

---
 packages/colors/src/colors.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/colors/src/colors.js b/packages/colors/src/colors.js
index 175871b08bb1..c7b5ff0e234d 100644
--- a/packages/colors/src/colors.js
+++ b/packages/colors/src/colors.js
@@ -231,7 +231,7 @@ export const purple50Hover = '#9352ff';
 export const purple40Hover = '#ae7aff';
 export const purple30Hover = '#c5a3ff';
 export const purple20Hover = '#dcc7ff';
-export const purple10Hover = '#eee6ff';
+export const purple10Hover = '#ede5ff';
 export const purpleHover = {
   100: purple100Hover,
   90: purple90Hover,
@@ -275,7 +275,7 @@ export const blue70Hover = '#0053ff';
 export const blue60Hover = '#0050e6';
 export const blue50Hover = '#1f70ff';
 export const blue40Hover = '#5c97ff';
-export const blue30Hover = '#b8d3ff';
+export const blue30Hover = '#8ab6ff';
 export const blue20Hover = '#b8d3ff';
 export const blue10Hover = '#dbebff';
 export const blueHover = {
@@ -334,7 +334,7 @@ export const cyanHover = {
   70: cyan70Hover,
   80: cyan80Hover,
   90: cyan90Hover,
-  100: cyan10Hover,
+  100: cyan100Hover,
 };
 
 export const teal10 = '#d9fbfb';

From 88d79c22e33a59e2ca3eeb102baeef854740235e Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 24 Jun 2021 16:40:57 -0500
Subject: [PATCH 20/21] test(colors): update snapshots

---
 packages/colors/__tests__/__snapshots__/colors-test.js.snap | 6 +++---
 .../colors/__tests__/__snapshots__/modules-test.js.snap     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/colors/__tests__/__snapshots__/colors-test.js.snap b/packages/colors/__tests__/__snapshots__/colors-test.js.snap
index eac441dc975c..7327c67afbe2 100644
--- a/packages/colors/__tests__/__snapshots__/colors-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/colors-test.js.snap
@@ -162,7 +162,7 @@ Object {
     "10": "#dbebff",
     "100": "#001f75",
     "20": "#b8d3ff",
-    "30": "#b8d3ff",
+    "30": "#8ab6ff",
     "40": "#5c97ff",
     "50": "#1f70ff",
     "60": "#0050e6",
@@ -184,7 +184,7 @@ Object {
   },
   "cyanHover": Object {
     "10": "#cceeff",
-    "100": "#cceeff",
+    "100": "#0b2947",
     "20": "#99daff",
     "30": "#57beff",
     "40": "#059fff",
@@ -243,7 +243,7 @@ Object {
     "90": "#522200",
   },
   "purpleHover": Object {
-    "10": "#eee6ff",
+    "10": "#ede5ff",
     "100": "#341c59",
     "20": "#dcc7ff",
     "30": "#c5a3ff",
diff --git a/packages/colors/__tests__/__snapshots__/modules-test.js.snap b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
index cffd861562e4..f86b39905e22 100644
--- a/packages/colors/__tests__/__snapshots__/modules-test.js.snap
+++ b/packages/colors/__tests__/__snapshots__/modules-test.js.snap
@@ -12,7 +12,7 @@ Object {
   "blue-20": "#d0e2ff",
   "blue-20-hover": "#b8d3ff",
   "blue-30": "#a6c8ff",
-  "blue-30-hover": "#b8d3ff",
+  "blue-30-hover": "#8ab6ff",
   "blue-40": "#78a9ff",
   "blue-40-hover": "#5c97ff",
   "blue-50": "#4589ff",
@@ -200,7 +200,7 @@ Object {
   "cyan-10": "#e5f6ff",
   "cyan-10-hover": "#cceeff",
   "cyan-100": "#061727",
-  "cyan-100-hover": "#cceeff",
+  "cyan-100-hover": "#0b2947",
   "cyan-20": "#bae6ff",
   "cyan-20-hover": "#99daff",
   "cyan-30": "#82cfff",
@@ -298,7 +298,7 @@ Object {
   "orange-90": "#3e1a00",
   "orange-90-hover": "#522200",
   "purple-10": "#f6f2ff",
-  "purple-10-hover": "#eee6ff",
+  "purple-10-hover": "#ede5ff",
   "purple-100": "#1c0f30",
   "purple-100-hover": "#341c59",
   "purple-20": "#e8daff",

From d79cb784c06328f84fd0c79ccfa00ffe70514814 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Thu, 24 Jun 2021 17:12:35 -0500
Subject: [PATCH 21/21] test(styles): update snapshots

---
 .../styles/scss/__tests__/__snapshots__/colors-test.js.snap | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap b/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
index 46f30f04ab26..47c3d61e265b 100644
--- a/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
+++ b/packages/styles/scss/__tests__/__snapshots__/colors-test.js.snap
@@ -12,7 +12,7 @@ Object {
   "blue-20": "#d0e2ff",
   "blue-20-hover": "#b8d3ff",
   "blue-30": "#a6c8ff",
-  "blue-30-hover": "#b8d3ff",
+  "blue-30-hover": "#8ab6ff",
   "blue-40": "#78a9ff",
   "blue-40-hover": "#5c97ff",
   "blue-50": "#4589ff",
@@ -200,7 +200,7 @@ Object {
   "cyan-10": "#e5f6ff",
   "cyan-10-hover": "#cceeff",
   "cyan-100": "#061727",
-  "cyan-100-hover": "#cceeff",
+  "cyan-100-hover": "#0b2947",
   "cyan-20": "#bae6ff",
   "cyan-20-hover": "#99daff",
   "cyan-30": "#82cfff",
@@ -298,7 +298,7 @@ Object {
   "orange-90": "#3e1a00",
   "orange-90-hover": "#522200",
   "purple-10": "#f6f2ff",
-  "purple-10-hover": "#eee6ff",
+  "purple-10-hover": "#ede5ff",
   "purple-100": "#1c0f30",
   "purple-100-hover": "#341c59",
   "purple-20": "#e8daff",