@synergy-design-system/mcp 1.38.4 → 1.39.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 (19) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/components/syn-button/component.custom.styles.ts +53 -28
  4. package/metadata/packages/components/components/syn-menu-item/component.custom.styles.ts +27 -12
  5. package/metadata/packages/components/components/syn-optgroup/component.styles.ts +3 -1
  6. package/metadata/packages/components/components/syn-option/component.custom.styles.ts +11 -6
  7. package/metadata/packages/components/migration/migration-synergy-v3.md +0 -5
  8. package/metadata/packages/components/static/CHANGELOG.md +26 -1
  9. package/metadata/packages/tokens/CHANGELOG.md +9 -0
  10. package/metadata/packages/tokens/dark.css +42 -0
  11. package/metadata/packages/tokens/index.js +210 -0
  12. package/metadata/packages/tokens/light.css +42 -0
  13. package/metadata/packages/tokens/sick2018_dark.css +42 -0
  14. package/metadata/packages/tokens/sick2018_light.css +42 -0
  15. package/metadata/packages/tokens/sick2025_dark.css +77 -35
  16. package/metadata/packages/tokens/sick2025_light.css +79 -37
  17. package/metadata/static/components/syn-button/docs.md +371 -301
  18. package/metadata/static/migration/index.md +1 -0
  19. package/package.json +5 -5
package/metadata/packages/tokens/light.css CHANGED
@@ -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/metadata/packages/tokens/sick2018_dark.css CHANGED
@@ -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/metadata/packages/tokens/sick2018_light.css CHANGED
@@ -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/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -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/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -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
  }