@synergy-design-system/tokens 2.33.0 → 2.35.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 +106 -1
  3. package/dist/js/index.js +106 -1
  4. package/dist/scss/_tokens.scss +22 -1
  5. package/dist/themes/dark.css +22 -1
  6. package/dist/themes/light.css +22 -1
  7. package/dist/themes/sick2018_dark.css +22 -1
  8. package/dist/themes/sick2018_light.css +22 -1
  9. package/dist/themes/sick2025_dark.css +22 -1
  10. package/dist/themes/sick2025_light.css +22 -1
  11. package/package.json +1 -1
  12. package/src/figma-tokens/_docs.json +12 -2
  13. package/src/figma-variables/output/sick2018-dark.json +98 -0
  14. package/src/figma-variables/output/sick2018-light.json +98 -0
  15. package/src/figma-variables/output/sick2025-dark.json +98 -0
  16. package/src/figma-variables/output/sick2025-light.json +98 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v2.35.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.34.0...tokens/2.35.0) (2025-10-28)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ CD update for syn-radio ([#1051](https://github.com/synergy-design-system/synergy-design-system/issues/1051)) ([b245f1f](https://github.com/synergy-design-system/synergy-design-system/commit/b245f1f90836a68594ecc8fdc026ecb8b3d284a9))
7
+
8
+ # [@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)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ 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))
14
+
1
15
  # [@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
16
 
3
17
 
package/dist/js/index.d.ts CHANGED
@@ -1,8 +1,58 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.32.0
2
+ * @synergy-design-system/tokens version 2.34.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
  */
@@ -198,6 +248,61 @@ export const SynColorError900: string;
198
248
  */
199
249
  export const SynColorError950: string;
200
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
+
201
306
  /**
202
307
  * Maps to the css variable `--syn-color-neutral-0`
203
308
  */
package/dist/js/index.js CHANGED
@@ -1,8 +1,58 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.32.0
2
+ * @synergy-design-system/tokens version 2.34.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
  */
@@ -198,6 +248,61 @@ export const SynColorError900 = 'var(--syn-color-error-900)';
198
248
  */
199
249
  export const SynColorError950 = 'var(--syn-color-error-950)';
200
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
+
201
306
  /**
202
307
  * @type {string}
203
308
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,7 +1,17 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.32.0
2
+ * @synergy-design-system/tokens version 2.34.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;
@@ -41,6 +51,17 @@ $SynColorError700: var(--syn-color-error-700) !default;
41
51
  $SynColorError800: var(--syn-color-error-800) !default;
42
52
  $SynColorError900: var(--syn-color-error-900) !default;
43
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;
44
65
  $SynColorNeutral0: var(--syn-color-neutral-0) !default;
45
66
  $SynColorNeutral50: var(--syn-color-neutral-50) !default;
46
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.32.0
2
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,6 +56,17 @@
46
56
  --syn-color-error-800: #ffc3c9;
47
57
  --syn-color-error-900: #ffdee2;
48
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;
49
70
  --syn-color-neutral-0: #000000;
50
71
  --syn-color-neutral-50: #31373a;
51
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.32.0
2
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,6 +56,17 @@
46
56
  --syn-color-error-800: #ab091c;
47
57
  --syn-color-error-900: #8d0f1e;
48
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;
49
70
  --syn-color-neutral-0: #ffffff;
50
71
  --syn-color-neutral-50: #f9fafb;
51
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.32.0
2
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,6 +56,17 @@
46
56
  --syn-color-error-800: #ffc3c9;
47
57
  --syn-color-error-900: #ffdee2;
48
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;
49
70
  --syn-color-neutral-0: #000000;
50
71
  --syn-color-neutral-50: #31373a;
51
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.32.0
2
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,6 +56,17 @@
46
56
  --syn-color-error-800: #ab091c;
47
57
  --syn-color-error-900: #8d0f1e;
48
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;
49
70
  --syn-color-neutral-0: #ffffff;
50
71
  --syn-color-neutral-50: #f9fafb;
51
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.32.0
2
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,6 +56,17 @@
46
56
  --syn-color-error-800: #ffcfd1;
47
57
  --syn-color-error-900: #ffe3e4;
48
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;
49
70
  --syn-color-neutral-0: #000414;
50
71
  --syn-color-neutral-50: #000724;
51
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.32.0
2
+ * @synergy-design-system/tokens version 2.34.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;
@@ -46,6 +56,17 @@
46
56
  --syn-color-error-800: #941013;
47
57
  --syn-color-error-900: #6c0c0e;
48
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;
49
70
  --syn-color-neutral-0: #ffffff;
50
71
  --syn-color-neutral-50: #f2f2f2;
51
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.33.0",
116
+ "version": "2.35.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
@@ -1896,6 +1896,16 @@
1896
1896
  "value": "The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio is mandatory and nothing has been checked.",
1897
1897
  "type": "text"
1898
1898
  }
1899
+ },
1900
+ "checked": {
1901
+ "title": {
1902
+ "value": "Checked",
1903
+ "type": "text"
1904
+ },
1905
+ "description": {
1906
+ "value": "To set the initial value and checked state, use the value attribute on the containing radio group.",
1907
+ "type": "text"
1908
+ }
1899
1909
  }
1900
1910
  },
1901
1911
  "range": {
@@ -2825,7 +2835,7 @@
2825
2835
  "type": "text"
2826
2836
  },
2827
2837
  "description": {
2828
- "value": "To set the initial value and checked state, use the value attribute on the containing radio group.",
2838
+ "value": "To set the initial value and checked state, use the value attribute on the radio element.",
2829
2839
  "type": "text"
2830
2840
  }
2831
2841
  }
@@ -4097,4 +4107,4 @@
4097
4107
  }
4098
4108
  }
4099
4109
  }
4100
- }
4110
+ }
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",
@@ -179,6 +231,52 @@
179
231
  "value": "#fff0f2"
180
232
  }
181
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
+ },
182
280
  "neutral": {
183
281
  "0": {
184
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",
@@ -179,6 +231,52 @@
179
231
  "value": "#4e010a"
180
232
  }
181
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
+ },
182
280
  "neutral": {
183
281
  "0": {
184
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",
@@ -179,6 +231,52 @@
179
231
  "value": "#fff1f1"
180
232
  }
181
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
+ },
182
280
  "neutral": {
183
281
  "0": {
184
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",
@@ -179,6 +231,52 @@
179
231
  "value": "#450709"
180
232
  }
181
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
+ },
182
280
  "neutral": {
183
281
  "0": {
184
282
  "type": "color",