@synergy-design-system/tokens 2.32.0 → 2.34.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 +111 -1
  3. package/dist/js/index.js +111 -1
  4. package/dist/scss/_tokens.scss +23 -1
  5. package/dist/themes/dark.css +23 -1
  6. package/dist/themes/light.css +23 -1
  7. package/dist/themes/sick2018_dark.css +23 -1
  8. package/dist/themes/sick2018_light.css +23 -1
  9. package/dist/themes/sick2025_dark.css +23 -1
  10. package/dist/themes/sick2025_light.css +23 -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 +106 -0
  14. package/src/figma-variables/output/sick2018-light.json +106 -0
  15. package/src/figma-variables/output/sick2025-dark.json +106 -0
  16. package/src/figma-variables/output/sick2025-light.json +106 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v2.34.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.33.0...tokens/2.34.0) (2025-10-27)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-badge ([#1049](https://github.com/synergy-design-system/synergy-design-system/issues/1049)) ([894e541](https://github.com/synergy-design-system/synergy-design-system/commit/894e5416653a66f5ef81acaaee8b74a1adf7f3ab))
7
+
8
+ # [@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)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ 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))
14
+
1
15
  # [@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
16
 
3
17
 
package/dist/js/index.d.ts CHANGED
@@ -1,8 +1,58 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
6
+ /**
7
+ * Maps to the css variable `--syn-badge-error-color-background`
8
+ */
9
+ export const SynBadgeErrorColorBackground: string;
10
+
11
+ /**
12
+ * Maps to the css variable `--syn-badge-error-color-text`
13
+ */
14
+ export const SynBadgeErrorColorText: string;
15
+
16
+ /**
17
+ * Maps to the css variable `--syn-badge-informative-color-background`
18
+ */
19
+ export const SynBadgeInformativeColorBackground: string;
20
+
21
+ /**
22
+ * Maps to the css variable `--syn-badge-informative-color-text`
23
+ */
24
+ export const SynBadgeInformativeColorText: string;
25
+
26
+ /**
27
+ * Maps to the css variable `--syn-badge-neutral-color-background`
28
+ */
29
+ export const SynBadgeNeutralColorBackground: string;
30
+
31
+ /**
32
+ * Maps to the css variable `--syn-badge-neutral-color-text`
33
+ */
34
+ export const SynBadgeNeutralColorText: string;
35
+
36
+ /**
37
+ * Maps to the css variable `--syn-badge-success-color-background`
38
+ */
39
+ export const SynBadgeSuccessColorBackground: string;
40
+
41
+ /**
42
+ * Maps to the css variable `--syn-badge-success-color-text`
43
+ */
44
+ export const SynBadgeSuccessColorText: string;
45
+
46
+ /**
47
+ * Maps to the css variable `--syn-badge-warning-color-background`
48
+ */
49
+ export const SynBadgeWarningColorBackground: string;
50
+
51
+ /**
52
+ * Maps to the css variable `--syn-badge-warning-color-text`
53
+ */
54
+ export const SynBadgeWarningColorText: string;
55
+
6
56
  /**
7
57
  * Maps to the css variable `--syn-border-radius-circle`
8
58
  */
@@ -83,6 +133,11 @@ export const SynButtonFontSizeMedium: string;
83
133
  */
84
134
  export const SynButtonFontSizeSmall: string;
85
135
 
136
+ /**
137
+ * Maps to the css variable `--syn-checkbox-border-radius`
138
+ */
139
+ export const SynCheckboxBorderRadius: string;
140
+
86
141
  /**
87
142
  * Maps to the css variable `--syn-color-accent-50`
88
143
  */
@@ -193,6 +248,61 @@ export const SynColorError900: string;
193
248
  */
194
249
  export const SynColorError950: string;
195
250
 
251
+ /**
252
+ * Maps to the css variable `--syn-color-info-50`
253
+ */
254
+ export const SynColorInfo50: string;
255
+
256
+ /**
257
+ * Maps to the css variable `--syn-color-info-100`
258
+ */
259
+ export const SynColorInfo100: string;
260
+
261
+ /**
262
+ * Maps to the css variable `--syn-color-info-200`
263
+ */
264
+ export const SynColorInfo200: string;
265
+
266
+ /**
267
+ * Maps to the css variable `--syn-color-info-300`
268
+ */
269
+ export const SynColorInfo300: string;
270
+
271
+ /**
272
+ * Maps to the css variable `--syn-color-info-400`
273
+ */
274
+ export const SynColorInfo400: string;
275
+
276
+ /**
277
+ * Maps to the css variable `--syn-color-info-500`
278
+ */
279
+ export const SynColorInfo500: string;
280
+
281
+ /**
282
+ * Maps to the css variable `--syn-color-info-600`
283
+ */
284
+ export const SynColorInfo600: string;
285
+
286
+ /**
287
+ * Maps to the css variable `--syn-color-info-700`
288
+ */
289
+ export const SynColorInfo700: string;
290
+
291
+ /**
292
+ * Maps to the css variable `--syn-color-info-800`
293
+ */
294
+ export const SynColorInfo800: string;
295
+
296
+ /**
297
+ * Maps to the css variable `--syn-color-info-900`
298
+ */
299
+ export const SynColorInfo900: string;
300
+
301
+ /**
302
+ * Maps to the css variable `--syn-color-info-950`
303
+ */
304
+ export const SynColorInfo950: string;
305
+
196
306
  /**
197
307
  * Maps to the css variable `--syn-color-neutral-0`
198
308
  */
package/dist/js/index.js CHANGED
@@ -1,8 +1,58 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
6
+ /**
7
+ * @type {string}
8
+ */
9
+ export const SynBadgeErrorColorBackground = 'var(--syn-badge-error-color-background)';
10
+
11
+ /**
12
+ * @type {string}
13
+ */
14
+ export const SynBadgeErrorColorText = 'var(--syn-badge-error-color-text)';
15
+
16
+ /**
17
+ * @type {string}
18
+ */
19
+ export const SynBadgeInformativeColorBackground = 'var(--syn-badge-informative-color-background)';
20
+
21
+ /**
22
+ * @type {string}
23
+ */
24
+ export const SynBadgeInformativeColorText = 'var(--syn-badge-informative-color-text)';
25
+
26
+ /**
27
+ * @type {string}
28
+ */
29
+ export const SynBadgeNeutralColorBackground = 'var(--syn-badge-neutral-color-background)';
30
+
31
+ /**
32
+ * @type {string}
33
+ */
34
+ export const SynBadgeNeutralColorText = 'var(--syn-badge-neutral-color-text)';
35
+
36
+ /**
37
+ * @type {string}
38
+ */
39
+ export const SynBadgeSuccessColorBackground = 'var(--syn-badge-success-color-background)';
40
+
41
+ /**
42
+ * @type {string}
43
+ */
44
+ export const SynBadgeSuccessColorText = 'var(--syn-badge-success-color-text)';
45
+
46
+ /**
47
+ * @type {string}
48
+ */
49
+ export const SynBadgeWarningColorBackground = 'var(--syn-badge-warning-color-background)';
50
+
51
+ /**
52
+ * @type {string}
53
+ */
54
+ export const SynBadgeWarningColorText = 'var(--syn-badge-warning-color-text)';
55
+
6
56
  /**
7
57
  * @type {string}
8
58
  */
@@ -83,6 +133,11 @@ export const SynButtonFontSizeMedium = 'var(--syn-button-font-size-medium)';
83
133
  */
84
134
  export const SynButtonFontSizeSmall = 'var(--syn-button-font-size-small)';
85
135
 
136
+ /**
137
+ * @type {string}
138
+ */
139
+ export const SynCheckboxBorderRadius = 'var(--syn-checkbox-border-radius)';
140
+
86
141
  /**
87
142
  * @type {string}
88
143
  */
@@ -193,6 +248,61 @@ export const SynColorError900 = 'var(--syn-color-error-900)';
193
248
  */
194
249
  export const SynColorError950 = 'var(--syn-color-error-950)';
195
250
 
251
+ /**
252
+ * @type {string}
253
+ */
254
+ export const SynColorInfo50 = 'var(--syn-color-info-50)';
255
+
256
+ /**
257
+ * @type {string}
258
+ */
259
+ export const SynColorInfo100 = 'var(--syn-color-info-100)';
260
+
261
+ /**
262
+ * @type {string}
263
+ */
264
+ export const SynColorInfo200 = 'var(--syn-color-info-200)';
265
+
266
+ /**
267
+ * @type {string}
268
+ */
269
+ export const SynColorInfo300 = 'var(--syn-color-info-300)';
270
+
271
+ /**
272
+ * @type {string}
273
+ */
274
+ export const SynColorInfo400 = 'var(--syn-color-info-400)';
275
+
276
+ /**
277
+ * @type {string}
278
+ */
279
+ export const SynColorInfo500 = 'var(--syn-color-info-500)';
280
+
281
+ /**
282
+ * @type {string}
283
+ */
284
+ export const SynColorInfo600 = 'var(--syn-color-info-600)';
285
+
286
+ /**
287
+ * @type {string}
288
+ */
289
+ export const SynColorInfo700 = 'var(--syn-color-info-700)';
290
+
291
+ /**
292
+ * @type {string}
293
+ */
294
+ export const SynColorInfo800 = 'var(--syn-color-info-800)';
295
+
296
+ /**
297
+ * @type {string}
298
+ */
299
+ export const SynColorInfo900 = 'var(--syn-color-info-900)';
300
+
301
+ /**
302
+ * @type {string}
303
+ */
304
+ export const SynColorInfo950 = 'var(--syn-color-info-950)';
305
+
196
306
  /**
197
307
  * @type {string}
198
308
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,7 +1,17 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
+ $SynBadgeErrorColorBackground: var(--syn-badge-error-color-background) !default;
6
+ $SynBadgeErrorColorText: var(--syn-badge-error-color-text) !default;
7
+ $SynBadgeInformativeColorBackground: var(--syn-badge-informative-color-background) !default;
8
+ $SynBadgeInformativeColorText: var(--syn-badge-informative-color-text) !default;
9
+ $SynBadgeNeutralColorBackground: var(--syn-badge-neutral-color-background) !default;
10
+ $SynBadgeNeutralColorText: var(--syn-badge-neutral-color-text) !default;
11
+ $SynBadgeSuccessColorBackground: var(--syn-badge-success-color-background) !default;
12
+ $SynBadgeSuccessColorText: var(--syn-badge-success-color-text) !default;
13
+ $SynBadgeWarningColorBackground: var(--syn-badge-warning-color-background) !default;
14
+ $SynBadgeWarningColorText: var(--syn-badge-warning-color-text) !default;
5
15
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
6
16
  $SynBorderRadiusLarge: var(--syn-border-radius-large) !default;
7
17
  $SynBorderRadiusMedium: var(--syn-border-radius-medium) !default;
@@ -18,6 +28,7 @@ $SynBreadcrumbColor: var(--syn-breadcrumb-color) !default;
18
28
  $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !default;
19
29
  $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
20
30
  $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
31
+ $SynCheckboxBorderRadius: var(--syn-checkbox-border-radius) !default;
21
32
  $SynColorAccent50: var(--syn-color-accent-50) !default;
22
33
  $SynColorAccent100: var(--syn-color-accent-100) !default;
23
34
  $SynColorAccent200: var(--syn-color-accent-200) !default;
@@ -40,6 +51,17 @@ $SynColorError700: var(--syn-color-error-700) !default;
40
51
  $SynColorError800: var(--syn-color-error-800) !default;
41
52
  $SynColorError900: var(--syn-color-error-900) !default;
42
53
  $SynColorError950: var(--syn-color-error-950) !default;
54
+ $SynColorInfo50: var(--syn-color-info-50) !default;
55
+ $SynColorInfo100: var(--syn-color-info-100) !default;
56
+ $SynColorInfo200: var(--syn-color-info-200) !default;
57
+ $SynColorInfo300: var(--syn-color-info-300) !default;
58
+ $SynColorInfo400: var(--syn-color-info-400) !default;
59
+ $SynColorInfo500: var(--syn-color-info-500) !default;
60
+ $SynColorInfo600: var(--syn-color-info-600) !default;
61
+ $SynColorInfo700: var(--syn-color-info-700) !default;
62
+ $SynColorInfo800: var(--syn-color-info-800) !default;
63
+ $SynColorInfo900: var(--syn-color-info-900) !default;
64
+ $SynColorInfo950: var(--syn-color-info-950) !default;
43
65
  $SynColorNeutral0: var(--syn-color-neutral-0) !default;
44
66
  $SynColorNeutral50: var(--syn-color-neutral-50) !default;
45
67
  $SynColorNeutral100: var(--syn-color-neutral-100) !default;
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,16 @@
7
7
  :root, .syn-sick2018-dark, .syn-theme-dark {
8
8
  color-scheme: dark;
9
9
 
10
+ --syn-badge-error-color-background: var(--syn-color-error-600);
11
+ --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
+ --syn-badge-informative-color-background: var(--syn-color-info-600);
13
+ --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
14
+ --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
15
+ --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
16
+ --syn-badge-success-color-background: var(--syn-color-success-500);
17
+ --syn-badge-success-color-text: var(--syn-typography-color-text);
18
+ --syn-badge-warning-color-background: var(--syn-color-warning-400);
19
+ --syn-badge-warning-color-text: var(--syn-typography-color-text);
10
20
  --syn-border-radius-circle: 9999px;
11
21
  --syn-border-radius-large: 8px;
12
22
  --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
23
33
  --syn-button-font-size-large: var(--syn-font-size-large);
24
34
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
35
  --syn-button-font-size-small: var(--syn-font-size-small);
36
+ --syn-checkbox-border-radius: var(--syn-border-radius-none);
26
37
  --syn-color-accent-50: #481700;
27
38
  --syn-color-accent-100: #7c310b;
28
39
  --syn-color-accent-200: #983b08;
@@ -45,6 +56,17 @@
45
56
  --syn-color-error-800: #ffc3c9;
46
57
  --syn-color-error-900: #ffdee2;
47
58
  --syn-color-error-950: #fff0f2;
59
+ --syn-color-info-50: #072e4a;
60
+ --syn-color-info-100: #0b486f;
61
+ --syn-color-info-200: #065786;
62
+ --syn-color-info-300: #0166a3;
63
+ --syn-color-info-400: #007cc1;
64
+ --syn-color-info-500: #0ca2eb;
65
+ --syn-color-info-600: #36bbfa;
66
+ --syn-color-info-700: #7cd1fd;
67
+ --syn-color-info-800: #b9e5fe;
68
+ --syn-color-info-900: #e0f1fe;
69
+ --syn-color-info-950: #f0f9ff;
48
70
  --syn-color-neutral-0: #000000;
49
71
  --syn-color-neutral-50: #31373a;
50
72
  --syn-color-neutral-100: #4c5357;
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,16 @@
7
7
  :root, .syn-sick2018-light, .syn-theme-light {
8
8
  color-scheme: light;
9
9
 
10
+ --syn-badge-error-color-background: var(--syn-color-error-600);
11
+ --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
+ --syn-badge-informative-color-background: var(--syn-color-info-600);
13
+ --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
14
+ --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
15
+ --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
16
+ --syn-badge-success-color-background: var(--syn-color-success-500);
17
+ --syn-badge-success-color-text: var(--syn-typography-color-text);
18
+ --syn-badge-warning-color-background: var(--syn-color-warning-400);
19
+ --syn-badge-warning-color-text: var(--syn-typography-color-text);
10
20
  --syn-border-radius-circle: 9999px;
11
21
  --syn-border-radius-large: 8px;
12
22
  --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
23
33
  --syn-button-font-size-large: var(--syn-font-size-large);
24
34
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
35
  --syn-button-font-size-small: var(--syn-font-size-small);
36
+ --syn-checkbox-border-radius: var(--syn-border-radius-none);
26
37
  --syn-color-accent-50: #fffbea;
27
38
  --syn-color-accent-100: #fff2c5;
28
39
  --syn-color-accent-200: #ffe685;
@@ -45,6 +56,17 @@
45
56
  --syn-color-error-800: #ab091c;
46
57
  --syn-color-error-900: #8d0f1e;
47
58
  --syn-color-error-950: #4e010a;
59
+ --syn-color-info-50: #f0f9ff;
60
+ --syn-color-info-100: #e0f1fe;
61
+ --syn-color-info-200: #b9e5fe;
62
+ --syn-color-info-300: #7cd1fd;
63
+ --syn-color-info-400: #36bbfa;
64
+ --syn-color-info-500: #0ca2eb;
65
+ --syn-color-info-600: #007cc1;
66
+ --syn-color-info-700: #0166a3;
67
+ --syn-color-info-800: #065786;
68
+ --syn-color-info-900: #0b486f;
69
+ --syn-color-info-950: #072e4a;
48
70
  --syn-color-neutral-0: #ffffff;
49
71
  --syn-color-neutral-50: #f9fafb;
50
72
  --syn-color-neutral-100: #f2f3f6;
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,16 @@
7
7
  :root, .syn-sick2018-dark, .syn-theme-dark {
8
8
  color-scheme: dark;
9
9
 
10
+ --syn-badge-error-color-background: var(--syn-color-error-600);
11
+ --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
+ --syn-badge-informative-color-background: var(--syn-color-info-600);
13
+ --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
14
+ --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
15
+ --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
16
+ --syn-badge-success-color-background: var(--syn-color-success-500);
17
+ --syn-badge-success-color-text: var(--syn-typography-color-text);
18
+ --syn-badge-warning-color-background: var(--syn-color-warning-400);
19
+ --syn-badge-warning-color-text: var(--syn-typography-color-text);
10
20
  --syn-border-radius-circle: 9999px;
11
21
  --syn-border-radius-large: 8px;
12
22
  --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
23
33
  --syn-button-font-size-large: var(--syn-font-size-large);
24
34
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
35
  --syn-button-font-size-small: var(--syn-font-size-small);
36
+ --syn-checkbox-border-radius: var(--syn-border-radius-none);
26
37
  --syn-color-accent-50: #481700;
27
38
  --syn-color-accent-100: #7c310b;
28
39
  --syn-color-accent-200: #983b08;
@@ -45,6 +56,17 @@
45
56
  --syn-color-error-800: #ffc3c9;
46
57
  --syn-color-error-900: #ffdee2;
47
58
  --syn-color-error-950: #fff0f2;
59
+ --syn-color-info-50: #072e4a;
60
+ --syn-color-info-100: #0b486f;
61
+ --syn-color-info-200: #065786;
62
+ --syn-color-info-300: #0166a3;
63
+ --syn-color-info-400: #007cc1;
64
+ --syn-color-info-500: #0ca2eb;
65
+ --syn-color-info-600: #36bbfa;
66
+ --syn-color-info-700: #7cd1fd;
67
+ --syn-color-info-800: #b9e5fe;
68
+ --syn-color-info-900: #e0f1fe;
69
+ --syn-color-info-950: #f0f9ff;
48
70
  --syn-color-neutral-0: #000000;
49
71
  --syn-color-neutral-50: #31373a;
50
72
  --syn-color-neutral-100: #4c5357;
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,16 @@
7
7
  :root, .syn-sick2018-light, .syn-theme-light {
8
8
  color-scheme: light;
9
9
 
10
+ --syn-badge-error-color-background: var(--syn-color-error-600);
11
+ --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
+ --syn-badge-informative-color-background: var(--syn-color-info-600);
13
+ --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
14
+ --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
15
+ --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
16
+ --syn-badge-success-color-background: var(--syn-color-success-500);
17
+ --syn-badge-success-color-text: var(--syn-typography-color-text);
18
+ --syn-badge-warning-color-background: var(--syn-color-warning-400);
19
+ --syn-badge-warning-color-text: var(--syn-typography-color-text);
10
20
  --syn-border-radius-circle: 9999px;
11
21
  --syn-border-radius-large: 8px;
12
22
  --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
23
33
  --syn-button-font-size-large: var(--syn-font-size-large);
24
34
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
35
  --syn-button-font-size-small: var(--syn-font-size-small);
36
+ --syn-checkbox-border-radius: var(--syn-border-radius-none);
26
37
  --syn-color-accent-50: #fffbea;
27
38
  --syn-color-accent-100: #fff2c5;
28
39
  --syn-color-accent-200: #ffe685;
@@ -45,6 +56,17 @@
45
56
  --syn-color-error-800: #ab091c;
46
57
  --syn-color-error-900: #8d0f1e;
47
58
  --syn-color-error-950: #4e010a;
59
+ --syn-color-info-50: #f0f9ff;
60
+ --syn-color-info-100: #e0f1fe;
61
+ --syn-color-info-200: #b9e5fe;
62
+ --syn-color-info-300: #7cd1fd;
63
+ --syn-color-info-400: #36bbfa;
64
+ --syn-color-info-500: #0ca2eb;
65
+ --syn-color-info-600: #007cc1;
66
+ --syn-color-info-700: #0166a3;
67
+ --syn-color-info-800: #065786;
68
+ --syn-color-info-900: #0b486f;
69
+ --syn-color-info-950: #072e4a;
48
70
  --syn-color-neutral-0: #ffffff;
49
71
  --syn-color-neutral-50: #f9fafb;
50
72
  --syn-color-neutral-100: #f2f3f6;
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,16 @@
7
7
  :root, .syn-sick2025-dark {
8
8
  color-scheme: dark;
9
9
 
10
+ --syn-badge-error-color-background: var(--syn-color-error-600);
11
+ --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
+ --syn-badge-informative-color-background: #a6e9ff;
13
+ --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
14
+ --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
15
+ --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
16
+ --syn-badge-success-color-background: var(--syn-color-success-600);
17
+ --syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
18
+ --syn-badge-warning-color-background: var(--syn-color-warning-800);
19
+ --syn-badge-warning-color-text: var(--syn-typography-color-text-inverted);
10
20
  --syn-border-radius-circle: 9999px;
11
21
  --syn-border-radius-large: 8px;
12
22
  --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
23
33
  --syn-button-font-size-large: var(--syn-font-size-large);
24
34
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
35
  --syn-button-font-size-small: var(--syn-font-size-small);
36
+ --syn-checkbox-border-radius: var(--syn-border-radius-small);
26
37
  --syn-color-accent-50: #ffffff;
27
38
  --syn-color-accent-100: #ffffff;
28
39
  --syn-color-accent-200: #ffffff;
@@ -45,6 +56,17 @@
45
56
  --syn-color-error-800: #ffcfd1;
46
57
  --syn-color-error-900: #ffe3e4;
47
58
  --syn-color-error-950: #fff1f1;
59
+ --syn-color-info-50: #06334b;
60
+ --syn-color-info-100: #085172;
61
+ --syn-color-info-200: #02628a;
62
+ --syn-color-info-300: #0075a7;
63
+ --syn-color-info-400: #0092ce;
64
+ --syn-color-info-500: #06b6f1;
65
+ --syn-color-info-600: #26c9ff;
66
+ --syn-color-info-700: #78ddff;
67
+ --syn-color-info-800: #a6e9ff;
68
+ --syn-color-info-900: #dff4ff;
69
+ --syn-color-info-950: #effaff;
48
70
  --syn-color-neutral-0: #000414;
49
71
  --syn-color-neutral-50: #000724;
50
72
  --syn-color-neutral-100: #000a37;
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.31.0
2
+ * @synergy-design-system/tokens version 2.33.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,16 @@
7
7
  :root, .syn-sick2025-light {
8
8
  color-scheme: light;
9
9
 
10
+ --syn-badge-error-color-background: var(--syn-color-error-600);
11
+ --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
+ --syn-badge-informative-color-background: #26c9ff;
13
+ --syn-badge-informative-color-text: var(--syn-typography-color-text);
14
+ --syn-badge-neutral-color-background: #d5ccc5;
15
+ --syn-badge-neutral-color-text: var(--syn-typography-color-text);
16
+ --syn-badge-success-color-background: var(--syn-color-success-800);
17
+ --syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
18
+ --syn-badge-warning-color-background: var(--syn-color-warning-500);
19
+ --syn-badge-warning-color-text: var(--syn-typography-color-text);
10
20
  --syn-border-radius-circle: 9999px;
11
21
  --syn-border-radius-large: 8px;
12
22
  --syn-border-radius-medium: 8px;
@@ -23,6 +33,7 @@
23
33
  --syn-button-font-size-large: var(--syn-font-size-large);
24
34
  --syn-button-font-size-medium: var(--syn-font-size-medium);
25
35
  --syn-button-font-size-small: var(--syn-font-size-small);
36
+ --syn-checkbox-border-radius: var(--syn-border-radius-small);
26
37
  --syn-color-accent-50: #ffffff;
27
38
  --syn-color-accent-100: #ffffff;
28
39
  --syn-color-accent-200: #ffffff;
@@ -45,6 +56,17 @@
45
56
  --syn-color-error-800: #941013;
46
57
  --syn-color-error-900: #6c0c0e;
47
58
  --syn-color-error-950: #450709;
59
+ --syn-color-info-50: #effaff;
60
+ --syn-color-info-100: #dff4ff;
61
+ --syn-color-info-200: #a6e9ff;
62
+ --syn-color-info-300: #78ddff;
63
+ --syn-color-info-400: #26c9ff;
64
+ --syn-color-info-500: #06b6f1;
65
+ --syn-color-info-600: #0092ce;
66
+ --syn-color-info-700: #0075a7;
67
+ --syn-color-info-800: #02628a;
68
+ --syn-color-info-900: #085172;
69
+ --syn-color-info-950: #06334b;
48
70
  --syn-color-neutral-0: #ffffff;
49
71
  --syn-color-neutral-50: #f2f2f2;
50
72
  --syn-color-neutral-100: #e7e7e7;
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.32.0",
116
+ "version": "2.34.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
@@ -1,4 +1,56 @@
1
1
  {
2
+ "badge": {
3
+ "error": {
4
+ "color-background": {
5
+ "type": "color",
6
+ "value": "{color.error.600}"
7
+ },
8
+ "color-text": {
9
+ "type": "color",
10
+ "value": "{typography.color.text-inverted}"
11
+ }
12
+ },
13
+ "informative": {
14
+ "color-background": {
15
+ "type": "color",
16
+ "value": "{color.info.600}"
17
+ },
18
+ "color-text": {
19
+ "type": "color",
20
+ "value": "{typography.color.text-inverted}"
21
+ }
22
+ },
23
+ "neutral": {
24
+ "color-background": {
25
+ "type": "color",
26
+ "value": "{color.neutral.800}"
27
+ },
28
+ "color-text": {
29
+ "type": "color",
30
+ "value": "{typography.color.text-inverted}"
31
+ }
32
+ },
33
+ "success": {
34
+ "color-background": {
35
+ "type": "color",
36
+ "value": "{color.success.500}"
37
+ },
38
+ "color-text": {
39
+ "type": "color",
40
+ "value": "{typography.color.text}"
41
+ }
42
+ },
43
+ "warning": {
44
+ "color-background": {
45
+ "type": "color",
46
+ "value": "{color.warning.400}"
47
+ },
48
+ "color-text": {
49
+ "type": "color",
50
+ "value": "{typography.color.text}"
51
+ }
52
+ }
53
+ },
2
54
  "border-radius": {
3
55
  "circle": {
4
56
  "type": "sizing",
@@ -78,6 +130,14 @@
78
130
  }
79
131
  }
80
132
  },
133
+ "checkbox": {
134
+ "border": {
135
+ "radius": {
136
+ "type": "sizing",
137
+ "value": "{border-radius.none}"
138
+ }
139
+ }
140
+ },
81
141
  "color": {
82
142
  "accent": {
83
143
  "50": {
@@ -171,6 +231,52 @@
171
231
  "value": "#fff0f2"
172
232
  }
173
233
  },
234
+ "info": {
235
+ "50": {
236
+ "type": "color",
237
+ "value": "#072e4a"
238
+ },
239
+ "100": {
240
+ "type": "color",
241
+ "value": "#0b486f"
242
+ },
243
+ "200": {
244
+ "type": "color",
245
+ "value": "#065786"
246
+ },
247
+ "300": {
248
+ "type": "color",
249
+ "value": "#0166a3"
250
+ },
251
+ "400": {
252
+ "type": "color",
253
+ "value": "#007cc1"
254
+ },
255
+ "500": {
256
+ "type": "color",
257
+ "value": "#0ca2eb"
258
+ },
259
+ "600": {
260
+ "type": "color",
261
+ "value": "#36bbfa"
262
+ },
263
+ "700": {
264
+ "type": "color",
265
+ "value": "#7cd1fd"
266
+ },
267
+ "800": {
268
+ "type": "color",
269
+ "value": "#b9e5fe"
270
+ },
271
+ "900": {
272
+ "type": "color",
273
+ "value": "#e0f1fe"
274
+ },
275
+ "950": {
276
+ "type": "color",
277
+ "value": "#f0f9ff"
278
+ }
279
+ },
174
280
  "neutral": {
175
281
  "0": {
176
282
  "type": "color",
package/src/figma-variables/output/sick2018-light.json CHANGED
@@ -1,4 +1,56 @@
1
1
  {
2
+ "badge": {
3
+ "error": {
4
+ "color-background": {
5
+ "type": "color",
6
+ "value": "{color.error.600}"
7
+ },
8
+ "color-text": {
9
+ "type": "color",
10
+ "value": "{typography.color.text-inverted}"
11
+ }
12
+ },
13
+ "informative": {
14
+ "color-background": {
15
+ "type": "color",
16
+ "value": "{color.info.600}"
17
+ },
18
+ "color-text": {
19
+ "type": "color",
20
+ "value": "{typography.color.text-inverted}"
21
+ }
22
+ },
23
+ "neutral": {
24
+ "color-background": {
25
+ "type": "color",
26
+ "value": "{color.neutral.800}"
27
+ },
28
+ "color-text": {
29
+ "type": "color",
30
+ "value": "{typography.color.text-inverted}"
31
+ }
32
+ },
33
+ "success": {
34
+ "color-background": {
35
+ "type": "color",
36
+ "value": "{color.success.500}"
37
+ },
38
+ "color-text": {
39
+ "type": "color",
40
+ "value": "{typography.color.text}"
41
+ }
42
+ },
43
+ "warning": {
44
+ "color-background": {
45
+ "type": "color",
46
+ "value": "{color.warning.400}"
47
+ },
48
+ "color-text": {
49
+ "type": "color",
50
+ "value": "{typography.color.text}"
51
+ }
52
+ }
53
+ },
2
54
  "border-radius": {
3
55
  "circle": {
4
56
  "type": "sizing",
@@ -78,6 +130,14 @@
78
130
  }
79
131
  }
80
132
  },
133
+ "checkbox": {
134
+ "border": {
135
+ "radius": {
136
+ "type": "sizing",
137
+ "value": "{border-radius.none}"
138
+ }
139
+ }
140
+ },
81
141
  "color": {
82
142
  "accent": {
83
143
  "50": {
@@ -171,6 +231,52 @@
171
231
  "value": "#4e010a"
172
232
  }
173
233
  },
234
+ "info": {
235
+ "50": {
236
+ "type": "color",
237
+ "value": "#f0f9ff"
238
+ },
239
+ "100": {
240
+ "type": "color",
241
+ "value": "#e0f1fe"
242
+ },
243
+ "200": {
244
+ "type": "color",
245
+ "value": "#b9e5fe"
246
+ },
247
+ "300": {
248
+ "type": "color",
249
+ "value": "#7cd1fd"
250
+ },
251
+ "400": {
252
+ "type": "color",
253
+ "value": "#36bbfa"
254
+ },
255
+ "500": {
256
+ "type": "color",
257
+ "value": "#0ca2eb"
258
+ },
259
+ "600": {
260
+ "type": "color",
261
+ "value": "#007cc1"
262
+ },
263
+ "700": {
264
+ "type": "color",
265
+ "value": "#0166a3"
266
+ },
267
+ "800": {
268
+ "type": "color",
269
+ "value": "#065786"
270
+ },
271
+ "900": {
272
+ "type": "color",
273
+ "value": "#0b486f"
274
+ },
275
+ "950": {
276
+ "type": "color",
277
+ "value": "#072e4a"
278
+ }
279
+ },
174
280
  "neutral": {
175
281
  "0": {
176
282
  "type": "color",
package/src/figma-variables/output/sick2025-dark.json CHANGED
@@ -1,4 +1,56 @@
1
1
  {
2
+ "badge": {
3
+ "error": {
4
+ "color-background": {
5
+ "type": "color",
6
+ "value": "{color.error.600}"
7
+ },
8
+ "color-text": {
9
+ "type": "color",
10
+ "value": "{typography.color.text-inverted}"
11
+ }
12
+ },
13
+ "informative": {
14
+ "color-background": {
15
+ "type": "color",
16
+ "value": "#a6e9ff"
17
+ },
18
+ "color-text": {
19
+ "type": "color",
20
+ "value": "{typography.color.text-inverted}"
21
+ }
22
+ },
23
+ "neutral": {
24
+ "color-background": {
25
+ "type": "color",
26
+ "value": "{color.neutral.800}"
27
+ },
28
+ "color-text": {
29
+ "type": "color",
30
+ "value": "{typography.color.text-inverted}"
31
+ }
32
+ },
33
+ "success": {
34
+ "color-background": {
35
+ "type": "color",
36
+ "value": "{color.success.600}"
37
+ },
38
+ "color-text": {
39
+ "type": "color",
40
+ "value": "{typography.color.text-inverted}"
41
+ }
42
+ },
43
+ "warning": {
44
+ "color-background": {
45
+ "type": "color",
46
+ "value": "{color.warning.800}"
47
+ },
48
+ "color-text": {
49
+ "type": "color",
50
+ "value": "{typography.color.text-inverted}"
51
+ }
52
+ }
53
+ },
2
54
  "border-radius": {
3
55
  "circle": {
4
56
  "type": "sizing",
@@ -78,6 +130,14 @@
78
130
  }
79
131
  }
80
132
  },
133
+ "checkbox": {
134
+ "border": {
135
+ "radius": {
136
+ "type": "sizing",
137
+ "value": "{border-radius.small}"
138
+ }
139
+ }
140
+ },
81
141
  "color": {
82
142
  "accent": {
83
143
  "50": {
@@ -171,6 +231,52 @@
171
231
  "value": "#fff1f1"
172
232
  }
173
233
  },
234
+ "info": {
235
+ "50": {
236
+ "type": "color",
237
+ "value": "#06334b"
238
+ },
239
+ "100": {
240
+ "type": "color",
241
+ "value": "#085172"
242
+ },
243
+ "200": {
244
+ "type": "color",
245
+ "value": "#02628a"
246
+ },
247
+ "300": {
248
+ "type": "color",
249
+ "value": "#0075a7"
250
+ },
251
+ "400": {
252
+ "type": "color",
253
+ "value": "#0092ce"
254
+ },
255
+ "500": {
256
+ "type": "color",
257
+ "value": "#06b6f1"
258
+ },
259
+ "600": {
260
+ "type": "color",
261
+ "value": "#26c9ff"
262
+ },
263
+ "700": {
264
+ "type": "color",
265
+ "value": "#78ddff"
266
+ },
267
+ "800": {
268
+ "type": "color",
269
+ "value": "#a6e9ff"
270
+ },
271
+ "900": {
272
+ "type": "color",
273
+ "value": "#dff4ff"
274
+ },
275
+ "950": {
276
+ "type": "color",
277
+ "value": "#effaff"
278
+ }
279
+ },
174
280
  "neutral": {
175
281
  "0": {
176
282
  "type": "color",
package/src/figma-variables/output/sick2025-light.json CHANGED
@@ -1,4 +1,56 @@
1
1
  {
2
+ "badge": {
3
+ "error": {
4
+ "color-background": {
5
+ "type": "color",
6
+ "value": "{color.error.600}"
7
+ },
8
+ "color-text": {
9
+ "type": "color",
10
+ "value": "{typography.color.text-inverted}"
11
+ }
12
+ },
13
+ "informative": {
14
+ "color-background": {
15
+ "type": "color",
16
+ "value": "#26c9ff"
17
+ },
18
+ "color-text": {
19
+ "type": "color",
20
+ "value": "{typography.color.text}"
21
+ }
22
+ },
23
+ "neutral": {
24
+ "color-background": {
25
+ "type": "color",
26
+ "value": "#d5ccc5"
27
+ },
28
+ "color-text": {
29
+ "type": "color",
30
+ "value": "{typography.color.text}"
31
+ }
32
+ },
33
+ "success": {
34
+ "color-background": {
35
+ "type": "color",
36
+ "value": "{color.success.800}"
37
+ },
38
+ "color-text": {
39
+ "type": "color",
40
+ "value": "{typography.color.text-inverted}"
41
+ }
42
+ },
43
+ "warning": {
44
+ "color-background": {
45
+ "type": "color",
46
+ "value": "{color.warning.500}"
47
+ },
48
+ "color-text": {
49
+ "type": "color",
50
+ "value": "{typography.color.text}"
51
+ }
52
+ }
53
+ },
2
54
  "border-radius": {
3
55
  "circle": {
4
56
  "type": "sizing",
@@ -78,6 +130,14 @@
78
130
  }
79
131
  }
80
132
  },
133
+ "checkbox": {
134
+ "border": {
135
+ "radius": {
136
+ "type": "sizing",
137
+ "value": "{border-radius.small}"
138
+ }
139
+ }
140
+ },
81
141
  "color": {
82
142
  "accent": {
83
143
  "50": {
@@ -171,6 +231,52 @@
171
231
  "value": "#450709"
172
232
  }
173
233
  },
234
+ "info": {
235
+ "50": {
236
+ "type": "color",
237
+ "value": "#effaff"
238
+ },
239
+ "100": {
240
+ "type": "color",
241
+ "value": "#dff4ff"
242
+ },
243
+ "200": {
244
+ "type": "color",
245
+ "value": "#a6e9ff"
246
+ },
247
+ "300": {
248
+ "type": "color",
249
+ "value": "#78ddff"
250
+ },
251
+ "400": {
252
+ "type": "color",
253
+ "value": "#26c9ff"
254
+ },
255
+ "500": {
256
+ "type": "color",
257
+ "value": "#06b6f1"
258
+ },
259
+ "600": {
260
+ "type": "color",
261
+ "value": "#0092ce"
262
+ },
263
+ "700": {
264
+ "type": "color",
265
+ "value": "#0075a7"
266
+ },
267
+ "800": {
268
+ "type": "color",
269
+ "value": "#02628a"
270
+ },
271
+ "900": {
272
+ "type": "color",
273
+ "value": "#085172"
274
+ },
275
+ "950": {
276
+ "type": "color",
277
+ "value": "#06334b"
278
+ }
279
+ },
174
280
  "neutral": {
175
281
  "0": {
176
282
  "type": "color",