feat!: Rename and document common tokens for links (#1870)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Feb 14, 2025 · 551743d · 551743d
1 parent 9677788
commit 551743d
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 84 deletions.
diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss
@@ -23,7 +23,6 @@
   display: inline-block;
   font-size: var(--ams-link-standalone-font-size);
   line-height: var(--ams-link-standalone-line-height);
-  text-decoration-line: var(--ams-link-standalone-text-decoration-line);
   text-decoration-thickness: var(--ams-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--ams-link-standalone-text-underline-offset);
 
@@ -39,7 +38,6 @@
   font-family: var(--ams-link-inline-font-family);
   font-size: var(--ams-link-inline-font-size);
   line-height: var(--ams-link-inline-line-height);
-  text-decoration-line: var(--ams-link-inline-text-decoration-line);
   text-decoration-thickness: var(--ams-link-inline-text-decoration-thickness);
   text-underline-offset: var(--ams-link-inline-text-underline-offset);
 

diff --git a/proprietary/tokens/README.md b/proprietary/tokens/README.md
@@ -111,8 +111,8 @@ The same goes for custom components that you may create in your application.
 
 ```css
 .my-input {
-  color: var(--ams-link-appearance-color);
-  text-underline-offset: var(--ams-link-appearance-text-underline-offset);
+  color: var(--ams-links-color);
+  text-underline-offset: var(--ams-links-text-underline-offset);
 }
 ```
 

diff --git a/...rc/common/ams/link-appearance.tokens.json → ...y/tokens/src/common/ams/links.tokens.json b/...rc/common/ams/link-appearance.tokens.json → ...y/tokens/src/common/ams/links.tokens.json
@@ -1,18 +1,13 @@
 {
   "ams": {
-    "link-appearance": {
+    "links": {
       "color": { "value": "{ams.color.interactive.default}" },
       "text-decoration-thickness": { "value": "{ams.border.width.md}" },
       "text-underline-offset": { "value": "0.3333em" },
       "hover": {
-        "color": { "value": "{ams.color.interactive.hover}" }
-      },
-      "regular": {
-        "text-decoration-line": { "value": "underline" },
-        "hover": {
-          "text-decoration-thickness": { "value": "{ams.border.width.lg}" },
-          "text-underline-offset": { "value": "0.2778em" }
-        }
+        "color": { "value": "{ams.color.interactive.hover}" },
+        "text-decoration-thickness": { "value": "{ams.border.width.lg}" },
+        "text-underline-offset": { "value": "0.2778em" }
       },
       "subtle": {
         "text-decoration-line": { "value": "none" },

diff --git a/proprietary/tokens/src/components/ams/breadcrumb.tokens.json b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json
@@ -14,14 +14,14 @@
         "margin-inline": { "value": "{ams.space.xs}" }
       },
       "link": {
-        "color": { "value": "{ams.link-appearance.color}" },
+        "color": { "value": "{ams.links.color}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         }
       }
     }

diff --git a/proprietary/tokens/src/components/ams/card.tokens.json b/proprietary/tokens/src/components/ams/card.tokens.json
@@ -6,13 +6,13 @@
         "gap": { "value": "{ams.space.sm}" }
       },
       "link": {
-        "color": { "value": "{ams.link-appearance.color}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "color": { "value": "{ams.links.color}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         }
       },
       "outline-offset": { "value": "{ams.focus.outline-offset}" }

diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json
@@ -27,7 +27,7 @@
         "column-gap": { "value": "{ams.space.lg}" },
         "row-gap": { "value": "{ams.space.xs}" },
         "item": {
-          "color": { "value": "{ams.link-appearance.color}" },
+          "color": { "value": "{ams.links.color}" },
           "column-gap": { "value": "{ams.space.xs}" },
           "font-family": { "value": "{ams.text.font-family}" },
           "font-size": { "value": "{ams.text.level.5.font-size}" },
@@ -36,15 +36,15 @@
           "outline-offset": { "value": "{ams.focus.outline-offset}" },
           "padding-block": { "value": "{ams.space.xs}" },
           "hover": {
-            "color": { "value": "{ams.link-appearance.hover.color}" }
+            "color": { "value": "{ams.links.hover.color}" }
           }
         },
         "link": {
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-          "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-          "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+          "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+          "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
           "hover": {
-            "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+            "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
           }
         }
       },

diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json
@@ -3,16 +3,16 @@
     "link-list": {
       "gap": { "value": "{ams.space.sm}" },
       "link": {
-        "color": { "value": "{ams.link-appearance.color}" },
+        "color": { "value": "{ams.links.color}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "gap": { "value": "{ams.space.sm}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "small": {
           "font-size": { "value": "{ams.text.level.6.font-size}" },
           "line-height": { "value": "{ams.text.level.6.line-height}" }
@@ -22,19 +22,19 @@
           "line-height": { "value": "{ams.text.level.4.line-height}" }
         },
         "hover": {
-          "color": { "value": "{ams.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         },
         "contrast": {
-          "color": { "value": "{ams.link-appearance.contrast.color}" },
+          "color": { "value": "{ams.links.contrast.color}" },
           "hover": {
-            "color": { "value": "{ams.link-appearance.contrast.hover.color}" }
+            "color": { "value": "{ams.links.contrast.hover.color}" }
           }
         },
         "inverse": {
-          "color": { "value": "{ams.link-appearance.inverse.color}" },
+          "color": { "value": "{ams.links.inverse.color}" },
           "hover": {
-            "color": { "value": "{ams.link-appearance.inverse.hover.color}" }
+            "color": { "value": "{ams.links.inverse.hover.color}" }
           }
         }
       }

diff --git a/proprietary/tokens/src/components/ams/link.tokens.json b/proprietary/tokens/src/components/ams/link.tokens.json
@@ -1,50 +1,48 @@
 {
   "ams": {
     "link": {
-      "color": { "value": "{ams.link-appearance.color}" },
+      "color": { "value": "{ams.links.color}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "hover": {
-        "color": { "value": "{ams.link-appearance.hover.color}" }
+        "color": { "value": "{ams.links.hover.color}" }
       },
       "inline": {
-        "text-decoration-line": { "value": "{ams.link-appearance.regular.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "font-family": { "value": "inherit" },
         "font-size": { "value": "inherit" },
         "line-height": { "value": "inherit" },
         "hover": {
           "text-decoration-thickness": {
-            "value": "{ams.link-appearance.regular.hover.text-decoration-thickness}"
+            "value": "{ams.links.hover.text-decoration-thickness}"
           },
-          "text-underline-offset": { "value": "{ams.link-appearance.regular.hover.text-underline-offset}" }
+          "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
         }
       },
       "standalone": {
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.regular.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "hover": {
           "text-decoration-thickness": {
-            "value": "{ams.link-appearance.regular.hover.text-decoration-thickness}"
+            "value": "{ams.links.hover.text-decoration-thickness}"
           },
-          "text-underline-offset": { "value": "{ams.link-appearance.regular.hover.text-underline-offset}" }
+          "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
         }
       },
       "contrast": {
-        "color": { "value": "{ams.link-appearance.contrast.color}" },
+        "color": { "value": "{ams.links.contrast.color}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.contrast.hover.color}" }
+          "color": { "value": "{ams.links.contrast.hover.color}" }
         }
       },
       "inverse": {
-        "color": { "value": "{ams.link-appearance.inverse.color}" },
+        "color": { "value": "{ams.links.inverse.color}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.inverse.hover.color}" }
+          "color": { "value": "{ams.links.inverse.hover.color}" }
         }
       }
     }

diff --git a/proprietary/tokens/src/components/ams/page-menu.tokens.json b/proprietary/tokens/src/components/ams/page-menu.tokens.json
@@ -4,19 +4,19 @@
       "column-gap": { "value": "{ams.space.grid.md}" },
       "row-gap": { "value": "{ams.space.grid.xs}" },
       "item": {
-        "color": { "value": "{ams.link-appearance.color}" },
+        "color": { "value": "{ams.links.color}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.6.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "gap": { "value": "{ams.space.sm}" },
         "line-height": { "value": "{ams.text.level.6.line-height}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         }
       }
     }

diff --git a/proprietary/tokens/src/components/ams/pagination.tokens.json b/proprietary/tokens/src/components/ams/pagination.tokens.json
@@ -6,19 +6,19 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "link": {
-        "color": { "value": "{ams.link-appearance.color}" },
+        "color": { "value": "{ams.links.color}" },
         "gap": { "value": "{ams.space.xs}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "padding-inline": { "value": "{ams.space.sm}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "current": {
           "font-weight": { "value": "{ams.text.font-weight.bold}" }
         },
         "hover": {
-          "color": { "value": "{ams.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         }
       }
     }

diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json
@@ -9,8 +9,8 @@
       "gap": { "value": "{ams.space.sm}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-      "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+      "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+      "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
       "checked-indicator": {
         "fill": { "value": "{ams.color.interactive.default}" },
         "disabled": {
@@ -72,7 +72,7 @@
       },
       "hover": {
         "color": { "value": "{ams.color.interactive.hover}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+        "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
       },
       "icon-container": {
         "block-size": { "value": "calc({ams.radio.font-size} * {ams.radio.line-height})" },

diff --git a/proprietary/tokens/src/components/ams/table-of-contents.tokens.json b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json
@@ -7,14 +7,14 @@
       "gap": { "value": "{ams.space.md}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "link": {
-        "color": { "value": "{ams.link-appearance.color}" },
+        "color": { "value": "{ams.links.color}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         }
       },
       "list": {

diff --git a/proprietary/tokens/src/components/ams/top-task-link.tokens.json b/proprietary/tokens/src/components/ams/top-task-link.tokens.json
@@ -10,17 +10,17 @@
         "line-height": { "value": "{ams.text.level.6.line-height}" }
       },
       "label": {
-        "color": { "value": "{ams.link-appearance.color}" },
+        "color": { "value": "{ams.links.color}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.4.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
         "line-height": { "value": "{ams.text.level.4.line-height}" },
-        "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
-        "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
+        "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
+        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.hover.color}" },
-          "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
+          "color": { "value": "{ams.links.hover.color}" },
+          "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         }
       },
       "outline-offset": { "value": "{ams.focus.outline-offset}" }