feat(Link): add inverse text visited color token and apply (#1982)

chanzuckerberg · Jun 7, 2024 · 98dec99 · 98dec99
1 parent fc7f842
commit 98dec99
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 2 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -573,6 +573,7 @@
   "eds-theme-color-text-utility-disabled-secondary": "#CFC9C7",
   "eds-theme-color-text-utility-inverse": "rgb(var(--eds-color-white) / 1)",
   "eds-theme-color-text-utility-inverse-disabled": "rgb(var(--eds-color-white) / 0.5)",
+  "eds-theme-color-text-utility-inverse-interactive-visited": "#C580E7",
   "eds-theme-color-text-utility-placeholder": "#6C6967",
   "eds-theme-color-text-utility-success": "#007249",
   "eds-theme-color-text-utility-error": "#BD0044",

diff --git a/src/components/Link/Link-v2.module.css b/src/components/Link/Link-v2.module.css
@@ -86,7 +86,11 @@
  */
 .link.link--variant-inverse:hover,
 .link.link--variant-inverse:active {
-    color: var(--eds-theme-color-text-utility-inverse);
+  color: var(--eds-theme-color-text-utility-inverse);
+}
+
+.link.link--variant-inverse:visited {
+  color: var(--eds-theme-color-text-utility-inverse-interactive-visited);
 }
 
 /**

diff --git a/src/design-tokens/themes.json b/src/design-tokens/themes.json
@@ -2014,6 +2014,11 @@
               },
               "disabled": {
                 "value": "rgb(var(--eds-color-white) / 0.5)"
+              },
+              "interactive": {
+                "visited": {
+                  "value": "{eds.color.purple.350}"
+                }
               }
             },
             "placeholder": {

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -428,6 +428,7 @@
   --eds-theme-color-text-utility-error: var(--eds-color-other-ruby-700);
   --eds-theme-color-text-utility-success: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-text-utility-placeholder: var(--eds-color-neutral-550);
+  --eds-theme-color-text-utility-inverse-interactive-visited: var(--eds-color-purple-350);
   --eds-theme-color-text-utility-disabled-secondary: var(--eds-color-neutral-200);
   --eds-theme-color-text-utility-disabled-primary: var(--eds-color-neutral-350);
   --eds-theme-color-text-utility-informational-active: var(--eds-color-blue-750);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -1138,7 +1138,10 @@
             },
             "inverse": {
               "@": "rgb(var(--eds-color-white) / 1)",
-              "disabled": "rgb(var(--eds-color-white) / 0.5)"
+              "disabled": "rgb(var(--eds-color-white) / 0.5)",
+              "interactive": {
+                "visited": "#C580E7"
+              }
             },
             "placeholder": "#6C6967",
             "success": "#007249",

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -457,6 +457,7 @@ export const EdsThemeColorTextUtilityInverse =
   'rgb(var(--eds-color-white) / 1)';
 export const EdsThemeColorTextUtilityInverseDisabled =
   'rgb(var(--eds-color-white) / 0.5)';
+export const EdsThemeColorTextUtilityInverseInteractiveVisited = '#C580E7';
 export const EdsThemeColorTextUtilityPlaceholder = '#6C6967';
 export const EdsThemeColorTextUtilitySuccess = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.
 export const EdsThemeColorTextUtilityError = '#BD0044';