refactor(link): create link specific t3 tokens

.storybook/data/tokens.json

@@ -366,6 +366,20 @@
   "eds-theme-color-form-background": "#FFFFFF",
   "eds-theme-color-form-background-hover": "#F4F6F8",
   "eds-theme-color-form-label": "#383C43",
+  "eds-theme-color-link-brand-text": "var(--eds-theme-color-text-link-neutral)",
+  "eds-theme-color-link-brand-text-hover": "var(--eds-theme-color-text-link-brand)",
+  "eds-theme-color-link-brand-text-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
+  "eds-theme-color-link-brand-text-decoration": "var(--eds-theme-color-border-link-brand)",
+  "eds-theme-color-link-brand-text-decoration-hover": "var(--eds-theme-color-border-link-brand)",
+  "eds-theme-color-link-brand-text-decoration-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
+  "eds-theme-color-link-brand-background-focus": "var(--eds-theme-color-border-link-brand)",
+  "eds-theme-color-link-neutral-text": "var(--eds-theme-color-text-link-neutral)",
+  "eds-theme-color-link-neutral-text-hover": "var(--eds-theme-color-text-link-brand)",
+  "eds-theme-color-link-neutral-text-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
+  "eds-theme-color-link-neutral-text-decoration": "var(--eds-theme-color-border-link-neutral)",
+  "eds-theme-color-link-neutral-text-decoration-hover": "var(--eds-theme-color-border-link-brand)",
+  "eds-theme-color-link-neutral-text-decoration-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
+  "eds-theme-color-link-neutral-background-focus": "var(--eds-theme-color-border-link-neutral)",
   "eds-theme-color-modal-brand-header-background": "#8984E8",
   "eds-theme-color-progress-bar-background": "#E7E8EA",
   "eds-theme-color-progress-bar-border": "#E7E8EA",

src/components/ClickableStyle/ClickableStyle.module.css

@@ -511,19 +511,21 @@ button:where(.clickable-style--link) {
  * Link neutral clickable style
  */
 :where(.clickable-style--link).clickable-style--neutral {
-  text-decoration-color: var(--eds-theme-color-border-link-neutral);
+  text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration);
 
   &:hover {
-    text-decoration-color: var(--eds-theme-color-border-link-brand);
+    text-decoration-color: var(
+      --eds-theme-color-link-neutral-text-decoration-hover
+    );
   }
 
   &:focus-visible {
-    background-color: var(--eds-theme-color-border-link-neutral);
+    background-color: var(--eds-theme-color-link-neutral-background-focus);
   }
 
   @supports not selector(:focus-visible) {
     &:focus {
-      background-color: var(--eds-theme-color-border-link-neutral);
+      background-color: var(--eds-theme-color-link-neutral-background-focus);
     }
   }
 }

src/design-tokens/mixins.css

@@ -8,9 +8,9 @@
   font-weight: var(--eds-font-weight-medium);
   line-height: inherit;
 
-  color: var(--eds-theme-color-text-link-neutral);
+  color: var(--eds-theme-color-link-brand-text);
   text-decoration: underline;
-  text-decoration-color: var(--eds-theme-color-border-link-brand);
+  text-decoration-color: var(--eds-theme-color-link-brand-text-decoration);
   text-decoration-thickness: 2px;
   text-underline-offset: 2px;
 
@@ -20,8 +20,10 @@
   }
 
   &:hover {
-    color: var(--eds-theme-color-text-link-brand);
-    text-decoration-color: var(--eds-theme-color-border-link-brand);
+    color: var(--eds-theme-color-link-brand-text-hover);
+    text-decoration-color: var(
+      --eds-theme-color-link-brand-text-decoration-hover
+    );
   }
 
   &:focus-visible {
@@ -30,11 +32,11 @@
      * color, but it will also make borders 100% opacity black.
      */
     outline: 1px solid transparent;
-    color: var(--eds-theme-color-text-neutral-default-inverse) !important;
+    color: var(--eds-theme-color-link-brand-text-focus) !important;
     text-decoration-color: var(
-      --eds-theme-color-text-neutral-default-inverse
+      --eds-theme-color-link-brand-text-decoration-focus
     ) !important;
-    background-color: var(--eds-theme-color-border-link-brand);
+    background-color: var(--eds-theme-color-link-brand-background-focus);
   }
 
   @supports not selector(:focus-visible) {
@@ -44,11 +46,11 @@
        * color, but it will also make borders 100% opacity black.
        */
       outline: 1px solid transparent;
-      color: var(--eds-theme-color-text-neutral-default-inverse) !important;
+      color: var(--eds-theme-color-link-brand-text-focus) !important;
       text-decoration-color: var(
-        --eds-theme-color-text-neutral-default-inverse
+        --eds-theme-color-link-brand-text-decoration-focus
       ) !important;
-      background-color: var(--eds-theme-color-border-link-brand);
+      background-color: var(--eds-theme-color-link-brand-background-focus);
     }
   }
 }

src/design-tokens/tier-2-usage/colors-border.json

@@ -5,10 +5,12 @@
         "border": {
           "link": {
             "neutral": {
-              "value": "{eds.color.neutral.800}"
+              "value": "{eds.color.neutral.800}",
+              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead"
             },
             "brand": {
-              "value": "{eds.color.brand.grape.700}"
+              "value": "{eds.color.brand.grape.700}",
+              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead"
             }
           },
           "neutral": {

src/design-tokens/tier-2-usage/colors-text.json

@@ -21,10 +21,12 @@
           },
           "link": {
             "neutral": {
-              "value": "{eds.color.neutral.800}"
+              "value": "{eds.color.neutral.800}",
+              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead."
             },
             "brand": {
-              "value": "{eds.color.brand.grape.700}"
+              "value": "{eds.color.brand.grape.700}",
+              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead."
             }
           },
           "utility": {

src/design-tokens/tier-3-component/link.json

@@ -0,0 +1,68 @@
+{
+  "eds": {
+    "theme": {
+      "color": {
+        "link": {
+          "brand": {
+            "text": {
+              "@": {
+                "value": "var(--eds-theme-color-text-link-neutral)"
+              },
+              "hover": {
+                "value": "var(--eds-theme-color-text-link-brand)"
+              },
+              "focus": {
+                "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+              }
+            },
+            "text-decoration": {
+              "@": {
+                "value": "var(--eds-theme-color-border-link-brand)"
+              },
+              "hover": {
+                "value": "var(--eds-theme-color-border-link-brand)"
+              },
+              "focus": {
+                "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+              }
+            },
+            "background": {
+              "focus": {
+                "value": "var(--eds-theme-color-border-link-brand)"
+              }
+            }
+          },
+          "neutral": {
+            "text": {
+              "@": {
+                "value": "var(--eds-theme-color-text-link-neutral)"
+              },
+              "hover": {
+                "value": "var(--eds-theme-color-text-link-brand)"
+              },
+              "focus": {
+                "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+              }
+            },
+            "text-decoration": {
+              "@": {
+                "value": "var(--eds-theme-color-border-link-neutral)"
+              },
+              "hover": {
+                "value": "var(--eds-theme-color-border-link-brand)"
+              },
+              "focus": {
+                "value": "var(--eds-theme-color-text-neutral-default-inverse)"
+              }
+            },
+            "background": {
+              "focus": {
+                "value": "var(--eds-theme-color-border-link-neutral)"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/tokens-dist/css/variables.css

@@ -147,8 +147,8 @@
   --eds-theme-color-background-grade-stop-default: #D41E52;
   --eds-theme-color-background-grade-stop-subtle: #FFF0F4;
   --eds-theme-color-background-disabled: #C0C4C8;
-  --eds-theme-color-border-link-neutral: #21272D;
-  --eds-theme-color-border-link-brand: #5751D2;
+  --eds-theme-color-border-link-neutral: #21272D; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead */
+  --eds-theme-color-border-link-brand: #5751D2; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead */
   --eds-theme-color-border-neutral-subtle: #E7E8EA;
   --eds-theme-color-border-neutral-subtle-hover: #C0C4C8;
   --eds-theme-color-border-neutral-default: #C0C4C8;
@@ -202,8 +202,8 @@
   --eds-theme-color-text-neutral-default-inverse: #FFFFFF;
   --eds-theme-color-text-neutral-strong: #21272D;
   --eds-theme-color-text-neutral-subtle: #5D6369;
-  --eds-theme-color-text-link-neutral: #21272D;
-  --eds-theme-color-text-link-brand: #5751D2;
+  --eds-theme-color-text-link-neutral: #21272D; /* @deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead. */
+  --eds-theme-color-text-link-brand: #5751D2; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead. */
   --eds-theme-color-text-utility-success: #007249;
   --eds-theme-color-text-utility-warning: #AC3400;
   --eds-theme-color-text-utility-error: #BD0044;
@@ -366,6 +366,20 @@
   --eds-theme-color-form-background: #FFFFFF;
   --eds-theme-color-form-background-hover: #F4F6F8;
   --eds-theme-color-form-label: #383C43;
+  --eds-theme-color-link-brand-text: var(--eds-theme-color-text-link-neutral);
+  --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-link-brand);
+  --eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
+  --eds-theme-color-link-brand-text-decoration: var(--eds-theme-color-border-link-brand);
+  --eds-theme-color-link-brand-text-decoration-hover: var(--eds-theme-color-border-link-brand);
+  --eds-theme-color-link-brand-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse);
+  --eds-theme-color-link-brand-background-focus: var(--eds-theme-color-border-link-brand);
+  --eds-theme-color-link-neutral-text: var(--eds-theme-color-text-link-neutral);
+  --eds-theme-color-link-neutral-text-hover: var(--eds-theme-color-text-link-brand);
+  --eds-theme-color-link-neutral-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
+  --eds-theme-color-link-neutral-text-decoration: var(--eds-theme-color-border-link-neutral);
+  --eds-theme-color-link-neutral-text-decoration-hover: var(--eds-theme-color-border-link-brand);
+  --eds-theme-color-link-neutral-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse);
+  --eds-theme-color-link-neutral-background-focus: var(--eds-theme-color-border-link-neutral);
   --eds-theme-color-modal-brand-header-background: #8984E8;
   --eds-theme-color-progress-bar-background: #E7E8EA;
   --eds-theme-color-progress-bar-border: #E7E8EA;

src/tokens-dist/json/variables-nested.json

@@ -663,6 +663,38 @@
           },
           "label": "#383C43"
         },
+        "link": {
+          "brand": {
+            "text": {
+              "@": "var(--eds-theme-color-text-link-neutral)",
+              "hover": "var(--eds-theme-color-text-link-brand)",
+              "focus": "var(--eds-theme-color-text-neutral-default-inverse)"
+            },
+            "text-decoration": {
+              "@": "var(--eds-theme-color-border-link-brand)",
+              "hover": "var(--eds-theme-color-border-link-brand)",
+              "focus": "var(--eds-theme-color-text-neutral-default-inverse)"
+            },
+            "background": {
+              "focus": "var(--eds-theme-color-border-link-brand)"
+            }
+          },
+          "neutral": {
+            "text": {
+              "@": "var(--eds-theme-color-text-link-neutral)",
+              "hover": "var(--eds-theme-color-text-link-brand)",
+              "focus": "var(--eds-theme-color-text-neutral-default-inverse)"
+            },
+            "text-decoration": {
+              "@": "var(--eds-theme-color-border-link-neutral)",
+              "hover": "var(--eds-theme-color-border-link-brand)",
+              "focus": "var(--eds-theme-color-text-neutral-default-inverse)"
+            },
+            "background": {
+              "focus": "var(--eds-theme-color-border-link-neutral)"
+            }
+          }
+        },
         "modal": {
           "brand": {
             "header": {

src/tokens-dist/ts/colors.ts

@@ -82,8 +82,8 @@ export const EdsThemeColorBackgroundGradeReviseSubtle = '#FDF1D0';
 export const EdsThemeColorBackgroundGradeStopDefault = '#D41E52';
 export const EdsThemeColorBackgroundGradeStopSubtle = '#FFF0F4';
 export const EdsThemeColorBackgroundDisabled = '#C0C4C8';
-export const EdsThemeColorBorderLinkNeutral = '#21272D';
-export const EdsThemeColorBorderLinkBrand = '#5751D2';
+export const EdsThemeColorBorderLinkNeutral = '#21272D'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead
+export const EdsThemeColorBorderLinkBrand = '#5751D2'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead
 export const EdsThemeColorBorderNeutralSubtle = '#E7E8EA';
 export const EdsThemeColorBorderNeutralSubtleHover = '#C0C4C8';
 export const EdsThemeColorBorderNeutralDefault = '#C0C4C8';
@@ -138,8 +138,8 @@ export const EdsThemeColorTextNeutralDefault = '#383C43';
 export const EdsThemeColorTextNeutralDefaultInverse = '#FFFFFF';
 export const EdsThemeColorTextNeutralStrong = '#21272D';
 export const EdsThemeColorTextNeutralSubtle = '#5D6369';
-export const EdsThemeColorTextLinkNeutral = '#21272D';
-export const EdsThemeColorTextLinkBrand = '#5751D2';
+export const EdsThemeColorTextLinkNeutral = '#21272D'; // @deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead.
+export const EdsThemeColorTextLinkBrand = '#5751D2'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead.
 export const EdsThemeColorTextUtilitySuccess = '#007249';
 export const EdsThemeColorTextUtilityWarning = '#AC3400';
 export const EdsThemeColorTextUtilityError = '#BD0044';
@@ -303,6 +303,34 @@ export const EdsThemeColorFormBorderHover = '#21272D';
 export const EdsThemeColorFormBackground = '#FFFFFF';
 export const EdsThemeColorFormBackgroundHover = '#F4F6F8';
 export const EdsThemeColorFormLabel = '#383C43';
+export const EdsThemeColorLinkBrandText =
+  'var(--eds-theme-color-text-link-neutral)';
+export const EdsThemeColorLinkBrandTextHover =
+  'var(--eds-theme-color-text-link-brand)';
+export const EdsThemeColorLinkBrandTextFocus =
+  'var(--eds-theme-color-text-neutral-default-inverse)';
+export const EdsThemeColorLinkBrandTextDecoration =
+  'var(--eds-theme-color-border-link-brand)';
+export const EdsThemeColorLinkBrandTextDecorationHover =
+  'var(--eds-theme-color-border-link-brand)';
+export const EdsThemeColorLinkBrandTextDecorationFocus =
+  'var(--eds-theme-color-text-neutral-default-inverse)';
+export const EdsThemeColorLinkBrandBackgroundFocus =
+  'var(--eds-theme-color-border-link-brand)';
+export const EdsThemeColorLinkNeutralText =
+  'var(--eds-theme-color-text-link-neutral)';
+export const EdsThemeColorLinkNeutralTextHover =
+  'var(--eds-theme-color-text-link-brand)';
+export const EdsThemeColorLinkNeutralTextFocus =
+  'var(--eds-theme-color-text-neutral-default-inverse)';
+export const EdsThemeColorLinkNeutralTextDecoration =
+  'var(--eds-theme-color-border-link-neutral)';
+export const EdsThemeColorLinkNeutralTextDecorationHover =
+  'var(--eds-theme-color-border-link-brand)';
+export const EdsThemeColorLinkNeutralTextDecorationFocus =
+  'var(--eds-theme-color-text-neutral-default-inverse)';
+export const EdsThemeColorLinkNeutralBackgroundFocus =
+  'var(--eds-theme-color-border-link-neutral)';
 export const EdsThemeColorModalBrandHeaderBackground = '#8984E8';
 export const EdsThemeColorProgressBarBackground = '#E7E8EA';
 export const EdsThemeColorProgressBarBorder = '#E7E8EA';