Added new tokens for Link to fix Toggletip (#16510)

* fix: added new tokens for toggletip * test: updated snapshots
carbon-design-system · May 21, 2024 · f3f5720 · f3f5720
1 parent 111db86
commit f3f5720
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 3 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -235,6 +235,7 @@ Array [
   "linkInverse",
   "linkInverseActive",
   "linkInverseHover",
+  "linkInverseVisited",
   "linkPrimary",
   "linkPrimaryHover",
   "linkSecondary",

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -105,6 +105,7 @@ describe('@carbon/styles/scss/theme', () => {
         "link-primary",
         "link-primary-hover",
         "link-secondary",
+        "link-inverse-visited",
         "link-visited",
         "link-inverse",
         "link-inverse-active",

diff --git a/packages/styles/scss/components/toggletip/_toggletip.scss b/packages/styles/scss/components/toggletip/_toggletip.scss
@@ -61,11 +61,11 @@
     );
     @include custom-property.declaration(
       'link-hover-text-color',
-      theme.$link-inverse
+      theme.$link-inverse-hover
     );
     @include custom-property.declaration(
       'link-visited-text-color',
-      theme.$link-inverse
+      theme.$link-inverse-visited
     );
     @include custom-property.declaration(
       'link-focus-text-color',

diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -38,6 +38,7 @@ import {
   red50,
   red60,
   purple60,
+  purple40,
 
   // Constants
   black,
@@ -163,6 +164,7 @@ export const linkPrimaryHover = blue70;
 export const linkSecondary = blue70;
 export const linkInverse = blue40;
 export const linkVisited = purple60;
+export const linkInverseVisited = purple40;
 export const linkInverseActive = gray10;
 export const linkInverseHover = blue30;
 

diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -40,6 +40,7 @@ import {
   red60,
   purple40,
   purple50,
+  purple60,
 
   // Constants
   white,
@@ -166,6 +167,7 @@ export const linkPrimaryHover = blue30;
 export const linkSecondary = blue30;
 export const linkInverse = blue60;
 export const linkVisited = purple40;
+export const linkInverseVisited = purple60;
 export const linkInverseActive = gray100;
 export const linkInverseHover = blue70;
 

diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
@@ -40,6 +40,7 @@ import {
   red60,
   purple40,
   purple50,
+  purple60,
 
   // Constants
   white,
@@ -166,6 +167,7 @@ export const linkPrimaryHover = blue30;
 export const linkSecondary = blue30;
 export const linkInverse = blue60;
 export const linkVisited = purple40;
+export const linkInverseVisited = purple60;
 export const linkInverseActive = gray100;
 export const linkInverseHover = blue70;
 

diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -101,6 +101,7 @@ Array [
   "link-primary",
   "link-primary-hover",
   "link-secondary",
+  "link-inverse-visited",
   "link-visited",
   "link-inverse",
   "link-inverse-active",
@@ -216,6 +217,7 @@ Array [
   "link-primary",
   "link-primary-hover",
   "link-secondary",
+  "link-inverse-visited",
   "link-visited",
   "link-inverse",
   "link-inverse-active",

diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -837,6 +837,10 @@ test('metadata', () => {
           "name": "link-secondary",
           "type": "color",
         },
+        Object {
+          "name": "link-inverse-visited",
+          "type": "color",
+        },
         Object {
           "name": "link-visited",
           "type": "color",

diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
@@ -260,8 +260,9 @@ export const link = TokenGroup.create({
     'link-secondary',
     {
       state: 'visited',
-      name: 'link-visited',
+      name: 'link-inverse-visited',
     },
+    'link-visited',
     'link-inverse',
     'link-inverse-active',
     'link-inverse-hover',

diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
@@ -38,6 +38,7 @@ import {
   red50,
   red60,
   purple60,
+  purple40,
 
   // Constants
   black,
@@ -163,6 +164,7 @@ export const linkPrimaryHover = blue70;
 export const linkSecondary = blue70;
 export const linkInverse = blue40;
 export const linkVisited = purple60;
+export const linkInverseVisited = purple40;
 export const linkInverseActive = gray10;
 export const linkInverseHover = blue30;