feat(themes): add link-inverse-{active,hover} tokens (#10599)

* feat(themes): add link-inverse-{active,hover} tokens * test(styles): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 2, 2022 · 996eee0 · 996eee0
1 parent 4060572
commit 996eee0
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 4 deletions.
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -102,8 +102,10 @@ describe('@carbon/styles/scss/theme', () => {
         "link-primary",
         "link-primary-hover",
         "link-secondary",
-        "link-inverse",
         "link-visited",
+        "link-inverse",
+        "link-inverse-active",
+        "link-inverse-hover",
         "icon-primary",
         "icon-secondary",
         "icon-inverse",

diff --git a/packages/themes/src/next/g10.js b/packages/themes/src/next/g10.js
@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue30,
   blue40,
   blue60,
   blue70,
@@ -153,6 +154,8 @@ export const linkPrimaryHover = blue70;
 export const linkSecondary = blue70;
 export const linkInverse = blue40;
 export const linkVisited = purple60;
+export const linkInverseActive = gray10;
+export const linkInverseHover = blue30;
 
 // Icon
 export const iconPrimary = gray100;

diff --git a/packages/themes/src/next/g100.js b/packages/themes/src/next/g100.js
@@ -162,6 +162,8 @@ export const linkPrimaryHover = blue30;
 export const linkSecondary = blue30;
 export const linkInverse = blue60;
 export const linkVisited = purple40;
+export const linkInverseActive = gray100;
+export const linkInverseHover = blue70;
 
 // Icon
 export const iconPrimary = gray10;

diff --git a/packages/themes/src/next/g90.js b/packages/themes/src/next/g90.js
@@ -161,6 +161,8 @@ export const linkPrimaryHover = blue30;
 export const linkSecondary = blue30;
 export const linkInverse = blue60;
 export const linkVisited = purple40;
+export const linkInverseActive = gray100;
+export const linkInverseHover = blue70;
 
 // Icon
 export const iconPrimary = gray10;

diff --git a/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/next/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -97,8 +97,10 @@ Array [
   "link-primary",
   "link-primary-hover",
   "link-secondary",
-  "link-inverse",
   "link-visited",
+  "link-inverse",
+  "link-inverse-active",
+  "link-inverse-hover",
 ]
 `;
 
@@ -207,8 +209,10 @@ Array [
   "link-primary",
   "link-primary-hover",
   "link-secondary",
-  "link-inverse",
   "link-visited",
+  "link-inverse",
+  "link-inverse-active",
+  "link-inverse-hover",
   "icon-primary",
   "icon-secondary",
   "icon-inverse",

diff --git a/packages/themes/src/next/tokens/v11TokenGroup.js b/packages/themes/src/next/tokens/v11TokenGroup.js
@@ -253,11 +253,13 @@ export const link = TokenGroup.create({
       name: 'link-primary-hover',
     },
     'link-secondary',
-    'link-inverse',
     {
       state: 'visited',
       name: 'link-visited',
     },
+    'link-inverse',
+    'link-inverse-active',
+    'link-inverse-hover',
   ],
 });
 

diff --git a/packages/themes/src/next/white.js b/packages/themes/src/next/white.js
@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue30,
   blue40,
   blue60,
   blue70,
@@ -153,6 +154,8 @@ export const linkPrimaryHover = blue70;
 export const linkSecondary = blue70;
 export const linkInverse = blue40;
 export const linkVisited = purple60;
+export const linkInverseActive = gray10;
+export const linkInverseHover = blue30;
 
 // Icon
 export const iconPrimary = gray100;