@synergy-design-system/tokens 2.46.0 → 2.47.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 +9 -0
  2. package/dist/js/index.d.ts +211 -1
  3. package/dist/js/index.js +211 -1
  4. package/dist/scss/_tokens.scss +43 -1
  5. package/dist/themes/dark.css +43 -1
  6. package/dist/themes/light.css +43 -1
  7. package/dist/themes/sick2018_dark.css +43 -1
  8. package/dist/themes/sick2018_light.css +43 -1
  9. package/dist/themes/sick2025_dark.css +78 -36
  10. package/dist/themes/sick2025_light.css +80 -38
  11. package/package.json +1 -1
  12. package/src/figma-tokens/_docs.json +20 -0
  13. package/src/figma-variables/output/sick2018-dark.json +352 -6
  14. package/src/figma-variables/output/sick2018-light.json +352 -6
  15. package/src/figma-variables/output/sick2025-dark.json +383 -37
  16. package/src/figma-variables/output/sick2025-light.json +385 -39
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.45.0
2
+ * @synergy-design-system/tokens version 2.46.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -50,9 +50,26 @@
50
50
  --syn-border-width-small: 1px; /** Small */
51
51
  --syn-border-width-x-large: 4px; /** X Large */
52
52
  --syn-breadcrumb-color: var(--syn-color-neutral-500);
53
+ --syn-button-border-radius-large: var(--syn-input-border-radius-large);
54
+ --syn-button-border-radius-medium: var(--syn-input-border-radius-medium);
55
+ --syn-button-border-radius-small: var(--syn-input-border-radius-small);
56
+ --syn-button-color: var(--syn-interactive-emphasis-color);
57
+ --syn-button-color-active: var(--syn-interactive-emphasis-color-active);
58
+ --syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
59
+ --syn-button-filled-color-text: inherit;
60
+ --syn-button-filled-color-text-active: inherit;
61
+ --syn-button-filled-color-text-hover: inherit;
53
62
  --syn-button-font-size-large: var(--syn-font-size-large);
54
63
  --syn-button-font-size-medium: var(--syn-font-size-medium);
55
64
  --syn-button-font-size-small: var(--syn-font-size-small);
65
+ --syn-button-outline-color-active: none;
66
+ --syn-button-outline-color-hover: none;
67
+ --syn-button-outline-color-text: inherit;
68
+ --syn-button-outline-color-text-active: var(--syn-color-primary-950);
69
+ --syn-button-outline-color-text-hover: var(--syn-color-primary-900);
70
+ --syn-button-text-color-text: var(--syn-button-color);
71
+ --syn-button-text-color-text-active: var(--syn-button-color-active);
72
+ --syn-button-text-color-text-hover: var(--syn-button-color-hover);
56
73
  --syn-checkbox-border-radius: var(--syn-border-radius-none);
57
74
  --syn-color-accent-50: #fffbea;
58
75
  --syn-color-accent-100: #fff2c5;
@@ -65,6 +82,17 @@
65
82
  --syn-color-accent-800: #983b08;
66
83
  --syn-color-accent-900: #7c310b;
67
84
  --syn-color-accent-950: #481700;
85
+ --syn-color-critical-50: #fffbea;
86
+ --syn-color-critical-100: #fff2c5;
87
+ --syn-color-critical-200: #ffe685;
88
+ --syn-color-critical-300: #ffd246;
89
+ --syn-color-critical-400: #ffbd1b;
90
+ --syn-color-critical-500: #f39200;
91
+ --syn-color-critical-600: #e27200;
92
+ --syn-color-critical-700: #bb4d02;
93
+ --syn-color-critical-800: #983b08;
94
+ --syn-color-critical-900: #7c310b;
95
+ --syn-color-critical-950: #481700;
68
96
  --syn-color-error-50: #fff0f2;
69
97
  --syn-color-error-100: #ffdee2;
70
98
  --syn-color-error-200: #ffc3c9;
@@ -248,6 +276,20 @@
248
276
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
277
  --syn-link-underline-outline: 7%;
250
278
  --syn-logo-color: var(--syn-color-primary-600);
279
+ --syn-namur-color-border: var(--syn-color-neutral-950);
280
+ --syn-namur-critical-color: var(--syn-color-critical-600);
281
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
282
+ --syn-namur-error-color: var(--syn-color-error-500);
283
+ --syn-namur-error-color-background: var(--syn-color-error-100);
284
+ --syn-namur-icon-color: var(--syn-color-neutral-950);
285
+ --syn-namur-info-color: var(--syn-color-info-500);
286
+ --syn-namur-info-color-background: var(--syn-color-info-100);
287
+ --syn-namur-neutral-color: var(--syn-color-neutral-400);
288
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-200);
289
+ --syn-namur-success-color: var(--syn-color-success-500);
290
+ --syn-namur-success-color-background: var(--syn-color-success-100);
291
+ --syn-namur-warning-color: var(--syn-color-warning-400);
292
+ --syn-namur-warning-color-background: var(--syn-color-warning-100);
251
293
  --syn-opacity-50: 0.5; /** 50% */
252
294
  --syn-option-background-color-active: var(--syn-color-primary-600);
253
295
  --syn-option-background-color-hover: var(--syn-color-neutral-100);
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.45.0
2
+ * @synergy-design-system/tokens version 2.46.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -50,9 +50,26 @@
50
50
  --syn-border-width-small: 1px; /** Small */
51
51
  --syn-border-width-x-large: 4px; /** X Large */
52
52
  --syn-breadcrumb-color: var(--syn-color-neutral-500);
53
+ --syn-button-border-radius-large: var(--syn-input-border-radius-large);
54
+ --syn-button-border-radius-medium: var(--syn-input-border-radius-medium);
55
+ --syn-button-border-radius-small: var(--syn-input-border-radius-small);
56
+ --syn-button-color: var(--syn-interactive-emphasis-color);
57
+ --syn-button-color-active: var(--syn-interactive-emphasis-color-active);
58
+ --syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
59
+ --syn-button-filled-color-text: inherit;
60
+ --syn-button-filled-color-text-active: inherit;
61
+ --syn-button-filled-color-text-hover: inherit;
53
62
  --syn-button-font-size-large: var(--syn-font-size-large);
54
63
  --syn-button-font-size-medium: var(--syn-font-size-medium);
55
64
  --syn-button-font-size-small: var(--syn-font-size-small);
65
+ --syn-button-outline-color-active: none;
66
+ --syn-button-outline-color-hover: none;
67
+ --syn-button-outline-color-text: inherit;
68
+ --syn-button-outline-color-text-active: var(--syn-color-primary-950);
69
+ --syn-button-outline-color-text-hover: var(--syn-color-primary-900);
70
+ --syn-button-text-color-text: var(--syn-button-color);
71
+ --syn-button-text-color-text-active: var(--syn-button-color-active);
72
+ --syn-button-text-color-text-hover: var(--syn-button-color-hover);
56
73
  --syn-checkbox-border-radius: var(--syn-border-radius-none);
57
74
  --syn-color-accent-50: #481700;
58
75
  --syn-color-accent-100: #7c310b;
@@ -65,6 +82,17 @@
65
82
  --syn-color-accent-800: #ffe685;
66
83
  --syn-color-accent-900: #fff2c5;
67
84
  --syn-color-accent-950: #fffbea;
85
+ --syn-color-critical-50: #481700;
86
+ --syn-color-critical-100: #7c310b;
87
+ --syn-color-critical-200: #983b08;
88
+ --syn-color-critical-300: #bb4d02;
89
+ --syn-color-critical-400: #e27200;
90
+ --syn-color-critical-500: #f39200;
91
+ --syn-color-critical-600: #ffbd1b;
92
+ --syn-color-critical-700: #ffd246;
93
+ --syn-color-critical-800: #ffe685;
94
+ --syn-color-critical-900: #fff2c5;
95
+ --syn-color-critical-950: #fffbea;
68
96
  --syn-color-error-50: #4e010a;
69
97
  --syn-color-error-100: #8d0f1e;
70
98
  --syn-color-error-200: #ab091c;
@@ -248,6 +276,20 @@
248
276
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
277
  --syn-link-underline-outline: 7%;
250
278
  --syn-logo-color: var(--syn-color-primary-400);
279
+ --syn-namur-color-border: var(--syn-color-neutral-50);
280
+ --syn-namur-critical-color: var(--syn-color-critical-600);
281
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
282
+ --syn-namur-error-color: var(--syn-color-error-500);
283
+ --syn-namur-error-color-background: var(--syn-color-error-100);
284
+ --syn-namur-icon-color: var(--syn-color-neutral-50);
285
+ --syn-namur-info-color: var(--syn-color-info-500);
286
+ --syn-namur-info-color-background: var(--syn-color-info-50);
287
+ --syn-namur-neutral-color: var(--syn-color-neutral-600);
288
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-800);
289
+ --syn-namur-success-color: var(--syn-color-success-500);
290
+ --syn-namur-success-color-background: var(--syn-color-success-100);
291
+ --syn-namur-warning-color: var(--syn-color-warning-600);
292
+ --syn-namur-warning-color-background: var(--syn-color-warning-100);
251
293
  --syn-opacity-50: 0.5; /** 50% */
252
294
  --syn-option-background-color-active: var(--syn-color-primary-400);
253
295
  --syn-option-background-color-hover: var(--syn-color-neutral-100);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.45.0
2
+ * @synergy-design-system/tokens version 2.46.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -50,9 +50,26 @@
50
50
  --syn-border-width-small: 1px; /** Small */
51
51
  --syn-border-width-x-large: 4px; /** X Large */
52
52
  --syn-breadcrumb-color: var(--syn-color-neutral-500);
53
+ --syn-button-border-radius-large: var(--syn-input-border-radius-large);
54
+ --syn-button-border-radius-medium: var(--syn-input-border-radius-medium);
55
+ --syn-button-border-radius-small: var(--syn-input-border-radius-small);
56
+ --syn-button-color: var(--syn-interactive-emphasis-color);
57
+ --syn-button-color-active: var(--syn-interactive-emphasis-color-active);
58
+ --syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
59
+ --syn-button-filled-color-text: inherit;
60
+ --syn-button-filled-color-text-active: inherit;
61
+ --syn-button-filled-color-text-hover: inherit;
53
62
  --syn-button-font-size-large: var(--syn-font-size-large);
54
63
  --syn-button-font-size-medium: var(--syn-font-size-medium);
55
64
  --syn-button-font-size-small: var(--syn-font-size-small);
65
+ --syn-button-outline-color-active: none;
66
+ --syn-button-outline-color-hover: none;
67
+ --syn-button-outline-color-text: inherit;
68
+ --syn-button-outline-color-text-active: var(--syn-color-primary-950);
69
+ --syn-button-outline-color-text-hover: var(--syn-color-primary-900);
70
+ --syn-button-text-color-text: var(--syn-button-color);
71
+ --syn-button-text-color-text-active: var(--syn-button-color-active);
72
+ --syn-button-text-color-text-hover: var(--syn-button-color-hover);
56
73
  --syn-checkbox-border-radius: var(--syn-border-radius-none);
57
74
  --syn-color-accent-50: #fffbea;
58
75
  --syn-color-accent-100: #fff2c5;
@@ -65,6 +82,17 @@
65
82
  --syn-color-accent-800: #983b08;
66
83
  --syn-color-accent-900: #7c310b;
67
84
  --syn-color-accent-950: #481700;
85
+ --syn-color-critical-50: #fffbea;
86
+ --syn-color-critical-100: #fff2c5;
87
+ --syn-color-critical-200: #ffe685;
88
+ --syn-color-critical-300: #ffd246;
89
+ --syn-color-critical-400: #ffbd1b;
90
+ --syn-color-critical-500: #f39200;
91
+ --syn-color-critical-600: #e27200;
92
+ --syn-color-critical-700: #bb4d02;
93
+ --syn-color-critical-800: #983b08;
94
+ --syn-color-critical-900: #7c310b;
95
+ --syn-color-critical-950: #481700;
68
96
  --syn-color-error-50: #fff0f2;
69
97
  --syn-color-error-100: #ffdee2;
70
98
  --syn-color-error-200: #ffc3c9;
@@ -248,6 +276,20 @@
248
276
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
277
  --syn-link-underline-outline: 7%;
250
278
  --syn-logo-color: var(--syn-color-primary-600);
279
+ --syn-namur-color-border: var(--syn-color-neutral-950);
280
+ --syn-namur-critical-color: var(--syn-color-critical-600);
281
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
282
+ --syn-namur-error-color: var(--syn-color-error-500);
283
+ --syn-namur-error-color-background: var(--syn-color-error-100);
284
+ --syn-namur-icon-color: var(--syn-color-neutral-950);
285
+ --syn-namur-info-color: var(--syn-color-info-500);
286
+ --syn-namur-info-color-background: var(--syn-color-info-100);
287
+ --syn-namur-neutral-color: var(--syn-color-neutral-400);
288
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-200);
289
+ --syn-namur-success-color: var(--syn-color-success-500);
290
+ --syn-namur-success-color-background: var(--syn-color-success-100);
291
+ --syn-namur-warning-color: var(--syn-color-warning-400);
292
+ --syn-namur-warning-color-background: var(--syn-color-warning-100);
251
293
  --syn-opacity-50: 0.5; /** 50% */
252
294
  --syn-option-background-color-active: var(--syn-color-primary-600);
253
295
  --syn-option-background-color-hover: var(--syn-color-neutral-100);
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.45.0
2
+ * @synergy-design-system/tokens version 2.46.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,35 +7,35 @@
7
7
  :root, .syn-sick2025-dark {
8
8
  color-scheme: dark;
9
9
 
10
- --syn-alert-error-color-background: var(--syn-color-error-50);
11
- --syn-alert-error-color-border: var(--syn-color-error-50);
10
+ --syn-alert-error-color-background: var(--syn-namur-error-color-background);
11
+ --syn-alert-error-color-border: var(--syn-namur-error-color-background);
12
12
  --syn-alert-error-color-icon: var(--syn-typography-color-text);
13
- --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
- --syn-alert-informative-color-background: var(--syn-color-info-50);
15
- --syn-alert-informative-color-border: var(--syn-color-info-50);
13
+ --syn-alert-error-color-indicator: var(--syn-namur-error-color);
14
+ --syn-alert-informative-color-background: var(--syn-namur-info-color-background);
15
+ --syn-alert-informative-color-border: var(--syn-namur-info-color-background);
16
16
  --syn-alert-informative-color-icon: var(--syn-typography-color-text);
17
- --syn-alert-informative-color-indicator: var(--syn-color-info-800);
18
- --syn-alert-neutral-color-background: var(--syn-color-neutral-300);
19
- --syn-alert-neutral-color-border: var(--syn-color-neutral-300);
17
+ --syn-alert-informative-color-indicator: var(--syn-namur-info-color);
18
+ --syn-alert-neutral-color-background: var(--syn-namur-neutral-color-background);
19
+ --syn-alert-neutral-color-border: var(--syn-namur-neutral-color-background);
20
20
  --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
21
- --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
22
- --syn-alert-success-color-background: var(--syn-color-success-50);
23
- --syn-alert-success-color-border: var(--syn-color-success-50);
21
+ --syn-alert-neutral-color-indicator: var(--syn-namur-neutral-color);
22
+ --syn-alert-success-color-background: var(--syn-namur-success-color-background);
23
+ --syn-alert-success-color-border: var(--syn-namur-success-color-background);
24
24
  --syn-alert-success-color-icon: var(--syn-typography-color-text);
25
- --syn-alert-success-color-indicator: var(--syn-color-success-600);
26
- --syn-alert-warning-color-background: var(--syn-color-warning-50);
27
- --syn-alert-warning-color-border: var(--syn-color-warning-50);
25
+ --syn-alert-success-color-indicator: var(--syn-namur-success-color);
26
+ --syn-alert-warning-color-background: var(--syn-namur-warning-color-background);
27
+ --syn-alert-warning-color-border: var(--syn-namur-warning-color-background);
28
28
  --syn-alert-warning-color-icon: var(--syn-typography-color-text);
29
- --syn-alert-warning-color-indicator: var(--syn-color-warning-800);
30
- --syn-badge-error-color-background: var(--syn-color-error-600);
29
+ --syn-alert-warning-color-indicator: var(--syn-namur-warning-color);
30
+ --syn-badge-error-color-background: var(--syn-namur-error-color);
31
31
  --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
32
- --syn-badge-informative-color-background: #a6e9ff;
32
+ --syn-badge-informative-color-background: var(--syn-namur-info-color);
33
33
  --syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
34
- --syn-badge-neutral-color-background: var(--syn-color-neutral-800);
34
+ --syn-badge-neutral-color-background: var(--syn-namur-neutral-color);
35
35
  --syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
36
- --syn-badge-success-color-background: var(--syn-color-success-600);
36
+ --syn-badge-success-color-background: var(--syn-namur-success-color);
37
37
  --syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
38
- --syn-badge-warning-color-background: var(--syn-color-warning-800);
38
+ --syn-badge-warning-color-background: var(--syn-namur-warning-color);
39
39
  --syn-badge-warning-color-text: var(--syn-typography-color-text-inverted);
40
40
  --syn-border-radius-circle: 9999px;
41
41
  --syn-border-radius-large: 8px;
@@ -50,21 +50,49 @@
50
50
  --syn-border-width-small: 1px; /** Small */
51
51
  --syn-border-width-x-large: 4px; /** X Large */
52
52
  --syn-breadcrumb-color: var(--syn-typography-color-text);
53
+ --syn-button-border-radius-large: var(--syn-border-radius-pill);
54
+ --syn-button-border-radius-medium: var(--syn-border-radius-pill);
55
+ --syn-button-border-radius-small: var(--syn-border-radius-pill);
56
+ --syn-button-color: var(--syn-color-neutral-1000);
57
+ --syn-button-color-active: var(--syn-color-neutral-950);
58
+ --syn-button-color-hover: var(--syn-color-neutral-1000);
59
+ --syn-button-filled-color-text: var(--syn-interactive-emphasis-color);
60
+ --syn-button-filled-color-text-active: var(--syn-typography-color-text-inverted);
61
+ --syn-button-filled-color-text-hover: var(--syn-typography-color-text-inverted);
53
62
  --syn-button-font-size-large: var(--syn-font-size-large);
54
63
  --syn-button-font-size-medium: var(--syn-font-size-medium);
55
64
  --syn-button-font-size-small: var(--syn-font-size-small);
65
+ --syn-button-outline-color-active: var(--syn-color-neutral-950);
66
+ --syn-button-outline-color-hover: var(--syn-color-neutral-1000);
67
+ --syn-button-outline-color-text: var(--syn-typography-color-text);
68
+ --syn-button-outline-color-text-active: var(--syn-typography-color-text-inverted);
69
+ --syn-button-outline-color-text-hover: var(--syn-typography-color-text-inverted);
70
+ --syn-button-text-color-text: var(--syn-typography-color-text);
71
+ --syn-button-text-color-text-active: var(--syn-interactive-quiet-color-active);
72
+ --syn-button-text-color-text-hover: var(--syn-interactive-quiet-color-hover);
56
73
  --syn-checkbox-border-radius: var(--syn-border-radius-small);
57
- --syn-color-accent-50: #ffffff;
58
- --syn-color-accent-100: #ffffff;
59
- --syn-color-accent-200: #ffffff;
60
- --syn-color-accent-300: #ffffff;
61
- --syn-color-accent-400: #ffffff;
62
- --syn-color-accent-500: #ffffff;
63
- --syn-color-accent-600: #ffffff;
64
- --syn-color-accent-700: #ffffff;
65
- --syn-color-accent-800: #ffffff;
66
- --syn-color-accent-900: #ffffff;
67
- --syn-color-accent-950: #ffffff;
74
+ --syn-color-accent-50: #092518;
75
+ --syn-color-accent-100: #155033;
76
+ --syn-color-accent-200: #18643e;
77
+ --syn-color-accent-300: #1e7d4c;
78
+ --syn-color-accent-400: #2d9c60;
79
+ --syn-color-accent-500: #4fb87c;
80
+ --syn-color-accent-600: #83d2a3;
81
+ --syn-color-accent-700: #a5e1b9;
82
+ --syn-color-accent-800: #bbe8c8;
83
+ --syn-color-accent-900: #d2f0dc;
84
+ --syn-color-accent-950: #e9f8ed;
85
+ --syn-color-critical-50: #462104;
86
+ --syn-color-critical-100: #82450c;
87
+ --syn-color-critical-200: #a1520b;
88
+ --syn-color-critical-300: #cc6b02;
89
+ --syn-color-critical-400: #ff9100;
90
+ --syn-color-critical-500: #ffa80a;
91
+ --syn-color-critical-600: #ffbf32;
92
+ --syn-color-critical-700: #ffdb6d;
93
+ --syn-color-critical-800: #ffeba5;
94
+ --syn-color-critical-900: #fff7d3;
95
+ --syn-color-critical-950: #fffbec;
68
96
  --syn-color-error-50: #450709;
69
97
  --syn-color-error-100: #6c0c0e;
70
98
  --syn-color-error-200: #941013;
@@ -248,6 +276,20 @@
248
276
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
277
  --syn-link-underline-outline: 25%;
250
278
  --syn-logo-color: var(--syn-color-primary-300);
279
+ --syn-namur-color-border: var(--syn-color-neutral-50);
280
+ --syn-namur-critical-color: var(--syn-color-critical-400);
281
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
282
+ --syn-namur-error-color: var(--syn-color-error-500);
283
+ --syn-namur-error-color-background: var(--syn-color-error-50);
284
+ --syn-namur-icon-color: var(--syn-color-neutral-50);
285
+ --syn-namur-info-color: var(--syn-color-info-600);
286
+ --syn-namur-info-color-background: var(--syn-color-info-50);
287
+ --syn-namur-neutral-color: var(--syn-color-neutral-600);
288
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-300);
289
+ --syn-namur-success-color: var(--syn-color-success-500);
290
+ --syn-namur-success-color-background: var(--syn-color-success-50);
291
+ --syn-namur-warning-color: var(--syn-color-warning-500);
292
+ --syn-namur-warning-color-background: var(--syn-color-warning-50);
251
293
  --syn-opacity-50: 0.5; /** 50% */
252
294
  --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
253
295
  --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
@@ -348,9 +390,9 @@
348
390
  --syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
349
391
  --syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
350
392
  --syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
351
- --syn-heading-large: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
352
- --syn-heading-x-large: 600 24px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
353
- --syn-heading-2x-large: 600 32px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
354
- --syn-heading-3x-large: 600 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
393
+ --syn-heading-large: 400 22px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
394
+ --syn-heading-x-large: 400 28px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
395
+ --syn-heading-2x-large: 400 34px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
396
+ --syn-heading-3x-large: 400 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
355
397
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
356
398
  }
package/dist/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.45.0
2
+ * @synergy-design-system/tokens version 2.46.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,35 +7,35 @@
7
7
  :root, .syn-sick2025-light {
8
8
  color-scheme: light;
9
9
 
10
- --syn-alert-error-color-background: var(--syn-color-error-100);
11
- --syn-alert-error-color-border: var(--syn-color-error-100);
10
+ --syn-alert-error-color-background: var(--syn-namur-error-color-background);
11
+ --syn-alert-error-color-border: var(--syn-namur-error-color-background);
12
12
  --syn-alert-error-color-icon: var(--syn-typography-color-text);
13
- --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
- --syn-alert-informative-color-background: var(--syn-color-info-100);
15
- --syn-alert-informative-color-border: var(--syn-color-info-100);
13
+ --syn-alert-error-color-indicator: var(--syn-namur-error-color);
14
+ --syn-alert-informative-color-background: var(--syn-namur-info-color-background);
15
+ --syn-alert-informative-color-border: var(--syn-namur-info-color-background);
16
16
  --syn-alert-informative-color-icon: var(--syn-typography-color-text);
17
- --syn-alert-informative-color-indicator: var(--syn-color-info-400);
18
- --syn-alert-neutral-color-background: #e6e1dc;
19
- --syn-alert-neutral-color-border: #e6e1dc;
17
+ --syn-alert-informative-color-indicator: var(--syn-namur-info-color);
18
+ --syn-alert-neutral-color-background: var(--syn-namur-neutral-color-background);
19
+ --syn-alert-neutral-color-border: var(--syn-namur-neutral-color-background);
20
20
  --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
21
- --syn-alert-neutral-color-indicator: #d5ccc5;
22
- --syn-alert-success-color-background: var(--syn-color-success-100);
23
- --syn-alert-success-color-border: var(--syn-color-success-100);
21
+ --syn-alert-neutral-color-indicator: var(--syn-namur-neutral-color);
22
+ --syn-alert-success-color-background: var(--syn-namur-success-color-background);
23
+ --syn-alert-success-color-border: var(--syn-namur-success-color-background);
24
24
  --syn-alert-success-color-icon: var(--syn-typography-color-text);
25
- --syn-alert-success-color-indicator: var(--syn-color-success-800);
26
- --syn-alert-warning-color-background: var(--syn-color-warning-100);
27
- --syn-alert-warning-color-border: var(--syn-color-warning-100);
25
+ --syn-alert-success-color-indicator: var(--syn-namur-success-color);
26
+ --syn-alert-warning-color-background: var(--syn-namur-warning-color-background);
27
+ --syn-alert-warning-color-border: var(--syn-namur-warning-color-background);
28
28
  --syn-alert-warning-color-icon: var(--syn-typography-color-text);
29
- --syn-alert-warning-color-indicator: var(--syn-color-warning-500);
30
- --syn-badge-error-color-background: var(--syn-color-error-600);
31
- --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
32
- --syn-badge-informative-color-background: #26c9ff;
29
+ --syn-alert-warning-color-indicator: var(--syn-namur-warning-color);
30
+ --syn-badge-error-color-background: var(--syn-namur-error-color);
31
+ --syn-badge-error-color-text: var(--syn-typography-color-text);
32
+ --syn-badge-informative-color-background: var(--syn-namur-info-color);
33
33
  --syn-badge-informative-color-text: var(--syn-typography-color-text);
34
- --syn-badge-neutral-color-background: #d5ccc5;
34
+ --syn-badge-neutral-color-background: var(--syn-namur-neutral-color);
35
35
  --syn-badge-neutral-color-text: var(--syn-typography-color-text);
36
- --syn-badge-success-color-background: var(--syn-color-success-800);
37
- --syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
38
- --syn-badge-warning-color-background: var(--syn-color-warning-500);
36
+ --syn-badge-success-color-background: var(--syn-namur-success-color);
37
+ --syn-badge-success-color-text: var(--syn-typography-color-text);
38
+ --syn-badge-warning-color-background: var(--syn-namur-warning-color);
39
39
  --syn-badge-warning-color-text: var(--syn-typography-color-text);
40
40
  --syn-border-radius-circle: 9999px;
41
41
  --syn-border-radius-large: 8px;
@@ -50,21 +50,49 @@
50
50
  --syn-border-width-small: 1px; /** Small */
51
51
  --syn-border-width-x-large: 4px; /** X Large */
52
52
  --syn-breadcrumb-color: var(--syn-typography-color-text);
53
+ --syn-button-border-radius-large: var(--syn-border-radius-pill);
54
+ --syn-button-border-radius-medium: var(--syn-border-radius-pill);
55
+ --syn-button-border-radius-small: var(--syn-border-radius-pill);
56
+ --syn-button-color: var(--syn-interactive-emphasis-color);
57
+ --syn-button-color-active: var(--syn-interactive-emphasis-color-active);
58
+ --syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
59
+ --syn-button-filled-color-text: inherit;
60
+ --syn-button-filled-color-text-active: inherit;
61
+ --syn-button-filled-color-text-hover: inherit;
53
62
  --syn-button-font-size-large: var(--syn-font-size-large);
54
63
  --syn-button-font-size-medium: var(--syn-font-size-medium);
55
64
  --syn-button-font-size-small: var(--syn-font-size-small);
65
+ --syn-button-outline-color-active: var(--syn-interactive-emphasis-color-active);
66
+ --syn-button-outline-color-hover: var(--syn-interactive-emphasis-color-hover);
67
+ --syn-button-outline-color-text: var(--syn-typography-color-text);
68
+ --syn-button-outline-color-text-active: var(--syn-typography-color-text-inverted);
69
+ --syn-button-outline-color-text-hover: var(--syn-typography-color-text-inverted);
70
+ --syn-button-text-color-text: var(--syn-button-color);
71
+ --syn-button-text-color-text-active: var(--syn-button-color-active);
72
+ --syn-button-text-color-text-hover: var(--syn-button-color-hover);
56
73
  --syn-checkbox-border-radius: var(--syn-border-radius-small);
57
- --syn-color-accent-50: #ffffff;
58
- --syn-color-accent-100: #ffffff;
59
- --syn-color-accent-200: #ffffff;
60
- --syn-color-accent-300: #ffffff;
61
- --syn-color-accent-400: #ffffff;
62
- --syn-color-accent-500: #ffffff;
63
- --syn-color-accent-600: #ffffff;
64
- --syn-color-accent-700: #ffffff;
65
- --syn-color-accent-800: #ffffff;
66
- --syn-color-accent-900: #ffffff;
67
- --syn-color-accent-950: #ffffff;
74
+ --syn-color-accent-50: #e9f8ed;
75
+ --syn-color-accent-100: #d2f0dc;
76
+ --syn-color-accent-200: #bbe8c8;
77
+ --syn-color-accent-300: #a5e1b9;
78
+ --syn-color-accent-400: #83d2a3;
79
+ --syn-color-accent-500: #4fb87c;
80
+ --syn-color-accent-600: #2d9c60;
81
+ --syn-color-accent-700: #1e7d4c;
82
+ --syn-color-accent-800: #18643e;
83
+ --syn-color-accent-900: #155033;
84
+ --syn-color-accent-950: #092518;
85
+ --syn-color-critical-50: #fffbec;
86
+ --syn-color-critical-100: #fff7d3;
87
+ --syn-color-critical-200: #ffeba5;
88
+ --syn-color-critical-300: #ffdb6d;
89
+ --syn-color-critical-400: #ffbf32;
90
+ --syn-color-critical-500: #ffa80a;
91
+ --syn-color-critical-600: #ff9100;
92
+ --syn-color-critical-700: #cc6b02;
93
+ --syn-color-critical-800: #a1520b;
94
+ --syn-color-critical-900: #82450c;
95
+ --syn-color-critical-950: #462104;
68
96
  --syn-color-error-50: #fff1f1;
69
97
  --syn-color-error-100: #ffe3e4;
70
98
  --syn-color-error-200: #ffcfd1;
@@ -248,6 +276,20 @@
248
276
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
277
  --syn-link-underline-outline: 25%;
250
278
  --syn-logo-color: var(--syn-color-primary-700);
279
+ --syn-namur-color-border: var(--syn-color-neutral-950);
280
+ --syn-namur-critical-color: var(--syn-color-critical-600);
281
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
282
+ --syn-namur-error-color: var(--syn-color-error-500);
283
+ --syn-namur-error-color-background: var(--syn-color-error-100);
284
+ --syn-namur-icon-color: var(--syn-color-neutral-950);
285
+ --syn-namur-info-color: var(--syn-color-info-400);
286
+ --syn-namur-info-color-background: var(--syn-color-info-100);
287
+ --syn-namur-neutral-color: #d5ccc5;
288
+ --syn-namur-neutral-color-background: #e6e1dc;
289
+ --syn-namur-success-color: var(--syn-color-success-500);
290
+ --syn-namur-success-color-background: var(--syn-color-success-100);
291
+ --syn-namur-warning-color: var(--syn-color-warning-500);
292
+ --syn-namur-warning-color-background: var(--syn-color-warning-100);
251
293
  --syn-opacity-50: 0.5; /** 50% */
252
294
  --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
253
295
  --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
@@ -348,9 +390,9 @@
348
390
  --syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
349
391
  --syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
350
392
  --syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
351
- --syn-heading-large: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
352
- --syn-heading-x-large: 600 24px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
353
- --syn-heading-2x-large: 600 32px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
354
- --syn-heading-3x-large: 600 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
393
+ --syn-heading-large: 400 22px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
394
+ --syn-heading-x-large: 400 28px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
395
+ --syn-heading-2x-large: 400 34px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
396
+ --syn-heading-3x-large: 400 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
355
397
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
356
398
  }
package/package.json CHANGED
@@ -57,7 +57,7 @@
57
57
  },
58
58
  "type": "module",
59
59
  "types": "./dist/js/index.d.ts",
60
- "version": "2.46.0",
60
+ "version": "2.47.0",
61
61
  "scripts": {
62
62
  "build": "pnpm clean && node scripts/build.js",
63
63
  "build:all": "dotenvx -q run pnpm build:_all",
package/src/figma-tokens/_docs.json CHANGED
@@ -142,6 +142,16 @@
142
142
  "value": "The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.\n\nBy default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting .syn-toast-stack in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.",
143
143
  "type": "text"
144
144
  }
145
+ },
146
+ "size": {
147
+ "title": {
148
+ "value": "Sizes",
149
+ "type": "text"
150
+ },
151
+ "description": {
152
+ "value": "Use the size attribute to change an alert’s size.",
153
+ "type": "text"
154
+ }
145
155
  }
146
156
  },
147
157
  "animated-image": {
@@ -3489,6 +3499,16 @@
3489
3499
  "type": "text"
3490
3500
  }
3491
3501
  },
3502
+ "size": {
3503
+ "title": {
3504
+ "value": "Sizes",
3505
+ "type": "text"
3506
+ },
3507
+ "description": {
3508
+ "value": "In development use the size attribute of the form element e.g. syn-input to set the size of the inline syn-validate automatically.",
3509
+ "type": "text"
3510
+ }
3511
+ },
3492
3512
  "live": {
3493
3513
  "title": {
3494
3514
  "value": "Live",