@synergy-design-system/tokens 2.30.0 → 2.32.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 (15) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/js/index.d.ts +11 -1
  3. package/dist/js/index.js +11 -1
  4. package/dist/scss/_tokens.scss +3 -1
  5. package/dist/themes/dark.css +3 -1
  6. package/dist/themes/light.css +3 -1
  7. package/dist/themes/sick2018_dark.css +3 -1
  8. package/dist/themes/sick2018_light.css +3 -1
  9. package/dist/themes/sick2025_dark.css +9 -7
  10. package/dist/themes/sick2025_light.css +9 -7
  11. package/package.json +1 -1
  12. package/src/figma-variables/output/sick2018-dark.json +14 -0
  13. package/src/figma-variables/output/sick2018-light.json +14 -0
  14. package/src/figma-variables/output/sick2025-dark.json +20 -6
  15. package/src/figma-variables/output/sick2025-light.json +20 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v2.32.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.31.0...tokens/2.32.0) (2025-10-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-icon-button ([#1048](https://github.com/synergy-design-system/synergy-design-system/issues/1048)) ([d740a54](https://github.com/synergy-design-system/synergy-design-system/commit/d740a5495abd1b36bbe1c1c47fc69ca6a6480549))
7
+
8
+ # [@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)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ 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))
14
+
1
15
  # [@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
16
 
3
17
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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
  */
@@ -568,6 +573,11 @@ export const SynFontWeightSemibold: string;
568
573
  */
569
574
  export const SynHeaderBorderColor: string;
570
575
 
576
+ /**
577
+ * Maps to the css variable `--syn-icon-button-focus-ring-border-radius`
578
+ */
579
+ export const SynIconButtonFocusRingBorderRadius: string;
580
+
571
581
  /**
572
582
  * Maps to the css variable `--syn-input-background-color`
573
583
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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
  */
@@ -568,6 +573,11 @@ export const SynFontWeightSemibold = 'var(--syn-font-weight-semibold)';
568
573
  */
569
574
  export const SynHeaderBorderColor = 'var(--syn-header-border-color)';
570
575
 
576
+ /**
577
+ * @type {string}
578
+ */
579
+ export const SynIconButtonFocusRingBorderRadius = 'var(--syn-icon-button-focus-ring-border-radius)';
580
+
571
581
  /**
572
582
  * @type {string}
573
583
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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;
@@ -115,6 +116,7 @@ $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;
117
118
  $SynHeaderBorderColor: var(--syn-header-border-color) !default;
119
+ $SynIconButtonFocusRingBorderRadius: var(--syn-icon-button-focus-ring-border-radius) !default;
118
120
  $SynInputBackgroundColor: var(--syn-input-background-color) !default;
119
121
  $SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !default;
120
122
  $SynInputBackgroundColorFocus: var(--syn-input-background-color-focus) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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);
@@ -120,6 +121,7 @@
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
122
123
  --syn-header-border-color: var(--syn-color-neutral-400);
124
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
123
125
  --syn-input-background-color: var(--syn-color-neutral-0);
124
126
  --syn-input-background-color-disabled: var(--syn-input-background-color);
125
127
  --syn-input-background-color-focus: var(--syn-input-background-color);
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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);
@@ -120,6 +121,7 @@
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
122
123
  --syn-header-border-color: var(--syn-color-neutral-400);
124
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
123
125
  --syn-input-background-color: var(--syn-color-neutral-0);
124
126
  --syn-input-background-color-disabled: var(--syn-input-background-color);
125
127
  --syn-input-background-color-focus: var(--syn-input-background-color);
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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);
@@ -120,6 +121,7 @@
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
122
123
  --syn-header-border-color: var(--syn-color-neutral-400);
124
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
123
125
  --syn-input-background-color: var(--syn-color-neutral-0);
124
126
  --syn-input-background-color-disabled: var(--syn-input-background-color);
125
127
  --syn-input-background-color-focus: var(--syn-input-background-color);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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);
@@ -120,6 +121,7 @@
120
121
  --syn-font-weight-normal: 400;
121
122
  --syn-font-weight-semibold: 600;
122
123
  --syn-header-border-color: var(--syn-color-neutral-400);
124
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
123
125
  --syn-input-background-color: var(--syn-color-neutral-0);
124
126
  --syn-input-background-color-disabled: var(--syn-input-background-color);
125
127
  --syn-input-background-color-focus: var(--syn-input-background-color);
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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,7 +120,8 @@
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;
122
- --syn-header-border-color: var(--syn-color-neutral-400);
123
+ --syn-header-border-color: var(--syn-color-neutral-300);
124
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
123
125
  --syn-input-background-color: var(--syn-color-neutral-50);
124
126
  --syn-input-background-color-disabled: var(--syn-input-background-color);
125
127
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -169,10 +171,10 @@
169
171
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
170
172
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
171
173
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
172
- --syn-input-readonly-background-color: var(--syn-color-neutral-100);
173
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-100);
174
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-100);
175
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-100);
174
+ --syn-input-readonly-background-color: var(--syn-color-neutral-200);
175
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-200);
176
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-200);
177
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-200);
176
178
  --syn-input-required-content: "*";
177
179
  --syn-input-required-content-color: var(--syn-input-label-color);
178
180
  --syn-input-required-content-offset: -2px;
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.29.0
2
+ * @synergy-design-system/tokens version 2.31.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,7 +120,8 @@
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;
122
- --syn-header-border-color: #d5ccc5;
123
+ --syn-header-border-color: #e6e1dc;
124
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
123
125
  --syn-input-background-color: var(--syn-color-neutral-0);
124
126
  --syn-input-background-color-disabled: var(--syn-input-background-color);
125
127
  --syn-input-background-color-focus: var(--syn-input-background-color);
@@ -169,10 +171,10 @@
169
171
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
170
172
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
171
173
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
172
- --syn-input-readonly-background-color: #f8f7f6;
173
- --syn-input-readonly-background-color-disabled: #f8f7f6;
174
- --syn-input-readonly-background-color-focus: #f8f7f6;
175
- --syn-input-readonly-background-color-hover: #f8f7f6;
174
+ --syn-input-readonly-background-color: #f2f0ed;
175
+ --syn-input-readonly-background-color-disabled: #f2f0ed;
176
+ --syn-input-readonly-background-color-focus: #f2f0ed;
177
+ --syn-input-readonly-background-color-hover: #f2f0ed;
176
178
  --syn-input-required-content: "*";
177
179
  --syn-input-required-content-color: var(--syn-input-label-color);
178
180
  --syn-input-required-content-offset: -2px;
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.30.0",
116
+ "version": "2.32.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-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": {
@@ -502,6 +508,14 @@
502
508
  }
503
509
  }
504
510
  },
511
+ "icon-button": {
512
+ "focus-ring": {
513
+ "border-radius": {
514
+ "type": "sizing",
515
+ "value": "{border-radius.none}"
516
+ }
517
+ }
518
+ },
505
519
  "input": {
506
520
  "background": {
507
521
  "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": {
@@ -502,6 +508,14 @@
502
508
  }
503
509
  }
504
510
  },
511
+ "icon-button": {
512
+ "focus-ring": {
513
+ "border-radius": {
514
+ "type": "sizing",
515
+ "value": "{border-radius.none}"
516
+ }
517
+ }
518
+ },
505
519
  "input": {
506
520
  "background": {
507
521
  "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",
@@ -498,7 +504,15 @@
498
504
  "border": {
499
505
  "color": {
500
506
  "type": "color",
501
- "value": "{color.neutral.400}"
507
+ "value": "{color.neutral.300}"
508
+ }
509
+ }
510
+ },
511
+ "icon-button": {
512
+ "focus-ring": {
513
+ "border-radius": {
514
+ "type": "sizing",
515
+ "value": "{border-radius.pill}"
502
516
  }
503
517
  }
504
518
  },
@@ -732,19 +746,19 @@
732
746
  "readonly-background": {
733
747
  "color": {
734
748
  "type": "color",
735
- "value": "{color.neutral.100}"
749
+ "value": "{color.neutral.200}"
736
750
  },
737
751
  "color-disabled": {
738
752
  "type": "color",
739
- "value": "{color.neutral.100}"
753
+ "value": "{color.neutral.200}"
740
754
  },
741
755
  "color-focus": {
742
756
  "type": "color",
743
- "value": "{color.neutral.100}"
757
+ "value": "{color.neutral.200}"
744
758
  },
745
759
  "color-hover": {
746
760
  "type": "color",
747
- "value": "{color.neutral.100}"
761
+ "value": "{color.neutral.200}"
748
762
  }
749
763
  },
750
764
  "required": {
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",
@@ -498,7 +504,15 @@
498
504
  "border": {
499
505
  "color": {
500
506
  "type": "color",
501
- "value": "#d5ccc5"
507
+ "value": "#e6e1dc"
508
+ }
509
+ }
510
+ },
511
+ "icon-button": {
512
+ "focus-ring": {
513
+ "border-radius": {
514
+ "type": "sizing",
515
+ "value": "{border-radius.pill}"
502
516
  }
503
517
  }
504
518
  },
@@ -732,19 +746,19 @@
732
746
  "readonly-background": {
733
747
  "color": {
734
748
  "type": "color",
735
- "value": "#f8f7f6"
749
+ "value": "#f2f0ed"
736
750
  },
737
751
  "color-disabled": {
738
752
  "type": "color",
739
- "value": "#f8f7f6"
753
+ "value": "#f2f0ed"
740
754
  },
741
755
  "color-focus": {
742
756
  "type": "color",
743
- "value": "#f8f7f6"
757
+ "value": "#f2f0ed"
744
758
  },
745
759
  "color-hover": {
746
760
  "type": "color",
747
- "value": "#f8f7f6"
761
+ "value": "#f2f0ed"
748
762
  }
749
763
  },
750
764
  "required": {