style: move the Link text-underline effect from focus to `focus-v…

…isible`
nl-design-system · Sep 18, 2024 · 2e97821 · 2e97821
1 parent c878ffb
commit 2e97821
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 3 deletions.
diff --git a/.changeset/famous-seahorses-smell.md b/.changeset/famous-seahorses-smell.md
@@ -0,0 +1,15 @@
+---
+"@utrecht/link-css": minor
+---
+
+Move the Link `text-underline` effect from `focus` to `focus-visible`. The goal is to not change the `text-underline` appearance during the flow of moving the mouse over the link (`:hover`) and then clicking the link (`:focus` + `:active`).
+
+Add new `focus-visible` tokens for Link:
+
+- `utrecht.link.focus-visible.text-decoration`
+- `utrecht.link.focus-visible.text-decoration-thickness`
+
+The following tokens are now deprecated:
+
+- `utrecht.link.focus.text-decoration`
+- `utrecht.link.focus.text-decoration-thickness`
diff --git a/components/link/src/_mixin.scss b/components/link/src/_mixin.scss
@@ -112,8 +112,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 @mixin utrecht-link--focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
 
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
@@ -142,6 +140,21 @@ however browsers don't seem to have implemented great looking supixel tweening y
    */
   @include utrecht-focus-visible;
 
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
+
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 

diff --git a/components/link/src/tokens.json b/components/link/src/tokens.json
@@ -76,6 +76,34 @@
           },
           "type": "color"
         },
+        "text-decoration": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": ["inherit", "none", "underline"],
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": ["utrecht.link.text-decoration"],
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.link.focus-visible.text-decoration"
+          },
+          "type": "textDecoration"
+        },
+        "text-decoration-thickness": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": ["utrecht.link.text-decoration-thickness"],
+            "nl.nldesignsystem.figma.supports-token": false,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.link.focus-visible.text-decoration-thickness"
+          },
+          "type": "other"
+        }
+      },
+      "focus-visible": {
         "text-decoration": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {

diff --git a/proprietary/design-tokens/src/component/utrecht/link.tokens.json b/proprietary/design-tokens/src/component/utrecht/link.tokens.json
@@ -12,7 +12,9 @@
         "color": { "value": "{utrecht.link.color}" }
       },
       "focus": {
-        "color": { "value": "{utrecht.color.blue.40}" },
+        "color": { "value": "{utrecht.color.blue.40}" }
+      },
+      "focus-visible": {
         "text-decoration": { "value": "none" }
       },
       "hover": {