From 28dd4fdd01bc6388d2e78d594e285946367854b7 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Tue, 4 Jan 2022 13:14:07 -0600
Subject: [PATCH] fix(styles): update token values for tag in v10 and v11
 (#10287)

* fix(styles): update token values for tag in v10 and v11

* fix(react): add new tag story

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/tag/_tokens.scss           | 120 +++++++++---------
 .../react/src/components/Tag/Tag-story.js     |  45 +++++++
 .../styles/scss/components/tag/_tokens.scss   | 120 +++++++++---------
 3 files changed, 165 insertions(+), 120 deletions(-)

diff --git a/packages/components/src/components/tag/_tokens.scss b/packages/components/src/components/tag/_tokens.scss
index 015a0a6518f8..78e7468cc3dd 100644
--- a/packages/components/src/components/tag/_tokens.scss
+++ b/packages/components/src/components/tag/_tokens.scss
@@ -25,11 +25,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__red-80,
+        value: $carbon__red-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__red-80,
+        value: $carbon__red-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -50,11 +50,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__red-30,
+        value: $carbon__red-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__red-30,
+        value: $carbon__red-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -75,11 +75,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__red-70,
+        value: $red-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__red-70,
+        value: $red-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -102,11 +102,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__magenta-80,
+        value: $carbon__magenta-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__magenta-80,
+        value: $carbon__magenta-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -127,11 +127,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__magenta-30,
+        value: $carbon__magenta-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__magenta-30,
+        value: $carbon__magenta-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -152,11 +152,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__magenta-70,
+        value: $magenta-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__magenta-70,
+        value: $magenta-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -179,11 +179,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__purple-80,
+        value: $carbon__purple-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__purple-80,
+        value: $carbon__purple-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -204,11 +204,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__purple-30,
+        value: $carbon__purple-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__purple-30,
+        value: $carbon__purple-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -229,11 +229,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__purple-70,
+        value: $purple-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__purple-70,
+        value: $purple-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -256,11 +256,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__blue-80,
+        value: $carbon__blue-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__blue-80,
+        value: $carbon__blue-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -281,11 +281,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__blue-30,
+        value: $carbon__blue-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__blue-30,
+        value: $carbon__blue-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -306,11 +306,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__blue-70,
+        value: $blue-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__blue-70,
+        value: $blue-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -333,11 +333,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cyan-80,
+        value: $carbon__cyan-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cyan-80,
+        value: $carbon__cyan-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -358,11 +358,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cyan-30,
+        value: $carbon__cyan-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cyan-30,
+        value: $carbon__cyan-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -383,11 +383,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cyan-70,
+        value: $cyan-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cyan-70,
+        value: $cyan-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -410,11 +410,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__teal-80,
+        value: $carbon__teal-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__teal-80,
+        value: $carbon__teal-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -435,11 +435,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__teal-30,
+        value: $carbon__teal-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__teal-30,
+        value: $carbon__teal-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -460,11 +460,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__teal-70,
+        value: $teal-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__teal-70,
+        value: $teal-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -487,11 +487,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__green-80,
+        value: $carbon__green-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__green-80,
+        value: $carbon__green-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -512,11 +512,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__green-30,
+        value: $carbon__green-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__green-30,
+        value: $carbon__green-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -537,11 +537,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__green-70,
+        value: $green-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__green-70,
+        value: $green-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -564,11 +564,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__gray-80,
+        value: $carbon__gray-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__gray-80,
+        value: $carbon__gray-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -589,11 +589,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__gray-30,
+        value: $carbon__gray-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__gray-30,
+        value: $carbon__gray-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -614,11 +614,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__gray-70,
+        value: $gray-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__gray-70,
+        value: $gray-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -641,11 +641,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cool-gray-80,
+        value: $carbon__cool-gray-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cool-gray-80,
+        value: $carbon__cool-gray-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -666,11 +666,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cool-gray-30,
+        value: $carbon__cool-gray-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cool-gray-30,
+        value: $carbon__cool-gray-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -691,11 +691,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__cool-gray-70,
+        value: $cool-gray-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__cool-gray-70,
+        value: $cool-gray-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
@@ -718,11 +718,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__warm-gray-80,
+        value: $carbon__warm-gray-70,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__warm-gray-80,
+        value: $carbon__warm-gray-70,
       ),
       (
         theme: $carbon--theme--v9,
@@ -743,11 +743,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__warm-gray-30,
+        value: $carbon__warm-gray-20,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__warm-gray-30,
+        value: $carbon__warm-gray-20,
       ),
       (
         theme: $carbon--theme--v9,
@@ -768,11 +768,11 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--g90,
-        value: $carbon__warm-gray-70,
+        value: $warm-gray-70-hover,
       ),
       (
         theme: $carbon--theme--g100,
-        value: $carbon__warm-gray-70,
+        value: $warm-gray-70-hover,
       ),
       (
         theme: $carbon--theme--v9,
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 7c96898fde51..2b6ebd8ae816 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -134,6 +134,51 @@ CustomIcon.parameters = {
   },
 };
 
+export const AllTags = () => (
+  <>
+    <Tag className="some-class" type="red" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="magenta" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="purple" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="blue" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="cyan" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="teal" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="green" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="gray" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="cool-gray" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="warm-gray" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag
+      className="some-class"
+      type="high-contrast"
+      size="sm"
+      title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+    <Tag className="some-class" type="outline" size="sm" title="Clear Filter">
+      {'Tag content'}
+    </Tag>
+  </>
+);
+
 export const Skeleton = () => (
   <div>
     <TagSkeleton />
diff --git a/packages/styles/scss/components/tag/_tokens.scss b/packages/styles/scss/components/tag/_tokens.scss
index c3fbff4c4f09..cae04ce2f9a1 100644
--- a/packages/styles/scss/components/tag/_tokens.scss
+++ b/packages/styles/scss/components/tag/_tokens.scss
@@ -25,11 +25,11 @@ $tag-background-red: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-80,
+      value: colors.$red-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-80,
+      value: colors.$red-70,
     ),
   ),
 ) !default;
@@ -47,11 +47,11 @@ $tag-color-red: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-30,
+      value: colors.$red-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-30,
+      value: colors.$red-20,
     ),
   ),
 ) !default;
@@ -69,11 +69,11 @@ $tag-hover-red: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-70,
+      value: colors.$red-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-70,
+      value: colors.$red-70-hover,
     ),
   ),
 ) !default;
@@ -92,11 +92,11 @@ $tag-background-magenta: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-80,
+      value: colors.$magenta-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-80,
+      value: colors.$magenta-70,
     ),
   ),
 ) !default;
@@ -114,11 +114,11 @@ $tag-color-magenta: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-30,
+      value: colors.$magenta-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-30,
+      value: colors.$magenta-20,
     ),
   ),
 ) !default;
@@ -136,11 +136,11 @@ $tag-hover-magenta: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-70,
+      value: colors.$magenta-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-70,
+      value: colors.$magenta-70-hover,
     ),
   ),
 ) !default;
@@ -159,11 +159,11 @@ $tag-background-purple: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-80,
+      value: colors.$purple-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-80,
+      value: colors.$purple-70,
     ),
   ),
 ) !default;
@@ -181,11 +181,11 @@ $tag-color-purple: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-30,
+      value: colors.$purple-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-30,
+      value: colors.$purple-20,
     ),
   ),
 ) !default;
@@ -203,11 +203,11 @@ $tag-hover-purple: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-70,
+      value: colors.$purple-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-70,
+      value: colors.$purple-70-hover,
     ),
   ),
 ) !default;
@@ -226,11 +226,11 @@ $tag-background-blue: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-80,
+      value: colors.$blue-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-80,
+      value: colors.$blue-70,
     ),
   ),
 ) !default;
@@ -248,11 +248,11 @@ $tag-color-blue: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-30,
+      value: colors.$blue-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-30,
+      value: colors.$blue-20,
     ),
   ),
 ) !default;
@@ -270,11 +270,11 @@ $tag-hover-blue: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-70,
+      value: colors.$blue-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-70,
+      value: colors.$blue-70-hover,
     ),
   ),
 ) !default;
@@ -293,11 +293,11 @@ $tag-background-cyan: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-80,
+      value: colors.$cyan-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-80,
+      value: colors.$cyan-70,
     ),
   ),
 ) !default;
@@ -315,11 +315,11 @@ $tag-color-cyan: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-30,
+      value: colors.$cyan-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-30,
+      value: colors.$cyan-20,
     ),
   ),
 ) !default;
@@ -337,11 +337,11 @@ $tag-hover-cyan: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-70,
+      value: colors.$cyan-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-70,
+      value: colors.$cyan-70-hover,
     ),
   ),
 ) !default;
@@ -360,11 +360,11 @@ $tag-background-teal: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-80,
+      value: colors.$teal-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-80,
+      value: colors.$teal-70,
     ),
   ),
 ) !default;
@@ -382,11 +382,11 @@ $tag-color-teal: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-30,
+      value: colors.$teal-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-30,
+      value: colors.$teal-20,
     ),
   ),
 ) !default;
@@ -404,11 +404,11 @@ $tag-hover-teal: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-70,
+      value: colors.$teal-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-70,
+      value: colors.$teal-70-hover,
     ),
   ),
 ) !default;
@@ -427,11 +427,11 @@ $tag-background-green: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-80,
+      value: colors.$green-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-80,
+      value: colors.$green-70,
     ),
   ),
 ) !default;
@@ -449,11 +449,11 @@ $tag-color-green: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-30,
+      value: colors.$green-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-30,
+      value: colors.$green-20,
     ),
   ),
 ) !default;
@@ -471,11 +471,11 @@ $tag-hover-green: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-70,
+      value: colors.$green-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-70,
+      value: colors.$green-70-hover,
     ),
   ),
 ) !default;
@@ -494,11 +494,11 @@ $tag-background-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: colors.$gray-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-80,
+      value: colors.$gray-70,
     ),
   ),
 ) !default;
@@ -516,11 +516,11 @@ $tag-color-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-30,
+      value: colors.$gray-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-30,
+      value: colors.$gray-20,
     ),
   ),
 ) !default;
@@ -538,11 +538,11 @@ $tag-hover-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-70,
+      value: colors.$gray-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-70,
+      value: colors.$gray-70-hover,
     ),
   ),
 ) !default;
@@ -561,11 +561,11 @@ $tag-background-cool-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-80,
+      value: colors.$cool-gray-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-80,
+      value: colors.$cool-gray-70,
     ),
   ),
 ) !default;
@@ -583,11 +583,11 @@ $tag-color-cool-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-30,
+      value: colors.$cool-gray-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-30,
+      value: colors.$cool-gray-20,
     ),
   ),
 ) !default;
@@ -605,11 +605,11 @@ $tag-hover-cool-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-70,
+      value: colors.$cool-gray-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-70,
+      value: colors.$cool-gray-70-hover,
     ),
   ),
 ) !default;
@@ -628,11 +628,11 @@ $tag-background-warm-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-80,
+      value: colors.$warm-gray-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-80,
+      value: colors.$warm-gray-70,
     ),
   ),
 ) !default;
@@ -650,11 +650,11 @@ $tag-color-warm-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-30,
+      value: colors.$warm-gray-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-30,
+      value: colors.$warm-gray-20,
     ),
   ),
 ) !default;
@@ -672,11 +672,11 @@ $tag-hover-warm-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-70,
+      value: colors.$warm-gray-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-70,
+      value: colors.$warm-gray-70-hover,
     ),
   ),
 ) !default;