@synergy-design-system/mcp 2.9.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 2.11.0
+
+### Minor Changes
+
+- [#1211](https://github.com/synergy-design-system/synergy-design-system/pull/1211) [`8d3e2a7`](https://github.com/synergy-design-system/synergy-design-system/commit/8d3e2a712619cb94938083620168caafc091323f) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  feat: ✨ tokens: export muted color palette (#1210)
+
+  This release adds the muted color palette, as well as 3 new data color palettes from Figma to the `@synergy-design-system/tokens` package.
+
+## 2.10.0
+
+### Minor Changes
+
+- [#1216](https://github.com/synergy-design-system/synergy-design-system/pull/1216) [`fa7ebf8`](https://github.com/synergy-design-system/synergy-design-system/commit/fa7ebf8ca9aef4e246f75688711c7dbb24cb25cb) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  feat: ✨ `<syn-combobox>` should support `maxlength` attribute (#1184)
+
+  This release adds the ability to set a maximal input length for `<syn-combobox>` via `<syn-combobox maxlength="5">`.
+  This provides the ability to set the maximal amount of free text input for the comboboxes input field.
+  It still allows to use options from the list of available options and works as a restriction for free text only.
+
 ## 2.9.0
 
 ### Minor Changes

package/metadata/checksum.txt

@@ -1 +1 @@
-9b61dd848d186c06c6cdfc4646c64d6f
+8ff3b2f94fdeb4b49a8f7f96d20fab34

package/metadata/packages/components/components/syn-combobox/component.angular.ts

@@ -265,6 +265,17 @@ and `hide()` methods and this attribute will reflect the combobox's open state.
     return this.nativeElement.label;
   }
 
+  /**
+   * The maximum length of input that will be considered valid.
+   */
+  @Input()
+  set maxlength(v: SynCombobox['maxlength']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.maxlength = v));
+  }
+  get maxlength(): SynCombobox['maxlength'] {
+    return this.nativeElement.maxlength;
+  }
+
   /**
 * The preferred placement of the combobox's menu.
 Note that the actual placement may vary as needed to keep the listbox inside of the viewport.

package/metadata/packages/components/components/syn-combobox/component.ts

@@ -3,6 +3,7 @@
 /* eslint-disable no-underscore-dangle */
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -228,6 +229,9 @@ export default class SynCombobox extends SynergyElement implements SynergyFormCo
   /** The combobox's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
+  /** The maximum length of input that will be considered valid. */
+  @property({ type: Number }) maxlength: number;
+
   /**
    * The preferred placement of the combobox's menu.
    * Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
@@ -1563,6 +1567,7 @@ export default class SynCombobox extends SynergyElement implements SynergyFormCo
                 .disabled=${this.disabled}
                 .readOnly=${this.readonly}
                 .value=${this.displayLabel}
+                maxlength=${ifDefined(this.maxlength)}
                 autocomplete="off"
                 spellcheck="false"
                 autocapitalize="off"

package/metadata/packages/components/components/syn-combobox/component.vue

@@ -135,6 +135,11 @@ and `hide()` methods and this attribute will reflect the combobox's open state.
    */
   label?: SynCombobox['label'];
 
+  /**
+   * The maximum length of input that will be considered valid.
+   */
+  maxlength?: SynCombobox['maxlength'];
+
   /**
 * The preferred placement of the combobox's menu.
 Note that the actual placement may vary as needed to keep the listbox inside of the viewport.

package/metadata/packages/components/static/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 3.9.0
+
+### Patch Changes
+
+- Updated dependencies [[`8d3e2a7`](https://github.com/synergy-design-system/synergy-design-system/commit/8d3e2a712619cb94938083620168caafc091323f)]:
+  - @synergy-design-system/tokens@3.9.0
+
+## 3.8.0
+
+### Minor Changes
+
+- [#1216](https://github.com/synergy-design-system/synergy-design-system/pull/1216) [`fa7ebf8`](https://github.com/synergy-design-system/synergy-design-system/commit/fa7ebf8ca9aef4e246f75688711c7dbb24cb25cb) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  feat: ✨ `<syn-combobox>` should support `maxlength` attribute (#1184)
+
+  This release adds the ability to set a maximal input length for `<syn-combobox>` via `<syn-combobox maxlength="5">`.
+  This provides the ability to set the maximal amount of free text input for the comboboxes input field.
+  It still allows to use options from the list of available options and works as a restriction for free text only.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @synergy-design-system/tokens@3.8.0
+
 ## 3.7.0
 
 ### Minor Changes

package/metadata/packages/tokens/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 3.9.0
+
+### Minor Changes
+
+- [#1211](https://github.com/synergy-design-system/synergy-design-system/pull/1211) [`8d3e2a7`](https://github.com/synergy-design-system/synergy-design-system/commit/8d3e2a712619cb94938083620168caafc091323f) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
+
+  feat: ✨ tokens: export muted color palette (#1210)
+
+  This release adds the muted color palette, as well as 3 new data color palettes from Figma to the `@synergy-design-system/tokens` package.
+
+## 3.8.0
+
 ## 3.7.0
 
 ### Minor Changes

package/metadata/packages/tokens/dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.2
+ * @synergy-design-system/tokens version 3.8.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -93,6 +93,39 @@
   --syn-color-critical-800: #ffeba5;
   --syn-color-critical-900: #fff7d3;
   --syn-color-critical-950: #fffbec;
+  --syn-color-data-magenta-50: #51062c;
+  --syn-color-data-magenta-100: #85164f;
+  --syn-color-data-magenta-200: #a0145b;
+  --syn-color-data-magenta-300: #c1156e;
+  --syn-color-data-magenta-400: #e13393;
+  --syn-color-data-magenta-500: #ef45ab;
+  --syn-color-data-magenta-600: #f76fc5;
+  --syn-color-data-magenta-700: #fba6dd;
+  --syn-color-data-magenta-800: #fcceed;
+  --syn-color-data-magenta-900: #fce7f5;
+  --syn-color-data-magenta-950: #fdf2f9;
+  --syn-color-data-purple-50: #3c0151;
+  --syn-color-data-purple-100: #5e1679;
+  --syn-color-data-purple-200: #6f1395;
+  --syn-color-data-purple-300: #8515b6;
+  --syn-color-data-purple-400: #9d1edb;
+  --syn-color-data-purple-500: #b73ef7;
+  --syn-color-data-purple-600: #c457ff;
+  --syn-color-data-purple-700: #e0a7ff;
+  --syn-color-data-purple-800: #ebceff;
+  --syn-color-data-purple-900: #f6e7ff;
+  --syn-color-data-purple-950: #faf3ff;
+  --syn-color-data-teal-50: #002f33;
+  --syn-color-data-teal-100: #0d5354;
+  --syn-color-data-teal-200: #0a6365;
+  --syn-color-data-teal-300: #057f80;
+  --syn-color-data-teal-400: #009797;
+  --syn-color-data-teal-500: #04c8c3;
+  --syn-color-data-teal-600: #1de4dd;
+  --syn-color-data-teal-700: #51f7ec;
+  --syn-color-data-teal-800: #90fff3;
+  --syn-color-data-teal-900: #c7fff9;
+  --syn-color-data-teal-950: #effefc;
   --syn-color-error-50: #450709;
   --syn-color-error-100: #6c0c0e;
   --syn-color-error-200: #941013;
@@ -115,6 +148,17 @@
   --syn-color-info-800: #a6e9ff;
   --syn-color-info-900: #dff4ff;
   --syn-color-info-950: #effaff;
+  --syn-color-muted-50: #2a2120;
+  --syn-color-muted-100: #50423e;
+  --syn-color-muted-200: #614e4b;
+  --syn-color-muted-300: #765f58;
+  --syn-color-muted-400: #8d7269;
+  --syn-color-muted-500: #ab988c;
+  --syn-color-muted-600: #d5ccc5;
+  --syn-color-muted-700: #e6e1dc;
+  --syn-color-muted-800: #ece8e5;
+  --syn-color-muted-900: #f2f0ed;
+  --syn-color-muted-950: #f8f7f6;
   --syn-color-neutral-0: #000206;
   --syn-color-neutral-50: #00051a;
   --syn-color-neutral-100: #000a37;

package/metadata/packages/tokens/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.2
+ * @synergy-design-system/tokens version 3.8.0
  * SICK Global UX Foundation
  */
 
@@ -433,6 +433,171 @@ export const SynColorCritical900 = 'var(--syn-color-critical-900)';
  */
 export const SynColorCritical950 = 'var(--syn-color-critical-950)';
 
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta50 = 'var(--syn-color-data-magenta-50)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta100 = 'var(--syn-color-data-magenta-100)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta200 = 'var(--syn-color-data-magenta-200)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta300 = 'var(--syn-color-data-magenta-300)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta400 = 'var(--syn-color-data-magenta-400)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta500 = 'var(--syn-color-data-magenta-500)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta600 = 'var(--syn-color-data-magenta-600)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta700 = 'var(--syn-color-data-magenta-700)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta800 = 'var(--syn-color-data-magenta-800)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta900 = 'var(--syn-color-data-magenta-900)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataMagenta950 = 'var(--syn-color-data-magenta-950)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple50 = 'var(--syn-color-data-purple-50)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple100 = 'var(--syn-color-data-purple-100)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple200 = 'var(--syn-color-data-purple-200)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple300 = 'var(--syn-color-data-purple-300)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple400 = 'var(--syn-color-data-purple-400)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple500 = 'var(--syn-color-data-purple-500)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple600 = 'var(--syn-color-data-purple-600)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple700 = 'var(--syn-color-data-purple-700)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple800 = 'var(--syn-color-data-purple-800)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple900 = 'var(--syn-color-data-purple-900)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataPurple950 = 'var(--syn-color-data-purple-950)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal50 = 'var(--syn-color-data-teal-50)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal100 = 'var(--syn-color-data-teal-100)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal200 = 'var(--syn-color-data-teal-200)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal300 = 'var(--syn-color-data-teal-300)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal400 = 'var(--syn-color-data-teal-400)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal500 = 'var(--syn-color-data-teal-500)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal600 = 'var(--syn-color-data-teal-600)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal700 = 'var(--syn-color-data-teal-700)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal800 = 'var(--syn-color-data-teal-800)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal900 = 'var(--syn-color-data-teal-900)';
+
+/**
+ * @type {string}
+ */
+export const SynColorDataTeal950 = 'var(--syn-color-data-teal-950)';
+
 /**
  * @type {string}
  */
@@ -543,6 +708,61 @@ export const SynColorInfo900 = 'var(--syn-color-info-900)';
  */
 export const SynColorInfo950 = 'var(--syn-color-info-950)';
 
+/**
+ * @type {string}
+ */
+export const SynColorMuted50 = 'var(--syn-color-muted-50)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted100 = 'var(--syn-color-muted-100)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted200 = 'var(--syn-color-muted-200)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted300 = 'var(--syn-color-muted-300)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted400 = 'var(--syn-color-muted-400)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted500 = 'var(--syn-color-muted-500)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted600 = 'var(--syn-color-muted-600)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted700 = 'var(--syn-color-muted-700)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted800 = 'var(--syn-color-muted-800)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted900 = 'var(--syn-color-muted-900)';
+
+/**
+ * @type {string}
+ */
+export const SynColorMuted950 = 'var(--syn-color-muted-950)';
+
 /**
  * @type {string}
  */

package/metadata/packages/tokens/light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.2
+ * @synergy-design-system/tokens version 3.8.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -93,6 +93,39 @@
   --syn-color-critical-800: #a1520b;
   --syn-color-critical-900: #82450c;
   --syn-color-critical-950: #462104;
+  --syn-color-data-magenta-50: #fdf2f9;
+  --syn-color-data-magenta-100: #fce7f5;
+  --syn-color-data-magenta-200: #fcceed;
+  --syn-color-data-magenta-300: #fba6dd;
+  --syn-color-data-magenta-400: #f76fc5;
+  --syn-color-data-magenta-500: #ef45ab;
+  --syn-color-data-magenta-600: #e13393;
+  --syn-color-data-magenta-700: #c1156e;
+  --syn-color-data-magenta-800: #a0145b;
+  --syn-color-data-magenta-900: #85164f;
+  --syn-color-data-magenta-950: #51062c;
+  --syn-color-data-purple-50: #faf3ff;
+  --syn-color-data-purple-100: #f6e7ff;
+  --syn-color-data-purple-200: #ebceff;
+  --syn-color-data-purple-300: #e0a7ff;
+  --syn-color-data-purple-400: #c457ff;
+  --syn-color-data-purple-500: #b73ef7;
+  --syn-color-data-purple-600: #9d1edb;
+  --syn-color-data-purple-700: #8515b6;
+  --syn-color-data-purple-800: #6f1395;
+  --syn-color-data-purple-900: #5e1679;
+  --syn-color-data-purple-950: #3c0151;
+  --syn-color-data-teal-50: #effefc;
+  --syn-color-data-teal-100: #c7fff9;
+  --syn-color-data-teal-200: #90fff3;
+  --syn-color-data-teal-300: #51f7ec;
+  --syn-color-data-teal-400: #1de4dd;
+  --syn-color-data-teal-500: #04c8c3;
+  --syn-color-data-teal-600: #009797;
+  --syn-color-data-teal-700: #057f80;
+  --syn-color-data-teal-800: #0a6365;
+  --syn-color-data-teal-900: #0d5354;
+  --syn-color-data-teal-950: #002f33;
   --syn-color-error-50: #fff1f1;
   --syn-color-error-100: #ffe3e4;
   --syn-color-error-200: #ffcfd1;
@@ -115,6 +148,17 @@
   --syn-color-info-800: #02628a;
   --syn-color-info-900: #085172;
   --syn-color-info-950: #06334b;
+  --syn-color-muted-50: #f8f7f6;
+  --syn-color-muted-100: #f2f0ed;
+  --syn-color-muted-200: #ece8e5;
+  --syn-color-muted-300: #e6e1dc;
+  --syn-color-muted-400: #d5ccc5;
+  --syn-color-muted-500: #ab988c;
+  --syn-color-muted-600: #8d7269;
+  --syn-color-muted-700: #765f58;
+  --syn-color-muted-800: #614e4b;
+  --syn-color-muted-900: #50423e;
+  --syn-color-muted-950: #2a2120;
   --syn-color-neutral-0: #ffffff;
   --syn-color-neutral-50: #f2f2f2;
   --syn-color-neutral-100: #e7e7e7;

package/metadata/packages/tokens/sick2018_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.2
+ * @synergy-design-system/tokens version 3.8.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -93,6 +93,39 @@
   --syn-color-critical-800: #ffe685;
   --syn-color-critical-900: #fff2c5;
   --syn-color-critical-950: #fffbea;
+  --syn-color-data-magenta-50: #51062c;
+  --syn-color-data-magenta-100: #85164f;
+  --syn-color-data-magenta-200: #a0145b;
+  --syn-color-data-magenta-300: #c1156e;
+  --syn-color-data-magenta-400: #e13393;
+  --syn-color-data-magenta-500: #ef45ab;
+  --syn-color-data-magenta-600: #f76fc5;
+  --syn-color-data-magenta-700: #fba6dd;
+  --syn-color-data-magenta-800: #fcceed;
+  --syn-color-data-magenta-900: #fce7f5;
+  --syn-color-data-magenta-950: #fdf2f9;
+  --syn-color-data-purple-50: #3c0151;
+  --syn-color-data-purple-100: #5e1679;
+  --syn-color-data-purple-200: #6f1395;
+  --syn-color-data-purple-300: #8515b6;
+  --syn-color-data-purple-400: #9d1edb;
+  --syn-color-data-purple-500: #b73ef7;
+  --syn-color-data-purple-600: #c457ff;
+  --syn-color-data-purple-700: #e0a7ff;
+  --syn-color-data-purple-800: #ebceff;
+  --syn-color-data-purple-900: #f6e7ff;
+  --syn-color-data-purple-950: #faf3ff;
+  --syn-color-data-teal-50: #002f33;
+  --syn-color-data-teal-100: #0d5354;
+  --syn-color-data-teal-200: #0a6365;
+  --syn-color-data-teal-300: #057f80;
+  --syn-color-data-teal-400: #009797;
+  --syn-color-data-teal-500: #04c8c3;
+  --syn-color-data-teal-600: #1de4dd;
+  --syn-color-data-teal-700: #51f7ec;
+  --syn-color-data-teal-800: #90fff3;
+  --syn-color-data-teal-900: #c7fff9;
+  --syn-color-data-teal-950: #effefc;
   --syn-color-error-50: #4e010a;
   --syn-color-error-100: #8d0f1e;
   --syn-color-error-200: #ab091c;
@@ -115,6 +148,17 @@
   --syn-color-info-800: #b9e5fe;
   --syn-color-info-900: #e0f1fe;
   --syn-color-info-950: #f0f9ff;
+  --syn-color-muted-50: #31373a;
+  --syn-color-muted-100: #4c5357;
+  --syn-color-muted-200: #5e676b;
+  --syn-color-muted-300: #859298;
+  --syn-color-muted-400: #859298;
+  --syn-color-muted-500: #9ea9ae;
+  --syn-color-muted-600: #bac2c6;
+  --syn-color-muted-700: #d5dbdd;
+  --syn-color-muted-800: #e8ebec;
+  --syn-color-muted-900: #f2f3f6;
+  --syn-color-muted-950: #f9fafb;
   --syn-color-neutral-0: #000000;
   --syn-color-neutral-50: #31373a;
   --syn-color-neutral-100: #4c5357;

package/metadata/packages/tokens/sick2018_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.2
+ * @synergy-design-system/tokens version 3.8.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -93,6 +93,39 @@
   --syn-color-critical-800: #983b08;
   --syn-color-critical-900: #7c310b;
   --syn-color-critical-950: #481700;
+  --syn-color-data-magenta-50: #fdf2f9;
+  --syn-color-data-magenta-100: #fce7f5;
+  --syn-color-data-magenta-200: #fcceed;
+  --syn-color-data-magenta-300: #fba6dd;
+  --syn-color-data-magenta-400: #f76fc5;
+  --syn-color-data-magenta-500: #ef45ab;
+  --syn-color-data-magenta-600: #e13393;
+  --syn-color-data-magenta-700: #c1156e;
+  --syn-color-data-magenta-800: #a0145b;
+  --syn-color-data-magenta-900: #85164f;
+  --syn-color-data-magenta-950: #51062c;
+  --syn-color-data-purple-50: #faf3ff;
+  --syn-color-data-purple-100: #f6e7ff;
+  --syn-color-data-purple-200: #ebceff;
+  --syn-color-data-purple-300: #e0a7ff;
+  --syn-color-data-purple-400: #c457ff;
+  --syn-color-data-purple-500: #b73ef7;
+  --syn-color-data-purple-600: #9d1edb;
+  --syn-color-data-purple-700: #8515b6;
+  --syn-color-data-purple-800: #6f1395;
+  --syn-color-data-purple-900: #5e1679;
+  --syn-color-data-purple-950: #3c0151;
+  --syn-color-data-teal-50: #effefc;
+  --syn-color-data-teal-100: #c7fff9;
+  --syn-color-data-teal-200: #90fff3;
+  --syn-color-data-teal-300: #51f7ec;
+  --syn-color-data-teal-400: #1de4dd;
+  --syn-color-data-teal-500: #04c8c3;
+  --syn-color-data-teal-600: #009797;
+  --syn-color-data-teal-700: #057f80;
+  --syn-color-data-teal-800: #0a6365;
+  --syn-color-data-teal-900: #0d5354;
+  --syn-color-data-teal-950: #002f33;
   --syn-color-error-50: #fff0f2;
   --syn-color-error-100: #ffdee2;
   --syn-color-error-200: #ffc3c9;
@@ -115,6 +148,17 @@
   --syn-color-info-800: #065786;
   --syn-color-info-900: #0b486f;
   --syn-color-info-950: #072e4a;
+  --syn-color-muted-50: #f9fafb;
+  --syn-color-muted-100: #f2f3f6;
+  --syn-color-muted-200: #e8ebec;
+  --syn-color-muted-300: #d5dbdd;
+  --syn-color-muted-400: #bac2c6;
+  --syn-color-muted-500: #9ea9ae;
+  --syn-color-muted-600: #859298;
+  --syn-color-muted-700: #737f85;
+  --syn-color-muted-800: #5e676b;
+  --syn-color-muted-900: #4c5357;
+  --syn-color-muted-950: #31373a;
   --syn-color-neutral-0: #ffffff;
   --syn-color-neutral-50: #f9fafb;
   --syn-color-neutral-100: #f2f3f6;

package/metadata/packages/tokens/sick2025_dark.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.2
+ * @synergy-design-system/tokens version 3.8.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -93,6 +93,39 @@
   --syn-color-critical-800: #ffeba5;
   --syn-color-critical-900: #fff7d3;
   --syn-color-critical-950: #fffbec;
+  --syn-color-data-magenta-50: #51062c;
+  --syn-color-data-magenta-100: #85164f;
+  --syn-color-data-magenta-200: #a0145b;
+  --syn-color-data-magenta-300: #c1156e;
+  --syn-color-data-magenta-400: #e13393;
+  --syn-color-data-magenta-500: #ef45ab;
+  --syn-color-data-magenta-600: #f76fc5;
+  --syn-color-data-magenta-700: #fba6dd;
+  --syn-color-data-magenta-800: #fcceed;
+  --syn-color-data-magenta-900: #fce7f5;
+  --syn-color-data-magenta-950: #fdf2f9;
+  --syn-color-data-purple-50: #3c0151;
+  --syn-color-data-purple-100: #5e1679;
+  --syn-color-data-purple-200: #6f1395;
+  --syn-color-data-purple-300: #8515b6;
+  --syn-color-data-purple-400: #9d1edb;
+  --syn-color-data-purple-500: #b73ef7;
+  --syn-color-data-purple-600: #c457ff;
+  --syn-color-data-purple-700: #e0a7ff;
+  --syn-color-data-purple-800: #ebceff;
+  --syn-color-data-purple-900: #f6e7ff;
+  --syn-color-data-purple-950: #faf3ff;
+  --syn-color-data-teal-50: #002f33;
+  --syn-color-data-teal-100: #0d5354;
+  --syn-color-data-teal-200: #0a6365;
+  --syn-color-data-teal-300: #057f80;
+  --syn-color-data-teal-400: #009797;
+  --syn-color-data-teal-500: #04c8c3;
+  --syn-color-data-teal-600: #1de4dd;
+  --syn-color-data-teal-700: #51f7ec;
+  --syn-color-data-teal-800: #90fff3;
+  --syn-color-data-teal-900: #c7fff9;
+  --syn-color-data-teal-950: #effefc;
   --syn-color-error-50: #450709;
   --syn-color-error-100: #6c0c0e;
   --syn-color-error-200: #941013;
@@ -115,6 +148,17 @@
   --syn-color-info-800: #a6e9ff;
   --syn-color-info-900: #dff4ff;
   --syn-color-info-950: #effaff;
+  --syn-color-muted-50: #2a2120;
+  --syn-color-muted-100: #50423e;
+  --syn-color-muted-200: #614e4b;
+  --syn-color-muted-300: #765f58;
+  --syn-color-muted-400: #8d7269;
+  --syn-color-muted-500: #ab988c;
+  --syn-color-muted-600: #d5ccc5;
+  --syn-color-muted-700: #e6e1dc;
+  --syn-color-muted-800: #ece8e5;
+  --syn-color-muted-900: #f2f0ed;
+  --syn-color-muted-950: #f8f7f6;
   --syn-color-neutral-0: #000206;
   --syn-color-neutral-50: #00051a;
   --syn-color-neutral-100: #000a37;

package/metadata/packages/tokens/sick2025_light.css

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 3.6.2
+ * @synergy-design-system/tokens version 3.8.0
  * SICK Global UX Foundation
  * Do not edit directly, this file was auto-generated.
  */
@@ -93,6 +93,39 @@
   --syn-color-critical-800: #a1520b;
   --syn-color-critical-900: #82450c;
   --syn-color-critical-950: #462104;
+  --syn-color-data-magenta-50: #fdf2f9;
+  --syn-color-data-magenta-100: #fce7f5;
+  --syn-color-data-magenta-200: #fcceed;
+  --syn-color-data-magenta-300: #fba6dd;
+  --syn-color-data-magenta-400: #f76fc5;
+  --syn-color-data-magenta-500: #ef45ab;
+  --syn-color-data-magenta-600: #e13393;
+  --syn-color-data-magenta-700: #c1156e;
+  --syn-color-data-magenta-800: #a0145b;
+  --syn-color-data-magenta-900: #85164f;
+  --syn-color-data-magenta-950: #51062c;
+  --syn-color-data-purple-50: #faf3ff;
+  --syn-color-data-purple-100: #f6e7ff;
+  --syn-color-data-purple-200: #ebceff;
+  --syn-color-data-purple-300: #e0a7ff;
+  --syn-color-data-purple-400: #c457ff;
+  --syn-color-data-purple-500: #b73ef7;
+  --syn-color-data-purple-600: #9d1edb;
+  --syn-color-data-purple-700: #8515b6;
+  --syn-color-data-purple-800: #6f1395;
+  --syn-color-data-purple-900: #5e1679;
+  --syn-color-data-purple-950: #3c0151;
+  --syn-color-data-teal-50: #effefc;
+  --syn-color-data-teal-100: #c7fff9;
+  --syn-color-data-teal-200: #90fff3;
+  --syn-color-data-teal-300: #51f7ec;
+  --syn-color-data-teal-400: #1de4dd;
+  --syn-color-data-teal-500: #04c8c3;
+  --syn-color-data-teal-600: #009797;
+  --syn-color-data-teal-700: #057f80;
+  --syn-color-data-teal-800: #0a6365;
+  --syn-color-data-teal-900: #0d5354;
+  --syn-color-data-teal-950: #002f33;
   --syn-color-error-50: #fff1f1;
   --syn-color-error-100: #ffe3e4;
   --syn-color-error-200: #ffcfd1;
@@ -115,6 +148,17 @@
   --syn-color-info-800: #02628a;
   --syn-color-info-900: #085172;
   --syn-color-info-950: #06334b;
+  --syn-color-muted-50: #f8f7f6;
+  --syn-color-muted-100: #f2f0ed;
+  --syn-color-muted-200: #ece8e5;
+  --syn-color-muted-300: #e6e1dc;
+  --syn-color-muted-400: #d5ccc5;
+  --syn-color-muted-500: #ab988c;
+  --syn-color-muted-600: #8d7269;
+  --syn-color-muted-700: #765f58;
+  --syn-color-muted-800: #614e4b;
+  --syn-color-muted-900: #50423e;
+  --syn-color-muted-950: #2a2120;
   --syn-color-neutral-0: #ffffff;
   --syn-color-neutral-50: #f2f2f2;
   --syn-color-neutral-100: #e7e7e7;

package/package.json

@@ -28,12 +28,12 @@
     "serve-handler": "^6.1.6",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3",
-    "@synergy-design-system/components": "3.7.0",
+    "@synergy-design-system/components": "3.9.0",
     "@synergy-design-system/docs": "0.1.0",
-    "@synergy-design-system/styles": "2.0.1",
     "@synergy-design-system/eslint-config-syn": "^0.1.0",
-    "@synergy-design-system/fonts": "1.0.3",
-    "@synergy-design-system/tokens": "^3.7.0"
+    "@synergy-design-system/styles": "2.0.1",
+    "@synergy-design-system/tokens": "^3.9.0",
+    "@synergy-design-system/fonts": "1.0.3"
   },
   "exports": {
     ".": {
@@ -67,7 +67,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "scripts": {
     "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
     "build:all": "pnpm run build && pnpm run build:storybook",