@synergy-design-system/tokens 2.46.0 → 2.48.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 +23 -0
  2. package/dist/js/index.d.ts +226 -1
  3. package/dist/js/index.js +226 -1
  4. package/dist/scss/_tokens.scss +46 -1
  5. package/dist/themes/dark.css +46 -1
  6. package/dist/themes/light.css +46 -1
  7. package/dist/themes/sick2018_dark.css +46 -1
  8. package/dist/themes/sick2018_light.css +46 -1
  9. package/dist/themes/sick2025_dark.css +81 -36
  10. package/dist/themes/sick2025_light.css +83 -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/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.47.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;
@@ -170,6 +198,7 @@
170
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
171
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
172
200
  --syn-input-border-color: var(--syn-color-neutral-700);
201
+ --syn-input-border-color-active: var(--syn-color-neutral-1000);
173
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
174
203
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
175
204
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -203,6 +232,7 @@
203
232
  --syn-input-icon-color: var(--syn-color-neutral-800);
204
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
205
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
206
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
207
237
  --syn-input-label-color: var(--syn-color-neutral-950);
208
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -223,6 +253,7 @@
223
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
224
254
  --syn-input-spacing-small: var(--syn-spacing-small);
225
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
226
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
227
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
228
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
@@ -248,6 +279,20 @@
248
279
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
280
  --syn-link-underline-outline: 7%;
250
281
  --syn-logo-color: var(--syn-color-primary-400);
282
+ --syn-namur-color-border: var(--syn-color-neutral-50);
283
+ --syn-namur-critical-color: var(--syn-color-critical-600);
284
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
285
+ --syn-namur-error-color: var(--syn-color-error-500);
286
+ --syn-namur-error-color-background: var(--syn-color-error-100);
287
+ --syn-namur-icon-color: var(--syn-color-neutral-50);
288
+ --syn-namur-info-color: var(--syn-color-info-500);
289
+ --syn-namur-info-color-background: var(--syn-color-info-50);
290
+ --syn-namur-neutral-color: var(--syn-color-neutral-600);
291
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-800);
292
+ --syn-namur-success-color: var(--syn-color-success-500);
293
+ --syn-namur-success-color-background: var(--syn-color-success-100);
294
+ --syn-namur-warning-color: var(--syn-color-warning-600);
295
+ --syn-namur-warning-color-background: var(--syn-color-warning-100);
251
296
  --syn-opacity-50: 0.5; /** 50% */
252
297
  --syn-option-background-color-active: var(--syn-color-primary-400);
253
298
  --syn-option-background-color-hover: var(--syn-color-neutral-100);
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.47.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;
@@ -170,6 +198,7 @@
170
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
171
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
172
200
  --syn-input-border-color: var(--syn-color-neutral-700);
201
+ --syn-input-border-color-active: var(--syn-color-neutral-1000);
173
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
174
203
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
175
204
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -203,6 +232,7 @@
203
232
  --syn-input-icon-color: var(--syn-color-neutral-800);
204
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
205
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
206
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
207
237
  --syn-input-label-color: var(--syn-color-neutral-950);
208
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -223,6 +253,7 @@
223
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
224
254
  --syn-input-spacing-small: var(--syn-spacing-small);
225
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
226
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
227
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
228
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
@@ -248,6 +279,20 @@
248
279
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
280
  --syn-link-underline-outline: 7%;
250
281
  --syn-logo-color: var(--syn-color-primary-600);
282
+ --syn-namur-color-border: var(--syn-color-neutral-950);
283
+ --syn-namur-critical-color: var(--syn-color-critical-600);
284
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
285
+ --syn-namur-error-color: var(--syn-color-error-500);
286
+ --syn-namur-error-color-background: var(--syn-color-error-100);
287
+ --syn-namur-icon-color: var(--syn-color-neutral-950);
288
+ --syn-namur-info-color: var(--syn-color-info-500);
289
+ --syn-namur-info-color-background: var(--syn-color-info-100);
290
+ --syn-namur-neutral-color: var(--syn-color-neutral-400);
291
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-200);
292
+ --syn-namur-success-color: var(--syn-color-success-500);
293
+ --syn-namur-success-color-background: var(--syn-color-success-100);
294
+ --syn-namur-warning-color: var(--syn-color-warning-400);
295
+ --syn-namur-warning-color-background: var(--syn-color-warning-100);
251
296
  --syn-opacity-50: 0.5; /** 50% */
252
297
  --syn-option-background-color-active: var(--syn-color-primary-600);
253
298
  --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.47.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;
@@ -170,6 +198,7 @@
170
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
171
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
172
200
  --syn-input-border-color: var(--syn-color-neutral-700);
201
+ --syn-input-border-color-active: var(--syn-color-neutral-1000);
173
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
174
203
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
175
204
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -203,6 +232,7 @@
203
232
  --syn-input-icon-color: var(--syn-color-neutral-800);
204
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
205
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
206
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
207
237
  --syn-input-label-color: var(--syn-color-neutral-950);
208
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -223,6 +253,7 @@
223
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
224
254
  --syn-input-spacing-small: var(--syn-spacing-small);
225
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
226
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
227
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
228
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
@@ -248,6 +279,20 @@
248
279
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
280
  --syn-link-underline-outline: 7%;
250
281
  --syn-logo-color: var(--syn-color-primary-400);
282
+ --syn-namur-color-border: var(--syn-color-neutral-50);
283
+ --syn-namur-critical-color: var(--syn-color-critical-600);
284
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
285
+ --syn-namur-error-color: var(--syn-color-error-500);
286
+ --syn-namur-error-color-background: var(--syn-color-error-100);
287
+ --syn-namur-icon-color: var(--syn-color-neutral-50);
288
+ --syn-namur-info-color: var(--syn-color-info-500);
289
+ --syn-namur-info-color-background: var(--syn-color-info-50);
290
+ --syn-namur-neutral-color: var(--syn-color-neutral-600);
291
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-800);
292
+ --syn-namur-success-color: var(--syn-color-success-500);
293
+ --syn-namur-success-color-background: var(--syn-color-success-100);
294
+ --syn-namur-warning-color: var(--syn-color-warning-600);
295
+ --syn-namur-warning-color-background: var(--syn-color-warning-100);
251
296
  --syn-opacity-50: 0.5; /** 50% */
252
297
  --syn-option-background-color-active: var(--syn-color-primary-400);
253
298
  --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.47.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;
@@ -170,6 +198,7 @@
170
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
171
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
172
200
  --syn-input-border-color: var(--syn-color-neutral-700);
201
+ --syn-input-border-color-active: var(--syn-color-neutral-1000);
173
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
174
203
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
175
204
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
@@ -203,6 +232,7 @@
203
232
  --syn-input-icon-color: var(--syn-color-neutral-800);
204
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
205
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
206
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
207
237
  --syn-input-label-color: var(--syn-color-neutral-950);
208
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -223,6 +253,7 @@
223
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
224
254
  --syn-input-spacing-small: var(--syn-spacing-small);
225
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
226
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
227
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-600);
228
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
@@ -248,6 +279,20 @@
248
279
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
280
  --syn-link-underline-outline: 7%;
250
281
  --syn-logo-color: var(--syn-color-primary-600);
282
+ --syn-namur-color-border: var(--syn-color-neutral-950);
283
+ --syn-namur-critical-color: var(--syn-color-critical-600);
284
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
285
+ --syn-namur-error-color: var(--syn-color-error-500);
286
+ --syn-namur-error-color-background: var(--syn-color-error-100);
287
+ --syn-namur-icon-color: var(--syn-color-neutral-950);
288
+ --syn-namur-info-color: var(--syn-color-info-500);
289
+ --syn-namur-info-color-background: var(--syn-color-info-100);
290
+ --syn-namur-neutral-color: var(--syn-color-neutral-400);
291
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-200);
292
+ --syn-namur-success-color: var(--syn-color-success-500);
293
+ --syn-namur-success-color-background: var(--syn-color-success-100);
294
+ --syn-namur-warning-color: var(--syn-color-warning-400);
295
+ --syn-namur-warning-color-background: var(--syn-color-warning-100);
251
296
  --syn-opacity-50: 0.5; /** 50% */
252
297
  --syn-option-background-color-active: var(--syn-color-primary-600);
253
298
  --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.47.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;
@@ -170,6 +198,7 @@
170
198
  --syn-input-background-color-focus: var(--syn-input-background-color);
171
199
  --syn-input-background-color-hover: var(--syn-input-background-color);
172
200
  --syn-input-border-color: var(--syn-color-neutral-1000);
201
+ --syn-input-border-color-active: var(--syn-color-primary-500);
173
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-1000);
174
203
  --syn-input-border-color-focus: var(--syn-color-primary-400);
175
204
  --syn-input-border-color-focus-error: var(--syn-color-error-600);
@@ -203,6 +232,7 @@
203
232
  --syn-input-icon-color: var(--syn-color-neutral-1000);
204
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-1000);
205
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
206
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
207
237
  --syn-input-label-color: var(--syn-color-neutral-1000);
208
238
  --syn-input-label-font-size-large: var(--syn-font-size-large);
@@ -223,6 +253,7 @@
223
253
  --syn-input-spacing-medium: var(--syn-spacing-medium);
224
254
  --syn-input-spacing-small: var(--syn-spacing-small);
225
255
  --syn-input-width: var(--syn-border-width-small);
256
+ --syn-interactive-background-color-active: var(--syn-color-neutral-300);
226
257
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
227
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-400);
228
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-700);
@@ -248,6 +279,20 @@
248
279
  --syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
249
280
  --syn-link-underline-outline: 25%;
250
281
  --syn-logo-color: var(--syn-color-primary-300);
282
+ --syn-namur-color-border: var(--syn-color-neutral-50);
283
+ --syn-namur-critical-color: var(--syn-color-critical-400);
284
+ --syn-namur-critical-color-background: var(--syn-color-critical-100);
285
+ --syn-namur-error-color: var(--syn-color-error-500);
286
+ --syn-namur-error-color-background: var(--syn-color-error-50);
287
+ --syn-namur-icon-color: var(--syn-color-neutral-50);
288
+ --syn-namur-info-color: var(--syn-color-info-600);
289
+ --syn-namur-info-color-background: var(--syn-color-info-50);
290
+ --syn-namur-neutral-color: var(--syn-color-neutral-600);
291
+ --syn-namur-neutral-color-background: var(--syn-color-neutral-300);
292
+ --syn-namur-success-color: var(--syn-color-success-500);
293
+ --syn-namur-success-color-background: var(--syn-color-success-50);
294
+ --syn-namur-warning-color: var(--syn-color-warning-500);
295
+ --syn-namur-warning-color-background: var(--syn-color-warning-50);
251
296
  --syn-opacity-50: 0.5; /** 50% */
252
297
  --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
253
298
  --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
@@ -348,9 +393,9 @@
348
393
  --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
394
  --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
395
  --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';
396
+ --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';
397
+ --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';
398
+ --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';
399
+ --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
400
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
356
401
  }