@synergy-design-system/tokens 2.31.0 → 2.33.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 +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 +3 -1
  10. package/dist/themes/sick2025_light.css +3 -1
  11. package/package.json +1 -1
  12. package/src/figma-tokens/_docs.json +1 -1
  13. package/src/figma-variables/output/sick2018-dark.json +16 -0
  14. package/src/figma-variables/output/sick2018-light.json +16 -0
  15. package/src/figma-variables/output/sick2025-dark.json +16 -0
  16. package/src/figma-variables/output/sick2025-light.json +16 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v2.33.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.32.0...tokens/2.33.0) (2025-10-23)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-checkbox ([#1050](https://github.com/synergy-design-system/synergy-design-system/issues/1050)) ([1054c71](https://github.com/synergy-design-system/synergy-design-system/commit/1054c71415f36233ba1e242433806aac21d4d19b))
7
+
8
+ # [@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)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ 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))
14
+
1
15
  # [@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
16
 
3
17
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -83,6 +83,11 @@ export const SynButtonFontSizeMedium: string;
83
83
  */
84
84
  export const SynButtonFontSizeSmall: string;
85
85
 
86
+ /**
87
+ * Maps to the css variable `--syn-checkbox-border-radius`
88
+ */
89
+ export const SynCheckboxBorderRadius: string;
90
+
86
91
  /**
87
92
  * Maps to the css variable `--syn-color-accent-50`
88
93
  */
@@ -573,6 +578,11 @@ export const SynFontWeightSemibold: string;
573
578
  */
574
579
  export const SynHeaderBorderColor: string;
575
580
 
581
+ /**
582
+ * Maps to the css variable `--syn-icon-button-focus-ring-border-radius`
583
+ */
584
+ export const SynIconButtonFocusRingBorderRadius: string;
585
+
576
586
  /**
577
587
  * Maps to the css variable `--syn-input-background-color`
578
588
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -83,6 +83,11 @@ export const SynButtonFontSizeMedium = 'var(--syn-button-font-size-medium)';
83
83
  */
84
84
  export const SynButtonFontSizeSmall = 'var(--syn-button-font-size-small)';
85
85
 
86
+ /**
87
+ * @type {string}
88
+ */
89
+ export const SynCheckboxBorderRadius = 'var(--syn-checkbox-border-radius)';
90
+
86
91
  /**
87
92
  * @type {string}
88
93
  */
@@ -573,6 +578,11 @@ export const SynFontWeightSemibold = 'var(--syn-font-weight-semibold)';
573
578
  */
574
579
  export const SynHeaderBorderColor = 'var(--syn-header-border-color)';
575
580
 
581
+ /**
582
+ * @type {string}
583
+ */
584
+ export const SynIconButtonFocusRingBorderRadius = 'var(--syn-icon-button-focus-ring-border-radius)';
585
+
576
586
  /**
577
587
  * @type {string}
578
588
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -18,6 +18,7 @@ $SynBreadcrumbColor: var(--syn-breadcrumb-color) !default;
18
18
  $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;
19
19
  $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
20
20
  $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
21
+ $SynCheckboxBorderRadius: var(--syn-checkbox-border-radius) !default;
21
22
  $SynColorAccent50: var(--syn-color-accent-50) !default;
22
23
  $SynColorAccent100: var(--syn-color-accent-100) !default;
23
24
  $SynColorAccent200: var(--syn-color-accent-200) !default;
@@ -116,6 +117,7 @@ $SynFontWeightLight: var(--syn-font-weight-light) !default;
116
117
  $SynFontWeightNormal: var(--syn-font-weight-normal) !default;
117
118
  $SynFontWeightSemibold: var(--syn-font-weight-semibold) !default;
118
119
  $SynHeaderBorderColor: var(--syn-header-border-color) !default;
120
+ $SynIconButtonFocusRingBorderRadius: var(--syn-icon-button-focus-ring-border-radius) !default;
119
121
  $SynInputBackgroundColor: var(--syn-input-background-color) !default;
120
122
  $SynInputBackgroundColorDisabled: var(--syn-input-background-color-disabled) !default;
121
123
  $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.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -23,6 +23,7 @@
23
23
  --syn-button-font-size-large: var(--syn-font-size-large);
24
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
25
  --syn-button-font-size-small: var(--syn-font-size-small);
26
+ --syn-checkbox-border-radius: var(--syn-border-radius-none);
26
27
  --syn-color-accent-50: #481700;
27
28
  --syn-color-accent-100: #7c310b;
28
29
  --syn-color-accent-200: #983b08;
@@ -121,6 +122,7 @@
121
122
  --syn-font-weight-normal: 400;
122
123
  --syn-font-weight-semibold: 600;
123
124
  --syn-header-border-color: var(--syn-color-neutral-400);
125
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
124
126
  --syn-input-background-color: var(--syn-color-neutral-0);
125
127
  --syn-input-background-color-disabled: var(--syn-input-background-color);
126
128
  --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.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -23,6 +23,7 @@
23
23
  --syn-button-font-size-large: var(--syn-font-size-large);
24
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
25
  --syn-button-font-size-small: var(--syn-font-size-small);
26
+ --syn-checkbox-border-radius: var(--syn-border-radius-none);
26
27
  --syn-color-accent-50: #fffbea;
27
28
  --syn-color-accent-100: #fff2c5;
28
29
  --syn-color-accent-200: #ffe685;
@@ -121,6 +122,7 @@
121
122
  --syn-font-weight-normal: 400;
122
123
  --syn-font-weight-semibold: 600;
123
124
  --syn-header-border-color: var(--syn-color-neutral-400);
125
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
124
126
  --syn-input-background-color: var(--syn-color-neutral-0);
125
127
  --syn-input-background-color-disabled: var(--syn-input-background-color);
126
128
  --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.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -23,6 +23,7 @@
23
23
  --syn-button-font-size-large: var(--syn-font-size-large);
24
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
25
  --syn-button-font-size-small: var(--syn-font-size-small);
26
+ --syn-checkbox-border-radius: var(--syn-border-radius-none);
26
27
  --syn-color-accent-50: #481700;
27
28
  --syn-color-accent-100: #7c310b;
28
29
  --syn-color-accent-200: #983b08;
@@ -121,6 +122,7 @@
121
122
  --syn-font-weight-normal: 400;
122
123
  --syn-font-weight-semibold: 600;
123
124
  --syn-header-border-color: var(--syn-color-neutral-400);
125
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
124
126
  --syn-input-background-color: var(--syn-color-neutral-0);
125
127
  --syn-input-background-color-disabled: var(--syn-input-background-color);
126
128
  --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.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -23,6 +23,7 @@
23
23
  --syn-button-font-size-large: var(--syn-font-size-large);
24
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
25
  --syn-button-font-size-small: var(--syn-font-size-small);
26
+ --syn-checkbox-border-radius: var(--syn-border-radius-none);
26
27
  --syn-color-accent-50: #fffbea;
27
28
  --syn-color-accent-100: #fff2c5;
28
29
  --syn-color-accent-200: #ffe685;
@@ -121,6 +122,7 @@
121
122
  --syn-font-weight-normal: 400;
122
123
  --syn-font-weight-semibold: 600;
123
124
  --syn-header-border-color: var(--syn-color-neutral-400);
125
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-none);
124
126
  --syn-input-background-color: var(--syn-color-neutral-0);
125
127
  --syn-input-background-color-disabled: var(--syn-input-background-color);
126
128
  --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.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -23,6 +23,7 @@
23
23
  --syn-button-font-size-large: var(--syn-font-size-large);
24
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
25
  --syn-button-font-size-small: var(--syn-font-size-small);
26
+ --syn-checkbox-border-radius: var(--syn-border-radius-small);
26
27
  --syn-color-accent-50: #ffffff;
27
28
  --syn-color-accent-100: #ffffff;
28
29
  --syn-color-accent-200: #ffffff;
@@ -121,6 +122,7 @@
121
122
  --syn-font-weight-normal: 400;
122
123
  --syn-font-weight-semibold: 600;
123
124
  --syn-header-border-color: var(--syn-color-neutral-300);
125
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
124
126
  --syn-input-background-color: var(--syn-color-neutral-50);
125
127
  --syn-input-background-color-disabled: var(--syn-input-background-color);
126
128
  --syn-input-background-color-focus: var(--syn-input-background-color);
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.30.0
2
+ * @synergy-design-system/tokens version 2.32.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -23,6 +23,7 @@
23
23
  --syn-button-font-size-large: var(--syn-font-size-large);
24
24
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
25
  --syn-button-font-size-small: var(--syn-font-size-small);
26
+ --syn-checkbox-border-radius: var(--syn-border-radius-small);
26
27
  --syn-color-accent-50: #ffffff;
27
28
  --syn-color-accent-100: #ffffff;
28
29
  --syn-color-accent-200: #ffffff;
@@ -121,6 +122,7 @@
121
122
  --syn-font-weight-normal: 400;
122
123
  --syn-font-weight-semibold: 600;
123
124
  --syn-header-border-color: #e6e1dc;
125
+ --syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
124
126
  --syn-input-background-color: var(--syn-color-neutral-0);
125
127
  --syn-input-background-color-disabled: var(--syn-input-background-color);
126
128
  --syn-input-background-color-focus: var(--syn-input-background-color);
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.31.0",
116
+ "version": "2.33.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
@@ -581,7 +581,7 @@
581
581
  "type": "text"
582
582
  },
583
583
  "description": {
584
- "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
584
+ "value": "Add descriptive help text to a checkbox with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
585
585
  "type": "text"
586
586
  }
587
587
  }
package/src/figma-variables/output/sick2018-dark.json CHANGED
@@ -78,6 +78,14 @@
78
78
  }
79
79
  }
80
80
  },
81
+ "checkbox": {
82
+ "border": {
83
+ "radius": {
84
+ "type": "sizing",
85
+ "value": "{border-radius.none}"
86
+ }
87
+ }
88
+ },
81
89
  "color": {
82
90
  "accent": {
83
91
  "50": {
@@ -508,6 +516,14 @@
508
516
  }
509
517
  }
510
518
  },
519
+ "icon-button": {
520
+ "focus-ring": {
521
+ "border-radius": {
522
+ "type": "sizing",
523
+ "value": "{border-radius.none}"
524
+ }
525
+ }
526
+ },
511
527
  "input": {
512
528
  "background": {
513
529
  "color": {
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -78,6 +78,14 @@
78
78
  }
79
79
  }
80
80
  },
81
+ "checkbox": {
82
+ "border": {
83
+ "radius": {
84
+ "type": "sizing",
85
+ "value": "{border-radius.none}"
86
+ }
87
+ }
88
+ },
81
89
  "color": {
82
90
  "accent": {
83
91
  "50": {
@@ -508,6 +516,14 @@
508
516
  }
509
517
  }
510
518
  },
519
+ "icon-button": {
520
+ "focus-ring": {
521
+ "border-radius": {
522
+ "type": "sizing",
523
+ "value": "{border-radius.none}"
524
+ }
525
+ }
526
+ },
511
527
  "input": {
512
528
  "background": {
513
529
  "color": {
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -78,6 +78,14 @@
78
78
  }
79
79
  }
80
80
  },
81
+ "checkbox": {
82
+ "border": {
83
+ "radius": {
84
+ "type": "sizing",
85
+ "value": "{border-radius.small}"
86
+ }
87
+ }
88
+ },
81
89
  "color": {
82
90
  "accent": {
83
91
  "50": {
@@ -508,6 +516,14 @@
508
516
  }
509
517
  }
510
518
  },
519
+ "icon-button": {
520
+ "focus-ring": {
521
+ "border-radius": {
522
+ "type": "sizing",
523
+ "value": "{border-radius.pill}"
524
+ }
525
+ }
526
+ },
511
527
  "input": {
512
528
  "background": {
513
529
  "color": {
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -78,6 +78,14 @@
78
78
  }
79
79
  }
80
80
  },
81
+ "checkbox": {
82
+ "border": {
83
+ "radius": {
84
+ "type": "sizing",
85
+ "value": "{border-radius.small}"
86
+ }
87
+ }
88
+ },
81
89
  "color": {
82
90
  "accent": {
83
91
  "50": {
@@ -508,6 +516,14 @@
508
516
  }
509
517
  }
510
518
  },
519
+ "icon-button": {
520
+ "focus-ring": {
521
+ "border-radius": {
522
+ "type": "sizing",
523
+ "value": "{border-radius.pill}"
524
+ }
525
+ }
526
+ },
511
527
  "input": {
512
528
  "background": {
513
529
  "color": {