@synergy-design-system/tokens 2.14.0 → 2.15.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v2.15.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.15.0...tokens/2.15.1) (2024-12-05)
+
+
+### Bug Fixes
+
+* 🐛 Upgrade style-dictionary to new major version ([#702](https://github.com/synergy-design-system/synergy-design-system/issues/702)) ([723aefa](https://github.com/synergy-design-system/synergy-design-system/commit/723aefabd13d54d4e05ef2a352c884de9d36cd8f))
+
+# [@synergy-design-system/tokens-v2.15.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.14.0...tokens/2.15.0) (2024-11-27)
+
+
+### Features
+
+* ✨ Create styles for a syn-link-list ([#678](https://github.com/synergy-design-system/synergy-design-system/issues/678)) ([ca3b99a](https://github.com/synergy-design-system/synergy-design-system/commit/ca3b99a828e2a078b538881f74324d0bee8fde66))
+
 # [@synergy-design-system/tokens-v2.14.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.13.0...tokens/2.14.0) (2024-11-21)
 
 

package/dist/js/index.d.ts

@@ -1,9 +1,8 @@
 /**
- * @synergy-design-system/tokens version 2.13.0
+ * @synergy-design-system/tokens version 2.15.0
  * SICK Global UX Foundation
  */
 
-
 /**
  * Maps to the css variable `--syn-font-size-x-small`
  */
@@ -1148,3 +1147,153 @@ export const SynColorNeutral950: string;
  * Maps to the css variable `--syn-color-neutral-1000`
  */
 export const SynColorNeutral1000: string;
+
+/**
+ * Maps to the css variable `--syn-border-radius-large`
+ */
+export const SynBorderRadiusLarge: string;
+
+/**
+ * Maps to the css variable `--syn-border-radius-x-large`
+ */
+export const SynBorderRadiusXLarge: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-x-small`
+ */
+export const SynShadowXSmall: string;
+
+/**
+ * Maps to the css variable `--syn-shadow-small`
+ */
+export const SynShadowSmall: string;
+
+/**
+ * Maps to the css variable `--syn-transition-x-slow`
+ */
+export const SynTransitionXSlow: string;
+
+/**
+ * Maps to the css variable `--syn-transition-slow`
+ */
+export const SynTransitionSlow: string;
+
+/**
+ * Maps to the css variable `--syn-transition-medium`
+ */
+export const SynTransitionMedium: string;
+
+/**
+ * Maps to the css variable `--syn-transition-fast`
+ */
+export const SynTransitionFast: string;
+
+/**
+ * Maps to the css variable `--syn-transition-x-fast`
+ */
+export const SynTransitionXFast: string;
+
+/**
+ * Maps to the css variable `--syn-font-serif`
+ */
+export const SynFontSerif: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-2x-small`
+ */
+export const SynFontSize2xSmall: string;
+
+/**
+ * Maps to the css variable `--syn-font-size-4x-large`
+ */
+export const SynFontSize4xLarge: string;
+
+/**
+ * Maps to the css variable `--syn-font-weight-light`
+ */
+export const SynFontWeightLight: string;
+
+/**
+ * Maps to the css variable `--syn-letter-spacing-denser`
+ */
+export const SynLetterSpacingDenser: string;
+
+/**
+ * Maps to the css variable `--syn-letter-spacing-dense`
+ */
+export const SynLetterSpacingDense: string;
+
+/**
+ * Maps to the css variable `--syn-letter-spacing-normal`
+ */
+export const SynLetterSpacingNormal: string;
+
+/**
+ * Maps to the css variable `--syn-letter-spacing-loose`
+ */
+export const SynLetterSpacingLoose: string;
+
+/**
+ * Maps to the css variable `--syn-letter-spacing-looser`
+ */
+export const SynLetterSpacingLooser: string;
+
+/**
+ * Maps to the css variable `--syn-focus-ring-style`
+ */
+export const SynFocusRingStyle: string;
+
+/**
+ * Maps to the css variable `--syn-focus-ring`
+ */
+export const SynFocusRing: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-color-disabled`
+ */
+export const SynInputBorderColorDisabled: string;
+
+/**
+ * Maps to the css variable `--syn-input-border-width`
+ */
+export const SynInputBorderWidth: string;
+
+/**
+ * Maps to the css variable `--syn-input-font-family`
+ */
+export const SynInputFontFamily: string;
+
+/**
+ * Maps to the css variable `--syn-input-font-weight`
+ */
+export const SynInputFontWeight: string;
+
+/**
+ * Maps to the css variable `--syn-input-letter-spacing`
+ */
+export const SynInputLetterSpacing: string;
+
+/**
+ * Maps to the css variable `--syn-z-index-drawer`
+ */
+export const SynZIndexDrawer: string;
+
+/**
+ * Maps to the css variable `--syn-z-index-dialog`
+ */
+export const SynZIndexDialog: string;
+
+/**
+ * Maps to the css variable `--syn-z-index-dropdown`
+ */
+export const SynZIndexDropdown: string;
+
+/**
+ * Maps to the css variable `--syn-z-index-toast`
+ */
+export const SynZIndexToast: string;
+
+/**
+ * Maps to the css variable `--syn-z-index-tooltip`
+ */
+export const SynZIndexTooltip: string;

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.13.0
+ * @synergy-design-system/tokens version 2.15.0
  * SICK Global UX Foundation
  */
 
@@ -1147,3 +1147,153 @@ export const SynColorNeutral950 = 'var(--syn-color-neutral-950)';
  * @type {string}
  */
 export const SynColorNeutral1000 = 'var(--syn-color-neutral-1000)';
+
+/**
+ * @type {string}
+ */
+export const SynBorderRadiusLarge = 'var(--syn-border-radius-large)';
+
+/**
+ * @type {string}
+ */
+export const SynBorderRadiusXLarge = 'var(--syn-border-radius-x-large)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowXSmall = 'var(--syn-shadow-x-small)';
+
+/**
+ * @type {string}
+ */
+export const SynShadowSmall = 'var(--syn-shadow-small)';
+
+/**
+ * @type {string}
+ */
+export const SynTransitionXSlow = 'var(--syn-transition-x-slow)';
+
+/**
+ * @type {string}
+ */
+export const SynTransitionSlow = 'var(--syn-transition-slow)';
+
+/**
+ * @type {string}
+ */
+export const SynTransitionMedium = 'var(--syn-transition-medium)';
+
+/**
+ * @type {string}
+ */
+export const SynTransitionFast = 'var(--syn-transition-fast)';
+
+/**
+ * @type {string}
+ */
+export const SynTransitionXFast = 'var(--syn-transition-x-fast)';
+
+/**
+ * @type {string}
+ */
+export const SynFontSerif = 'var(--syn-font-serif)';
+
+/**
+ * @type {string}
+ */
+export const SynFontSize2xSmall = 'var(--syn-font-size-2x-small)';
+
+/**
+ * @type {string}
+ */
+export const SynFontSize4xLarge = 'var(--syn-font-size-4x-large)';
+
+/**
+ * @type {string}
+ */
+export const SynFontWeightLight = 'var(--syn-font-weight-light)';
+
+/**
+ * @type {string}
+ */
+export const SynLetterSpacingDenser = 'var(--syn-letter-spacing-denser)';
+
+/**
+ * @type {string}
+ */
+export const SynLetterSpacingDense = 'var(--syn-letter-spacing-dense)';
+
+/**
+ * @type {string}
+ */
+export const SynLetterSpacingNormal = 'var(--syn-letter-spacing-normal)';
+
+/**
+ * @type {string}
+ */
+export const SynLetterSpacingLoose = 'var(--syn-letter-spacing-loose)';
+
+/**
+ * @type {string}
+ */
+export const SynLetterSpacingLooser = 'var(--syn-letter-spacing-looser)';
+
+/**
+ * @type {string}
+ */
+export const SynFocusRingStyle = 'var(--syn-focus-ring-style)';
+
+/**
+ * @type {string}
+ */
+export const SynFocusRing = 'var(--syn-focus-ring)';
+
+/**
+ * @type {string}
+ */
+export const SynInputBorderColorDisabled = 'var(--syn-input-border-color-disabled)';
+
+/**
+ * @type {string}
+ */
+export const SynInputBorderWidth = 'var(--syn-input-border-width)';
+
+/**
+ * @type {string}
+ */
+export const SynInputFontFamily = 'var(--syn-input-font-family)';
+
+/**
+ * @type {string}
+ */
+export const SynInputFontWeight = 'var(--syn-input-font-weight)';
+
+/**
+ * @type {string}
+ */
+export const SynInputLetterSpacing = 'var(--syn-input-letter-spacing)';
+
+/**
+ * @type {string}
+ */
+export const SynZIndexDrawer = 'var(--syn-z-index-drawer)';
+
+/**
+ * @type {string}
+ */
+export const SynZIndexDialog = 'var(--syn-z-index-dialog)';
+
+/**
+ * @type {string}
+ */
+export const SynZIndexDropdown = 'var(--syn-z-index-dropdown)';
+
+/**
+ * @type {string}
+ */
+export const SynZIndexToast = 'var(--syn-z-index-toast)';
+
+/**
+ * @type {string}
+ */
+export const SynZIndexTooltip = 'var(--syn-z-index-tooltip)';

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 2.13.0
+ * @synergy-design-system/tokens version 2.15.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -231,3 +231,33 @@ $SynColorNeutral800: var(--syn-color-neutral-800) !default;
 $SynColorNeutral900: var(--syn-color-neutral-900) !default;
 $SynColorNeutral950: var(--syn-color-neutral-950) !default;
 $SynColorNeutral1000: var(--syn-color-neutral-1000) !default;
+$SynBorderRadiusLarge: var(--syn-border-radius-large) !default;
+$SynBorderRadiusXLarge: var(--syn-border-radius-x-large) !default;
+$SynShadowXSmall: var(--syn-shadow-x-small) !default;
+$SynShadowSmall: var(--syn-shadow-small) !default;
+$SynTransitionXSlow: var(--syn-transition-x-slow) !default;
+$SynTransitionSlow: var(--syn-transition-slow) !default;
+$SynTransitionMedium: var(--syn-transition-medium) !default;
+$SynTransitionFast: var(--syn-transition-fast) !default;
+$SynTransitionXFast: var(--syn-transition-x-fast) !default;
+$SynFontSerif: var(--syn-font-serif) !default;
+$SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
+$SynFontSize4xLarge: var(--syn-font-size-4x-large) !default;
+$SynFontWeightLight: var(--syn-font-weight-light) !default;
+$SynLetterSpacingDenser: var(--syn-letter-spacing-denser) !default;
+$SynLetterSpacingDense: var(--syn-letter-spacing-dense) !default;
+$SynLetterSpacingNormal: var(--syn-letter-spacing-normal) !default;
+$SynLetterSpacingLoose: var(--syn-letter-spacing-loose) !default;
+$SynLetterSpacingLooser: var(--syn-letter-spacing-looser) !default;
+$SynFocusRingStyle: var(--syn-focus-ring-style) !default;
+$SynFocusRing: var(--syn-focus-ring) !default;
+$SynInputBorderColorDisabled: var(--syn-input-border-color-disabled) !default;
+$SynInputBorderWidth: var(--syn-input-border-width) !default;
+$SynInputFontFamily: var(--syn-input-font-family) !default;
+$SynInputFontWeight: var(--syn-input-font-weight) !default;
+$SynInputLetterSpacing: var(--syn-input-letter-spacing) !default;
+$SynZIndexDrawer: var(--syn-z-index-drawer) !default;
+$SynZIndexDialog: var(--syn-z-index-dialog) !default;
+$SynZIndexDropdown: var(--syn-z-index-dropdown) !default;
+$SynZIndexToast: var(--syn-z-index-toast) !default;
+$SynZIndexTooltip: var(--syn-z-index-tooltip) !default;

package/dist/themes/dark.css

@@ -1,12 +1,12 @@
 /**
- * @synergy-design-system/tokens version 2.13.0
+ * @synergy-design-system/tokens version 2.15.0
  * SICK Global UX Foundation
- * Do not edit directly
- * Generated on Thu, 21 Nov 2024 12:46:27 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root, .syn-theme-dark {
   color-scheme: dark;
+
   --syn-font-size-x-small: 12px;
   --syn-font-size-small: 14px;
   --syn-font-size-medium: 16px;
@@ -34,8 +34,7 @@
   --syn-shadow-overflow-up: 0 -1px 4px 0 rgba(249, 250, 251, 0.12), 0 -3px 8px 0 rgba(249, 250, 251, 0.12), 0 -4px 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Up */
   --syn-shadow-overflow-left: -1px 0 4px 0 rgba(249, 250, 251, 0.12), -3px 0 8px 0 rgba(249, 250, 251, 0.12), -4px 0 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Left */
   --syn-shadow-overflow-right: 1px 0 4px 0 rgba(249, 250, 251, 0.12), 3px 0 8px 0 rgba(249, 250, 251, 0.12), 4px 0 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Right */
-  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Open Sans */
+  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Open Sans */
   --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   --syn-spacing-4x-small: calc(4px / 4);
   --syn-spacing-3x-small: calc(4px / 2);

package/dist/themes/light.css

@@ -1,12 +1,12 @@
 /**
- * @synergy-design-system/tokens version 2.13.0
+ * @synergy-design-system/tokens version 2.15.0
  * SICK Global UX Foundation
- * Do not edit directly
- * Generated on Thu, 21 Nov 2024 12:46:27 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root, .syn-theme-light {
   color-scheme: light;
+
   --syn-font-size-x-small: 12px;
   --syn-font-size-small: 14px;
   --syn-font-size-medium: 16px;
@@ -34,8 +34,7 @@
   --syn-shadow-overflow-up: 0 -1px 4px 0 rgba(49, 55, 58, 0.12), 0 -3px 8px 0 rgba(49, 55, 58, 0.12), 0 -4px 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Up */
   --syn-shadow-overflow-left: -1px 0 4px 0 rgba(49, 55, 58, 0.12), -3px 0 8px 0 rgba(49, 55, 58, 0.12), -4px 0 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Left */
   --syn-shadow-overflow-right: 1px 0 4px 0 rgba(49, 55, 58, 0.12), 3px 0 8px 0 rgba(49, 55, 58, 0.12), 4px 0 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Right */
-  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Open Sans */
+  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Open Sans */
   --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   --syn-spacing-4x-small: calc(4px / 4);
   --syn-spacing-3x-small: calc(4px / 2);

package/package.json

@@ -3,28 +3,34 @@
     "name": "SICK Global UX Foundation",
     "url": "https://www.sick.com"
   },
-  "description": "Design tokens for the SICK Design System",
+  "description": "Design tokens for Synergy, the SICK Design System",
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@tokens-studio/sd-transforms": "^0.14.4",
+    "@tokens-studio/sd-transforms": "^1.2.8",
+    "@types/node": "^20.17.6",
     "chalk": "^5.3.0",
     "change-case": "^5.4.4",
     "eslint": "^8.57.1",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
     "rimraf": "^6.0.1",
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "7.0.5",
-    "style-dictionary": "^3.9.2",
+    "style-dictionary": "^4.2.0",
     "stylelint": "^16.10.0",
+    "typescript": "^5.7.2",
     "@synergy-design-system/eslint-config-syn": "0.1.0",
     "@synergy-design-system/stylelint-config-syn": "0.1.0"
   },
   "exports": {
     ".": {
       "types": "./dist/js/index.d.ts",
-      "import": "./dist/js/index.js"
+      "import": "./dist/js/index.js",
+      "default": "./dist/js/index.js"
+    },
+    "./package.json": {
+      "default": "./package.json"
     },
     "./themes/*": "./dist/themes/*",
     "./scss/*": "./dist/scss/*"
@@ -101,14 +107,15 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "2.14.0",
+  "version": "2.15.1",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",
     "lint:css": "stylelint \"dist/**/*.css\"",
-    "lint:js": "eslint scripts",
+    "lint:js": "eslint scripts dist/js",
+    "lint:types": "tsc --noEmit",
     "lint": "pnpm run /^lint:.*/",
-    "format.eslint": "pnpm lint --fix",
+    "format.eslint": "pnpm lint:js --fix",
     "start": "pnpm build",
     "release": "semantic-release  --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
     "release.dry": "semantic-release --dry-run --tagFormat 'tokens/${version}' -e semantic-release-monorepo"

package/src/figma-tokens/_docs.json

@@ -1440,6 +1440,38 @@
         }
       }
     },
+    "link-list": {
+      "horizontal": {
+        "title": {
+          "value": "Horizontal",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the horizontal attribute to indicate that it is used as a horizontal link list.",
+          "type": "text"
+        }
+      },
+      "multiline": {
+        "title": {
+          "value": "Multiline",
+          "type": "text"
+        },
+        "description": {
+          "value": "The horizontal link list automatically wraps into a new line if there is not enough space available.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Size",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change the link list size.",
+          "type": "text"
+        }
+      }
+    },
     "menu-item": {
       "default": {
         "description": {
@@ -2850,6 +2882,16 @@
           "value": "Links can be used to display a link to other pages.",
           "type": "text"
         }
+      },
+      "link-list": {
+        "description": {
+          "value": "Links can be grouped horizontally or vertically.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Link list",
+          "type": "text"
+        }
       }
     },
     "templates": {