@synergy-design-system/tokens 2.33.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 (15) hide show
  1. package/CHANGELOG.md +7 -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-variables/output/sick2018-dark.json +98 -0
  13. package/src/figma-variables/output/sick2018-light.json +98 -0
  14. package/src/figma-variables/output/sick2025-dark.json +98 -0
  15. package/src/figma-variables/output/sick2025-light.json +98 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
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
+
1
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)
2
9
 
3
10
 
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.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
  */
@@ -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.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
  */
@@ -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.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;
@@ -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.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;
@@ -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.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;
@@ -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.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;
@@ -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.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;
@@ -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.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;
@@ -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.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;
@@ -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.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-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",