@synergy-design-system/tokens 2.28.0 → 2.30.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 (16) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/js/index.d.ts +21 -1
  3. package/dist/js/index.js +21 -1
  4. package/dist/scss/_tokens.scss +5 -1
  5. package/dist/themes/dark.css +8 -4
  6. package/dist/themes/light.css +8 -4
  7. package/dist/themes/sick2018_dark.css +8 -4
  8. package/dist/themes/sick2018_light.css +8 -4
  9. package/dist/themes/sick2025_dark.css +9 -5
  10. package/dist/themes/sick2025_light.css +7 -3
  11. package/package.json +3 -3
  12. package/src/figma-tokens/_docs.json +3 -3
  13. package/src/figma-variables/output/sick2018-dark.json +39 -3
  14. package/src/figma-variables/output/sick2018-light.json +39 -3
  15. package/src/figma-variables/output/sick2025-dark.json +40 -4
  16. package/src/figma-variables/output/sick2025-light.json +38 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v2.30.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.29.0...tokens/2.30.0) (2025-10-22)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-header ([#1047](https://github.com/synergy-design-system/synergy-design-system/issues/1047)) ([6841148](https://github.com/synergy-design-system/synergy-design-system/commit/684114811f939b91a13302cc85300fd1b9b1670e))
7
+
8
+ # [@synergy-design-system/tokens-v2.29.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.28.0...tokens/2.29.0) (2025-10-20)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ CD update for syn-drawer ([#1043](https://github.com/synergy-design-system/synergy-design-system/issues/1043)) ([214b367](https://github.com/synergy-design-system/synergy-design-system/commit/214b367e8e603e264ec2718772087601f463439e))
14
+
1
15
  # [@synergy-design-system/tokens-v2.28.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.27.0...tokens/2.28.0) (2025-10-13)
2
16
 
3
17
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -563,6 +563,11 @@ export const SynFontWeightNormal: string;
563
563
  */
564
564
  export const SynFontWeightSemibold: string;
565
565
 
566
+ /**
567
+ * Maps to the css variable `--syn-header-border-color`
568
+ */
569
+ export const SynHeaderBorderColor: string;
570
+
566
571
  /**
567
572
  * Maps to the css variable `--syn-input-background-color`
568
573
  */
@@ -983,16 +988,31 @@ export const SynLinkQuietColorHover: string;
983
988
  */
984
989
  export const SynLinkUnderlineOutline: string;
985
990
 
991
+ /**
992
+ * Maps to the css variable `--syn-logo-color`
993
+ */
994
+ export const SynLogoColor: string;
995
+
986
996
  /**
987
997
  * Maps to the css variable `--syn-opacity-50`
988
998
  */
989
999
  export const SynOpacity50: string;
990
1000
 
1001
+ /**
1002
+ * Maps to the css variable `--syn-overlay-background-blur`
1003
+ */
1004
+ export const SynOverlayBackgroundBlur: string;
1005
+
991
1006
  /**
992
1007
  * Maps to the css variable `--syn-overlay-background-color`
993
1008
  */
994
1009
  export const SynOverlayBackgroundColor: string;
995
1010
 
1011
+ /**
1012
+ * Maps to the css variable `--syn-page-background`
1013
+ */
1014
+ export const SynPageBackground: string;
1015
+
996
1016
  /**
997
1017
  * Maps to the css variable `--syn-panel-background-color`
998
1018
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -563,6 +563,11 @@ export const SynFontWeightNormal = 'var(--syn-font-weight-normal)';
563
563
  */
564
564
  export const SynFontWeightSemibold = 'var(--syn-font-weight-semibold)';
565
565
 
566
+ /**
567
+ * @type {string}
568
+ */
569
+ export const SynHeaderBorderColor = 'var(--syn-header-border-color)';
570
+
566
571
  /**
567
572
  * @type {string}
568
573
  */
@@ -983,16 +988,31 @@ export const SynLinkQuietColorHover = 'var(--syn-link-quiet-color-hover)';
983
988
  */
984
989
  export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
985
990
 
991
+ /**
992
+ * @type {string}
993
+ */
994
+ export const SynLogoColor = 'var(--syn-logo-color)';
995
+
986
996
  /**
987
997
  * @type {string}
988
998
  */
989
999
  export const SynOpacity50 = 'var(--syn-opacity-50)';
990
1000
 
1001
+ /**
1002
+ * @type {string}
1003
+ */
1004
+ export const SynOverlayBackgroundBlur = 'var(--syn-overlay-background-blur)';
1005
+
991
1006
  /**
992
1007
  * @type {string}
993
1008
  */
994
1009
  export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';
995
1010
 
1011
+ /**
1012
+ * @type {string}
1013
+ */
1014
+ export const SynPageBackground = 'var(--syn-page-background)';
1015
+
996
1016
  /**
997
1017
  * @type {string}
998
1018
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -114,6 +114,7 @@ $SynFontWeightBold: var(--syn-font-weight-bold) !default;
114
114
  $SynFontWeightLight: var(--syn-font-weight-light) !default;
115
115
  $SynFontWeightNormal: var(--syn-font-weight-normal) !default;
116
116
  $SynFontWeightSemibold: var(--syn-font-weight-semibold) !default;
117
+ $SynHeaderBorderColor: var(--syn-header-border-color) !default;
117
118
  $SynInputBackgroundColor: var(--syn-input-background-color) !default;
118
119
  $SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !default;
119
120
  $SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
@@ -198,8 +199,11 @@ $SynLinkQuietColor: var(--syn-link-quiet-color) !default;
198
199
  $SynLinkQuietColorActive: var(--syn-link-quiet-color-active) !default;
199
200
  $SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
200
201
  $SynLinkUnderlineOutline: var(--syn-link-underline-outline) !default;
202
+ $SynLogoColor: var(--syn-logo-color) !default;
201
203
  $SynOpacity50: var(--syn-opacity-50) !default;
204
+ $SynOverlayBackgroundBlur: var(--syn-overlay-background-blur) !default;
202
205
  $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
206
+ $SynPageBackground: var(--syn-page-background) !default;
203
207
  $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
204
208
  $SynPanelBorderColor: var(--syn-panel-border-color) !default;
205
209
  $SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -119,6 +119,7 @@
119
119
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
120
  --syn-font-weight-normal: 400;
121
121
  --syn-font-weight-semibold: 600;
122
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
123
  --syn-input-background-color: var(--syn-color-neutral-0);
123
124
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
125
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -138,7 +139,7 @@
138
139
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
140
  --syn-input-disabled-opacity: 0.5;
140
141
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
142
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
143
  --syn-input-focus-ring-offset: 0px;
143
144
  --syn-input-font-family: var(--syn-font-sans);
144
145
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -149,7 +150,7 @@
149
150
  --syn-input-height-medium: var(--syn-spacing-2x-large);
150
151
  --syn-input-height-small: 36px;
151
152
  --syn-input-help-text-color: var(--syn-color-neutral-800);
152
- --syn-input-help-text-color-error: var(--syn-color-error-700);
153
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
153
154
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
154
155
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
155
156
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
@@ -203,8 +204,11 @@
203
204
  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
205
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
206
  --syn-link-underline-outline: 7%;
207
+ --syn-logo-color: var(--syn-color-primary-400);
206
208
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
209
+ --syn-overlay-background-blur: 0px;
210
+ --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
211
+ --syn-page-background: var(--syn-color-neutral-50);
208
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
214
  --syn-panel-border-radius: var(--syn-border-radius-medium);
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -119,6 +119,7 @@
119
119
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
120
  --syn-font-weight-normal: 400;
121
121
  --syn-font-weight-semibold: 600;
122
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
123
  --syn-input-background-color: var(--syn-color-neutral-0);
123
124
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
125
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -138,7 +139,7 @@
138
139
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
140
  --syn-input-disabled-opacity: 0.5;
140
141
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
142
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
143
  --syn-input-focus-ring-offset: 0px;
143
144
  --syn-input-font-family: var(--syn-font-sans);
144
145
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -149,7 +150,7 @@
149
150
  --syn-input-height-medium: var(--syn-spacing-2x-large);
150
151
  --syn-input-height-small: 36px;
151
152
  --syn-input-help-text-color: var(--syn-color-neutral-800);
152
- --syn-input-help-text-color-error: var(--syn-color-error-700);
153
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
153
154
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
154
155
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
155
156
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
@@ -203,8 +204,11 @@
203
204
  --syn-link-quiet-color-active: var(--syn-interactive-emphasis-color-active);
204
205
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
206
  --syn-link-underline-outline: 7%;
207
+ --syn-logo-color: var(--syn-color-primary-600);
206
208
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
209
+ --syn-overlay-background-blur: 0px;
210
+ --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
211
+ --syn-page-background: var(--syn-color-neutral-100);
208
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
214
  --syn-panel-border-radius: var(--syn-border-radius-medium);
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -119,6 +119,7 @@
119
119
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
120
  --syn-font-weight-normal: 400;
121
121
  --syn-font-weight-semibold: 600;
122
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
123
  --syn-input-background-color: var(--syn-color-neutral-0);
123
124
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
125
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -138,7 +139,7 @@
138
139
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
140
  --syn-input-disabled-opacity: 0.5;
140
141
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
142
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
143
  --syn-input-focus-ring-offset: 0px;
143
144
  --syn-input-font-family: var(--syn-font-sans);
144
145
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -149,7 +150,7 @@
149
150
  --syn-input-height-medium: var(--syn-spacing-2x-large);
150
151
  --syn-input-height-small: 36px;
151
152
  --syn-input-help-text-color: var(--syn-color-neutral-800);
152
- --syn-input-help-text-color-error: var(--syn-color-error-700);
153
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
153
154
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
154
155
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
155
156
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
@@ -203,8 +204,11 @@
203
204
  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
205
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
206
  --syn-link-underline-outline: 7%;
207
+ --syn-logo-color: var(--syn-color-primary-400);
206
208
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
209
+ --syn-overlay-background-blur: 0px;
210
+ --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
211
+ --syn-page-background: var(--syn-color-neutral-50);
208
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
214
  --syn-panel-border-radius: var(--syn-border-radius-medium);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -119,6 +119,7 @@
119
119
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
120
  --syn-font-weight-normal: 400;
121
121
  --syn-font-weight-semibold: 600;
122
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
123
  --syn-input-background-color: var(--syn-color-neutral-0);
123
124
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
125
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -138,7 +139,7 @@
138
139
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
140
  --syn-input-disabled-opacity: 0.5;
140
141
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
142
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
143
  --syn-input-focus-ring-offset: 0px;
143
144
  --syn-input-font-family: var(--syn-font-sans);
144
145
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -149,7 +150,7 @@
149
150
  --syn-input-height-medium: var(--syn-spacing-2x-large);
150
151
  --syn-input-height-small: 36px;
151
152
  --syn-input-help-text-color: var(--syn-color-neutral-800);
152
- --syn-input-help-text-color-error: var(--syn-color-error-700);
153
+ --syn-input-help-text-color-error: var(--syn-color-error-600);
153
154
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
154
155
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
155
156
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
@@ -203,8 +204,11 @@
203
204
  --syn-link-quiet-color-active: var(--syn-interactive-emphasis-color-active);
204
205
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
206
  --syn-link-underline-outline: 7%;
207
+ --syn-logo-color: var(--syn-color-primary-600);
206
208
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
209
+ --syn-overlay-background-blur: 0px;
210
+ --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
211
+ --syn-page-background: var(--syn-color-neutral-100);
208
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
214
  --syn-panel-border-radius: var(--syn-border-radius-medium);
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -45,7 +45,7 @@
45
45
  --syn-color-error-900: #ffe3e4;
46
46
  --syn-color-error-950: #fff1f1;
47
47
  --syn-color-neutral-0: #000414;
48
- --syn-color-neutral-50: #00061f;
48
+ --syn-color-neutral-50: #000724;
49
49
  --syn-color-neutral-100: #000a37;
50
50
  --syn-color-neutral-200: #141e47;
51
51
  --syn-color-neutral-300: #262f55;
@@ -56,7 +56,7 @@
56
56
  --syn-color-neutral-800: #9298b6;
57
57
  --syn-color-neutral-900: #adb2c8;
58
58
  --syn-color-neutral-950: #c8ccdb;
59
- --syn-color-neutral-1000: #e3e5ed;
59
+ --syn-color-neutral-1000: #e9ebf1;
60
60
  --syn-color-primary-50: #0e275d;
61
61
  --syn-color-primary-100: #0d3f9b;
62
62
  --syn-color-primary-200: #0845c5;
@@ -119,6 +119,7 @@
119
119
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
120
  --syn-font-weight-normal: 400;
121
121
  --syn-font-weight-semibold: 600;
122
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
123
  --syn-input-background-color: var(--syn-color-neutral-50);
123
124
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
125
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -138,7 +139,7 @@
138
139
  --syn-input-color-hover: var(--syn-color-neutral-1000);
139
140
  --syn-input-disabled-opacity: 0.5;
140
141
  --syn-input-focus-ring-color: var(--syn-color-primary-700);
141
- --syn-input-focus-ring-error: var(--syn-color-error-400);
142
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
143
  --syn-input-focus-ring-offset: 0px;
143
144
  --syn-input-font-family: var(--syn-font-sans);
144
145
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -203,8 +204,11 @@
203
204
  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
205
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
206
  --syn-link-underline-outline: 25%;
207
+ --syn-logo-color: var(--syn-color-primary-300);
206
208
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
209
+ --syn-overlay-background-blur: 16px;
210
+ --syn-overlay-background-color: rgba(0, 10, 55, 0.6);
211
+ --syn-page-background: var(--syn-color-neutral-0);
208
212
  --syn-panel-background-color: var(--syn-color-neutral-50);
209
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
210
214
  --syn-panel-border-radius: var(--syn-border-radius-medium);
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.27.0
2
+ * @synergy-design-system/tokens version 2.29.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -119,6 +119,7 @@
119
119
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
120
  --syn-font-weight-normal: 400;
121
121
  --syn-font-weight-semibold: 600;
122
+ --syn-header-border-color: #d5ccc5;
122
123
  --syn-input-background-color: var(--syn-color-neutral-0);
123
124
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
125
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -138,7 +139,7 @@
138
139
  --syn-input-color-hover: var(--syn-color-neutral-950);
139
140
  --syn-input-disabled-opacity: 0.5;
140
141
  --syn-input-focus-ring-color: var(--syn-color-primary-500);
141
- --syn-input-focus-ring-error: var(--syn-color-error-500);
142
+ --syn-input-focus-ring-error: var(--syn-color-error-600);
142
143
  --syn-input-focus-ring-offset: 0px;
143
144
  --syn-input-font-family: var(--syn-font-sans);
144
145
  --syn-input-font-size-large: var(--syn-font-size-large);
@@ -203,8 +204,11 @@
203
204
  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
205
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
206
  --syn-link-underline-outline: 25%;
207
+ --syn-logo-color: var(--syn-color-primary-700);
206
208
  --syn-opacity-50: 0.5; /** 50% */
207
- --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
209
+ --syn-overlay-background-blur: 16px;
210
+ --syn-overlay-background-color: rgba(0, 10, 55, 0.3);
211
+ --syn-page-background: #f8f7f6;
208
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
209
213
  --syn-panel-border-color: #e6e1dc;
210
214
  --syn-panel-border-radius: var(--syn-border-radius-medium);
package/package.json CHANGED
@@ -25,8 +25,8 @@
25
25
  "style-dictionary": "^5.0.1",
26
26
  "stylelint": "^16.23.0",
27
27
  "typescript": "^5.8.3",
28
- "@synergy-design-system/stylelint-config-syn": "0.1.0",
29
- "@synergy-design-system/eslint-config-syn": "0.1.0"
28
+ "@synergy-design-system/eslint-config-syn": "0.1.0",
29
+ "@synergy-design-system/stylelint-config-syn": "0.1.0"
30
30
  },
31
31
  "exports": {
32
32
  ".": {
@@ -113,7 +113,7 @@
113
113
  },
114
114
  "type": "module",
115
115
  "types": "./dist/js/index.d.ts",
116
- "version": "2.28.0",
116
+ "version": "2.30.0",
117
117
  "scripts": {
118
118
  "build": "pnpm clean && node scripts/build.js",
119
119
  "build:all": "dotenvx -q run pnpm build:_all",
package/src/figma-tokens/_docs.json CHANGED
@@ -4013,13 +4013,13 @@
4013
4013
  "type": "text"
4014
4014
  }
4015
4015
  },
4016
- "white-background": {
4016
+ "alternative-background": {
4017
4017
  "title": {
4018
- "value": "White Background",
4018
+ "value": "Alternative Background",
4019
4019
  "type": "text"
4020
4020
  },
4021
4021
  "description": {
4022
- "value": "Additionally the top navigation can be combined with a white background.",
4022
+ "value": "Additionally the top navigation can be combined with an alternative background.",
4023
4023
  "type": "text"
4024
4024
  }
4025
4025
  }
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -494,6 +494,14 @@
494
494
  "value": "600"
495
495
  }
496
496
  },
497
+ "header": {
498
+ "border": {
499
+ "color": {
500
+ "type": "color",
501
+ "value": "{color.neutral.400}"
502
+ }
503
+ }
504
+ },
497
505
  "input": {
498
506
  "background": {
499
507
  "color": {
@@ -534,6 +542,10 @@
534
542
  "type": "color",
535
543
  "value": "{color.neutral.950}"
536
544
  },
545
+ "color-offset": {
546
+ "type": "color",
547
+ "value": "{panel.background.color}"
548
+ },
537
549
  "radius-large": {
538
550
  "type": "sizing",
539
551
  "value": "{border-radius.none}"
@@ -578,7 +590,7 @@
578
590
  },
579
591
  "error": {
580
592
  "type": "color",
581
- "value": "{color.error.400}"
593
+ "value": "{color.error.600}"
582
594
  },
583
595
  "offset": {
584
596
  "type": "sizing",
@@ -628,7 +640,7 @@
628
640
  },
629
641
  "color-error": {
630
642
  "type": "color",
631
- "value": "{color.error.700}"
643
+ "value": "{color.error.600}"
632
644
  },
633
645
  "font-size": {
634
646
  "large": {
@@ -889,6 +901,12 @@
889
901
  "value": "7%"
890
902
  }
891
903
  },
904
+ "logo": {
905
+ "color": {
906
+ "type": "color",
907
+ "value": "{color.primary.400}"
908
+ }
909
+ },
892
910
  "opacity": {
893
911
  "50": {
894
912
  "description": "50%",
@@ -898,12 +916,22 @@
898
916
  },
899
917
  "overlay": {
900
918
  "background": {
919
+ "blur": {
920
+ "type": "sizing",
921
+ "value": "0px"
922
+ },
901
923
  "color": {
902
924
  "type": "color",
903
- "value": "rgba(0, 0, 0, 0.50)"
925
+ "value": "rgba(49, 55, 58, 0.50)"
904
926
  }
905
927
  }
906
928
  },
929
+ "page": {
930
+ "background": {
931
+ "type": "color",
932
+ "value": "{color.neutral.50}"
933
+ }
934
+ },
907
935
  "panel": {
908
936
  "background": {
909
937
  "color": {
@@ -1134,6 +1162,14 @@
1134
1162
  "text-inverted": {
1135
1163
  "type": "color",
1136
1164
  "value": "{color.neutral.0}"
1165
+ },
1166
+ "text-quiet": {
1167
+ "type": "color",
1168
+ "value": "{color.neutral.800}"
1169
+ },
1170
+ "text-quiet-inverted": {
1171
+ "type": "color",
1172
+ "value": "{color.neutral.200}"
1137
1173
  }
1138
1174
  }
1139
1175
  },
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -494,6 +494,14 @@
494
494
  "value": "600"
495
495
  }
496
496
  },
497
+ "header": {
498
+ "border": {
499
+ "color": {
500
+ "type": "color",
501
+ "value": "{color.neutral.400}"
502
+ }
503
+ }
504
+ },
497
505
  "input": {
498
506
  "background": {
499
507
  "color": {
@@ -534,6 +542,10 @@
534
542
  "type": "color",
535
543
  "value": "{color.neutral.950}"
536
544
  },
545
+ "color-offset": {
546
+ "type": "color",
547
+ "value": "{panel.background.color}"
548
+ },
537
549
  "radius-large": {
538
550
  "type": "sizing",
539
551
  "value": "{border-radius.none}"
@@ -578,7 +590,7 @@
578
590
  },
579
591
  "error": {
580
592
  "type": "color",
581
- "value": "{color.error.400}"
593
+ "value": "{color.error.600}"
582
594
  },
583
595
  "offset": {
584
596
  "type": "sizing",
@@ -628,7 +640,7 @@
628
640
  },
629
641
  "color-error": {
630
642
  "type": "color",
631
- "value": "{color.error.700}"
643
+ "value": "{color.error.600}"
632
644
  },
633
645
  "font-size": {
634
646
  "large": {
@@ -889,6 +901,12 @@
889
901
  "value": "7%"
890
902
  }
891
903
  },
904
+ "logo": {
905
+ "color": {
906
+ "type": "color",
907
+ "value": "{color.primary.600}"
908
+ }
909
+ },
892
910
  "opacity": {
893
911
  "50": {
894
912
  "description": "50%",
@@ -898,12 +916,22 @@
898
916
  },
899
917
  "overlay": {
900
918
  "background": {
919
+ "blur": {
920
+ "type": "sizing",
921
+ "value": "0px"
922
+ },
901
923
  "color": {
902
924
  "type": "color",
903
- "value": "rgba(0, 0, 0, 0.50)"
925
+ "value": "rgba(49, 55, 58, 0.50)"
904
926
  }
905
927
  }
906
928
  },
929
+ "page": {
930
+ "background": {
931
+ "type": "color",
932
+ "value": "{color.neutral.100}"
933
+ }
934
+ },
907
935
  "panel": {
908
936
  "background": {
909
937
  "color": {
@@ -1134,6 +1162,14 @@
1134
1162
  "text-inverted": {
1135
1163
  "type": "color",
1136
1164
  "value": "{color.neutral.0}"
1165
+ },
1166
+ "text-quiet": {
1167
+ "type": "color",
1168
+ "value": "{color.neutral.800}"
1169
+ },
1170
+ "text-quiet-inverted": {
1171
+ "type": "color",
1172
+ "value": "{color.neutral.200}"
1137
1173
  }
1138
1174
  }
1139
1175
  },
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -172,7 +172,7 @@
172
172
  },
173
173
  "50": {
174
174
  "type": "color",
175
- "value": "#00061f"
175
+ "value": "#000724"
176
176
  },
177
177
  "100": {
178
178
  "type": "color",
@@ -216,7 +216,7 @@
216
216
  },
217
217
  "1000": {
218
218
  "type": "color",
219
- "value": "#e3e5ed"
219
+ "value": "#e9ebf1"
220
220
  }
221
221
  },
222
222
  "primary": {
@@ -494,6 +494,14 @@
494
494
  "value": "600"
495
495
  }
496
496
  },
497
+ "header": {
498
+ "border": {
499
+ "color": {
500
+ "type": "color",
501
+ "value": "{color.neutral.400}"
502
+ }
503
+ }
504
+ },
497
505
  "input": {
498
506
  "background": {
499
507
  "color": {
@@ -534,6 +542,10 @@
534
542
  "type": "color",
535
543
  "value": "{color.primary.500}"
536
544
  },
545
+ "color-offset": {
546
+ "type": "color",
547
+ "value": "{panel.background.color}"
548
+ },
537
549
  "radius-large": {
538
550
  "type": "sizing",
539
551
  "value": "{border-radius.medium}"
@@ -578,7 +590,7 @@
578
590
  },
579
591
  "error": {
580
592
  "type": "color",
581
- "value": "{color.error.400}"
593
+ "value": "{color.error.600}"
582
594
  },
583
595
  "offset": {
584
596
  "type": "sizing",
@@ -889,6 +901,12 @@
889
901
  "value": "25%"
890
902
  }
891
903
  },
904
+ "logo": {
905
+ "color": {
906
+ "type": "color",
907
+ "value": "{color.primary.300}"
908
+ }
909
+ },
892
910
  "opacity": {
893
911
  "50": {
894
912
  "description": "50%",
@@ -898,12 +916,22 @@
898
916
  },
899
917
  "overlay": {
900
918
  "background": {
919
+ "blur": {
920
+ "type": "sizing",
921
+ "value": "16px"
922
+ },
901
923
  "color": {
902
924
  "type": "color",
903
- "value": "rgba(0, 0, 0, 0.50)"
925
+ "value": "rgba(0, 10, 55, 0.60)"
904
926
  }
905
927
  }
906
928
  },
929
+ "page": {
930
+ "background": {
931
+ "type": "color",
932
+ "value": "{color.neutral.0}"
933
+ }
934
+ },
907
935
  "panel": {
908
936
  "background": {
909
937
  "color": {
@@ -1134,6 +1162,14 @@
1134
1162
  "text-inverted": {
1135
1163
  "type": "color",
1136
1164
  "value": "{color.neutral.50}"
1165
+ },
1166
+ "text-quiet": {
1167
+ "type": "color",
1168
+ "value": "{color.neutral.800}"
1169
+ },
1170
+ "text-quiet-inverted": {
1171
+ "type": "color",
1172
+ "value": "{color.neutral.200}"
1137
1173
  }
1138
1174
  }
1139
1175
  },
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -494,6 +494,14 @@
494
494
  "value": "600"
495
495
  }
496
496
  },
497
+ "header": {
498
+ "border": {
499
+ "color": {
500
+ "type": "color",
501
+ "value": "#d5ccc5"
502
+ }
503
+ }
504
+ },
497
505
  "input": {
498
506
  "background": {
499
507
  "color": {
@@ -534,6 +542,10 @@
534
542
  "type": "color",
535
543
  "value": "{color.primary.700}"
536
544
  },
545
+ "color-offset": {
546
+ "type": "color",
547
+ "value": "{panel.background.color}"
548
+ },
537
549
  "radius-large": {
538
550
  "type": "sizing",
539
551
  "value": "{border-radius.medium}"
@@ -578,7 +590,7 @@
578
590
  },
579
591
  "error": {
580
592
  "type": "color",
581
- "value": "{color.error.500}"
593
+ "value": "{color.error.600}"
582
594
  },
583
595
  "offset": {
584
596
  "type": "sizing",
@@ -889,6 +901,12 @@
889
901
  "value": "25%"
890
902
  }
891
903
  },
904
+ "logo": {
905
+ "color": {
906
+ "type": "color",
907
+ "value": "{color.primary.700}"
908
+ }
909
+ },
892
910
  "opacity": {
893
911
  "50": {
894
912
  "description": "50%",
@@ -898,12 +916,22 @@
898
916
  },
899
917
  "overlay": {
900
918
  "background": {
919
+ "blur": {
920
+ "type": "sizing",
921
+ "value": "16px"
922
+ },
901
923
  "color": {
902
924
  "type": "color",
903
- "value": "rgba(0, 0, 0, 0.50)"
925
+ "value": "rgba(0, 10, 55, 0.30)"
904
926
  }
905
927
  }
906
928
  },
929
+ "page": {
930
+ "background": {
931
+ "type": "color",
932
+ "value": "#f8f7f6"
933
+ }
934
+ },
907
935
  "panel": {
908
936
  "background": {
909
937
  "color": {
@@ -1134,6 +1162,14 @@
1134
1162
  "text-inverted": {
1135
1163
  "type": "color",
1136
1164
  "value": "{color.neutral.0}"
1165
+ },
1166
+ "text-quiet": {
1167
+ "type": "color",
1168
+ "value": "{color.neutral.700}"
1169
+ },
1170
+ "text-quiet-inverted": {
1171
+ "type": "color",
1172
+ "value": "{color.neutral.300}"
1137
1173
  }
1138
1174
  }
1139
1175
  },