@synergy-design-system/mcp 1.38.5 → 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 (16) hide show
  1. package/CHANGELOG.md +9 -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/migration/migration-synergy-v3.md +0 -5
  5. package/metadata/packages/components/static/CHANGELOG.md +15 -1
  6. package/metadata/packages/tokens/CHANGELOG.md +9 -0
  7. package/metadata/packages/tokens/dark.css +42 -0
  8. package/metadata/packages/tokens/index.js +210 -0
  9. package/metadata/packages/tokens/light.css +42 -0
  10. package/metadata/packages/tokens/sick2018_dark.css +42 -0
  11. package/metadata/packages/tokens/sick2018_light.css +42 -0
  12. package/metadata/packages/tokens/sick2025_dark.css +77 -35
  13. package/metadata/packages/tokens/sick2025_light.css +79 -37
  14. package/metadata/static/components/syn-button/docs.md +371 -301
  15. package/metadata/static/migration/index.md +1 -0
  16. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.39.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1109](https://github.com/synergy-design-system/synergy-design-system/pull/1109) [`6b4b7e2`](https://github.com/synergy-design-system/synergy-design-system/commit/6b4b7e2940b5c87e44d5da6030354ec0e21f2f38) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
8
+
9
+ feat: ✨ Brand updates for `<syn-button>` (#871)
10
+ feat: ✨ Brand updates for `<syn-dropdown>` (#949)
11
+
3
12
  ## 1.38.5
4
13
 
5
14
  ### Patch Changes
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- f3d1570f48a5e4ab32df16eeee906a50
1
+ 7487440271c227c317e857fa8014c08f
package/metadata/packages/components/components/syn-button/component.custom.styles.ts CHANGED
@@ -10,6 +10,11 @@ export default css`
10
10
  outline-offset: var(--syn-focus-ring-width);
11
11
  }
12
12
 
13
+ /** #429: Use token for opacity */
14
+ .button--disabled {
15
+ opacity: var(--syn-input-disabled-opacity);
16
+ }
17
+
13
18
  /*
14
19
  * Adjustments for button label paddings
15
20
  * @see https://github.com/synergy-design-system/synergy-design-system/issues/243
@@ -62,42 +67,61 @@ export default css`
62
67
  vertical-align: -8px;
63
68
  }
64
69
 
65
-
66
70
  /**
67
71
  * Size modifiers
68
72
  */
69
- .button.button--medium.button--has-label .button__label {
70
- font-size: var(--syn-font-size-medium);
71
- }
73
+ .button--small {
74
+ border-radius: var(--syn-button-border-radius-small, var(--syn-input-border-radius-small));
75
+ }
76
+
77
+ .button--medium {
78
+ border-radius: var(--syn-button-border-radius-medium, var(--syn-input-border-radius-medium));
79
+ }
72
80
 
73
- .button.button--large.button--has-label .button__label {
74
- font-size: var(--syn-font-size-large);
81
+ .button--large {
82
+ border-radius: var(--syn-button-border-radius-large, var(--syn-input-border-radius-large));
75
83
  }
76
84
 
77
85
  /*
78
86
  * Standard buttons
79
87
  */
88
+ .button--filled.button--primary {
89
+ background: var(--syn-button-color, var(--syn-color-primary-600));
90
+ border-color: var(--syn-button-color, var(--syn-color-primary-600));
91
+ color: var(--syn-button-filled-color-text, var(--syn-color-neutral-0));
92
+ }
93
+
80
94
  .button--filled.button--primary.button--disabled {
81
95
  background-color: var(--syn-color-neutral-600);
82
96
  border-color: var(--syn-color-neutral-600);
83
- color: var(--syn-color-neutral-0);
97
+ color: var(--syn-typography-color-text-inverted);
84
98
  }
85
99
 
86
100
  .button--filled.button--primary:hover:not(.button--disabled) {
87
- background-color: var(--syn-color-primary-900);
88
- border-color: var(--syn-color-primary-900);
89
- color: var(--syn-color-neutral-0);
101
+ background-color: var(--syn-button-color-hover, var(--syn-color-primary-900));
102
+ border-color: var(--syn-button-color-hover, var(--syn-color-primary-900));
103
+ color: var(--syn-button-filled-color-text-hover, var(--syn-color-neutral-0));
90
104
  }
91
105
 
92
106
  .button--filled.button--primary:active:not(.button--disabled) {
93
- background-color: var(--syn-color-primary-950);
94
- border-color: var(--syn-color-primary-950);
95
- color: var(--syn-color-neutral-0);
107
+ background-color: var(--syn-button-color-active, var(--syn-color-primary-900));
108
+ border-color: var(--syn-button-color-active, var(--syn-color-primary-900));
109
+ color: var(--syn-button-filled-color-text-active, var(--syn-color-neutral-0));
96
110
  }
97
111
 
98
112
  /*
99
113
  * Outline buttons
100
114
  */
115
+ .button--outline {
116
+ /** #901: Use token for border width */
117
+ border-width: var(--syn-input-border-width);
118
+ }
119
+
120
+ .button--outline.button--primary {
121
+ border-color: var(--syn-button-color, var(--syn-color-primary-600));
122
+ color: var(--syn-button-outline-color-text, var(--syn-color-primary-600));
123
+ }
124
+
101
125
  .button--outline.button--primary.button--disabled {
102
126
  background: none;
103
127
  border-color: var(--syn-color-neutral-600);
@@ -106,28 +130,34 @@ export default css`
106
130
 
107
131
  .button--outline.button--primary:hover:not(.button--disabled),
108
132
  .button--outline.button--primary.button--checked:not(.button--disabled) {
109
- background: none;
110
- border-color: var(--syn-color-primary-900);
111
- color: var(--syn-color-primary-900);
133
+ background-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));
134
+ border-color: var(--syn-button-outline-color-hover, var(--syn-color-primary-900));
135
+ color: var(--syn-button-outline-color-text-hover, var(--syn-color-neutral-0));
112
136
  }
113
137
 
114
138
  .button--outline.button--primary:active:not(.button--disabled) {
115
- background: inherit;
116
- border-color: var(--syn-color-primary-950);
117
- color: var(--syn-color-primary-950);
139
+ background-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));
140
+ border-color: var(--syn-button-outline-color-active, var(--syn-color-primary-950));
141
+ color: var(--syn-button-outline-color-text-active, var(--syn-color-neutral-0));
118
142
  }
119
143
 
120
144
  /*
121
145
  * Text buttons
122
146
  */
147
+ .button--text {
148
+ color: var(--syn-button-text-color-text, var(--syn-color-primary-600));
149
+ }
150
+
123
151
  .button--text:hover:not(.button--disabled) {
124
- color: var(--syn-color-primary-900);
152
+ color: var(--syn-button-text-color-text-hover, var(--syn-color-primary-900));
153
+ }
154
+
155
+ .button--text:focus-visible:not(.button--disabled) {
156
+ color: var(--syn-button-color, var(--syn-color-primary-500));
125
157
  }
126
158
 
127
159
  .button--text.button--primary:active:not(.button--disabled) {
128
- background: inherit;
129
- border-color: transparent;
130
- color: var(--syn-color-primary-950);
160
+ color: var(--syn-button-text-color-text-active, var(--syn-color-primary-950));
131
161
  }
132
162
 
133
163
  .button--text.button--primary.button--disabled {
@@ -184,11 +214,6 @@ export default css`
184
214
  font-size: var(--syn-font-size-2x-large);
185
215
  }
186
216
 
187
- /** #429: Use token for opacity */
188
- .button--disabled {
189
- opacity: var(--syn-input-disabled-opacity);
190
- }
191
-
192
217
  /*
193
218
  * Caret modifier
194
219
  */
package/metadata/packages/components/migration/migration-synergy-v3.md CHANGED
@@ -1,10 +1,5 @@
1
1
  # Migration to SICK 2025
2
2
 
3
- > ⚠️ **Update in progress:** Some features may not be fully implemented yet. See the [GitHub SICK 2025 theme update board](https://github.com/orgs/synergy-design-system/projects/2/views/37) for updates.
4
- >
5
- > It is currently not advised to use the new version in production, as we are still finalizing the update process.
6
- > However, you can start preparing your codebase for the upcoming changes.
7
-
8
3
  This guide details all steps that are needed to migrate from the SICK 2018 to the new SICK 2025 theme.
9
4
  This guide assumes you are using Synergy version 2.
10
5
  Synergy version 3 will apply most manual steps outlined in this guide automatically.
package/metadata/packages/components/static/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.75.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1109](https://github.com/synergy-design-system/synergy-design-system/pull/1109) [`6b4b7e2`](https://github.com/synergy-design-system/synergy-design-system/commit/6b4b7e2940b5c87e44d5da6030354ec0e21f2f38) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
8
+
9
+ feat: ✨ Brand updates for `<syn-button>` (#871)
10
+ feat: ✨ Brand updates for `<syn-dropdown>` (#949)
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies [[`6b4b7e2`](https://github.com/synergy-design-system/synergy-design-system/commit/6b4b7e2940b5c87e44d5da6030354ec0e21f2f38)]:
15
+ - @synergy-design-system/tokens@2.47.0
16
+
3
17
  ## 2.74.4
4
18
 
5
19
  ### Patch Changes
@@ -29,7 +43,7 @@
29
43
 
30
44
  fix: 🐛 `<syn-alert>` close icon should be aligned to top (#1135)
31
45
 
32
- Fixes an issue that was introduces in version `2.74.0`.
46
+ Fixes an issue that was introduced in version `2.74.0`.
33
47
  The close icons is now always aligned to the top of the `<syn-alert>` again.
34
48
 
35
49
  ## 2.74.1
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.47.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1109](https://github.com/synergy-design-system/synergy-design-system/pull/1109) [`6b4b7e2`](https://github.com/synergy-design-system/synergy-design-system/commit/6b4b7e2940b5c87e44d5da6030354ec0e21f2f38) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2025-12-16
8
+
9
+ feat: ✨ Brand updates for `<syn-button>` (#871)
10
+ feat: ✨ Brand updates for `<syn-dropdown>` (#949)
11
+
3
12
  ## 2.46.0
4
13
 
5
14
  ### Minor Changes
package/metadata/packages/tokens/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/index.js CHANGED
@@ -218,6 +218,51 @@ export const SynBorderWidthXLarge = 'var(--syn-border-width-x-large)';
218
218
  */
219
219
  export const SynBreadcrumbColor = 'var(--syn-breadcrumb-color)';
220
220
 
221
+ /**
222
+ * @type {string}
223
+ */
224
+ export const SynButtonBorderRadiusLarge = 'var(--syn-button-border-radius-large)';
225
+
226
+ /**
227
+ * @type {string}
228
+ */
229
+ export const SynButtonBorderRadiusMedium = 'var(--syn-button-border-radius-medium)';
230
+
231
+ /**
232
+ * @type {string}
233
+ */
234
+ export const SynButtonBorderRadiusSmall = 'var(--syn-button-border-radius-small)';
235
+
236
+ /**
237
+ * @type {string}
238
+ */
239
+ export const SynButtonColor = 'var(--syn-button-color)';
240
+
241
+ /**
242
+ * @type {string}
243
+ */
244
+ export const SynButtonColorActive = 'var(--syn-button-color-active)';
245
+
246
+ /**
247
+ * @type {string}
248
+ */
249
+ export const SynButtonColorHover = 'var(--syn-button-color-hover)';
250
+
251
+ /**
252
+ * @type {string}
253
+ */
254
+ export const SynButtonFilledColorText = 'var(--syn-button-filled-color-text)';
255
+
256
+ /**
257
+ * @type {string}
258
+ */
259
+ export const SynButtonFilledColorTextActive = 'var(--syn-button-filled-color-text-active)';
260
+
261
+ /**
262
+ * @type {string}
263
+ */
264
+ export const SynButtonFilledColorTextHover = 'var(--syn-button-filled-color-text-hover)';
265
+
221
266
  /**
222
267
  * @type {string}
223
268
  */
@@ -233,6 +278,46 @@ export const SynButtonFontSizeMedium = 'var(--syn-button-font-size-medium)';
233
278
  */
234
279
  export const SynButtonFontSizeSmall = 'var(--syn-button-font-size-small)';
235
280
 
281
+ /**
282
+ * @type {string}
283
+ */
284
+ export const SynButtonOutlineColorActive = 'var(--syn-button-outline-color-active)';
285
+
286
+ /**
287
+ * @type {string}
288
+ */
289
+ export const SynButtonOutlineColorHover = 'var(--syn-button-outline-color-hover)';
290
+
291
+ /**
292
+ * @type {string}
293
+ */
294
+ export const SynButtonOutlineColorText = 'var(--syn-button-outline-color-text)';
295
+
296
+ /**
297
+ * @type {string}
298
+ */
299
+ export const SynButtonOutlineColorTextActive = 'var(--syn-button-outline-color-text-active)';
300
+
301
+ /**
302
+ * @type {string}
303
+ */
304
+ export const SynButtonOutlineColorTextHover = 'var(--syn-button-outline-color-text-hover)';
305
+
306
+ /**
307
+ * @type {string}
308
+ */
309
+ export const SynButtonTextColorText = 'var(--syn-button-text-color-text)';
310
+
311
+ /**
312
+ * @type {string}
313
+ */
314
+ export const SynButtonTextColorTextActive = 'var(--syn-button-text-color-text-active)';
315
+
316
+ /**
317
+ * @type {string}
318
+ */
319
+ export const SynButtonTextColorTextHover = 'var(--syn-button-text-color-text-hover)';
320
+
236
321
  /**
237
322
  * @type {string}
238
323
  */
@@ -293,6 +378,61 @@ export const SynColorAccent900 = 'var(--syn-color-accent-900)';
293
378
  */
294
379
  export const SynColorAccent950 = 'var(--syn-color-accent-950)';
295
380
 
381
+ /**
382
+ * @type {string}
383
+ */
384
+ export const SynColorCritical50 = 'var(--syn-color-critical-50)';
385
+
386
+ /**
387
+ * @type {string}
388
+ */
389
+ export const SynColorCritical100 = 'var(--syn-color-critical-100)';
390
+
391
+ /**
392
+ * @type {string}
393
+ */
394
+ export const SynColorCritical200 = 'var(--syn-color-critical-200)';
395
+
396
+ /**
397
+ * @type {string}
398
+ */
399
+ export const SynColorCritical300 = 'var(--syn-color-critical-300)';
400
+
401
+ /**
402
+ * @type {string}
403
+ */
404
+ export const SynColorCritical400 = 'var(--syn-color-critical-400)';
405
+
406
+ /**
407
+ * @type {string}
408
+ */
409
+ export const SynColorCritical500 = 'var(--syn-color-critical-500)';
410
+
411
+ /**
412
+ * @type {string}
413
+ */
414
+ export const SynColorCritical600 = 'var(--syn-color-critical-600)';
415
+
416
+ /**
417
+ * @type {string}
418
+ */
419
+ export const SynColorCritical700 = 'var(--syn-color-critical-700)';
420
+
421
+ /**
422
+ * @type {string}
423
+ */
424
+ export const SynColorCritical800 = 'var(--syn-color-critical-800)';
425
+
426
+ /**
427
+ * @type {string}
428
+ */
429
+ export const SynColorCritical900 = 'var(--syn-color-critical-900)';
430
+
431
+ /**
432
+ * @type {string}
433
+ */
434
+ export const SynColorCritical950 = 'var(--syn-color-critical-950)';
435
+
296
436
  /**
297
437
  * @type {string}
298
438
  */
@@ -1208,6 +1348,76 @@ export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
1208
1348
  */
1209
1349
  export const SynLogoColor = 'var(--syn-logo-color)';
1210
1350
 
1351
+ /**
1352
+ * @type {string}
1353
+ */
1354
+ export const SynNamurColorBorder = 'var(--syn-namur-color-border)';
1355
+
1356
+ /**
1357
+ * @type {string}
1358
+ */
1359
+ export const SynNamurCriticalColor = 'var(--syn-namur-critical-color)';
1360
+
1361
+ /**
1362
+ * @type {string}
1363
+ */
1364
+ export const SynNamurCriticalColorBackground = 'var(--syn-namur-critical-color-background)';
1365
+
1366
+ /**
1367
+ * @type {string}
1368
+ */
1369
+ export const SynNamurErrorColor = 'var(--syn-namur-error-color)';
1370
+
1371
+ /**
1372
+ * @type {string}
1373
+ */
1374
+ export const SynNamurErrorColorBackground = 'var(--syn-namur-error-color-background)';
1375
+
1376
+ /**
1377
+ * @type {string}
1378
+ */
1379
+ export const SynNamurIconColor = 'var(--syn-namur-icon-color)';
1380
+
1381
+ /**
1382
+ * @type {string}
1383
+ */
1384
+ export const SynNamurInfoColor = 'var(--syn-namur-info-color)';
1385
+
1386
+ /**
1387
+ * @type {string}
1388
+ */
1389
+ export const SynNamurInfoColorBackground = 'var(--syn-namur-info-color-background)';
1390
+
1391
+ /**
1392
+ * @type {string}
1393
+ */
1394
+ export const SynNamurNeutralColor = 'var(--syn-namur-neutral-color)';
1395
+
1396
+ /**
1397
+ * @type {string}
1398
+ */
1399
+ export const SynNamurNeutralColorBackground = 'var(--syn-namur-neutral-color-background)';
1400
+
1401
+ /**
1402
+ * @type {string}
1403
+ */
1404
+ export const SynNamurSuccessColor = 'var(--syn-namur-success-color)';
1405
+
1406
+ /**
1407
+ * @type {string}
1408
+ */
1409
+ export const SynNamurSuccessColorBackground = 'var(--syn-namur-success-color-background)';
1410
+
1411
+ /**
1412
+ * @type {string}
1413
+ */
1414
+ export const SynNamurWarningColor = 'var(--syn-namur-warning-color)';
1415
+
1416
+ /**
1417
+ * @type {string}
1418
+ */
1419
+ export const SynNamurWarningColorBackground = 'var(--syn-namur-warning-color-background)';
1420
+
1211
1421
  /**
1212
1422
  * @type {string}
1213
1423
  */
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);