@synergy-design-system/tokens 2.45.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 +20 -0
  2. package/dist/js/index.d.ts +246 -1
  3. package/dist/js/index.js +246 -1
  4. package/dist/scss/_tokens.scss +50 -1
  5. package/dist/themes/dark.css +52 -3
  6. package/dist/themes/light.css +52 -3
  7. package/dist/themes/sick2018_dark.css +52 -3
  8. package/dist/themes/sick2018_light.css +52 -3
  9. package/dist/themes/sick2025_dark.css +89 -40
  10. package/dist/themes/sick2025_light.css +92 -43
  11. package/package.json +1 -1
  12. package/src/figma-tokens/_docs.json +30 -0
  13. package/src/figma-variables/output/sick2018-dark.json +388 -8
  14. package/src/figma-variables/output/sick2018-light.json +388 -8
  15. package/src/figma-variables/output/sick2025-dark.json +421 -41
  16. package/src/figma-variables/output/sick2025-light.json +424 -44
package/dist/themes/dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.44.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);
@@ -274,6 +316,7 @@
274
316
  --syn-range-tick-color: var(--syn-color-neutral-400);
275
317
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
318
  --syn-readonly-background-color: var(--syn-color-neutral-300);
319
+ --syn-spacing-1-5x-large: 40px;
277
320
  --syn-spacing-2x-large: 48px;
278
321
  --syn-spacing-2x-small: 4px;
279
322
  --syn-spacing-3x-large: 64px;
@@ -288,6 +331,12 @@
288
331
  --syn-spacing-x-large: 32px;
289
332
  --syn-spacing-x-small: 8px;
290
333
  --syn-spinner-opacity: 0.16;
334
+ --syn-switch-height-large: 28px;
335
+ --syn-switch-height-medium: var(--syn-spacing-large);
336
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
337
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
338
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
339
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
340
  --syn-table-background-color: var(--syn-panel-background-color);
292
341
  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
293
342
  --syn-table-background-color-header: var(--syn-color-neutral-200);
@@ -297,8 +346,8 @@
297
346
  --syn-text-decoration-default: none;
298
347
  --syn-text-decoration-underline: underline;
299
348
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
349
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
350
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
351
  --syn-tooltip-arrow-size: 9px;
303
352
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
353
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/dist/themes/light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.44.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);
@@ -274,6 +316,7 @@
274
316
  --syn-range-tick-color: var(--syn-color-neutral-400);
275
317
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
318
  --syn-readonly-background-color: var(--syn-color-neutral-300);
319
+ --syn-spacing-1-5x-large: 40px;
277
320
  --syn-spacing-2x-large: 48px;
278
321
  --syn-spacing-2x-small: 4px;
279
322
  --syn-spacing-3x-large: 64px;
@@ -288,6 +331,12 @@
288
331
  --syn-spacing-x-large: 32px;
289
332
  --syn-spacing-x-small: 8px;
290
333
  --syn-spinner-opacity: 0.16;
334
+ --syn-switch-height-large: 28px;
335
+ --syn-switch-height-medium: var(--syn-spacing-large);
336
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
337
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
338
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
339
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
340
  --syn-table-background-color: var(--syn-panel-background-color);
292
341
  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
293
342
  --syn-table-background-color-header: var(--syn-color-neutral-200);
@@ -297,8 +346,8 @@
297
346
  --syn-text-decoration-default: none;
298
347
  --syn-text-decoration-underline: underline;
299
348
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
349
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
350
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
351
  --syn-tooltip-arrow-size: 9px;
303
352
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
353
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/dist/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.44.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);
@@ -274,6 +316,7 @@
274
316
  --syn-range-tick-color: var(--syn-color-neutral-400);
275
317
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
318
  --syn-readonly-background-color: var(--syn-color-neutral-300);
319
+ --syn-spacing-1-5x-large: 40px;
277
320
  --syn-spacing-2x-large: 48px;
278
321
  --syn-spacing-2x-small: 4px;
279
322
  --syn-spacing-3x-large: 64px;
@@ -288,6 +331,12 @@
288
331
  --syn-spacing-x-large: 32px;
289
332
  --syn-spacing-x-small: 8px;
290
333
  --syn-spinner-opacity: 0.16;
334
+ --syn-switch-height-large: 28px;
335
+ --syn-switch-height-medium: var(--syn-spacing-large);
336
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
337
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
338
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
339
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
340
  --syn-table-background-color: var(--syn-panel-background-color);
292
341
  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
293
342
  --syn-table-background-color-header: var(--syn-color-neutral-200);
@@ -297,8 +346,8 @@
297
346
  --syn-text-decoration-default: none;
298
347
  --syn-text-decoration-underline: underline;
299
348
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
349
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
350
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
351
  --syn-tooltip-arrow-size: 9px;
303
352
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
353
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/dist/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.44.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);
@@ -274,6 +316,7 @@
274
316
  --syn-range-tick-color: var(--syn-color-neutral-400);
275
317
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
318
  --syn-readonly-background-color: var(--syn-color-neutral-300);
319
+ --syn-spacing-1-5x-large: 40px;
277
320
  --syn-spacing-2x-large: 48px;
278
321
  --syn-spacing-2x-small: 4px;
279
322
  --syn-spacing-3x-large: 64px;
@@ -288,6 +331,12 @@
288
331
  --syn-spacing-x-large: 32px;
289
332
  --syn-spacing-x-small: 8px;
290
333
  --syn-spinner-opacity: 0.16;
334
+ --syn-switch-height-large: 28px;
335
+ --syn-switch-height-medium: var(--syn-spacing-large);
336
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
337
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
338
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
339
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
340
  --syn-table-background-color: var(--syn-panel-background-color);
292
341
  --syn-table-background-color-alternating: var(--syn-color-neutral-50);
293
342
  --syn-table-background-color-header: var(--syn-color-neutral-200);
@@ -297,8 +346,8 @@
297
346
  --syn-text-decoration-default: none;
298
347
  --syn-text-decoration-underline: underline;
299
348
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
349
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
350
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
351
  --syn-tooltip-arrow-size: 9px;
303
352
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
304
353
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
package/dist/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.44.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,9 +276,23 @@
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
- --syn-option-background-color-active: var(--syn-color-neutral-1000);
253
- --syn-option-background-color-hover: var(--syn-color-neutral-1000);
294
+ --syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
295
+ --syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
254
296
  --syn-option-check-color: var(--syn-interactive-quiet-color);
255
297
  --syn-option-check-color-active: var(--syn-color-neutral-0);
256
298
  --syn-option-check-color-hover: var(--syn-color-neutral-0);
@@ -274,6 +316,7 @@
274
316
  --syn-range-tick-color: var(--syn-color-neutral-600);
275
317
  --syn-range-track-color-active: var(--syn-interactive-emphasis-color);
276
318
  --syn-readonly-background-color: var(--syn-color-neutral-300);
319
+ --syn-spacing-1-5x-large: 40px;
277
320
  --syn-spacing-2x-large: 48px;
278
321
  --syn-spacing-2x-small: 4px;
279
322
  --syn-spacing-3x-large: 64px;
@@ -288,6 +331,12 @@
288
331
  --syn-spacing-x-large: 32px;
289
332
  --syn-spacing-x-small: 8px;
290
333
  --syn-spinner-opacity: 0.4;
334
+ --syn-switch-height-large: 28px;
335
+ --syn-switch-height-medium: var(--syn-spacing-large);
336
+ --syn-switch-height-small: var(--syn-spacing-medium-large);
337
+ --syn-switch-width-large: var(--syn-spacing-2x-large);
338
+ --syn-switch-width-medium: var(--syn-spacing-1-5x-large);
339
+ --syn-switch-width-small: var(--syn-spacing-x-large);
291
340
  --syn-table-background-color: var(--syn-panel-background-color);
292
341
  --syn-table-background-color-alternating: var(--syn-color-neutral-200);
293
342
  --syn-table-background-color-header: var(--syn-color-neutral-300);
@@ -297,8 +346,8 @@
297
346
  --syn-text-decoration-default: none;
298
347
  --syn-text-decoration-underline: underline;
299
348
  --syn-toggle-size-large: var(--syn-spacing-large);
300
- --syn-toggle-size-medium: var(--syn-spacing-medium);
301
- --syn-toggle-size-small: 14px;
349
+ --syn-toggle-size-medium: var(--syn-spacing-medium-large);
350
+ --syn-toggle-size-small: var(--syn-spacing-medium);
302
351
  --syn-tooltip-arrow-size: 9px;
303
352
  --syn-tooltip-background-color: var(--syn-color-neutral-1000);
304
353
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
@@ -341,9 +390,9 @@
341
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';
342
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';
343
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';
344
- --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';
345
- --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';
346
- --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';
347
- --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';
348
397
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
349
398
  }