@synergy-design-system/mcp 2.5.0 → 2.6.1

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 +20 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-header/component.angular.ts +16 -0
  4. package/metadata/packages/components/components/syn-header/component.react.ts +2 -0
  5. package/metadata/packages/components/components/syn-header/component.styles.ts +14 -0
  6. package/metadata/packages/components/components/syn-header/component.ts +8 -0
  7. package/metadata/packages/components/components/syn-header/component.vue +8 -0
  8. package/metadata/packages/components/components/syn-prio-nav/component.ts +2 -1
  9. package/metadata/packages/components/static/CHANGELOG.md +28 -0
  10. package/metadata/packages/tokens/CHANGELOG.md +14 -0
  11. package/metadata/packages/tokens/dark.css +13 -11
  12. package/metadata/packages/tokens/index.js +56 -46
  13. package/metadata/packages/tokens/light.css +14 -12
  14. package/metadata/packages/tokens/sick2018_dark.css +14 -12
  15. package/metadata/packages/tokens/sick2018_light.css +14 -12
  16. package/metadata/packages/tokens/sick2025_dark.css +13 -11
  17. package/metadata/packages/tokens/sick2025_light.css +14 -12
  18. package/metadata/static/components/syn-header/docs.md +10 -0
  19. package/metadata/static/templates/appshell.md +8 -8
  20. package/metadata/static/templates/footer.md +1 -1
  21. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1196](https://github.com/synergy-design-system/synergy-design-system/pull/1196) [`6a9b934`](https://github.com/synergy-design-system/synergy-design-system/commit/6a9b9349f6404a638fadd842e3f2fd8216fd81cd) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-25
8
+
9
+ fix: 🐛 prio nav with only one item (#1195)
10
+
11
+ ## 2.6.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#1188](https://github.com/synergy-design-system/synergy-design-system/pull/1188) [`c60deb9`](https://github.com/synergy-design-system/synergy-design-system/commit/c60deb9da1175404ddaa25b2c19ce9e182205cd2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
16
+
17
+ feat: ✨ `<syn-header>` sticky behavior (#529)
18
+
19
+ `<syn-header>` now has a new `sticky` boolean property that can be used when a sticky header is needed, e.g. `<syn-header sticky></syn-header>`.
20
+ This adds `position: sticky`, as well as a small shadow that indicates that the header is stuck.
21
+ You can configure the `top` position via the new `--sticky-position` css property (defaults to `0` to make it stick to the top).
22
+
3
23
  ## 2.5.0
4
24
 
5
25
  ### Minor Changes
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- 25ccf6b07d0b19d12398dc3872879175
1
+ c6fde0e7601ba4b7278a09634987804a
package/metadata/packages/components/components/syn-header/component.angular.ts CHANGED
@@ -47,6 +47,8 @@ import '@synergy-design-system/components/components/header/header.js';
47
47
  * @csspart meta-navigation - The Item wrapping the optional application menu
48
48
  * @csspart navigation - The wrapper that is holding the optional top navigation section
49
49
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
50
+ *
51
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
50
52
  */
51
53
  @Component({
52
54
  selector: 'syn-header',
@@ -109,6 +111,20 @@ The following values can be used:
109
111
  return this.nativeElement.burgerMenu;
110
112
  }
111
113
 
114
+ /**
115
+ * Makes the header stick to the top of the viewport when scrolling.
116
+ Also applies a shadow to the header when scrolling.
117
+ */
118
+ @Input()
119
+ set sticky(v: '' | SynHeader['sticky']) {
120
+ this._ngZone.runOutsideAngular(
121
+ () => (this.nativeElement.sticky = v === '' || v),
122
+ );
123
+ }
124
+ get sticky(): SynHeader['sticky'] {
125
+ return this.nativeElement.sticky;
126
+ }
127
+
112
128
  /**
113
129
  * Emitted when the burger menu is toggled to closed
114
130
  */
package/metadata/packages/components/components/syn-header/component.react.ts CHANGED
@@ -44,6 +44,8 @@ Component.define('syn-header');
44
44
  * @csspart meta-navigation - The Item wrapping the optional application menu
45
45
  * @csspart navigation - The wrapper that is holding the optional top navigation section
46
46
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
47
+ *
48
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
47
49
  */
48
50
  export const SynHeader = createComponent({
49
51
  displayName: 'SynHeader',
package/metadata/packages/components/components/syn-header/component.styles.ts CHANGED
@@ -2,6 +2,8 @@ import { css } from 'lit';
2
2
 
3
3
  export default css`
4
4
  :host {
5
+ --sticky-position: 0;
6
+
5
7
  display: block;
6
8
  }
7
9
 
@@ -125,4 +127,16 @@ export default css`
125
127
  .header--has-burger-menu .header__content {
126
128
  padding-left: var(--syn-spacing-medium);
127
129
  }
130
+
131
+ /**
132
+ * #529: Sticky header styles
133
+ */
134
+ :host([sticky]) {
135
+ box-shadow: var(--syn-shadow-sticky-down);
136
+ position: sticky;
137
+ top: var(--sticky-position);
138
+
139
+ /* Make sure the header is above all other content, but below any potential modals or overlays */
140
+ z-index: calc(infinity - 1);
141
+ }
128
142
  `;
package/metadata/packages/components/components/syn-header/component.ts CHANGED
@@ -41,6 +41,8 @@ import { watch } from '../../internal/watch.js';
41
41
  * @csspart meta-navigation - The Item wrapping the optional application menu
42
42
  * @csspart navigation - The wrapper that is holding the optional top navigation section
43
43
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
44
+ *
45
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
44
46
  */
45
47
  export default class SynHeader extends SynergyElement {
46
48
  static styles: CSSResultGroup = [
@@ -82,6 +84,12 @@ export default class SynHeader extends SynergyElement {
82
84
  */
83
85
  @property({ attribute: 'burger-menu', reflect: true }) burgerMenu: 'hidden' | 'open' | 'closed' = 'hidden';
84
86
 
87
+ /**
88
+ * Makes the header stick to the top of the viewport when scrolling.
89
+ * Also applies a shadow to the header when scrolling.
90
+ */
91
+ @property({ reflect: true, type: Boolean }) sticky = false;
92
+
85
93
  /**
86
94
  * The side nav
87
95
  */
package/metadata/packages/components/components/syn-header/component.vue CHANGED
@@ -34,6 +34,8 @@
34
34
  * @csspart meta-navigation - The Item wrapping the optional application menu
35
35
  * @csspart navigation - The wrapper that is holding the optional top navigation section
36
36
  * @csspart burger-menu-toggle-button - The button that toggles the burger menu
37
+ *
38
+ * @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
37
39
  */
38
40
  import { computed, ref } from 'vue';
39
41
  import '@synergy-design-system/components/components/header/header.js';
@@ -68,6 +70,12 @@ The following values can be used:
68
70
  - closed: The burger menu is visible and shows the open icon
69
71
  */
70
72
  burgerMenu?: SynHeader['burgerMenu'];
73
+
74
+ /**
75
+ * Makes the header stick to the top of the viewport when scrolling.
76
+ Also applies a shadow to the header when scrolling.
77
+ */
78
+ sticky?: SynHeader['sticky'];
71
79
  }>();
72
80
 
73
81
  // Make sure prop binding only forwards the props that are actually there.
package/metadata/packages/components/components/syn-prio-nav/component.ts CHANGED
@@ -187,7 +187,8 @@ export default class SynPrioNav extends SynergyElement {
187
187
  });
188
188
 
189
189
  const visibleItems = itemVisibilities.filter(({ isHidden }) => !isHidden).length;
190
- const hasOnlyOneItem = visibleItems === 1;
190
+ // #1195 - If there are more than 1 item but only 1 is visible, we also want to hide that one item and show it in the priority menu. If there is only 1 item total, we just show that one item and hide the priority menu
191
+ const hasOnlyOneItem = (visibleItems === 1 && navItems.length > 1);
191
192
 
192
193
  // Finally, hide or show the items based on the visibility
193
194
  // As requested in #410, we hide all items if there is only one item
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1196](https://github.com/synergy-design-system/synergy-design-system/pull/1196) [`6a9b934`](https://github.com/synergy-design-system/synergy-design-system/commit/6a9b9349f6404a638fadd842e3f2fd8216fd81cd) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-02-25
8
+
9
+ fix: 🐛 prio nav with only one item (#1195)
10
+
11
+ - Updated dependencies []:
12
+ - @synergy-design-system/tokens@3.4.1
13
+
14
+ ## 3.4.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [#1188](https://github.com/synergy-design-system/synergy-design-system/pull/1188) [`c60deb9`](https://github.com/synergy-design-system/synergy-design-system/commit/c60deb9da1175404ddaa25b2c19ce9e182205cd2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
19
+
20
+ feat: ✨ `<syn-header>` sticky behavior (#529)
21
+
22
+ `<syn-header>` now has a new `sticky` boolean property that can be used when a sticky header is needed, e.g. `<syn-header sticky></syn-header>`.
23
+ This adds `position: sticky`, as well as a small shadow that indicates that the header is stuck.
24
+ You can configure the `top` position via the new `--sticky-position` css property (defaults to `0` to make it stick to the top).
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies [[`c60deb9`](https://github.com/synergy-design-system/synergy-design-system/commit/c60deb9da1175404ddaa25b2c19ce9e182205cd2)]:
29
+ - @synergy-design-system/tokens@3.4.0
30
+
3
31
  ## 3.3.0
4
32
 
5
33
  ### Minor Changes
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.4.1
4
+
5
+ ## 3.4.0
6
+
7
+ ### Minor Changes
8
+
9
+ - [#1188](https://github.com/synergy-design-system/synergy-design-system/pull/1188) [`c60deb9`](https://github.com/synergy-design-system/synergy-design-system/commit/c60deb9da1175404ddaa25b2c19ce9e182205cd2) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-02-19
10
+
11
+ feat: ✨ `<syn-header>` sticky behavior (#529)
12
+
13
+ `<syn-header>` now has a new `sticky` boolean property that can be used when a sticky header is needed, e.g. `<syn-header sticky></syn-header>`.
14
+ This adds `position: sticky`, as well as a small shadow that indicates that the header is stuck.
15
+ You can configure the `top` position via the new `--sticky-position` css property (defaults to `0` to make it stick to the top).
16
+
3
17
  ## 3.3.0
4
18
 
5
19
  ## 3.2.1
package/metadata/packages/tokens/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.1
2
+ * @synergy-design-system/tokens version 3.4.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -307,8 +307,9 @@
307
307
  --syn-option-icon-color-hover: var(--syn-color-neutral-0);
308
308
  --syn-overlay-background-blur: 8px;
309
309
  --syn-overlay-background-color: rgba(0, 5, 26, 0.6);
310
- --syn-page-background: var(--syn-color-neutral-0); /** Will be DEPRECATED */
310
+ --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
311
311
  --syn-page-background-color: var(--syn-color-neutral-0);
312
+ --syn-page-background-color-muted: var(--syn-color-neutral-0);
312
313
  --syn-panel-background-color: var(--syn-color-neutral-50);
313
314
  --syn-panel-border-color: var(--syn-color-neutral-300);
314
315
  --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
320
321
  --syn-range-tick-color: var(--syn-color-neutral-600);
321
322
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
322
323
  --syn-readonly-background-color: var(--syn-color-neutral-300);
324
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
325
+ --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
326
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
327
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
328
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
329
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
330
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
331
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
332
+ --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
333
+ --syn-shadow-sticky-down: 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
323
334
  --syn-spacing-1-5x-large: 40px;
324
335
  --syn-spacing-2x-large: 48px;
325
336
  --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
373
384
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
374
385
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
375
386
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
376
- --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
377
- --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
378
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
379
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
380
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
381
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
382
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
383
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
384
- --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
385
387
  --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
386
388
  --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
387
389
  --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.1
2
+ * @synergy-design-system/tokens version 3.4.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -1513,6 +1513,11 @@ export const SynPageBackground = 'var(--syn-page-background)';
1513
1513
  */
1514
1514
  export const SynPageBackgroundColor = 'var(--syn-page-background-color)';
1515
1515
 
1516
+ /**
1517
+ * @type {string}
1518
+ */
1519
+ export const SynPageBackgroundColorMuted = 'var(--syn-page-background-color-muted)';
1520
+
1516
1521
  /**
1517
1522
  * @type {string}
1518
1523
  */
@@ -1568,6 +1573,56 @@ export const SynRangeTrackColorActive = 'var(--syn-range-track-color-active)';
1568
1573
  */
1569
1574
  export const SynReadonlyBackgroundColor = 'var(--syn-readonly-background-color)';
1570
1575
 
1576
+ /**
1577
+ * @type {string}
1578
+ */
1579
+ export const SynShadowMedium = 'var(--syn-shadow-medium)';
1580
+
1581
+ /**
1582
+ * @type {string}
1583
+ */
1584
+ export const SynShadowLarge = 'var(--syn-shadow-large)';
1585
+
1586
+ /**
1587
+ * @type {string}
1588
+ */
1589
+ export const SynShadowXLarge = 'var(--syn-shadow-x-large)';
1590
+
1591
+ /**
1592
+ * @type {string}
1593
+ */
1594
+ export const SynShadowOverflowDown = 'var(--syn-shadow-overflow-down)';
1595
+
1596
+ /**
1597
+ * @type {string}
1598
+ */
1599
+ export const SynShadowOverflowUp = 'var(--syn-shadow-overflow-up)';
1600
+
1601
+ /**
1602
+ * @type {string}
1603
+ */
1604
+ export const SynShadowOverflowLeft = 'var(--syn-shadow-overflow-left)';
1605
+
1606
+ /**
1607
+ * @type {string}
1608
+ */
1609
+ export const SynShadowOverflowRight = 'var(--syn-shadow-overflow-right)';
1610
+
1611
+ /**
1612
+ * @type {string}
1613
+ */
1614
+ export const SynShadowXSmall = 'var(--syn-shadow-x-small)';
1615
+
1616
+ /**
1617
+ * @type {string}
1618
+ */
1619
+ export const SynShadowSmall = 'var(--syn-shadow-small)';
1620
+
1621
+ /**
1622
+ * @type {string}
1623
+ */
1624
+ export const SynShadowStickyDown = 'var(--syn-shadow-sticky-down)';
1625
+
1571
1626
  /**
1572
1627
  * @type {string}
1573
1628
  */
@@ -1833,51 +1888,6 @@ export const SynZIndexToast = 'var(--syn-z-index-toast)';
1833
1888
  */
1834
1889
  export const SynZIndexTooltip = 'var(--syn-z-index-tooltip)';
1835
1890
 
1836
- /**
1837
- * @type {string}
1838
- */
1839
- export const SynShadowMedium = 'var(--syn-shadow-medium)';
1840
-
1841
- /**
1842
- * @type {string}
1843
- */
1844
- export const SynShadowLarge = 'var(--syn-shadow-large)';
1845
-
1846
- /**
1847
- * @type {string}
1848
- */
1849
- export const SynShadowXLarge = 'var(--syn-shadow-x-large)';
1850
-
1851
- /**
1852
- * @type {string}
1853
- */
1854
- export const SynShadowOverflowDown = 'var(--syn-shadow-overflow-down)';
1855
-
1856
- /**
1857
- * @type {string}
1858
- */
1859
- export const SynShadowOverflowUp = 'var(--syn-shadow-overflow-up)';
1860
-
1861
- /**
1862
- * @type {string}
1863
- */
1864
- export const SynShadowOverflowLeft = 'var(--syn-shadow-overflow-left)';
1865
-
1866
- /**
1867
- * @type {string}
1868
- */
1869
- export const SynShadowOverflowRight = 'var(--syn-shadow-overflow-right)';
1870
-
1871
- /**
1872
- * @type {string}
1873
- */
1874
- export const SynShadowXSmall = 'var(--syn-shadow-x-small)';
1875
-
1876
- /**
1877
- * @type {string}
1878
- */
1879
- export const SynShadowSmall = 'var(--syn-shadow-small)';
1880
-
1881
1891
  /**
1882
1892
  * @type {string}
1883
1893
  */
package/metadata/packages/tokens/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.1
2
+ * @synergy-design-system/tokens version 3.4.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -307,8 +307,9 @@
307
307
  --syn-option-icon-color-hover: var(--syn-color-neutral-0);
308
308
  --syn-overlay-background-blur: 8px;
309
309
  --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
310
- --syn-page-background: #f8f7f6; /** Will be DEPRECATED */
311
- --syn-page-background-color: #f8f7f6;
310
+ --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
311
+ --syn-page-background-color: var(--syn-color-neutral-0);
312
+ --syn-page-background-color-muted: #f8f7f6;
312
313
  --syn-panel-background-color: var(--syn-color-neutral-0);
313
314
  --syn-panel-border-color: #e6e1dc;
314
315
  --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
320
321
  --syn-range-tick-color: var(--syn-color-neutral-500);
321
322
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
322
323
  --syn-readonly-background-color: #e6e1dc;
324
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
325
+ --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
326
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
327
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
328
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
329
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
330
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
331
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
332
+ --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
333
+ --syn-shadow-sticky-down: 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
323
334
  --syn-spacing-1-5x-large: 40px;
324
335
  --syn-spacing-2x-large: 48px;
325
336
  --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
373
384
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
374
385
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
375
386
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
376
- --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
377
- --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
378
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
379
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
380
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
381
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
382
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
383
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
384
- --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
385
387
  --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
386
388
  --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
387
389
  --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.1
2
+ * @synergy-design-system/tokens version 3.4.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -307,8 +307,9 @@
307
307
  --syn-option-icon-color-hover: var(--syn-typography-color-text);
308
308
  --syn-overlay-background-blur: 0px;
309
309
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
310
- --syn-page-background: var(--syn-color-neutral-50); /** Will be DEPRECATED */
311
- --syn-page-background-color: var(--syn-color-neutral-50);
310
+ --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
311
+ --syn-page-background-color: var(--syn-color-neutral-0);
312
+ --syn-page-background-color-muted: var(--syn-color-neutral-50);
312
313
  --syn-panel-background-color: var(--syn-color-neutral-0);
313
314
  --syn-panel-border-color: var(--syn-color-neutral-300);
314
315
  --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
320
321
  --syn-range-tick-color: var(--syn-color-neutral-400);
321
322
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
322
323
  --syn-readonly-background-color: var(--syn-color-neutral-300);
324
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
325
+ --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
326
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
327
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
328
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
329
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
330
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
331
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
332
+ --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
333
+ --syn-shadow-sticky-down: 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
323
334
  --syn-spacing-1-5x-large: 40px;
324
335
  --syn-spacing-2x-large: 48px;
325
336
  --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
373
384
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
374
385
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
375
386
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
376
- --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
377
- --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
378
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
379
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
380
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
381
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
382
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
383
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
384
- --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
385
387
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
386
388
  --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
387
389
  --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.1
2
+ * @synergy-design-system/tokens version 3.4.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -307,8 +307,9 @@
307
307
  --syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
308
308
  --syn-overlay-background-blur: 0px;
309
309
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
310
- --syn-page-background: var(--syn-color-neutral-100); /** Will be DEPRECATED */
311
- --syn-page-background-color: var(--syn-color-neutral-100);
310
+ --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
311
+ --syn-page-background-color: var(--syn-color-neutral-0);
312
+ --syn-page-background-color-muted: var(--syn-color-neutral-100);
312
313
  --syn-panel-background-color: var(--syn-color-neutral-0);
313
314
  --syn-panel-border-color: var(--syn-color-neutral-300);
314
315
  --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
320
321
  --syn-range-tick-color: var(--syn-color-neutral-400);
321
322
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
322
323
  --syn-readonly-background-color: var(--syn-color-neutral-300);
324
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
325
+ --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
326
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
327
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
328
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
329
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
330
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
331
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
332
+ --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
333
+ --syn-shadow-sticky-down: 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
323
334
  --syn-spacing-1-5x-large: 40px;
324
335
  --syn-spacing-2x-large: 48px;
325
336
  --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
373
384
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
374
385
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
375
386
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
376
- --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
377
- --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
378
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
379
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
380
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
381
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
382
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
383
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
384
- --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
385
387
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
386
388
  --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
387
389
  --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.1
2
+ * @synergy-design-system/tokens version 3.4.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -307,8 +307,9 @@
307
307
  --syn-option-icon-color-hover: var(--syn-color-neutral-0);
308
308
  --syn-overlay-background-blur: 8px;
309
309
  --syn-overlay-background-color: rgba(0, 5, 26, 0.6);
310
- --syn-page-background: var(--syn-color-neutral-0); /** Will be DEPRECATED */
310
+ --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
311
311
  --syn-page-background-color: var(--syn-color-neutral-0);
312
+ --syn-page-background-color-muted: var(--syn-color-neutral-0);
312
313
  --syn-panel-background-color: var(--syn-color-neutral-50);
313
314
  --syn-panel-border-color: var(--syn-color-neutral-300);
314
315
  --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
320
321
  --syn-range-tick-color: var(--syn-color-neutral-600);
321
322
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
322
323
  --syn-readonly-background-color: var(--syn-color-neutral-300);
324
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
325
+ --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
326
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
327
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
328
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
329
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
330
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
331
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
332
+ --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
333
+ --syn-shadow-sticky-down: 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
323
334
  --syn-spacing-1-5x-large: 40px;
324
335
  --syn-spacing-2x-large: 48px;
325
336
  --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
373
384
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
374
385
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
375
386
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
376
- --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
377
- --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
378
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
379
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
380
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
381
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
382
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
383
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
384
- --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
385
387
  --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
386
388
  --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
387
389
  --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.2.1
2
+ * @synergy-design-system/tokens version 3.4.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -307,8 +307,9 @@
307
307
  --syn-option-icon-color-hover: var(--syn-color-neutral-0);
308
308
  --syn-overlay-background-blur: 8px;
309
309
  --syn-overlay-background-color: rgba(0, 5, 26, 0.3);
310
- --syn-page-background: #f8f7f6; /** Will be DEPRECATED */
311
- --syn-page-background-color: #f8f7f6;
310
+ --syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
311
+ --syn-page-background-color: var(--syn-color-neutral-0);
312
+ --syn-page-background-color-muted: #f8f7f6;
312
313
  --syn-panel-background-color: var(--syn-color-neutral-0);
313
314
  --syn-panel-border-color: #e6e1dc;
314
315
  --syn-panel-border-radius: var(--syn-border-radius-medium);
@@ -320,6 +321,16 @@
320
321
  --syn-range-tick-color: var(--syn-color-neutral-500);
321
322
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
322
323
  --syn-readonly-background-color: #e6e1dc;
324
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
325
+ --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
326
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
327
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
328
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
329
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
330
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
331
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
332
+ --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
333
+ --syn-shadow-sticky-down: 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
323
334
  --syn-spacing-1-5x-large: 40px;
324
335
  --syn-spacing-2x-large: 48px;
325
336
  --syn-spacing-2x-small: 4px;
@@ -373,15 +384,6 @@
373
384
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
374
385
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
375
386
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
376
- --syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
377
- --syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
378
- --syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
379
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
380
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
381
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
382
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
383
- --syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
384
- --syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
385
387
  --syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
386
388
  --syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
387
389
  --syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/static/components/syn-header/docs.md CHANGED
@@ -132,3 +132,13 @@ Use the Burger Menu as trigger to open and close the Navigation. In the open sta
132
132
  ```html
133
133
  <syn-header burger-menu="closed" label="App Name"> </syn-header>
134
134
  ```
135
+
136
+ ---
137
+
138
+ ## Sticky
139
+
140
+ Use the sticky attribute to add a shadow when the header is fixed at the top and other content scrolls behind it.
141
+
142
+ ```html
143
+ <syn-header label="App Name" sticky="" burger-menu="hidden"></syn-header>
144
+ ```
package/metadata/static/templates/appshell.md CHANGED
@@ -218,7 +218,7 @@ The side navigation opens when the user clicks on the burger menu. As the side n
218
218
  }
219
219
 
220
220
  .synergy-demo-content {
221
- background: var(--syn-page-background-color);
221
+ background: var(--syn-page-background-color-muted);
222
222
  display: flex;
223
223
  flex: 1 0 auto;
224
224
  flex-direction: column;
@@ -483,7 +483,7 @@ The side navigation opens when the user clicks on the burger menu. As the side n
483
483
  }
484
484
 
485
485
  .synergy-demo-content {
486
- background: var(--syn-page-background-color);
486
+ background: var(--syn-page-background-color-muted);
487
487
  display: flex;
488
488
  flex: 1 0 auto;
489
489
  flex-direction: column;
@@ -779,7 +779,7 @@ The navigation opens when the user hovers over it. As the navigation opens, it o
779
779
  }
780
780
 
781
781
  .synergy-demo-content {
782
- background: var(--syn-page-background-color);
782
+ background: var(--syn-page-background-color-muted);
783
783
  display: flex;
784
784
  flex: 1 0 auto;
785
785
  flex-direction: column;
@@ -1056,7 +1056,7 @@ The navigation opens when the user touches it. As the side navigation opens, a t
1056
1056
  }
1057
1057
 
1058
1058
  .synergy-demo-content {
1059
- background: var(--syn-page-background-color);
1059
+ background: var(--syn-page-background-color-muted);
1060
1060
  display: flex;
1061
1061
  flex: 1 0 auto;
1062
1062
  flex-direction: column;
@@ -1317,7 +1317,7 @@ General BehaviourThe navigation maintains its compact width until the user click
1317
1317
  }
1318
1318
 
1319
1319
  .synergy-demo-content {
1320
- background: var(--syn-page-background-color);
1320
+ background: var(--syn-page-background-color-muted);
1321
1321
  display: flex;
1322
1322
  flex: 1 0 auto;
1323
1323
  flex-direction: column;
@@ -1578,7 +1578,7 @@ General BehaviourThe navigation maintains its compact width until the user click
1578
1578
  }
1579
1579
 
1580
1580
  .synergy-demo-content {
1581
- background: var(--syn-page-background-color);
1581
+ background: var(--syn-page-background-color-muted);
1582
1582
  display: flex;
1583
1583
  flex: 1 0 auto;
1584
1584
  flex-direction: column;
@@ -1796,7 +1796,7 @@ The top navigation can be combined with a light grey background.This variant is
1796
1796
  }
1797
1797
 
1798
1798
  .synergy-demo-content {
1799
- background: var(--syn-page-background-color);
1799
+ background: var(--syn-page-background-color-muted);
1800
1800
  display: flex;
1801
1801
  flex: 1 0 auto;
1802
1802
  flex-direction: column;
@@ -2002,7 +2002,7 @@ Additionally the top navigation can be combined with an alternative background.
2002
2002
  }
2003
2003
 
2004
2004
  .synergy-demo-content {
2005
- background: var(--syn-page-background-color);
2005
+ background: var(--syn-page-background-color-muted);
2006
2006
  display: flex;
2007
2007
  flex: 1 0 auto;
2008
2008
  flex-direction: column;
package/metadata/static/templates/footer.md CHANGED
@@ -295,7 +295,7 @@
295
295
  }
296
296
 
297
297
  .synergy-demo-content {
298
- background: var(--syn-page-background-color);
298
+ background: var(--syn-page-background-color-muted);
299
299
  display: flex;
300
300
  flex: 1 0 auto;
301
301
  flex-direction: column;
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.3.0",
32
31
  "@synergy-design-system/docs": "0.1.0",
32
+ "@synergy-design-system/components": "3.4.1",
33
+ "@synergy-design-system/fonts": "1.0.3",
33
34
  "@synergy-design-system/eslint-config-syn": "^0.1.0",
34
35
  "@synergy-design-system/styles": "2.0.1",
35
- "@synergy-design-system/tokens": "^3.3.0",
36
- "@synergy-design-system/fonts": "1.0.3"
36
+ "@synergy-design-system/tokens": "^3.4.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.5.0",
70
+ "version": "2.6.1",
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",