@synergy-design-system/mcp 1.38.5 → 1.40.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 (20) hide show
  1. package/CHANGELOG.md +23 -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-checkbox/component.custom.styles.ts +27 -2
  5. package/metadata/packages/components/components/syn-nav-item/component.styles.ts +8 -0
  6. package/metadata/packages/components/components/syn-radio/component.custom.styles.ts +11 -5
  7. package/metadata/packages/components/components/syn-switch/component.custom.styles.ts +23 -6
  8. package/metadata/packages/components/migration/migration-synergy-v3.md +0 -5
  9. package/metadata/packages/components/static/CHANGELOG.md +34 -1
  10. package/metadata/packages/tokens/CHANGELOG.md +23 -0
  11. package/metadata/packages/tokens/dark.css +46 -1
  12. package/metadata/packages/tokens/index.js +226 -1
  13. package/metadata/packages/tokens/light.css +46 -1
  14. package/metadata/packages/tokens/sick2018_dark.css +46 -1
  15. package/metadata/packages/tokens/sick2018_light.css +46 -1
  16. package/metadata/packages/tokens/sick2025_dark.css +81 -36
  17. package/metadata/packages/tokens/sick2025_light.css +83 -38
  18. package/metadata/static/components/syn-button/docs.md +371 -301
  19. package/metadata/static/migration/index.md +1 -0
  20. package/package.json +4 -4
package/metadata/packages/tokens/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.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
  }
package/metadata/packages/tokens/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.46.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-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;
@@ -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-950);
201
+ --syn-input-border-color-active: var(--syn-color-primary-800);
173
202
  --syn-input-border-color-disabled: var(--syn-color-neutral-950);
174
203
  --syn-input-border-color-focus: var(--syn-color-primary-700);
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-950);
204
233
  --syn-input-icon-color-hover: var(--syn-color-neutral-950);
205
234
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
235
+ --syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-800);
206
236
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-700);
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: #e6e1dc;
226
257
  --syn-interactive-background-color-hover: #f2f0ed;
227
258
  --syn-interactive-emphasis-color: var(--syn-color-primary-700);
228
259
  --syn-interactive-emphasis-color-active: var(--syn-color-primary-1000);
@@ -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-700);
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-400);
289
+ --syn-namur-info-color-background: var(--syn-color-info-100);
290
+ --syn-namur-neutral-color: #d5ccc5;
291
+ --syn-namur-neutral-color-background: #e6e1dc;
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-500);
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-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
  }