@synergy-design-system/tokens 2.8.0 → 2.10.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.10.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.9.0...tokens/2.10.0) (2024-09-24)
+
+
+### Features
+
+* ✨add syn-combobox ([#542](https://github.com/synergy-design-system/synergy-design-system/issues/542)) ([9be251b](https://github.com/synergy-design-system/synergy-design-system/commit/9be251b327f9ea63fb29c1194d2471d87c195ed4))
+
+# [@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)
 
 

package/README.md

@@ -1,7 +1,7 @@
 # @synergy-design-system/tokens
 
-This package provides the design tokens that form the base for all components of the synergy design system.
-It provides multiple exports for colors, spacings, shadows, sizings, etc. that can be also consumed by applications directly.
+This package provides the design tokens that form the base for all components of the Synergy Design System.
+It provides exports for colors, spacings, shadows, sizings, typography and more that can be also consumed by applications directly.
 
 The source of the tokens can be found at [Figma](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=104-235&mode=design&t=GPu4VVd9yffLLAaS-0)
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.7.0
+ * @synergy-design-system/tokens version 2.9.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.7.0
+ * @synergy-design-system/tokens version 2.9.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.7.0
+ * @synergy-design-system/tokens version 2.9.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.7.0
+ * @synergy-design-system/tokens version 2.9.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 08:17:47 GMT
+ * Generated on Tue, 24 Sep 2024 09:48:08 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.7.0
+ * @synergy-design-system/tokens version 2.9.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Fri, 23 Aug 2024 08:17:47 GMT
+ * Generated on Tue, 24 Sep 2024 09:48:08 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

@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "2.8.0",
+  "version": "2.10.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": {
@@ -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": {
@@ -2810,6 +2882,36 @@
           "value": "These examples demonstrate the usage of the syn-table-cell component in various contexts. The examples are intended solely for illustrating how syn-table-cell can be used to style tables.",
           "type": "text"
         }
+      },
+      "footer": {
+        "title": {
+          "value": "Footer",
+          "type": "text"
+        },
+        "description": {
+          "value": "The footer is the area located at the bottom of the application window, below the content area.\n\nThe footer may contain one or more links pointing to legal information items as well as a copyright symbol and current year. The standard links can include things like:
\n- Imprint (e.g. https://www.sick.com/imprint)\n- Terms and conditions (e.g. https://www.sick.com/tac)\n- Terms of use (e.g. https://www.sick.com/terms-of-use)\n- Data protection (e.g. https://www.sick.com/dataprotection)\n\nIf you don't want to use the links in the footer, please make sure to include the legal required links somewhere else.\n\nThe footer links can be placed on any background color. If you need a more compact version of the footer, simply adjust the top and bottom margins from spacing.large (24px) to spacing.medium (16px).",
+          "type": "text"
+        }
+      },
+      "link-list": {
+        "title": {
+          "value": "Link list",
+          "type": "text"
+        },
+        "description": {
+          "value": "These examples demonstrate the usage of syn-link in simple grouping contexts: Horizontal and Vertical alignment.",
+          "type": "text"
+        }
+      },
+      "tag": {
+        "title": {
+          "value": "Tag",
+          "type": "text"
+        },
+        "description": {
+          "value": "These examples demonstrate the usage of syn-tag in various contexts: In combination with multiple filters and within a standalone tag group.",
+          "type": "text"
+        }
       }
     },
     "nav-item": {
@@ -3099,6 +3201,168 @@
           "type": "text"
         }
       }
+    },
+    "combobox": {
+      "default": {
+        "title": {
+          "value": "Combobox",
+          "type": "text"
+        },
+        "description": {
+          "value": "The combobox suggests items based on the user input.",
+          "type": "text"
+        }
+      },
+      "label": {
+        "title": {
+          "value": "Labels",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to give the combobox an accessible label. For labels that contain HTML, use the label slot instead.",
+          "type": "text"
+        }
+      },
+      "help-text": {
+        "title": {
+          "value": "Help Text",
+          "type": "text"
+        },
+        "description": {
+          "value": "Add descriptive help text to a combobox with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
+          "type": "text"
+        }
+      },
+      "placeholder": {
+        "title": {
+          "value": "Placeholder",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the placeholder attribute to add a placeholder.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus / Active",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus attribute provides feedback to the users, informing them that the combobox component is ready for use.",
+          "type": "text"
+        }
+      },
+      "simple": {
+        "title": {
+          "value": "Simple suggests",
+          "type": "text"
+        },
+        "description": {
+          "value": "A simple suggestions list shows the user a filtered list.",
+          "type": "text"
+        }
+      },
+      "highlight": {
+        "title": {
+          "value": "Highlight Query",
+          "type": "text"
+        },
+        "description": {
+          "value": "The filtered options shown in the list can be customized by passing a function to the getOption property. Your function can return a string of HTML, a Lit Template, or an HTMLElement. The getOption() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.\n\nRemember that the options are rendered in a shadow root. To style them, you can use the style attribute in your template or you can add your own parts and target them with the ::part() selector.\n\n **Note:** Be sure you trust the content you are outputting! Passing unsanitized user input to getOption() can result in XSS vulnerabilities.",
+          "type": "text"
+        }
+      },
+      "grouping": {
+        "title": {
+          "value": "Grouping Query",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use <syn-optgroup> to group <syn-option>`s visually.",
+          "type": "text"
+        }
+      },
+      "container-height": {
+        "title": {
+          "value": "Suggestion Container Height",
+          "type": "text"
+        },
+        "description": {
+          "value": "The height of the filtered options list can be customized by setting the `max-height` on the `listbox` part of the combobox.",
+          "type": "text"
+        }
+      },
+      "clearable": {
+        "title": {
+          "value": "Clearable",
+          "type": "text"
+        },
+        "description": {
+          "value": "Add the clearable attribute to add a clear button when the combobox has content.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable a combobox.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a combobox size.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the combobox is invalid. For example, if the entry is mandatory.",
+          "type": "text"
+        }
+      },
+      "preffix-sufffix": {
+        "title": {
+          "value": "Prefix Suffix Text and Icons",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the prefix and suffix slots to add text and icons.",
+          "type": "text"
+        }
+      },
+      "async-options": {
+        "title": {
+          "value": "Async Options",
+          "type": "text"
+        },
+        "description": {
+          "value": "It is possible to add options dynamically to the combobox e.g. if the option values need to be fetched asynchronously from a remote server or API.",
+          "type": "text"
+        }
+      },
+      "custom-filter": {
+        "title": {
+          "value": "Custom filter",
+          "type": "text"
+        },
+        "description": {
+          "value": "A custom filter can be applied by passing a filter function to the `filter` property. This filter() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.",
+          "type": "text"
+        }
+      }
     }
   },
   "assets": {
@@ -3201,6 +3465,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 +3544,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 +3773,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"
+      }
+    }
+  }
+}