@synergy-design-system/mcp 2.10.0 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +79 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-divider/component.styles.ts +2 -4
  4. package/metadata/packages/components/components/syn-divider/component.ts +1 -2
  5. package/metadata/packages/components/components/syn-header/component.angular.ts +1 -0
  6. package/metadata/packages/components/components/syn-header/component.react.ts +1 -0
  7. package/metadata/packages/components/components/syn-header/component.styles.ts +2 -1
  8. package/metadata/packages/components/components/syn-header/component.ts +45 -3
  9. package/metadata/packages/components/components/syn-header/component.vue +1 -0
  10. package/metadata/packages/components/static/CHANGELOG.md +81 -0
  11. package/metadata/packages/tokens/CHANGELOG.md +79 -0
  12. package/metadata/packages/tokens/dark.css +45 -1
  13. package/metadata/packages/tokens/index.js +221 -1
  14. package/metadata/packages/tokens/light.css +45 -1
  15. package/metadata/packages/tokens/sick2018_dark.css +45 -1
  16. package/metadata/packages/tokens/sick2018_light.css +45 -1
  17. package/metadata/packages/tokens/sick2025_dark.css +45 -1
  18. package/metadata/packages/tokens/sick2025_light.css +45 -1
  19. package/metadata/static/components/syn-header/docs.md +65 -0
  20. package/package.json +5 -5
  21. package/metadata/packages/components/components/syn-divider/component.custom.styles.ts +0 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,84 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1209](https://github.com/synergy-design-system/synergy-design-system/pull/1209) [`5704a96`](https://github.com/synergy-design-system/synergy-design-system/commit/5704a96fbe2d0481822a30ce171a01df960c82f1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
8
+
9
+ feat: ✨ Allow `<syn-divider>` as a separator in meta-navigation of `<syn-header>` (#1130)
10
+
11
+ This release adds the possiblity to use `<syn-divider>` as a separator between items in the `<syn-header>` metanavigation.
12
+ It will automatically set the correct `height` on vertically aligned `<syn-dividers>`.
13
+
14
+ You may use it via:
15
+
16
+ ```html
17
+ <syn-header label="App Name">
18
+ <nav slot="meta-navigation">
19
+ <syn-icon-button
20
+ name="settings_outline"
21
+ label="Settings"
22
+ ></syn-icon-button>
23
+ <syn-icon-button
24
+ name="insert_chart_outlined"
25
+ label="Analytics"
26
+ ></syn-icon-button>
27
+ <syn-divider vertical></syn-divider>
28
+ <syn-icon-button name="dark_mode" label="Dark Mode"></syn-icon-button>
29
+ <syn-divider vertical></syn-divider>
30
+ <syn-icon-button name="language" label="Language"></syn-icon-button>
31
+ <syn-icon-button name="login" label="Login"></syn-icon-button>
32
+ </nav>
33
+ </syn-header>
34
+ ```
35
+
36
+ or via directly slotting the `<syn-divider>` via
37
+
38
+ ```html
39
+ <syn-header label="App Name">
40
+ <syn-icon-button
41
+ slot="meta-navigation"
42
+ name="settings_outline"
43
+ label="Settings"
44
+ ></syn-icon-button>
45
+ <syn-icon-button
46
+ slot="meta-navigation"
47
+ name="insert_chart_outlined"
48
+ label="Analytics"
49
+ ></syn-icon-button>
50
+ <syn-divider vertical slot="meta-navigation"></syn-divider>
51
+ <syn-icon-button
52
+ slot="meta-navigation"
53
+ name="dark_mode"
54
+ label="Dark Mode"
55
+ ></syn-icon-button>
56
+ <syn-divider vertical slot="meta-navigation"></syn-divider>
57
+ <syn-icon-button
58
+ slot="meta-navigation"
59
+ name="language"
60
+ label="Language"
61
+ ></syn-icon-button>
62
+ <syn-icon-button
63
+ slot="meta-navigation"
64
+ name="login"
65
+ label="Login"
66
+ ></syn-icon-button>
67
+ </syn-header>
68
+ ```
69
+
70
+ `<syn-header>` now also exposes a new `cssproperty` `--metanavigation-item-size` that can be used to define the size of rendered `<syn-icon-buttons>`, as well as the height of `<syn-divider>`
71
+
72
+ ## 2.11.0
73
+
74
+ ### Minor Changes
75
+
76
+ - [#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
77
+
78
+ feat: ✨ tokens: export muted color palette (#1210)
79
+
80
+ This release adds the muted color palette, as well as 3 new data color palettes from Figma to the `@synergy-design-system/tokens` package.
81
+
3
82
  ## 2.10.0
4
83
 
5
84
  ### Minor Changes
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- ad2a168f719ee483e665e3c0bcea9fe9
1
+ 5b560fab4a7b958d03f5ac4ec1f53c6d
package/metadata/packages/components/components/syn-divider/component.styles.ts CHANGED
@@ -1,8 +1,6 @@
1
- /* eslint-disable */
2
1
  import { css } from 'lit';
3
2
 
4
3
  export default css`
5
- /* stylelint-disable */
6
4
  :host {
7
5
  --color: var(--syn-panel-border-color);
8
6
  --width: var(--syn-panel-border-width);
@@ -10,15 +8,15 @@ export default css`
10
8
  }
11
9
 
12
10
  :host(:not([vertical])) {
13
- display: block;
14
11
  border-top: solid var(--width) var(--color);
12
+ display: block;
15
13
  margin: var(--spacing) 0;
16
14
  }
17
15
 
18
16
  :host([vertical]) {
17
+ border-left: solid var(--width) var(--color);
19
18
  display: inline-block;
20
19
  height: 100%;
21
- border-left: solid var(--width) var(--color);
22
20
  margin: 0 var(--spacing);
23
21
  }
24
22
  `;
package/metadata/packages/components/components/syn-divider/component.ts CHANGED
@@ -4,7 +4,6 @@ import { watch } from '../../internal/watch.js';
4
4
  import componentStyles from '../../styles/component.styles.js';
5
5
  import SynergyElement from '../../internal/synergy-element.js';
6
6
  import styles from './divider.styles.js';
7
- import customStyles from './divider.custom.styles.js';
8
7
  import type { CSSResultGroup } from 'lit';
9
8
 
10
9
  /**
@@ -18,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
18
17
  * @cssproperty --spacing - The spacing of the divider.
19
18
  */
20
19
  export default class SynDivider extends SynergyElement {
21
- static styles: CSSResultGroup = [componentStyles, styles, customStyles];
20
+ static styles: CSSResultGroup = [componentStyles, styles];
22
21
 
23
22
  /** Draws the divider in a vertical orientation. */
24
23
  @property({ type: Boolean, reflect: true }) vertical = false;
package/metadata/packages/components/components/syn-header/component.angular.ts CHANGED
@@ -49,6 +49,7 @@ import '@synergy-design-system/components/components/header/header.js';
49
49
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
50
50
  *
51
51
  * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
52
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
52
53
  */
53
54
  @Component({
54
55
  selector: 'syn-header',
package/metadata/packages/components/components/syn-header/component.react.ts CHANGED
@@ -46,6 +46,7 @@ Component.define('syn-header');
46
46
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
47
47
  *
48
48
  * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
49
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
49
50
  */
50
51
  export const SynHeader = createComponent({
51
52
  displayName: 'SynHeader',
package/metadata/packages/components/components/syn-header/component.styles.ts CHANGED
@@ -3,6 +3,7 @@ import { css } from 'lit';
3
3
  export default css`
4
4
  :host {
5
5
  --sticky-position: 0;
6
+ --metanavigation-item-size: var(--syn-font-size-x-large);
6
7
 
7
8
  display: block;
8
9
  }
@@ -82,7 +83,7 @@ export default css`
82
83
  .header__meta-navigation ::slotted(*) {
83
84
  color: var(--syn-interactive-quiet-color);
84
85
  display: contents;
85
- font-size: var(--syn-font-size-x-large);
86
+ font-size: var(--metanavigation-item-size);
86
87
  }
87
88
 
88
89
  /**
package/metadata/packages/components/components/syn-header/component.ts CHANGED
@@ -1,7 +1,6 @@
1
- /* eslint-disable @typescript-eslint/unbound-method */
2
1
  import { classMap } from 'lit/directives/class-map.js';
3
2
  import { html } from 'lit/static-html.js';
4
- import { property, state } from 'lit/decorators.js';
3
+ import { property, query, state } from 'lit/decorators.js';
5
4
  import type { CSSResultGroup } from 'lit';
6
5
  import SynergyElement from '../../internal/synergy-element.js';
7
6
  import { HasSlotController } from '../../internal/slot.js';
@@ -11,6 +10,7 @@ import SynIcon from '../icon/icon.js';
11
10
  import type SynSideNav from '../side-nav/side-nav.component.js';
12
11
  import { LocalizeController } from '../../utilities/localize.js';
13
12
  import { watch } from '../../internal/watch.js';
13
+ import type SynDivider from '../divider/divider.component.js';
14
14
 
15
15
  /**
16
16
  * @summary The <syn-header /> element provides a generic application header
@@ -43,6 +43,7 @@ import { watch } from '../../internal/watch.js';
43
43
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
44
44
  *
45
45
  * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
46
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
46
47
  */
47
48
  export default class SynHeader extends SynergyElement {
48
49
  static styles: CSSResultGroup = [
@@ -68,6 +69,8 @@ export default class SynHeader extends SynergyElement {
68
69
  */
69
70
  private isSideNavAnimating = false;
70
71
 
72
+ @query('slot[name="meta-navigation"]') private metaNavigationSlot: HTMLSlotElement;
73
+
71
74
  /**
72
75
  * The headers label. If you need to display HTML, use the `label` slot instead.
73
76
  */
@@ -128,6 +131,43 @@ export default class SynHeader extends SynergyElement {
128
131
  }
129
132
  }
130
133
 
134
+ /**
135
+ * #1130: Automatically set the correct styles for vertical syn-dividers in the meta navigation.
136
+ * Dividers may be slotted directly in the meta navigation or be nested in another element, e.g. a wrapper for the meta navigation.
137
+ * Horizontal dividers are not supported in the meta navigation and we don't want to override any styles for them that might be set by the user.
138
+ */
139
+ private updateMetaNavigation() {
140
+ const foundDividers: SynDivider[] = [];
141
+ this.metaNavigationSlot
142
+ // Get all slotted children.
143
+ // Needed because we may also have dividers in a wrapper that is used for the meta navigation
144
+ .assignedElements({ flatten: true })
145
+ .forEach(el => {
146
+ if (el.tagName.toLowerCase() === 'syn-divider') {
147
+ foundDividers.push(el as SynDivider);
148
+ } else {
149
+ const directChildDividers = el.querySelectorAll<SynDivider>(':scope > syn-divider');
150
+ if (directChildDividers.length) {
151
+ foundDividers.push(...directChildDividers);
152
+ }
153
+ }
154
+ });
155
+
156
+ // Set the correct styles for the found dividers
157
+ // - --spacing: var(--syn-spacing-x-small) makes the spacing slightly narrower,
158
+ // - align-self: center makes sure the divider is centered in the meta navigation,
159
+ // - height: var(--metanavigation-item-size) makes sure the divider has the same height as the other items in the meta navigation.
160
+ // We use this approach as it is faster than 3 separate style changes and we can be sure to not override any other styles that might be set on the divider.
161
+ const cssText = '--spacing: var(--syn-spacing-x-small); align-self: center; display: flex; height: var(--metanavigation-item-size);';
162
+
163
+ foundDividers
164
+ .filter(divider => divider.hasAttribute('vertical'))
165
+ .forEach(divider => {
166
+ // eslint-disable-next-line no-param-reassign
167
+ divider.style.cssText += cssText;
168
+ });
169
+ }
170
+
131
171
  @watch('burgerMenu', { waitUntilFirstUpdate: true })
132
172
  handleBurgerMenu() {
133
173
  const myEvt: keyof GlobalEventHandlersEventMap = `syn-burger-menu-${this.burgerMenu}`;
@@ -203,6 +243,7 @@ export default class SynHeader extends SynergyElement {
203
243
  }
204
244
 
205
245
  render() {
246
+ /* eslint-disable @typescript-eslint/unbound-method */
206
247
  const hasNavigation = this.hasSlotController.test('navigation');
207
248
  const showBurgerMenu = this.burgerMenu !== 'hidden';
208
249
  return html`
@@ -254,7 +295,7 @@ export default class SynHeader extends SynergyElement {
254
295
  </div>
255
296
 
256
297
  <div part="meta-navigation" class="header__meta-navigation">
257
- <slot name="meta-navigation"></slot>
298
+ <slot @slotchange=${this.updateMetaNavigation} name="meta-navigation"></slot>
258
299
  </div>
259
300
  </div>
260
301
  <!-- /.header__content -->
@@ -264,5 +305,6 @@ export default class SynHeader extends SynergyElement {
264
305
  </div>
265
306
  </header>
266
307
  `;
308
+ /* eslint-enable @typescript-eslint/unbound-method */
267
309
  }
268
310
  }
package/metadata/packages/components/components/syn-header/component.vue CHANGED
@@ -36,6 +36,7 @@
36
36
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
37
37
  *
38
38
  * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
39
+ * @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
39
40
  */
40
41
  import { computed, ref } from 'vue';
41
42
  import '@synergy-design-system/components/components/header/header.js';
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,5 +1,86 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.10.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1209](https://github.com/synergy-design-system/synergy-design-system/pull/1209) [`5704a96`](https://github.com/synergy-design-system/synergy-design-system/commit/5704a96fbe2d0481822a30ce171a01df960c82f1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
8
+
9
+ feat: ✨ Allow `<syn-divider>` as a separator in meta-navigation of `<syn-header>` (#1130)
10
+
11
+ This release adds the possiblity to use `<syn-divider>` as a separator between items in the `<syn-header>` metanavigation.
12
+ It will automatically set the correct `height` on vertically aligned `<syn-dividers>`.
13
+
14
+ You may use it via:
15
+
16
+ ```html
17
+ <syn-header label="App Name">
18
+ <nav slot="meta-navigation">
19
+ <syn-icon-button
20
+ name="settings_outline"
21
+ label="Settings"
22
+ ></syn-icon-button>
23
+ <syn-icon-button
24
+ name="insert_chart_outlined"
25
+ label="Analytics"
26
+ ></syn-icon-button>
27
+ <syn-divider vertical></syn-divider>
28
+ <syn-icon-button name="dark_mode" label="Dark Mode"></syn-icon-button>
29
+ <syn-divider vertical></syn-divider>
30
+ <syn-icon-button name="language" label="Language"></syn-icon-button>
31
+ <syn-icon-button name="login" label="Login"></syn-icon-button>
32
+ </nav>
33
+ </syn-header>
34
+ ```
35
+
36
+ or via directly slotting the `<syn-divider>` via
37
+
38
+ ```html
39
+ <syn-header label="App Name">
40
+ <syn-icon-button
41
+ slot="meta-navigation"
42
+ name="settings_outline"
43
+ label="Settings"
44
+ ></syn-icon-button>
45
+ <syn-icon-button
46
+ slot="meta-navigation"
47
+ name="insert_chart_outlined"
48
+ label="Analytics"
49
+ ></syn-icon-button>
50
+ <syn-divider vertical slot="meta-navigation"></syn-divider>
51
+ <syn-icon-button
52
+ slot="meta-navigation"
53
+ name="dark_mode"
54
+ label="Dark Mode"
55
+ ></syn-icon-button>
56
+ <syn-divider vertical slot="meta-navigation"></syn-divider>
57
+ <syn-icon-button
58
+ slot="meta-navigation"
59
+ name="language"
60
+ label="Language"
61
+ ></syn-icon-button>
62
+ <syn-icon-button
63
+ slot="meta-navigation"
64
+ name="login"
65
+ label="Login"
66
+ ></syn-icon-button>
67
+ </syn-header>
68
+ ```
69
+
70
+ `<syn-header>` now also exposes a new `cssproperty` `--metanavigation-item-size` that can be used to define the size of rendered `<syn-icon-buttons>`, as well as the height of `<syn-divider>`
71
+
72
+ ### Patch Changes
73
+
74
+ - Updated dependencies [[`5704a96`](https://github.com/synergy-design-system/synergy-design-system/commit/5704a96fbe2d0481822a30ce171a01df960c82f1)]:
75
+ - @synergy-design-system/tokens@3.10.0
76
+
77
+ ## 3.9.0
78
+
79
+ ### Patch Changes
80
+
81
+ - Updated dependencies [[`8d3e2a7`](https://github.com/synergy-design-system/synergy-design-system/commit/8d3e2a712619cb94938083620168caafc091323f)]:
82
+ - @synergy-design-system/tokens@3.9.0
83
+
3
84
  ## 3.8.0
4
85
 
5
86
  ### Minor Changes
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,84 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.10.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1209](https://github.com/synergy-design-system/synergy-design-system/pull/1209) [`5704a96`](https://github.com/synergy-design-system/synergy-design-system/commit/5704a96fbe2d0481822a30ce171a01df960c82f1) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-09
8
+
9
+ feat: ✨ Allow `<syn-divider>` as a separator in meta-navigation of `<syn-header>` (#1130)
10
+
11
+ This release adds the possiblity to use `<syn-divider>` as a separator between items in the `<syn-header>` metanavigation.
12
+ It will automatically set the correct `height` on vertically aligned `<syn-dividers>`.
13
+
14
+ You may use it via:
15
+
16
+ ```html
17
+ <syn-header label="App Name">
18
+ <nav slot="meta-navigation">
19
+ <syn-icon-button
20
+ name="settings_outline"
21
+ label="Settings"
22
+ ></syn-icon-button>
23
+ <syn-icon-button
24
+ name="insert_chart_outlined"
25
+ label="Analytics"
26
+ ></syn-icon-button>
27
+ <syn-divider vertical></syn-divider>
28
+ <syn-icon-button name="dark_mode" label="Dark Mode"></syn-icon-button>
29
+ <syn-divider vertical></syn-divider>
30
+ <syn-icon-button name="language" label="Language"></syn-icon-button>
31
+ <syn-icon-button name="login" label="Login"></syn-icon-button>
32
+ </nav>
33
+ </syn-header>
34
+ ```
35
+
36
+ or via directly slotting the `<syn-divider>` via
37
+
38
+ ```html
39
+ <syn-header label="App Name">
40
+ <syn-icon-button
41
+ slot="meta-navigation"
42
+ name="settings_outline"
43
+ label="Settings"
44
+ ></syn-icon-button>
45
+ <syn-icon-button
46
+ slot="meta-navigation"
47
+ name="insert_chart_outlined"
48
+ label="Analytics"
49
+ ></syn-icon-button>
50
+ <syn-divider vertical slot="meta-navigation"></syn-divider>
51
+ <syn-icon-button
52
+ slot="meta-navigation"
53
+ name="dark_mode"
54
+ label="Dark Mode"
55
+ ></syn-icon-button>
56
+ <syn-divider vertical slot="meta-navigation"></syn-divider>
57
+ <syn-icon-button
58
+ slot="meta-navigation"
59
+ name="language"
60
+ label="Language"
61
+ ></syn-icon-button>
62
+ <syn-icon-button
63
+ slot="meta-navigation"
64
+ name="login"
65
+ label="Login"
66
+ ></syn-icon-button>
67
+ </syn-header>
68
+ ```
69
+
70
+ `<syn-header>` now also exposes a new `cssproperty` `--metanavigation-item-size` that can be used to define the size of rendered `<syn-icon-buttons>`, as well as the height of `<syn-divider>`
71
+
72
+ ## 3.9.0
73
+
74
+ ### Minor Changes
75
+
76
+ - [#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
77
+
78
+ feat: ✨ tokens: export muted color palette (#1210)
79
+
80
+ This release adds the muted color palette, as well as 3 new data color palettes from Figma to the `@synergy-design-system/tokens` package.
81
+
3
82
  ## 3.8.0
4
83
 
5
84
  ## 3.7.0
package/metadata/packages/tokens/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.7.0
2
+ * @synergy-design-system/tokens version 3.9.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -93,6 +93,39 @@
93
93
  --syn-color-critical-800: #ffeba5;
94
94
  --syn-color-critical-900: #fff7d3;
95
95
  --syn-color-critical-950: #fffbec;
96
+ --syn-color-data-magenta-50: #51062c;
97
+ --syn-color-data-magenta-100: #85164f;
98
+ --syn-color-data-magenta-200: #a0145b;
99
+ --syn-color-data-magenta-300: #c1156e;
100
+ --syn-color-data-magenta-400: #e13393;
101
+ --syn-color-data-magenta-500: #ef45ab;
102
+ --syn-color-data-magenta-600: #f76fc5;
103
+ --syn-color-data-magenta-700: #fba6dd;
104
+ --syn-color-data-magenta-800: #fcceed;
105
+ --syn-color-data-magenta-900: #fce7f5;
106
+ --syn-color-data-magenta-950: #fdf2f9;
107
+ --syn-color-data-purple-50: #3c0151;
108
+ --syn-color-data-purple-100: #5e1679;
109
+ --syn-color-data-purple-200: #6f1395;
110
+ --syn-color-data-purple-300: #8515b6;
111
+ --syn-color-data-purple-400: #9d1edb;
112
+ --syn-color-data-purple-500: #b73ef7;
113
+ --syn-color-data-purple-600: #c457ff;
114
+ --syn-color-data-purple-700: #e0a7ff;
115
+ --syn-color-data-purple-800: #ebceff;
116
+ --syn-color-data-purple-900: #f6e7ff;
117
+ --syn-color-data-purple-950: #faf3ff;
118
+ --syn-color-data-teal-50: #002f33;
119
+ --syn-color-data-teal-100: #0d5354;
120
+ --syn-color-data-teal-200: #0a6365;
121
+ --syn-color-data-teal-300: #057f80;
122
+ --syn-color-data-teal-400: #009797;
123
+ --syn-color-data-teal-500: #04c8c3;
124
+ --syn-color-data-teal-600: #1de4dd;
125
+ --syn-color-data-teal-700: #51f7ec;
126
+ --syn-color-data-teal-800: #90fff3;
127
+ --syn-color-data-teal-900: #c7fff9;
128
+ --syn-color-data-teal-950: #effefc;
96
129
  --syn-color-error-50: #450709;
97
130
  --syn-color-error-100: #6c0c0e;
98
131
  --syn-color-error-200: #941013;
@@ -115,6 +148,17 @@
115
148
  --syn-color-info-800: #a6e9ff;
116
149
  --syn-color-info-900: #dff4ff;
117
150
  --syn-color-info-950: #effaff;
151
+ --syn-color-muted-50: #2a2120;
152
+ --syn-color-muted-100: #50423e;
153
+ --syn-color-muted-200: #614e4b;
154
+ --syn-color-muted-300: #765f58;
155
+ --syn-color-muted-400: #8d7269;
156
+ --syn-color-muted-500: #ab988c;
157
+ --syn-color-muted-600: #d5ccc5;
158
+ --syn-color-muted-700: #e6e1dc;
159
+ --syn-color-muted-800: #ece8e5;
160
+ --syn-color-muted-900: #f2f0ed;
161
+ --syn-color-muted-950: #f8f7f6;
118
162
  --syn-color-neutral-0: #000206;
119
163
  --syn-color-neutral-50: #00051a;
120
164
  --syn-color-neutral-100: #000a37;
package/metadata/packages/tokens/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.7.0
2
+ * @synergy-design-system/tokens version 3.9.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -433,6 +433,171 @@ export const SynColorCritical900 = 'var(--syn-color-critical-900)';
433
433
  */
434
434
  export const SynColorCritical950 = 'var(--syn-color-critical-950)';
435
435
 
436
+ /**
437
+ * @type {string}
438
+ */
439
+ export const SynColorDataMagenta50 = 'var(--syn-color-data-magenta-50)';
440
+
441
+ /**
442
+ * @type {string}
443
+ */
444
+ export const SynColorDataMagenta100 = 'var(--syn-color-data-magenta-100)';
445
+
446
+ /**
447
+ * @type {string}
448
+ */
449
+ export const SynColorDataMagenta200 = 'var(--syn-color-data-magenta-200)';
450
+
451
+ /**
452
+ * @type {string}
453
+ */
454
+ export const SynColorDataMagenta300 = 'var(--syn-color-data-magenta-300)';
455
+
456
+ /**
457
+ * @type {string}
458
+ */
459
+ export const SynColorDataMagenta400 = 'var(--syn-color-data-magenta-400)';
460
+
461
+ /**
462
+ * @type {string}
463
+ */
464
+ export const SynColorDataMagenta500 = 'var(--syn-color-data-magenta-500)';
465
+
466
+ /**
467
+ * @type {string}
468
+ */
469
+ export const SynColorDataMagenta600 = 'var(--syn-color-data-magenta-600)';
470
+
471
+ /**
472
+ * @type {string}
473
+ */
474
+ export const SynColorDataMagenta700 = 'var(--syn-color-data-magenta-700)';
475
+
476
+ /**
477
+ * @type {string}
478
+ */
479
+ export const SynColorDataMagenta800 = 'var(--syn-color-data-magenta-800)';
480
+
481
+ /**
482
+ * @type {string}
483
+ */
484
+ export const SynColorDataMagenta900 = 'var(--syn-color-data-magenta-900)';
485
+
486
+ /**
487
+ * @type {string}
488
+ */
489
+ export const SynColorDataMagenta950 = 'var(--syn-color-data-magenta-950)';
490
+
491
+ /**
492
+ * @type {string}
493
+ */
494
+ export const SynColorDataPurple50 = 'var(--syn-color-data-purple-50)';
495
+
496
+ /**
497
+ * @type {string}
498
+ */
499
+ export const SynColorDataPurple100 = 'var(--syn-color-data-purple-100)';
500
+
501
+ /**
502
+ * @type {string}
503
+ */
504
+ export const SynColorDataPurple200 = 'var(--syn-color-data-purple-200)';
505
+
506
+ /**
507
+ * @type {string}
508
+ */
509
+ export const SynColorDataPurple300 = 'var(--syn-color-data-purple-300)';
510
+
511
+ /**
512
+ * @type {string}
513
+ */
514
+ export const SynColorDataPurple400 = 'var(--syn-color-data-purple-400)';
515
+
516
+ /**
517
+ * @type {string}
518
+ */
519
+ export const SynColorDataPurple500 = 'var(--syn-color-data-purple-500)';
520
+
521
+ /**
522
+ * @type {string}
523
+ */
524
+ export const SynColorDataPurple600 = 'var(--syn-color-data-purple-600)';
525
+
526
+ /**
527
+ * @type {string}
528
+ */
529
+ export const SynColorDataPurple700 = 'var(--syn-color-data-purple-700)';
530
+
531
+ /**
532
+ * @type {string}
533
+ */
534
+ export const SynColorDataPurple800 = 'var(--syn-color-data-purple-800)';
535
+
536
+ /**
537
+ * @type {string}
538
+ */
539
+ export const SynColorDataPurple900 = 'var(--syn-color-data-purple-900)';
540
+
541
+ /**
542
+ * @type {string}
543
+ */
544
+ export const SynColorDataPurple950 = 'var(--syn-color-data-purple-950)';
545
+
546
+ /**
547
+ * @type {string}
548
+ */
549
+ export const SynColorDataTeal50 = 'var(--syn-color-data-teal-50)';
550
+
551
+ /**
552
+ * @type {string}
553
+ */
554
+ export const SynColorDataTeal100 = 'var(--syn-color-data-teal-100)';
555
+
556
+ /**
557
+ * @type {string}
558
+ */
559
+ export const SynColorDataTeal200 = 'var(--syn-color-data-teal-200)';
560
+
561
+ /**
562
+ * @type {string}
563
+ */
564
+ export const SynColorDataTeal300 = 'var(--syn-color-data-teal-300)';
565
+
566
+ /**
567
+ * @type {string}
568
+ */
569
+ export const SynColorDataTeal400 = 'var(--syn-color-data-teal-400)';
570
+
571
+ /**
572
+ * @type {string}
573
+ */
574
+ export const SynColorDataTeal500 = 'var(--syn-color-data-teal-500)';
575
+
576
+ /**
577
+ * @type {string}
578
+ */
579
+ export const SynColorDataTeal600 = 'var(--syn-color-data-teal-600)';
580
+
581
+ /**
582
+ * @type {string}
583
+ */
584
+ export const SynColorDataTeal700 = 'var(--syn-color-data-teal-700)';
585
+
586
+ /**
587
+ * @type {string}
588
+ */
589
+ export const SynColorDataTeal800 = 'var(--syn-color-data-teal-800)';
590
+
591
+ /**
592
+ * @type {string}
593
+ */
594
+ export const SynColorDataTeal900 = 'var(--syn-color-data-teal-900)';
595
+
596
+ /**
597
+ * @type {string}
598
+ */
599
+ export const SynColorDataTeal950 = 'var(--syn-color-data-teal-950)';
600
+
436
601
  /**
437
602
  * @type {string}
438
603
  */
@@ -543,6 +708,61 @@ export const SynColorInfo900 = 'var(--syn-color-info-900)';
543
708
  */
544
709
  export const SynColorInfo950 = 'var(--syn-color-info-950)';
545
710
 
711
+ /**
712
+ * @type {string}
713
+ */
714
+ export const SynColorMuted50 = 'var(--syn-color-muted-50)';
715
+
716
+ /**
717
+ * @type {string}
718
+ */
719
+ export const SynColorMuted100 = 'var(--syn-color-muted-100)';
720
+
721
+ /**
722
+ * @type {string}
723
+ */
724
+ export const SynColorMuted200 = 'var(--syn-color-muted-200)';
725
+
726
+ /**
727
+ * @type {string}
728
+ */
729
+ export const SynColorMuted300 = 'var(--syn-color-muted-300)';
730
+
731
+ /**
732
+ * @type {string}
733
+ */
734
+ export const SynColorMuted400 = 'var(--syn-color-muted-400)';
735
+
736
+ /**
737
+ * @type {string}
738
+ */
739
+ export const SynColorMuted500 = 'var(--syn-color-muted-500)';
740
+
741
+ /**
742
+ * @type {string}
743
+ */
744
+ export const SynColorMuted600 = 'var(--syn-color-muted-600)';
745
+
746
+ /**
747
+ * @type {string}
748
+ */
749
+ export const SynColorMuted700 = 'var(--syn-color-muted-700)';
750
+
751
+ /**
752
+ * @type {string}
753
+ */
754
+ export const SynColorMuted800 = 'var(--syn-color-muted-800)';
755
+
756
+ /**
757
+ * @type {string}
758
+ */
759
+ export const SynColorMuted900 = 'var(--syn-color-muted-900)';
760
+
761
+ /**
762
+ * @type {string}
763
+ */
764
+ export const SynColorMuted950 = 'var(--syn-color-muted-950)';
765
+
546
766
  /**
547
767
  * @type {string}
548
768
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.7.0
2
+ * @synergy-design-system/tokens version 3.9.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -93,6 +93,39 @@
93
93
  --syn-color-critical-800: #a1520b;
94
94
  --syn-color-critical-900: #82450c;
95
95
  --syn-color-critical-950: #462104;
96
+ --syn-color-data-magenta-50: #fdf2f9;
97
+ --syn-color-data-magenta-100: #fce7f5;
98
+ --syn-color-data-magenta-200: #fcceed;
99
+ --syn-color-data-magenta-300: #fba6dd;
100
+ --syn-color-data-magenta-400: #f76fc5;
101
+ --syn-color-data-magenta-500: #ef45ab;
102
+ --syn-color-data-magenta-600: #e13393;
103
+ --syn-color-data-magenta-700: #c1156e;
104
+ --syn-color-data-magenta-800: #a0145b;
105
+ --syn-color-data-magenta-900: #85164f;
106
+ --syn-color-data-magenta-950: #51062c;
107
+ --syn-color-data-purple-50: #faf3ff;
108
+ --syn-color-data-purple-100: #f6e7ff;
109
+ --syn-color-data-purple-200: #ebceff;
110
+ --syn-color-data-purple-300: #e0a7ff;
111
+ --syn-color-data-purple-400: #c457ff;
112
+ --syn-color-data-purple-500: #b73ef7;
113
+ --syn-color-data-purple-600: #9d1edb;
114
+ --syn-color-data-purple-700: #8515b6;
115
+ --syn-color-data-purple-800: #6f1395;
116
+ --syn-color-data-purple-900: #5e1679;
117
+ --syn-color-data-purple-950: #3c0151;
118
+ --syn-color-data-teal-50: #effefc;
119
+ --syn-color-data-teal-100: #c7fff9;
120
+ --syn-color-data-teal-200: #90fff3;
121
+ --syn-color-data-teal-300: #51f7ec;
122
+ --syn-color-data-teal-400: #1de4dd;
123
+ --syn-color-data-teal-500: #04c8c3;
124
+ --syn-color-data-teal-600: #009797;
125
+ --syn-color-data-teal-700: #057f80;
126
+ --syn-color-data-teal-800: #0a6365;
127
+ --syn-color-data-teal-900: #0d5354;
128
+ --syn-color-data-teal-950: #002f33;
96
129
  --syn-color-error-50: #fff1f1;
97
130
  --syn-color-error-100: #ffe3e4;
98
131
  --syn-color-error-200: #ffcfd1;
@@ -115,6 +148,17 @@
115
148
  --syn-color-info-800: #02628a;
116
149
  --syn-color-info-900: #085172;
117
150
  --syn-color-info-950: #06334b;
151
+ --syn-color-muted-50: #f8f7f6;
152
+ --syn-color-muted-100: #f2f0ed;
153
+ --syn-color-muted-200: #ece8e5;
154
+ --syn-color-muted-300: #e6e1dc;
155
+ --syn-color-muted-400: #d5ccc5;
156
+ --syn-color-muted-500: #ab988c;
157
+ --syn-color-muted-600: #8d7269;
158
+ --syn-color-muted-700: #765f58;
159
+ --syn-color-muted-800: #614e4b;
160
+ --syn-color-muted-900: #50423e;
161
+ --syn-color-muted-950: #2a2120;
118
162
  --syn-color-neutral-0: #ffffff;
119
163
  --syn-color-neutral-50: #f2f2f2;
120
164
  --syn-color-neutral-100: #e7e7e7;
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.7.0
2
+ * @synergy-design-system/tokens version 3.9.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -93,6 +93,39 @@
93
93
  --syn-color-critical-800: #ffe685;
94
94
  --syn-color-critical-900: #fff2c5;
95
95
  --syn-color-critical-950: #fffbea;
96
+ --syn-color-data-magenta-50: #51062c;
97
+ --syn-color-data-magenta-100: #85164f;
98
+ --syn-color-data-magenta-200: #a0145b;
99
+ --syn-color-data-magenta-300: #c1156e;
100
+ --syn-color-data-magenta-400: #e13393;
101
+ --syn-color-data-magenta-500: #ef45ab;
102
+ --syn-color-data-magenta-600: #f76fc5;
103
+ --syn-color-data-magenta-700: #fba6dd;
104
+ --syn-color-data-magenta-800: #fcceed;
105
+ --syn-color-data-magenta-900: #fce7f5;
106
+ --syn-color-data-magenta-950: #fdf2f9;
107
+ --syn-color-data-purple-50: #3c0151;
108
+ --syn-color-data-purple-100: #5e1679;
109
+ --syn-color-data-purple-200: #6f1395;
110
+ --syn-color-data-purple-300: #8515b6;
111
+ --syn-color-data-purple-400: #9d1edb;
112
+ --syn-color-data-purple-500: #b73ef7;
113
+ --syn-color-data-purple-600: #c457ff;
114
+ --syn-color-data-purple-700: #e0a7ff;
115
+ --syn-color-data-purple-800: #ebceff;
116
+ --syn-color-data-purple-900: #f6e7ff;
117
+ --syn-color-data-purple-950: #faf3ff;
118
+ --syn-color-data-teal-50: #002f33;
119
+ --syn-color-data-teal-100: #0d5354;
120
+ --syn-color-data-teal-200: #0a6365;
121
+ --syn-color-data-teal-300: #057f80;
122
+ --syn-color-data-teal-400: #009797;
123
+ --syn-color-data-teal-500: #04c8c3;
124
+ --syn-color-data-teal-600: #1de4dd;
125
+ --syn-color-data-teal-700: #51f7ec;
126
+ --syn-color-data-teal-800: #90fff3;
127
+ --syn-color-data-teal-900: #c7fff9;
128
+ --syn-color-data-teal-950: #effefc;
96
129
  --syn-color-error-50: #4e010a;
97
130
  --syn-color-error-100: #8d0f1e;
98
131
  --syn-color-error-200: #ab091c;
@@ -115,6 +148,17 @@
115
148
  --syn-color-info-800: #b9e5fe;
116
149
  --syn-color-info-900: #e0f1fe;
117
150
  --syn-color-info-950: #f0f9ff;
151
+ --syn-color-muted-50: #31373a;
152
+ --syn-color-muted-100: #4c5357;
153
+ --syn-color-muted-200: #5e676b;
154
+ --syn-color-muted-300: #859298;
155
+ --syn-color-muted-400: #859298;
156
+ --syn-color-muted-500: #9ea9ae;
157
+ --syn-color-muted-600: #bac2c6;
158
+ --syn-color-muted-700: #d5dbdd;
159
+ --syn-color-muted-800: #e8ebec;
160
+ --syn-color-muted-900: #f2f3f6;
161
+ --syn-color-muted-950: #f9fafb;
118
162
  --syn-color-neutral-0: #000000;
119
163
  --syn-color-neutral-50: #31373a;
120
164
  --syn-color-neutral-100: #4c5357;
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.7.0
2
+ * @synergy-design-system/tokens version 3.9.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -93,6 +93,39 @@
93
93
  --syn-color-critical-800: #983b08;
94
94
  --syn-color-critical-900: #7c310b;
95
95
  --syn-color-critical-950: #481700;
96
+ --syn-color-data-magenta-50: #fdf2f9;
97
+ --syn-color-data-magenta-100: #fce7f5;
98
+ --syn-color-data-magenta-200: #fcceed;
99
+ --syn-color-data-magenta-300: #fba6dd;
100
+ --syn-color-data-magenta-400: #f76fc5;
101
+ --syn-color-data-magenta-500: #ef45ab;
102
+ --syn-color-data-magenta-600: #e13393;
103
+ --syn-color-data-magenta-700: #c1156e;
104
+ --syn-color-data-magenta-800: #a0145b;
105
+ --syn-color-data-magenta-900: #85164f;
106
+ --syn-color-data-magenta-950: #51062c;
107
+ --syn-color-data-purple-50: #faf3ff;
108
+ --syn-color-data-purple-100: #f6e7ff;
109
+ --syn-color-data-purple-200: #ebceff;
110
+ --syn-color-data-purple-300: #e0a7ff;
111
+ --syn-color-data-purple-400: #c457ff;
112
+ --syn-color-data-purple-500: #b73ef7;
113
+ --syn-color-data-purple-600: #9d1edb;
114
+ --syn-color-data-purple-700: #8515b6;
115
+ --syn-color-data-purple-800: #6f1395;
116
+ --syn-color-data-purple-900: #5e1679;
117
+ --syn-color-data-purple-950: #3c0151;
118
+ --syn-color-data-teal-50: #effefc;
119
+ --syn-color-data-teal-100: #c7fff9;
120
+ --syn-color-data-teal-200: #90fff3;
121
+ --syn-color-data-teal-300: #51f7ec;
122
+ --syn-color-data-teal-400: #1de4dd;
123
+ --syn-color-data-teal-500: #04c8c3;
124
+ --syn-color-data-teal-600: #009797;
125
+ --syn-color-data-teal-700: #057f80;
126
+ --syn-color-data-teal-800: #0a6365;
127
+ --syn-color-data-teal-900: #0d5354;
128
+ --syn-color-data-teal-950: #002f33;
96
129
  --syn-color-error-50: #fff0f2;
97
130
  --syn-color-error-100: #ffdee2;
98
131
  --syn-color-error-200: #ffc3c9;
@@ -115,6 +148,17 @@
115
148
  --syn-color-info-800: #065786;
116
149
  --syn-color-info-900: #0b486f;
117
150
  --syn-color-info-950: #072e4a;
151
+ --syn-color-muted-50: #f9fafb;
152
+ --syn-color-muted-100: #f2f3f6;
153
+ --syn-color-muted-200: #e8ebec;
154
+ --syn-color-muted-300: #d5dbdd;
155
+ --syn-color-muted-400: #bac2c6;
156
+ --syn-color-muted-500: #9ea9ae;
157
+ --syn-color-muted-600: #859298;
158
+ --syn-color-muted-700: #737f85;
159
+ --syn-color-muted-800: #5e676b;
160
+ --syn-color-muted-900: #4c5357;
161
+ --syn-color-muted-950: #31373a;
118
162
  --syn-color-neutral-0: #ffffff;
119
163
  --syn-color-neutral-50: #f9fafb;
120
164
  --syn-color-neutral-100: #f2f3f6;
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.7.0
2
+ * @synergy-design-system/tokens version 3.9.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -93,6 +93,39 @@
93
93
  --syn-color-critical-800: #ffeba5;
94
94
  --syn-color-critical-900: #fff7d3;
95
95
  --syn-color-critical-950: #fffbec;
96
+ --syn-color-data-magenta-50: #51062c;
97
+ --syn-color-data-magenta-100: #85164f;
98
+ --syn-color-data-magenta-200: #a0145b;
99
+ --syn-color-data-magenta-300: #c1156e;
100
+ --syn-color-data-magenta-400: #e13393;
101
+ --syn-color-data-magenta-500: #ef45ab;
102
+ --syn-color-data-magenta-600: #f76fc5;
103
+ --syn-color-data-magenta-700: #fba6dd;
104
+ --syn-color-data-magenta-800: #fcceed;
105
+ --syn-color-data-magenta-900: #fce7f5;
106
+ --syn-color-data-magenta-950: #fdf2f9;
107
+ --syn-color-data-purple-50: #3c0151;
108
+ --syn-color-data-purple-100: #5e1679;
109
+ --syn-color-data-purple-200: #6f1395;
110
+ --syn-color-data-purple-300: #8515b6;
111
+ --syn-color-data-purple-400: #9d1edb;
112
+ --syn-color-data-purple-500: #b73ef7;
113
+ --syn-color-data-purple-600: #c457ff;
114
+ --syn-color-data-purple-700: #e0a7ff;
115
+ --syn-color-data-purple-800: #ebceff;
116
+ --syn-color-data-purple-900: #f6e7ff;
117
+ --syn-color-data-purple-950: #faf3ff;
118
+ --syn-color-data-teal-50: #002f33;
119
+ --syn-color-data-teal-100: #0d5354;
120
+ --syn-color-data-teal-200: #0a6365;
121
+ --syn-color-data-teal-300: #057f80;
122
+ --syn-color-data-teal-400: #009797;
123
+ --syn-color-data-teal-500: #04c8c3;
124
+ --syn-color-data-teal-600: #1de4dd;
125
+ --syn-color-data-teal-700: #51f7ec;
126
+ --syn-color-data-teal-800: #90fff3;
127
+ --syn-color-data-teal-900: #c7fff9;
128
+ --syn-color-data-teal-950: #effefc;
96
129
  --syn-color-error-50: #450709;
97
130
  --syn-color-error-100: #6c0c0e;
98
131
  --syn-color-error-200: #941013;
@@ -115,6 +148,17 @@
115
148
  --syn-color-info-800: #a6e9ff;
116
149
  --syn-color-info-900: #dff4ff;
117
150
  --syn-color-info-950: #effaff;
151
+ --syn-color-muted-50: #2a2120;
152
+ --syn-color-muted-100: #50423e;
153
+ --syn-color-muted-200: #614e4b;
154
+ --syn-color-muted-300: #765f58;
155
+ --syn-color-muted-400: #8d7269;
156
+ --syn-color-muted-500: #ab988c;
157
+ --syn-color-muted-600: #d5ccc5;
158
+ --syn-color-muted-700: #e6e1dc;
159
+ --syn-color-muted-800: #ece8e5;
160
+ --syn-color-muted-900: #f2f0ed;
161
+ --syn-color-muted-950: #f8f7f6;
118
162
  --syn-color-neutral-0: #000206;
119
163
  --syn-color-neutral-50: #00051a;
120
164
  --syn-color-neutral-100: #000a37;
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.7.0
2
+ * @synergy-design-system/tokens version 3.9.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -93,6 +93,39 @@
93
93
  --syn-color-critical-800: #a1520b;
94
94
  --syn-color-critical-900: #82450c;
95
95
  --syn-color-critical-950: #462104;
96
+ --syn-color-data-magenta-50: #fdf2f9;
97
+ --syn-color-data-magenta-100: #fce7f5;
98
+ --syn-color-data-magenta-200: #fcceed;
99
+ --syn-color-data-magenta-300: #fba6dd;
100
+ --syn-color-data-magenta-400: #f76fc5;
101
+ --syn-color-data-magenta-500: #ef45ab;
102
+ --syn-color-data-magenta-600: #e13393;
103
+ --syn-color-data-magenta-700: #c1156e;
104
+ --syn-color-data-magenta-800: #a0145b;
105
+ --syn-color-data-magenta-900: #85164f;
106
+ --syn-color-data-magenta-950: #51062c;
107
+ --syn-color-data-purple-50: #faf3ff;
108
+ --syn-color-data-purple-100: #f6e7ff;
109
+ --syn-color-data-purple-200: #ebceff;
110
+ --syn-color-data-purple-300: #e0a7ff;
111
+ --syn-color-data-purple-400: #c457ff;
112
+ --syn-color-data-purple-500: #b73ef7;
113
+ --syn-color-data-purple-600: #9d1edb;
114
+ --syn-color-data-purple-700: #8515b6;
115
+ --syn-color-data-purple-800: #6f1395;
116
+ --syn-color-data-purple-900: #5e1679;
117
+ --syn-color-data-purple-950: #3c0151;
118
+ --syn-color-data-teal-50: #effefc;
119
+ --syn-color-data-teal-100: #c7fff9;
120
+ --syn-color-data-teal-200: #90fff3;
121
+ --syn-color-data-teal-300: #51f7ec;
122
+ --syn-color-data-teal-400: #1de4dd;
123
+ --syn-color-data-teal-500: #04c8c3;
124
+ --syn-color-data-teal-600: #009797;
125
+ --syn-color-data-teal-700: #057f80;
126
+ --syn-color-data-teal-800: #0a6365;
127
+ --syn-color-data-teal-900: #0d5354;
128
+ --syn-color-data-teal-950: #002f33;
96
129
  --syn-color-error-50: #fff1f1;
97
130
  --syn-color-error-100: #ffe3e4;
98
131
  --syn-color-error-200: #ffcfd1;
@@ -115,6 +148,17 @@
115
148
  --syn-color-info-800: #02628a;
116
149
  --syn-color-info-900: #085172;
117
150
  --syn-color-info-950: #06334b;
151
+ --syn-color-muted-50: #f8f7f6;
152
+ --syn-color-muted-100: #f2f0ed;
153
+ --syn-color-muted-200: #ece8e5;
154
+ --syn-color-muted-300: #e6e1dc;
155
+ --syn-color-muted-400: #d5ccc5;
156
+ --syn-color-muted-500: #ab988c;
157
+ --syn-color-muted-600: #8d7269;
158
+ --syn-color-muted-700: #765f58;
159
+ --syn-color-muted-800: #614e4b;
160
+ --syn-color-muted-900: #50423e;
161
+ --syn-color-muted-950: #2a2120;
118
162
  --syn-color-neutral-0: #ffffff;
119
163
  --syn-color-neutral-50: #f2f2f2;
120
164
  --syn-color-neutral-100: #e7e7e7;
package/metadata/static/components/syn-header/docs.md CHANGED
@@ -107,6 +107,71 @@ Use the Meta Navigation slot to add additional functionalities to your applicati
107
107
 
108
108
  ---
109
109
 
110
+ ## Meta Navigation With Dividers
111
+
112
+ If you need different icon groups or a separator between them, add a <syn-divider> between them.
113
+
114
+ ```html
115
+ <syn-header label="App Name" burger-menu="hidden">
116
+ <nav slot="meta-navigation">
117
+ <syn-icon-button
118
+ name="settings_outline"
119
+ label="Settings"
120
+ size="inherit"
121
+ color="currentColor"
122
+ ></syn-icon-button>
123
+ <syn-icon-button
124
+ name="insert_chart_outlined"
125
+ label="Analytics"
126
+ size="inherit"
127
+ color="currentColor"
128
+ ></syn-icon-button>
129
+ <syn-divider
130
+ vertical=""
131
+ role="separator"
132
+ aria-orientation="vertical"
133
+ style="
134
+ --spacing: var(--syn-spacing-x-small);
135
+ align-self: center;
136
+ display: flex;
137
+ height: var(--metanavigation-item-size);
138
+ "
139
+ ></syn-divider>
140
+ <syn-icon-button
141
+ name="dark_mode"
142
+ label="Dark Mode"
143
+ size="inherit"
144
+ color="currentColor"
145
+ ></syn-icon-button>
146
+ <syn-divider
147
+ vertical=""
148
+ role="separator"
149
+ aria-orientation="vertical"
150
+ style="
151
+ --spacing: var(--syn-spacing-x-small);
152
+ align-self: center;
153
+ display: flex;
154
+ height: var(--metanavigation-item-size);
155
+ "
156
+ ></syn-divider>
157
+ <syn-icon-button
158
+ name="language"
159
+ label="Language"
160
+ size="inherit"
161
+ color="currentColor"
162
+ ></syn-icon-button>
163
+ <syn-icon-button
164
+ name="login"
165
+ label="Login"
166
+ size="inherit"
167
+ color="currentColor"
168
+ ></syn-icon-button>
169
+ </nav>
170
+ </syn-header>
171
+ ```
172
+
173
+ ---
174
+
110
175
  ## Navigation
111
176
 
112
177
  Use the top navigation slot to add syn-navigation and horizontal syn-navigation-items.
package/package.json CHANGED
@@ -28,12 +28,12 @@
28
28
  "serve-handler": "^6.1.6",
29
29
  "ts-jest": "^29.4.6",
30
30
  "typescript": "^5.9.3",
31
- "@synergy-design-system/components": "3.8.0",
31
+ "@synergy-design-system/docs": "0.1.0",
32
+ "@synergy-design-system/components": "3.10.0",
33
+ "@synergy-design-system/tokens": "^3.10.0",
32
34
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
33
35
  "@synergy-design-system/fonts": "1.0.3",
34
- "@synergy-design-system/styles": "2.0.1",
35
- "@synergy-design-system/docs": "0.1.0",
36
- "@synergy-design-system/tokens": "^3.8.0"
36
+ "@synergy-design-system/styles": "2.0.1"
37
37
  },
38
38
  "exports": {
39
39
  ".": {
@@ -67,7 +67,7 @@
67
67
  "directory": "packages/mcp"
68
68
  },
69
69
  "type": "module",
70
- "version": "2.10.0",
70
+ "version": "2.12.0",
71
71
  "scripts": {
72
72
  "build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
73
73
  "build:all": "pnpm run build && pnpm run build:storybook",
package/metadata/packages/components/components/syn-divider/component.custom.styles.ts DELETED
@@ -1,5 +0,0 @@
1
- import { css } from 'lit';
2
-
3
- export default css`
4
- /* Write custom CSS here */
5
- `;