@synergy-design-system/tokens 2.7.0 → 2.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.9.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.8.0...tokens/2.9.0) (2024-08-26)
+
+
+### Features
+
+* ✨ link css ([#589](https://github.com/synergy-design-system/synergy-design-system/issues/589)) ([cdf54fc](https://github.com/synergy-design-system/synergy-design-system/commit/cdf54fcb348cc3b5a41993cff530424bdf6b6802))
+
+# [@synergy-design-system/tokens-v2.8.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.7.0...tokens/2.8.0) (2024-08-23)
+
+
+### Features
+
+* ✨ Upgrade packages to latest versions ([#592](https://github.com/synergy-design-system/synergy-design-system/issues/592)) ([e43c563](https://github.com/synergy-design-system/synergy-design-system/commit/e43c5630b6c43ef855af6815604c7649376104ee)), closes [#2078](https://github.com/synergy-design-system/synergy-design-system/issues/2078) [#2063](https://github.com/synergy-design-system/synergy-design-system/issues/2063) [#2041](https://github.com/synergy-design-system/synergy-design-system/issues/2041) [#2041](https://github.com/synergy-design-system/synergy-design-system/issues/2041) [#2116](https://github.com/synergy-design-system/synergy-design-system/issues/2116) [#2121](https://github.com/synergy-design-system/synergy-design-system/issues/2121) [#1992](https://github.com/synergy-design-system/synergy-design-system/issues/1992) [#2079](https://github.com/synergy-design-system/synergy-design-system/issues/2079) [#2009](https://github.com/synergy-design-system/synergy-design-system/issues/2009) [#1967](https://github.com/synergy-design-system/synergy-design-system/issues/1967) [#1947](https://github.com/synergy-design-system/synergy-design-system/issues/1947) [#1974](https://github.com/synergy-design-system/synergy-design-system/issues/1974) [#1985](https://github.com/synergy-design-system/synergy-design-system/issues/1985) [#2001](https://github.com/synergy-design-system/synergy-design-system/issues/2001)
+
 # [@synergy-design-system/tokens-v2.7.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.6.0...tokens/2.7.0) (2024-08-23)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.6.0
+ * @synergy-design-system/tokens version 2.8.0
  * SICK Global UX Foundation
  */
 
@@ -279,6 +279,16 @@ export const SynFontSansFallback: string;
  */
 export const SynOpacity50: string;
 
+/**
+ * Maps to the css variable `--syn-text-decoration-default`
+ */
+export const SynTextDecorationDefault: string;
+
+/**
+ * Maps to the css variable `--syn-text-decoration-underline`
+ */
+export const SynTextDecorationUnderline: string;
+
 /**
  * Maps to the css variable `--syn-button-font-size-small`
  */
@@ -599,6 +609,36 @@ export const SynInputFontSizeMedium: string;
  */
 export const SynInputFontSizeLarge: string;
 
+/**
+ * Maps to the css variable `--syn-link-color`
+ */
+export const SynLinkColor: string;
+
+/**
+ * Maps to the css variable `--syn-link-color-hover`
+ */
+export const SynLinkColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-link-color-active`
+ */
+export const SynLinkColorActive: string;
+
+/**
+ * Maps to the css variable `--syn-link-quiet-color`
+ */
+export const SynLinkQuietColor: string;
+
+/**
+ * Maps to the css variable `--syn-link-quiet-color-hover`
+ */
+export const SynLinkQuietColorHover: string;
+
+/**
+ * Maps to the css variable `--syn-link-quiet-color-active`
+ */
+export const SynLinkQuietColorActive: string;
+
 /**
  * Maps to the css variable `--syn-overlay-background-color`
  */

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.6.0
+ * @synergy-design-system/tokens version 2.8.0
  * SICK Global UX Foundation
  */
 
@@ -278,6 +278,16 @@ export const SynFontSansFallback = 'var(--syn-font-sans-fallback)';
  */
 export const SynOpacity50 = 'var(--syn-opacity-50)';
 
+/**
+ * @type {string}
+ */
+export const SynTextDecorationDefault = 'var(--syn-text-decoration-default)';
+
+/**
+ * @type {string}
+ */
+export const SynTextDecorationUnderline = 'var(--syn-text-decoration-underline)';
+
 /**
  * @type {string}
  */
@@ -598,6 +608,36 @@ export const SynInputFontSizeMedium = 'var(--syn-input-font-size-medium)';
  */
 export const SynInputFontSizeLarge = 'var(--syn-input-font-size-large)';
 
+/**
+ * @type {string}
+ */
+export const SynLinkColor = 'var(--syn-link-color)';
+
+/**
+ * @type {string}
+ */
+export const SynLinkColorHover = 'var(--syn-link-color-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynLinkColorActive = 'var(--syn-link-color-active)';
+
+/**
+ * @type {string}
+ */
+export const SynLinkQuietColor = 'var(--syn-link-quiet-color)';
+
+/**
+ * @type {string}
+ */
+export const SynLinkQuietColorHover = 'var(--syn-link-quiet-color-hover)';
+
+/**
+ * @type {string}
+ */
+export const SynLinkQuietColorActive = 'var(--syn-link-quiet-color-active)';
+
 /**
  * @type {string}
  */

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.6.0
+ * @synergy-design-system/tokens version 2.8.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -57,6 +57,8 @@ $SynBorderWidthLarge: var(--syn-border-width-large) !default;
 $SynBorderWidthXLarge: var(--syn-border-width-x-large) !default;
 $SynFontSansFallback: var(--syn-font-sans-fallback) !default;
 $SynOpacity50: var(--syn-opacity-50) !default;
+$SynTextDecorationDefault: var(--syn-text-decoration-default) !default;
+$SynTextDecorationUnderline: var(--syn-text-decoration-underline) !default;
 $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
 $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
 $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;
@@ -121,6 +123,12 @@ $SynInputReadonlyColorFocus: var(--syn-input-readonly-color-focus) !default;
 $SynInputFontSizeSmall: var(--syn-input-font-size-small) !default;
 $SynInputFontSizeMedium: var(--syn-input-font-size-medium) !default;
 $SynInputFontSizeLarge: var(--syn-input-font-size-large) !default;
+$SynLinkColor: var(--syn-link-color) !default;
+$SynLinkColorHover: var(--syn-link-color-hover) !default;
+$SynLinkColorActive: var(--syn-link-color-active) !default;
+$SynLinkQuietColor: var(--syn-link-quiet-color) !default;
+$SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
+$SynLinkQuietColorActive: var(--syn-link-quiet-color-active) !default;
 $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
 $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
 $SynPanelBorderColor: var(--syn-panel-border-color) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 2.6.0
+ * @synergy-design-system/tokens version 2.8.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 07:34:05 GMT
+ * Generated on Mon, 26 Aug 2024 07:06:35 GMT
  */
 
 :root, .syn-theme-dark {
@@ -63,6 +63,8 @@
   --syn-border-width-x-large: 4px; /* X Large */
   --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   --syn-opacity-50: 0.5; /* 50% */
+  --syn-text-decoration-default: none;
+  --syn-text-decoration-underline: underline;
   --syn-button-font-size-small: var(--syn-font-size-small);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-large: var(--syn-font-size-large);
@@ -127,6 +129,12 @@
   --syn-input-font-size-small: var(--syn-font-size-small);
   --syn-input-font-size-medium: var(--syn-font-size-medium);
   --syn-input-font-size-large: var(--syn-font-size-large);
+  --syn-link-color: var(--syn-color-primary-600);
+  --syn-link-color-hover: var(--syn-color-primary-900);
+  --syn-link-color-active: var(--syn-color-primary-950);
+  --syn-link-quiet-color: var(--syn-typography-color-text);
+  --syn-link-quiet-color-hover: var(--syn-color-primary-900);
+  --syn-link-quiet-color-active: var(--syn-color-primary-950);
   --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: var(--syn-color-neutral-300);

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 2.6.0
+ * @synergy-design-system/tokens version 2.8.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 07:34:05 GMT
+ * Generated on Mon, 26 Aug 2024 07:06:35 GMT
  */
 
 :root, .syn-theme-light {
@@ -63,6 +63,8 @@
   --syn-border-width-x-large: 4px; /* X Large */
   --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   --syn-opacity-50: 0.5; /* 50% */
+  --syn-text-decoration-default: none;
+  --syn-text-decoration-underline: underline;
   --syn-button-font-size-small: var(--syn-font-size-small);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-large: var(--syn-font-size-large);
@@ -127,6 +129,12 @@
   --syn-input-font-size-small: var(--syn-font-size-small);
   --syn-input-font-size-medium: var(--syn-font-size-medium);
   --syn-input-font-size-large: var(--syn-font-size-large);
+  --syn-link-color: var(--syn-color-primary-600);
+  --syn-link-color-hover: var(--syn-color-primary-900);
+  --syn-link-color-active: var(--syn-color-primary-950);
+  --syn-link-quiet-color: var(--syn-typography-color-text);
+  --syn-link-quiet-color-hover: var(--syn-color-primary-900);
+  --syn-link-quiet-color-active: var(--syn-color-primary-950);
   --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: var(--syn-color-neutral-300);

package/package.json

@@ -13,11 +13,11 @@
     "change-case": "^5.4.4",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "7.0.5",
     "style-dictionary": "^3.9.2",
-    "stylelint": "^16.3.1",
+    "stylelint": "^16.8.2",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/$metadata.json

@@ -9,6 +9,7 @@
     "semantic/button",
     "semantic/toggle",
     "semantic/typography",
+    "semantic/link",
     "semantic/overlays",
     "semantic/panels",
     "semantic/tooltip",

package/src/figma-tokens/$themes.json

@@ -258,12 +258,25 @@
       "shadow.medium": "S:c0b8580ee9db62a24ef278785c259d82e8857b59,"
     },
     "$figmaVariableReferences": {
+      "font-size.x-small": "ce0ec5530b24da6c4f9beefb5b1dc84743a489d3",
+      "font-size.small": "e7bd594207fc6c29304db0a1a6ea82df55fba9d7",
+      "font-size.medium": "3259222796cd000da2349819a252134cccc94ecd",
+      "font-size.large": "6740ca3db4b3af3b3c50021347b797b259c52818",
+      "font-size.x-large": "1505cfea5f8711ad0b74d4a50067787d0eeb5aac",
+      "font-size.2x-large": "df23a3e54602d49a9dcb29ba2e15d4f7f23475a6",
+      "font-size.3x-large": "d4500a90c4caf9ea5a1e20dfc1f9f16db19a9653",
+      "font-weight.normal": "31fa7719763aa5982cd25c1ed016ed10d63b4a47",
+      "font-weight.semibold": "66168d85d077768f3601c902a467fc72b6c7fa31",
+      "font-weight.bold": "d5e25a9686b1b903a84f2b6dd4bca7d005a7cd3c",
+      "font.sans": "4f4ee2135ba4bace3030f4cae9a589c15fdc1644",
+      "font.mono": "2fe083a4e994e9934c03bbdf4ebb3225f7c8f978",
       "spacing.4x-small": "0c5c205948f7b7c63e5e91f6f3dc3e9054b274ae",
       "spacing.3x-small": "6c0727ac33a9bca72e018122c4f210109c5dec53",
       "spacing.2x-small": "9bf6492e474bbfb3def963187640214c9c235fa8",
       "spacing.x-small": "adfc9b02c8338d5fb1614dbea531bdcde5d495e4",
       "spacing.small": "1cf0b96fd9b3c40a83c09e899b9310655e761612",
       "spacing.medium": "ed8577f330c0d060cf1a89a464493a5ee1db25f2",
+      "spacing.medium-large": "25638943cad9a60e3a3a61e7292f4a84bd8121ea",
       "spacing.large": "b1d9a229b48aa1ed04847ece0f87b69953ad2732",
       "spacing.x-large": "2ec93ddcd67226231abf805dc135cb1257c90694",
       "spacing.2x-large": "6e2f98416208ef789f16af714119e402258cfd20",
@@ -273,12 +286,15 @@
       "border-radius.none": "53dcd1f8e714326b74a4514caacc49e106534e5b",
       "border-radius.pill": "896374a12f19932772d11aacd32600994432d485",
       "border-radius.circle": "78873ce248b2fe0211ba9f0d7df52d0d7f67527e",
+      "border-radius.small": "db8d42f7c37f9555c5b57456499ae5cddf917771",
+      "border-radius.medium": "1619c62845f4a0a1d9dddfe0ef656dc3d5393e76",
       "dimension.base": "19986b922fb7bef5013d8aa3ced447aaf18d2542",
       "border-width.none": "72b8dcfbad660e8456cfe19e93902a57a7133643",
       "border-width.small": "ff2144e9333c35a5185da64d9eceaffab1b101ce",
       "border-width.medium": "df4f35c8f0fad6bc109ece2bd2268cd834e32731",
       "border-width.large": "7e3b8fa4f836ae55bafdae9c287ca6779f97e302",
-      "border-width.x-large": "0a08f8b5ba55322e50a8496415c2e803b083a0dc"
+      "border-width.x-large": "0a08f8b5ba55322e50a8496415c2e803b083a0dc",
+      "opacity.50": "1ca9a188f0fef6506addb37972c42a4c16d3e360"
     },
     "$figmaCollectionId": "VariableCollectionId:28:527",
     "$figmaModeId": "28:3",
@@ -304,16 +320,41 @@
       "semantic/input": "enabled",
       "semantic/button": "enabled",
       "semantic/toggle": "enabled",
-      "semantic/typography": "enabled"
+      "semantic/typography": "enabled",
+      "semantic/link": "enabled",
+      "semantic/overlays": "enabled",
+      "semantic/panels": "enabled",
+      "semantic/tooltip": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:790:67393",
     "$figmaModeId": "790:0",
     "$figmaVariableReferences": {
-      "typography.color.text": "0bce8a23c955ec27b2edc35101d7c955ac12dc13",
-      "typography.color.text-inverted": "1411de66484c1b8ca3c0034b32473973ed6838fb",
+      "tooltip.border.radius": "5c964539e35abe3542052142ad6bd66681cedfeb",
+      "tooltip.background-color": "eff1b08a86ab894b43003a21d6580f1b23206b16",
+      "tooltip.color": "dc2fa83fcad15871159e08e324a7485afb14d762",
+      "tooltip.font-family": "b6ec01c203c616686a6c4e7a940987aa334c7162",
+      "tooltip.font-weight": "7749313ae8f6f54163f07a9a733c9d20549dfeeb",
+      "tooltip.font-size": "82854b02e37ab707b63ae1d86d8373e10f5bda8e",
+      "tooltip.padding": "54f91632e7d8939dcf7b7138462e46885e47da3f",
+      "tooltip.arrow-size": "fd64b50bfc4fb4137153d26a47a4806fec5c84d9",
+      "panel.background.color": "7016be8a3da4f7589565381af1b6b83fed11bffc",
+      "panel.border.color": "1ac88fb0df1b1ceaabe633f9b62646eb0b47f679",
+      "panel.border.width": "c31c8d64df79e7f2db3dc7ef6de6a939c4e37e73",
+      "overlay.background.color": "71c533043f85b14167e19e4c9d83e348894edb61",
+      "link.color": "5e0d352cfd35e039bbd73662cb477a64e129513b",
+      "link.color-hover": "01b7180d9910e8474b035efc07869d3ec053cdec",
+      "link.color-active": "913d33ec8322a23a658502d50aece519887b4dab",
+      "link.low-emphasis.color": "12bed9bc1003a50744d9d5a06477a27697378658",
+      "link.low-emphasis.color-hover": "fecb13d13dbba0e7a4976d7aed01e022afa4b48f",
+      "link.low-emphasis.color-active": "179fadf96ee958351558fe30e268a7218b589726",
+      "typography.color.text": "5ec65d3455f0e99ac3bfab776a47564fd3128a13",
+      "typography.color.text-inverted": "77a4e3e48f6f5b4519eca72c77b2b38d5ac0067d",
       "toggle.size.small": "59e798ea0cba4be9ea32e894e79cecd7b82cfded",
       "toggle.size.medium": "c853d6f661e4380daff9745e0e4b39e2b56637f3",
       "toggle.size.large": "8c9580c2db9de0c2ceb7553e99520d3a5c4a90d3",
+      "button.font-size.small": "e9b4ce0b4c5dc45ccdcff6efbfdf76de6afc8380",
+      "button.font-size.medium": "7ae158fdda63dba25f070476ae6809f173db0e0a",
+      "button.font-size.large": "52795a6ec1aa48e832c73ab0c7533053e887a20b",
       "input.color": "bc745cc91841ef07e91b5fb6a8ac1018eb4247bf",
       "input.color-hover": "17492033de110a4bcc43dcb1437516a4ad52df3b",
       "input.color-focus": "8642f42f34c8b021c8802ad57409ae401fbba742",
@@ -339,21 +380,29 @@
       "input.icon.icon-clearable.color-focus": "bc9ca2538e5308c35e9e0963320d220a91d2eab8",
       "input.placeholder.color": "e84537a67522aac7b98de44b92615252de3c45d7",
       "input.placeholder.color-disabled": "990261ec45dcb6c65d0a943a7d75c7242c35d277",
-      "input.required-content": "1b7090b1195ecd43c3d07c805e23f85c55d129a9",
-      "input.required-content-offset": "9c83452a5d8195f66598593c2f1f3fb68c45d758",
+      "input.required.content": "9e864fbe3c765fdc21649446f1887cd04dce67f7",
+      "input.required.content-color": "b19edca5d6de2360710bbeee7d6e566b8e6acf05",
+      "input.required.content-offset": "e3061910cdf5cf33b083b0a54ba9f79478152f04",
       "input.label.color": "ba3a82f7a87cf0e3dba37fa22b6bb120e1d0f954",
+      "input.label.font-size.small": "c0178d24e23f31609d665f5db94f4e20ab04479e",
+      "input.label.font-size.medium": "360941a4c6a59ada1d85bad9200da1df9fe95f71",
+      "input.label.font-size.large": "dfe5eb3a567e704f4b71667308da1fb76eaba0f7",
       "input.spacing.small": "761eeae11a5d5db0b9f287169fe518bf388d0ead",
       "input.spacing.medium": "83e3fb83e4da16cdf63a2bb8766b3889a1b522cb",
       "input.spacing.large": "717937cad33a5ea1fa31fd17ca4308a51864a773",
       "input.focus-ring.color": "bcfb57039745269f7cae825530c515483b553db1",
       "input.focus-ring.offset": "0c2b194ad8a3892f72c51ef583f940f80f0a0da7",
       "input.focus-ring.error": "990c1a5ff0acb5561de1391d59d64acbee0db591",
+      "input.disabled-opacity": "d15b2be0928291e559ad7dd26537682a5861f563",
       "input.readonly-background.color": "202fec4c3b10c4a85bd051a23fd11e635b691a9b",
       "input.readonly-background.color-hover": "99485e086679b6b82520908d2af565301ee2bfb8",
       "input.readonly-background.color-focus": "176aad43eb9f85cb824570850c1e1f3cac88ca25",
       "input.readonly-background.color-disabled": "410324cb496aaf9da36090d959acebbe80ae14e1",
       "input.help-text.color": "79ea482375f6cec5228b6bf0ea9c7fbb2505d9c6",
       "input.help-text.color-error": "9e62a851799b2b3c5021ae7cde72b92b34fdfb60",
+      "input.help-text.font-size.small": "0cd42f76f3933e174b6f62e2338180f34254dfe5",
+      "input.help-text.font-size.medium": "63f0f11f1e7c8010bc6feef12481f1aff47f0354",
+      "input.help-text.font-size.large": "18fda3186ab3dd2c202d6941d0cc8b7323ca2d02",
       "input.height.small": "424b7861abcecffc7cc6c3735ec28842f2e84ae7",
       "input.height.medium": "4bf50c4d8473a9f03cf3a09567c4459b62d57afc",
       "input.height.large": "c9ab4ffc73a9047178eca68979ef22e5878238af",
@@ -361,6 +410,9 @@
       "input.readonly.color-disabled": "dd753058470317fa489a113595530f7f3e097dfa",
       "input.readonly.color-hover": "d9e2c120038f5b2434a1adb2ed026ffcac5dbb94",
       "input.readonly.color-focus": "2b9ed719a33678da68b9e3a89fb148f75e0b04ce",
+      "input.font-size.small": "7380d84d1ea012e2d01d2d2a4e9ca8acb75089ff",
+      "input.font-size.medium": "330178493eac96b79d4d1dee6c2ab572cfffe6cc",
+      "input.font-size.large": "7601b7676a557b370ce8a1a6e26ad17ce873ccfc",
       "focus-ring.color": "4560189da085bbe8e1ce1fa9a615fa9b88869789",
       "focus-ring.width": "2e54bf95bfc688cc460e9f7606fb9631fd43aecc",
       "focus-ring.offset": "491c1017f3208a7c19a9ed70a4b1cc50001e01b4"

package/src/figma-tokens/_docs.json

@@ -1060,7 +1060,7 @@
           "value": "The invalid status is used to warn the user that the syn-file is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.",
           "type": "text"
         }
-      }     
+      }
     },
     "format-bytes": {
       "description": {
@@ -1368,6 +1368,68 @@
         }
       }
     },
+    "link": {
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable a Link.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that the Link has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "prefix-suffix-icons": {
+        "title": {
+          "value": "Prefix and Suffix Icons.",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the prefix and suffix slots to add icons.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Size",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change the Link size.",
+          "type": "text"
+        }
+      },
+      "inline": {
+        "title": {
+          "value": "Inline",
+          "type": "text"
+        },
+        "description": {
+          "value": "If a link is placed within body text, it only breaks if variant without icon is used. If an icon is needed, a line break applies, and the body text is placed above and below the link.",
+          "type": "text"
+        }
+      },
+      "quiet": {
+        "title": {
+          "value": "Quiet",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the Quiet attribute to have a low emphasis variant of a Link. This can be used if the link should not attract too much attention.",
+          "type": "text"
+        }
+      }
+    },
     "menu-item": {
       "default": {
         "description": {
@@ -2089,13 +2151,13 @@
           "type": "text"
         }
       },
-      "prefix": {
+      "prefix-suffix": {
         "title": {
-          "value": "Prefix Icons",
+          "value": "Prefix and Suffix Icons",
           "type": "text"
         },
         "description": {
-          "value": "Use the prefix slot to prepend an icon to the control.",
+          "value": "Use the prefix and suffix slots to add text and icons.",
           "type": "text"
         }
       },
@@ -2768,6 +2830,16 @@
           "value": "Font-Weights",
           "type": "text"
         }
+      },
+      "link": {
+        "description": {
+          "value": "Links can be used to display a link to other pages.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Link",
+          "type": "text"
+        }
       }
     },
     "templates": {
@@ -3201,6 +3273,16 @@
             "value": "Text colors",
             "type": "text"
           }
+        },
+        "link": {
+          "description": {
+            "value": "Default color used for links within the application",
+            "type": "text"
+          },
+          "title": {
+            "value": "Link colors",
+            "type": "text"
+          }
         }
       }
     },
@@ -3270,6 +3352,22 @@
           "title": {
             "value": "Body and UI text",
             "type": "text"
+          },
+          "xsmall-title": {
+            "value": "x-small",
+            "type": "text"
+          },
+          "small-title": {
+            "value": "small",
+            "type": "text"
+          },
+          "medium-title": {
+            "value": "medium",
+            "type": "text"
+          },
+          "large-title": {
+            "value": "large",
+            "type": "text"
           }
         }
       },
@@ -3483,4 +3581,4 @@
       }
     }
   }
-}
+}

package/src/figma-tokens/globals.json

@@ -426,5 +426,15 @@
       "type": "opacity",
       "description": "50%"
     }
+  },
+  "text-decoration": {
+    "default": {
+      "value": "none",
+      "type": "textDecoration"
+    },
+    "underline": {
+      "value": "underline",
+      "type": "textDecoration"
+    }
   }
 }

package/src/figma-tokens/semantic/link.json

@@ -0,0 +1,30 @@
+{
+  "link": {
+    "color": {
+      "value": "{primary.600}",
+      "type": "color"
+    },
+    "color-hover": {
+      "value": "{primary.900}",
+      "type": "color"
+    },
+    "color-active": {
+      "value": "{primary.950}",
+      "type": "color"
+    },
+    "quiet": {
+      "color": {
+        "value": "{typography.color.text}",
+        "type": "color"
+      },
+      "color-hover": {
+        "value": "{primary.900}",
+        "type": "color"
+      },
+      "color-active": {
+        "value": "{primary.950}",
+        "type": "color"
+      }
+    }
+  }
+}