feat(colors): add hover colors to @carbon/colors (#8942)

* feat(colors): add initial hover colors * refactor(colors): update build task to work with hover colors * styles(colors): added blueHover * style(colors): added cyan hover * styles(colors): hover states all updated * style(colors): fixed case senstivity * style(color): case-senstivity on warmgray * fix(colors): yarn format * fix(colors): updated unstable_hoverColors * fix(colors): hoverColor testing * test(colors): update snapshot * chore(colors): add sideEffects flag and clean-up colors file * chore(project): update yarn.lock * fix(colors): resotre ywllow and orange colors * feat(colors): add white hover and black hover * test(colors): update snapshots * docs(colors): update example to include hover color * test(styles): update snapshots * fix(colors): update incorrect values * test(colors): update snapshots * test(styles): update snapshots Co-authored-by: Scott Strubberg <sstrubberg@us.ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 24, 2021 · df64f1c · df64f1c
1 parent 5e7b24a
commit df64f1c
Show file tree

Hide file tree

Showing 11 changed files with 959 additions and 73 deletions.
diff --git 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,167 @@ 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",
+  },
+}
+`;
+
+exports[`unstable_hoverColors 1`] = `
+Object {
+  "blackHover": "#212121",
+  "blueHover": Object {
+    "10": "#dbebff",
+    "100": "#001f75",
+    "20": "#b8d3ff",
+    "30": "#8ab6ff",
+    "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": "#0b2947",
+    "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": "#ede5ff",
+    "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",
+  },
+  "whiteHover": "#e8e8e8",
+  "yellowHover": Object {
+    "10": "#f8e6a0",
+    "100": "#332600",
+    "20": "#fccd27",
+    "30": "#ddb00e",
+    "40": "#bc9005",
+    "50": "#9e7700",
+    "60": "#755800",
+    "70": "#806000",
+    "80": "#5c4600",
+    "90": "#3d2e00",
   },
 }
 `;