@synergy-design-system/tokens 2.29.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 +7 -0
  2. package/dist/js/index.d.ts +16 -1
  3. package/dist/js/index.js +16 -1
  4. package/dist/scss/_tokens.scss +4 -1
  5. package/dist/themes/dark.css +4 -1
  6. package/dist/themes/light.css +4 -1
  7. package/dist/themes/sick2018_dark.css +4 -1
  8. package/dist/themes/sick2018_light.css +4 -1
  9. package/dist/themes/sick2025_dark.css +4 -1
  10. package/dist/themes/sick2025_light.css +4 -1
  11. package/package.json +1 -1
  12. package/src/figma-tokens/_docs.json +3 -3
  13. package/src/figma-variables/output/sick2018-dark.json +20 -0
  14. package/src/figma-variables/output/sick2018-light.json +20 -0
  15. package/src/figma-variables/output/sick2025-dark.json +20 -0
  16. package/src/figma-variables/output/sick2025-light.json +20 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
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
+
1
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)
2
9
 
3
10
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.28.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,6 +988,11 @@ 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
  */
@@ -998,6 +1008,11 @@ export const SynOverlayBackgroundBlur: string;
998
1008
  */
999
1009
  export const SynOverlayBackgroundColor: string;
1000
1010
 
1011
+ /**
1012
+ * Maps to the css variable `--syn-page-background`
1013
+ */
1014
+ export const SynPageBackground: string;
1015
+
1001
1016
  /**
1002
1017
  * Maps to the css variable `--syn-panel-background-color`
1003
1018
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.28.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,6 +988,11 @@ 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
  */
@@ -998,6 +1008,11 @@ export const SynOverlayBackgroundBlur = 'var(--syn-overlay-background-blur)';
998
1008
  */
999
1009
  export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';
1000
1010
 
1011
+ /**
1012
+ * @type {string}
1013
+ */
1014
+ export const SynPageBackground = 'var(--syn-page-background)';
1015
+
1001
1016
  /**
1002
1017
  * @type {string}
1003
1018
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.28.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,9 +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;
202
204
  $SynOverlayBackgroundBlur: var(--syn-overlay-background-blur) !default;
203
205
  $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
206
+ $SynPageBackground: var(--syn-page-background) !default;
204
207
  $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
205
208
  $SynPanelBorderColor: var(--syn-panel-border-color) !default;
206
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.28.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);
@@ -203,9 +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
209
  --syn-overlay-background-blur: 0px;
208
210
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
211
+ --syn-page-background: var(--syn-color-neutral-50);
209
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
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.28.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);
@@ -203,9 +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
209
  --syn-overlay-background-blur: 0px;
208
210
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
211
+ --syn-page-background: var(--syn-color-neutral-100);
209
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
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.28.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);
@@ -203,9 +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
209
  --syn-overlay-background-blur: 0px;
208
210
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
211
+ --syn-page-background: var(--syn-color-neutral-50);
209
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
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.28.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);
@@ -203,9 +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
209
  --syn-overlay-background-blur: 0px;
208
210
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
211
+ --syn-page-background: var(--syn-color-neutral-100);
209
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
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.28.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-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);
@@ -203,9 +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
209
  --syn-overlay-background-blur: 16px;
208
210
  --syn-overlay-background-color: rgba(0, 10, 55, 0.6);
211
+ --syn-page-background: var(--syn-color-neutral-0);
209
212
  --syn-panel-background-color: var(--syn-color-neutral-50);
210
213
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
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.28.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);
@@ -203,9 +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
209
  --syn-overlay-background-blur: 16px;
208
210
  --syn-overlay-background-color: rgba(0, 10, 55, 0.3);
211
+ --syn-page-background: #f8f7f6;
209
212
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
213
  --syn-panel-border-color: #e6e1dc;
211
214
  --syn-panel-border-radius: var(--syn-border-radius-medium);
package/package.json CHANGED
@@ -113,7 +113,7 @@
113
113
  },
114
114
  "type": "module",
115
115
  "types": "./dist/js/index.d.ts",
116
- "version": "2.29.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": {
@@ -893,6 +901,12 @@
893
901
  "value": "7%"
894
902
  }
895
903
  },
904
+ "logo": {
905
+ "color": {
906
+ "type": "color",
907
+ "value": "{color.primary.400}"
908
+ }
909
+ },
896
910
  "opacity": {
897
911
  "50": {
898
912
  "description": "50%",
@@ -912,6 +926,12 @@
912
926
  }
913
927
  }
914
928
  },
929
+ "page": {
930
+ "background": {
931
+ "type": "color",
932
+ "value": "{color.neutral.50}"
933
+ }
934
+ },
915
935
  "panel": {
916
936
  "background": {
917
937
  "color": {
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": {
@@ -893,6 +901,12 @@
893
901
  "value": "7%"
894
902
  }
895
903
  },
904
+ "logo": {
905
+ "color": {
906
+ "type": "color",
907
+ "value": "{color.primary.600}"
908
+ }
909
+ },
896
910
  "opacity": {
897
911
  "50": {
898
912
  "description": "50%",
@@ -912,6 +926,12 @@
912
926
  }
913
927
  }
914
928
  },
929
+ "page": {
930
+ "background": {
931
+ "type": "color",
932
+ "value": "{color.neutral.100}"
933
+ }
934
+ },
915
935
  "panel": {
916
936
  "background": {
917
937
  "color": {
package/src/figma-variables/output/sick2025-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": {
@@ -893,6 +901,12 @@
893
901
  "value": "25%"
894
902
  }
895
903
  },
904
+ "logo": {
905
+ "color": {
906
+ "type": "color",
907
+ "value": "{color.primary.300}"
908
+ }
909
+ },
896
910
  "opacity": {
897
911
  "50": {
898
912
  "description": "50%",
@@ -912,6 +926,12 @@
912
926
  }
913
927
  }
914
928
  },
929
+ "page": {
930
+ "background": {
931
+ "type": "color",
932
+ "value": "{color.neutral.0}"
933
+ }
934
+ },
915
935
  "panel": {
916
936
  "background": {
917
937
  "color": {
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": {
@@ -893,6 +901,12 @@
893
901
  "value": "25%"
894
902
  }
895
903
  },
904
+ "logo": {
905
+ "color": {
906
+ "type": "color",
907
+ "value": "{color.primary.700}"
908
+ }
909
+ },
896
910
  "opacity": {
897
911
  "50": {
898
912
  "description": "50%",
@@ -912,6 +926,12 @@
912
926
  }
913
927
  }
914
928
  },
929
+ "page": {
930
+ "background": {
931
+ "type": "color",
932
+ "value": "#f8f7f6"
933
+ }
934
+ },
915
935
  "panel": {
916
936
  "background": {
917
937
  "color": {