@synergy-design-system/tokens 2.29.0 → 2.31.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 +5 -1
  6. package/dist/themes/light.css +5 -1
  7. package/dist/themes/sick2018_dark.css +5 -1
  8. package/dist/themes/sick2018_light.css +5 -1
  9. package/dist/themes/sick2025_dark.css +10 -6
  10. package/dist/themes/sick2025_light.css +10 -6
  11. package/package.json +1 -1
  12. package/src/figma-tokens/_docs.json +3 -3
  13. package/src/figma-variables/output/sick2018-dark.json +26 -0
  14. package/src/figma-variables/output/sick2018-light.json +26 -0
  15. package/src/figma-variables/output/sick2025-dark.json +31 -5
  16. package/src/figma-variables/output/sick2025-light.json +31 -5
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v2.31.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.30.0...tokens/2.31.0) (2025-10-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-breadcrumb ([#1045](https://github.com/synergy-design-system/synergy-design-system/issues/1045)) ([46383b2](https://github.com/synergy-design-system/synergy-design-system/commit/46383b2557d284328cfb49d476a052986cb47d75))
7
+
8
+ # [@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)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ 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))
14
+
1
15
  # [@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
16
 
3
17
 
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.30.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -63,6 +63,11 @@ export const SynBorderWidthSmall: string;
63
63
  */
64
64
  export const SynBorderWidthXLarge: string;
65
65
 
66
+ /**
67
+ * Maps to the css variable `--syn-breadcrumb-color`
68
+ */
69
+ export const SynBreadcrumbColor: string;
70
+
66
71
  /**
67
72
  * Maps to the css variable `--syn-button-font-size-large`
68
73
  */
@@ -563,6 +568,11 @@ export const SynFontWeightNormal: string;
563
568
  */
564
569
  export const SynFontWeightSemibold: string;
565
570
 
571
+ /**
572
+ * Maps to the css variable `--syn-header-border-color`
573
+ */
574
+ export const SynHeaderBorderColor: string;
575
+
566
576
  /**
567
577
  * Maps to the css variable `--syn-input-background-color`
568
578
  */
@@ -983,6 +993,11 @@ export const SynLinkQuietColorHover: string;
983
993
  */
984
994
  export const SynLinkUnderlineOutline: string;
985
995
 
996
+ /**
997
+ * Maps to the css variable `--syn-logo-color`
998
+ */
999
+ export const SynLogoColor: string;
1000
+
986
1001
  /**
987
1002
  * Maps to the css variable `--syn-opacity-50`
988
1003
  */
@@ -998,6 +1013,11 @@ export const SynOverlayBackgroundBlur: string;
998
1013
  */
999
1014
  export const SynOverlayBackgroundColor: string;
1000
1015
 
1016
+ /**
1017
+ * Maps to the css variable `--syn-page-background`
1018
+ */
1019
+ export const SynPageBackground: string;
1020
+
1001
1021
  /**
1002
1022
  * Maps to the css variable `--syn-panel-background-color`
1003
1023
  */
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.30.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -63,6 +63,11 @@ export const SynBorderWidthSmall = 'var(--syn-border-width-small)';
63
63
  */
64
64
  export const SynBorderWidthXLarge = 'var(--syn-border-width-x-large)';
65
65
 
66
+ /**
67
+ * @type {string}
68
+ */
69
+ export const SynBreadcrumbColor = 'var(--syn-breadcrumb-color)';
70
+
66
71
  /**
67
72
  * @type {string}
68
73
  */
@@ -563,6 +568,11 @@ export const SynFontWeightNormal = 'var(--syn-font-weight-normal)';
563
568
  */
564
569
  export const SynFontWeightSemibold = 'var(--syn-font-weight-semibold)';
565
570
 
571
+ /**
572
+ * @type {string}
573
+ */
574
+ export const SynHeaderBorderColor = 'var(--syn-header-border-color)';
575
+
566
576
  /**
567
577
  * @type {string}
568
578
  */
@@ -983,6 +993,11 @@ export const SynLinkQuietColorHover = 'var(--syn-link-quiet-color-hover)';
983
993
  */
984
994
  export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
985
995
 
996
+ /**
997
+ * @type {string}
998
+ */
999
+ export const SynLogoColor = 'var(--syn-logo-color)';
1000
+
986
1001
  /**
987
1002
  * @type {string}
988
1003
  */
@@ -998,6 +1013,11 @@ export const SynOverlayBackgroundBlur = 'var(--syn-overlay-background-blur)';
998
1013
  */
999
1014
  export const SynOverlayBackgroundColor = 'var(--syn-overlay-background-color)';
1000
1015
 
1016
+ /**
1017
+ * @type {string}
1018
+ */
1019
+ export const SynPageBackground = 'var(--syn-page-background)';
1020
+
1001
1021
  /**
1002
1022
  * @type {string}
1003
1023
  */
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.30.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -14,6 +14,7 @@ $SynBorderWidthMedium: var(--syn-border-width-medium) !default;
14
14
  $SynBorderWidthNone: var(--syn-border-width-none) !default;
15
15
  $SynBorderWidthSmall: var(--syn-border-width-small) !default;
16
16
  $SynBorderWidthXLarge: var(--syn-border-width-x-large) !default;
17
+ $SynBreadcrumbColor: var(--syn-breadcrumb-color) !default;
17
18
  $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;
18
19
  $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
19
20
  $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
@@ -114,6 +115,7 @@ $SynFontWeightBold: var(--syn-font-weight-bold) !default;
114
115
  $SynFontWeightLight: var(--syn-font-weight-light) !default;
115
116
  $SynFontWeightNormal: var(--syn-font-weight-normal) !default;
116
117
  $SynFontWeightSemibold: var(--syn-font-weight-semibold) !default;
118
+ $SynHeaderBorderColor: var(--syn-header-border-color) !default;
117
119
  $SynInputBackgroundColor: var(--syn-input-background-color) !default;
118
120
  $SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !default;
119
121
  $SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
@@ -198,9 +200,11 @@ $SynLinkQuietColor: var(--syn-link-quiet-color) !default;
198
200
  $SynLinkQuietColorActive: var(--syn-link-quiet-color-active) !default;
199
201
  $SynLinkQuietColorHover: var(--syn-link-quiet-color-hover) !default;
200
202
  $SynLinkUnderlineOutline: var(--syn-link-underline-outline) !default;
203
+ $SynLogoColor: var(--syn-logo-color) !default;
201
204
  $SynOpacity50: var(--syn-opacity-50) !default;
202
205
  $SynOverlayBackgroundBlur: var(--syn-overlay-background-blur) !default;
203
206
  $SynOverlayBackgroundColor: var(--syn-overlay-background-color) !default;
207
+ $SynPageBackground: var(--syn-page-background) !default;
204
208
  $SynPanelBackgroundColor: var(--syn-panel-background-color) !default;
205
209
  $SynPanelBorderColor: var(--syn-panel-border-color) !default;
206
210
  $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.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-color-neutral-500);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
@@ -119,6 +120,7 @@
119
120
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
123
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
124
  --syn-input-background-color: var(--syn-color-neutral-0);
123
125
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
126
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -203,9 +205,11 @@
203
205
  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
206
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
207
  --syn-link-underline-outline: 7%;
208
+ --syn-logo-color: var(--syn-color-primary-400);
206
209
  --syn-opacity-50: 0.5; /** 50% */
207
210
  --syn-overlay-background-blur: 0px;
208
211
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
212
+ --syn-page-background: var(--syn-color-neutral-50);
209
213
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
214
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
215
  --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.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-color-neutral-500);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
@@ -119,6 +120,7 @@
119
120
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
123
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
124
  --syn-input-background-color: var(--syn-color-neutral-0);
123
125
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
126
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -203,9 +205,11 @@
203
205
  --syn-link-quiet-color-active: var(--syn-interactive-emphasis-color-active);
204
206
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
207
  --syn-link-underline-outline: 7%;
208
+ --syn-logo-color: var(--syn-color-primary-600);
206
209
  --syn-opacity-50: 0.5; /** 50% */
207
210
  --syn-overlay-background-blur: 0px;
208
211
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
212
+ --syn-page-background: var(--syn-color-neutral-100);
209
213
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
214
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
215
  --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.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-color-neutral-500);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
@@ -119,6 +120,7 @@
119
120
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
123
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
124
  --syn-input-background-color: var(--syn-color-neutral-0);
123
125
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
126
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -203,9 +205,11 @@
203
205
  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
206
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
207
  --syn-link-underline-outline: 7%;
208
+ --syn-logo-color: var(--syn-color-primary-400);
206
209
  --syn-opacity-50: 0.5; /** 50% */
207
210
  --syn-overlay-background-blur: 0px;
208
211
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
212
+ --syn-page-background: var(--syn-color-neutral-50);
209
213
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
214
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
215
  --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.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-color-neutral-500);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
@@ -119,6 +120,7 @@
119
120
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
123
+ --syn-header-border-color: var(--syn-color-neutral-400);
122
124
  --syn-input-background-color: var(--syn-color-neutral-0);
123
125
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
126
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -203,9 +205,11 @@
203
205
  --syn-link-quiet-color-active: var(--syn-interactive-emphasis-color-active);
204
206
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
207
  --syn-link-underline-outline: 7%;
208
+ --syn-logo-color: var(--syn-color-primary-600);
206
209
  --syn-opacity-50: 0.5; /** 50% */
207
210
  --syn-overlay-background-blur: 0px;
208
211
  --syn-overlay-background-color: rgba(49, 55, 58, 0.5);
212
+ --syn-page-background: var(--syn-color-neutral-100);
209
213
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
214
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
215
  --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.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-typography-color-text);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
@@ -98,7 +99,7 @@
98
99
  --syn-duration-normal: 250ms;
99
100
  --syn-duration-slow: 500ms;
100
101
  --syn-focus-ring-border-radius: var(--syn-border-radius-small);
101
- --syn-focus-ring-color: var(--syn-color-primary-500);
102
+ --syn-focus-ring-color: var(--syn-color-primary-700);
102
103
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
103
104
  --syn-focus-ring-style: solid;
104
105
  --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -119,6 +120,7 @@
119
120
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
123
+ --syn-header-border-color: var(--syn-color-neutral-300);
122
124
  --syn-input-background-color: var(--syn-color-neutral-50);
123
125
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
126
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -168,10 +170,10 @@
168
170
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
171
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
172
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
171
- --syn-input-readonly-background-color: var(--syn-color-neutral-100);
172
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-100);
173
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-100);
174
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-100);
173
+ --syn-input-readonly-background-color: var(--syn-color-neutral-200);
174
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-200);
175
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-200);
176
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-200);
175
177
  --syn-input-required-content: "*";
176
178
  --syn-input-required-content-color: var(--syn-input-label-color);
177
179
  --syn-input-required-content-offset: -2px;
@@ -203,9 +205,11 @@
203
205
  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
206
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
207
  --syn-link-underline-outline: 25%;
208
+ --syn-logo-color: var(--syn-color-primary-300);
206
209
  --syn-opacity-50: 0.5; /** 50% */
207
210
  --syn-overlay-background-blur: 16px;
208
211
  --syn-overlay-background-color: rgba(0, 10, 55, 0.6);
212
+ --syn-page-background: var(--syn-color-neutral-0);
209
213
  --syn-panel-background-color: var(--syn-color-neutral-50);
210
214
  --syn-panel-border-color: var(--syn-color-neutral-300);
211
215
  --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.30.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -19,6 +19,7 @@
19
19
  --syn-border-width-none: 0px; /** None */
20
20
  --syn-border-width-small: 1px; /** Small */
21
21
  --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-breadcrumb-color: var(--syn-typography-color-text);
22
23
  --syn-button-font-size-large: var(--syn-font-size-large);
23
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
24
25
  --syn-button-font-size-small: var(--syn-font-size-small);
@@ -98,7 +99,7 @@
98
99
  --syn-duration-normal: 250ms;
99
100
  --syn-duration-slow: 500ms;
100
101
  --syn-focus-ring-border-radius: var(--syn-border-radius-small);
101
- --syn-focus-ring-color: var(--syn-color-primary-700);
102
+ --syn-focus-ring-color: var(--syn-color-primary-500);
102
103
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
103
104
  --syn-focus-ring-style: solid;
104
105
  --syn-focus-ring-width: var(--syn-border-width-medium);
@@ -119,6 +120,7 @@
119
120
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
123
+ --syn-header-border-color: #e6e1dc;
122
124
  --syn-input-background-color: var(--syn-color-neutral-0);
123
125
  --syn-input-background-color-disabled: var(--syn-input-background-color);
124
126
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -168,10 +170,10 @@
168
170
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
171
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
172
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
171
- --syn-input-readonly-background-color: #f8f7f6;
172
- --syn-input-readonly-background-color-disabled: #f8f7f6;
173
- --syn-input-readonly-background-color-focus: #f8f7f6;
174
- --syn-input-readonly-background-color-hover: #f8f7f6;
173
+ --syn-input-readonly-background-color: #f2f0ed;
174
+ --syn-input-readonly-background-color-disabled: #f2f0ed;
175
+ --syn-input-readonly-background-color-focus: #f2f0ed;
176
+ --syn-input-readonly-background-color-hover: #f2f0ed;
175
177
  --syn-input-required-content: "*";
176
178
  --syn-input-required-content-color: var(--syn-input-label-color);
177
179
  --syn-input-required-content-offset: -2px;
@@ -203,9 +205,11 @@
203
205
  --syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
204
206
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
205
207
  --syn-link-underline-outline: 25%;
208
+ --syn-logo-color: var(--syn-color-primary-700);
206
209
  --syn-opacity-50: 0.5; /** 50% */
207
210
  --syn-overlay-background-blur: 16px;
208
211
  --syn-overlay-background-color: rgba(0, 10, 55, 0.3);
212
+ --syn-page-background: #f8f7f6;
209
213
  --syn-panel-background-color: var(--syn-color-neutral-0);
210
214
  --syn-panel-border-color: #e6e1dc;
211
215
  --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.31.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
@@ -56,6 +56,12 @@
56
56
  "value": "4px"
57
57
  }
58
58
  },
59
+ "breadcrumb": {
60
+ "color": {
61
+ "type": "color",
62
+ "value": "{color.neutral.500}"
63
+ }
64
+ },
59
65
  "button": {
60
66
  "font-size": {
61
67
  "large": {
@@ -494,6 +500,14 @@
494
500
  "value": "600"
495
501
  }
496
502
  },
503
+ "header": {
504
+ "border": {
505
+ "color": {
506
+ "type": "color",
507
+ "value": "{color.neutral.400}"
508
+ }
509
+ }
510
+ },
497
511
  "input": {
498
512
  "background": {
499
513
  "color": {
@@ -893,6 +907,12 @@
893
907
  "value": "7%"
894
908
  }
895
909
  },
910
+ "logo": {
911
+ "color": {
912
+ "type": "color",
913
+ "value": "{color.primary.400}"
914
+ }
915
+ },
896
916
  "opacity": {
897
917
  "50": {
898
918
  "description": "50%",
@@ -912,6 +932,12 @@
912
932
  }
913
933
  }
914
934
  },
935
+ "page": {
936
+ "background": {
937
+ "type": "color",
938
+ "value": "{color.neutral.50}"
939
+ }
940
+ },
915
941
  "panel": {
916
942
  "background": {
917
943
  "color": {
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -56,6 +56,12 @@
56
56
  "value": "4px"
57
57
  }
58
58
  },
59
+ "breadcrumb": {
60
+ "color": {
61
+ "type": "color",
62
+ "value": "{color.neutral.500}"
63
+ }
64
+ },
59
65
  "button": {
60
66
  "font-size": {
61
67
  "large": {
@@ -494,6 +500,14 @@
494
500
  "value": "600"
495
501
  }
496
502
  },
503
+ "header": {
504
+ "border": {
505
+ "color": {
506
+ "type": "color",
507
+ "value": "{color.neutral.400}"
508
+ }
509
+ }
510
+ },
497
511
  "input": {
498
512
  "background": {
499
513
  "color": {
@@ -893,6 +907,12 @@
893
907
  "value": "7%"
894
908
  }
895
909
  },
910
+ "logo": {
911
+ "color": {
912
+ "type": "color",
913
+ "value": "{color.primary.600}"
914
+ }
915
+ },
896
916
  "opacity": {
897
917
  "50": {
898
918
  "description": "50%",
@@ -912,6 +932,12 @@
912
932
  }
913
933
  }
914
934
  },
935
+ "page": {
936
+ "background": {
937
+ "type": "color",
938
+ "value": "{color.neutral.100}"
939
+ }
940
+ },
915
941
  "panel": {
916
942
  "background": {
917
943
  "color": {
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -56,6 +56,12 @@
56
56
  "value": "4px"
57
57
  }
58
58
  },
59
+ "breadcrumb": {
60
+ "color": {
61
+ "type": "color",
62
+ "value": "{typography.color.text}"
63
+ }
64
+ },
59
65
  "button": {
60
66
  "font-size": {
61
67
  "large": {
@@ -400,7 +406,7 @@
400
406
  },
401
407
  "color": {
402
408
  "type": "color",
403
- "value": "{color.primary.500}"
409
+ "value": "{color.primary.700}"
404
410
  },
405
411
  "offset": {
406
412
  "type": "sizing",
@@ -494,6 +500,14 @@
494
500
  "value": "600"
495
501
  }
496
502
  },
503
+ "header": {
504
+ "border": {
505
+ "color": {
506
+ "type": "color",
507
+ "value": "{color.neutral.300}"
508
+ }
509
+ }
510
+ },
497
511
  "input": {
498
512
  "background": {
499
513
  "color": {
@@ -724,19 +738,19 @@
724
738
  "readonly-background": {
725
739
  "color": {
726
740
  "type": "color",
727
- "value": "{color.neutral.100}"
741
+ "value": "{color.neutral.200}"
728
742
  },
729
743
  "color-disabled": {
730
744
  "type": "color",
731
- "value": "{color.neutral.100}"
745
+ "value": "{color.neutral.200}"
732
746
  },
733
747
  "color-focus": {
734
748
  "type": "color",
735
- "value": "{color.neutral.100}"
749
+ "value": "{color.neutral.200}"
736
750
  },
737
751
  "color-hover": {
738
752
  "type": "color",
739
- "value": "{color.neutral.100}"
753
+ "value": "{color.neutral.200}"
740
754
  }
741
755
  },
742
756
  "required": {
@@ -893,6 +907,12 @@
893
907
  "value": "25%"
894
908
  }
895
909
  },
910
+ "logo": {
911
+ "color": {
912
+ "type": "color",
913
+ "value": "{color.primary.300}"
914
+ }
915
+ },
896
916
  "opacity": {
897
917
  "50": {
898
918
  "description": "50%",
@@ -912,6 +932,12 @@
912
932
  }
913
933
  }
914
934
  },
935
+ "page": {
936
+ "background": {
937
+ "type": "color",
938
+ "value": "{color.neutral.0}"
939
+ }
940
+ },
915
941
  "panel": {
916
942
  "background": {
917
943
  "color": {
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -56,6 +56,12 @@
56
56
  "value": "4px"
57
57
  }
58
58
  },
59
+ "breadcrumb": {
60
+ "color": {
61
+ "type": "color",
62
+ "value": "{typography.color.text}"
63
+ }
64
+ },
59
65
  "button": {
60
66
  "font-size": {
61
67
  "large": {
@@ -400,7 +406,7 @@
400
406
  },
401
407
  "color": {
402
408
  "type": "color",
403
- "value": "{color.primary.700}"
409
+ "value": "{color.primary.500}"
404
410
  },
405
411
  "offset": {
406
412
  "type": "sizing",
@@ -494,6 +500,14 @@
494
500
  "value": "600"
495
501
  }
496
502
  },
503
+ "header": {
504
+ "border": {
505
+ "color": {
506
+ "type": "color",
507
+ "value": "#e6e1dc"
508
+ }
509
+ }
510
+ },
497
511
  "input": {
498
512
  "background": {
499
513
  "color": {
@@ -724,19 +738,19 @@
724
738
  "readonly-background": {
725
739
  "color": {
726
740
  "type": "color",
727
- "value": "#f8f7f6"
741
+ "value": "#f2f0ed"
728
742
  },
729
743
  "color-disabled": {
730
744
  "type": "color",
731
- "value": "#f8f7f6"
745
+ "value": "#f2f0ed"
732
746
  },
733
747
  "color-focus": {
734
748
  "type": "color",
735
- "value": "#f8f7f6"
749
+ "value": "#f2f0ed"
736
750
  },
737
751
  "color-hover": {
738
752
  "type": "color",
739
- "value": "#f8f7f6"
753
+ "value": "#f2f0ed"
740
754
  }
741
755
  },
742
756
  "required": {
@@ -893,6 +907,12 @@
893
907
  "value": "25%"
894
908
  }
895
909
  },
910
+ "logo": {
911
+ "color": {
912
+ "type": "color",
913
+ "value": "{color.primary.700}"
914
+ }
915
+ },
896
916
  "opacity": {
897
917
  "50": {
898
918
  "description": "50%",
@@ -912,6 +932,12 @@
912
932
  }
913
933
  }
914
934
  },
935
+ "page": {
936
+ "background": {
937
+ "type": "color",
938
+ "value": "#f8f7f6"
939
+ }
940
+ },
915
941
  "panel": {
916
942
  "background": {
917
943
  "color": {