@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.
- package/CHANGELOG.md +23 -0
- package/metadata/checksum.txt +1 -1
- package/metadata/packages/components/components/syn-button/component.custom.styles.ts +53 -28
- package/metadata/packages/components/components/syn-checkbox/component.custom.styles.ts +27 -2
- package/metadata/packages/components/components/syn-nav-item/component.styles.ts +8 -0
- package/metadata/packages/components/components/syn-radio/component.custom.styles.ts +11 -5
- package/metadata/packages/components/components/syn-switch/component.custom.styles.ts +23 -6
- package/metadata/packages/components/migration/migration-synergy-v3.md +0 -5
- package/metadata/packages/components/static/CHANGELOG.md +34 -1
- package/metadata/packages/tokens/CHANGELOG.md +23 -0
- package/metadata/packages/tokens/dark.css +46 -1
- package/metadata/packages/tokens/index.js +226 -1
- package/metadata/packages/tokens/light.css +46 -1
- package/metadata/packages/tokens/sick2018_dark.css +46 -1
- package/metadata/packages/tokens/sick2018_light.css +46 -1
- package/metadata/packages/tokens/sick2025_dark.css +81 -36
- package/metadata/packages/tokens/sick2025_light.css +83 -38
- package/metadata/static/components/syn-button/docs.md +371 -301
- package/metadata/static/migration/index.md +1 -0
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.47.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -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
|
*/
|
|
@@ -818,6 +958,11 @@ export const SynInputBackgroundColorHover = 'var(--syn-input-background-color-ho
|
|
|
818
958
|
*/
|
|
819
959
|
export const SynInputBorderColor = 'var(--syn-input-border-color)';
|
|
820
960
|
|
|
961
|
+
/**
|
|
962
|
+
* @type {string}
|
|
963
|
+
*/
|
|
964
|
+
export const SynInputBorderColorActive = 'var(--syn-input-border-color-active)';
|
|
965
|
+
|
|
821
966
|
/**
|
|
822
967
|
* @type {string}
|
|
823
968
|
*/
|
|
@@ -983,6 +1128,11 @@ export const SynInputIconColorHover = 'var(--syn-input-icon-color-hover)';
|
|
|
983
1128
|
*/
|
|
984
1129
|
export const SynInputIconIconClearableColor = 'var(--syn-input-icon-icon-clearable-color)';
|
|
985
1130
|
|
|
1131
|
+
/**
|
|
1132
|
+
* @type {string}
|
|
1133
|
+
*/
|
|
1134
|
+
export const SynInputIconIconClearableColorActive = 'var(--syn-input-icon-icon-clearable-color-active)';
|
|
1135
|
+
|
|
986
1136
|
/**
|
|
987
1137
|
* @type {string}
|
|
988
1138
|
*/
|
|
@@ -1083,6 +1233,11 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
|
|
|
1083
1233
|
*/
|
|
1084
1234
|
export const SynInputWidth = 'var(--syn-input-width)';
|
|
1085
1235
|
|
|
1236
|
+
/**
|
|
1237
|
+
* @type {string}
|
|
1238
|
+
*/
|
|
1239
|
+
export const SynInteractiveBackgroundColorActive = 'var(--syn-interactive-background-color-active)';
|
|
1240
|
+
|
|
1086
1241
|
/**
|
|
1087
1242
|
* @type {string}
|
|
1088
1243
|
*/
|
|
@@ -1208,6 +1363,76 @@ export const SynLinkUnderlineOutline = 'var(--syn-link-underline-outline)';
|
|
|
1208
1363
|
*/
|
|
1209
1364
|
export const SynLogoColor = 'var(--syn-logo-color)';
|
|
1210
1365
|
|
|
1366
|
+
/**
|
|
1367
|
+
* @type {string}
|
|
1368
|
+
*/
|
|
1369
|
+
export const SynNamurColorBorder = 'var(--syn-namur-color-border)';
|
|
1370
|
+
|
|
1371
|
+
/**
|
|
1372
|
+
* @type {string}
|
|
1373
|
+
*/
|
|
1374
|
+
export const SynNamurCriticalColor = 'var(--syn-namur-critical-color)';
|
|
1375
|
+
|
|
1376
|
+
/**
|
|
1377
|
+
* @type {string}
|
|
1378
|
+
*/
|
|
1379
|
+
export const SynNamurCriticalColorBackground = 'var(--syn-namur-critical-color-background)';
|
|
1380
|
+
|
|
1381
|
+
/**
|
|
1382
|
+
* @type {string}
|
|
1383
|
+
*/
|
|
1384
|
+
export const SynNamurErrorColor = 'var(--syn-namur-error-color)';
|
|
1385
|
+
|
|
1386
|
+
/**
|
|
1387
|
+
* @type {string}
|
|
1388
|
+
*/
|
|
1389
|
+
export const SynNamurErrorColorBackground = 'var(--syn-namur-error-color-background)';
|
|
1390
|
+
|
|
1391
|
+
/**
|
|
1392
|
+
* @type {string}
|
|
1393
|
+
*/
|
|
1394
|
+
export const SynNamurIconColor = 'var(--syn-namur-icon-color)';
|
|
1395
|
+
|
|
1396
|
+
/**
|
|
1397
|
+
* @type {string}
|
|
1398
|
+
*/
|
|
1399
|
+
export const SynNamurInfoColor = 'var(--syn-namur-info-color)';
|
|
1400
|
+
|
|
1401
|
+
/**
|
|
1402
|
+
* @type {string}
|
|
1403
|
+
*/
|
|
1404
|
+
export const SynNamurInfoColorBackground = 'var(--syn-namur-info-color-background)';
|
|
1405
|
+
|
|
1406
|
+
/**
|
|
1407
|
+
* @type {string}
|
|
1408
|
+
*/
|
|
1409
|
+
export const SynNamurNeutralColor = 'var(--syn-namur-neutral-color)';
|
|
1410
|
+
|
|
1411
|
+
/**
|
|
1412
|
+
* @type {string}
|
|
1413
|
+
*/
|
|
1414
|
+
export const SynNamurNeutralColorBackground = 'var(--syn-namur-neutral-color-background)';
|
|
1415
|
+
|
|
1416
|
+
/**
|
|
1417
|
+
* @type {string}
|
|
1418
|
+
*/
|
|
1419
|
+
export const SynNamurSuccessColor = 'var(--syn-namur-success-color)';
|
|
1420
|
+
|
|
1421
|
+
/**
|
|
1422
|
+
* @type {string}
|
|
1423
|
+
*/
|
|
1424
|
+
export const SynNamurSuccessColorBackground = 'var(--syn-namur-success-color-background)';
|
|
1425
|
+
|
|
1426
|
+
/**
|
|
1427
|
+
* @type {string}
|
|
1428
|
+
*/
|
|
1429
|
+
export const SynNamurWarningColor = 'var(--syn-namur-warning-color)';
|
|
1430
|
+
|
|
1431
|
+
/**
|
|
1432
|
+
* @type {string}
|
|
1433
|
+
*/
|
|
1434
|
+
export const SynNamurWarningColorBackground = 'var(--syn-namur-warning-color-background)';
|
|
1435
|
+
|
|
1211
1436
|
/**
|
|
1212
1437
|
* @type {string}
|
|
1213
1438
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.47.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -50,9 +50,26 @@
|
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-color-neutral-500);
|
|
53
|
+
--syn-button-border-radius-large: var(--syn-input-border-radius-large);
|
|
54
|
+
--syn-button-border-radius-medium: var(--syn-input-border-radius-medium);
|
|
55
|
+
--syn-button-border-radius-small: var(--syn-input-border-radius-small);
|
|
56
|
+
--syn-button-color: var(--syn-interactive-emphasis-color);
|
|
57
|
+
--syn-button-color-active: var(--syn-interactive-emphasis-color-active);
|
|
58
|
+
--syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
|
|
59
|
+
--syn-button-filled-color-text: inherit;
|
|
60
|
+
--syn-button-filled-color-text-active: inherit;
|
|
61
|
+
--syn-button-filled-color-text-hover: inherit;
|
|
53
62
|
--syn-button-font-size-large: var(--syn-font-size-large);
|
|
54
63
|
--syn-button-font-size-medium: var(--syn-font-size-medium);
|
|
55
64
|
--syn-button-font-size-small: var(--syn-font-size-small);
|
|
65
|
+
--syn-button-outline-color-active: none;
|
|
66
|
+
--syn-button-outline-color-hover: none;
|
|
67
|
+
--syn-button-outline-color-text: inherit;
|
|
68
|
+
--syn-button-outline-color-text-active: var(--syn-color-primary-950);
|
|
69
|
+
--syn-button-outline-color-text-hover: var(--syn-color-primary-900);
|
|
70
|
+
--syn-button-text-color-text: var(--syn-button-color);
|
|
71
|
+
--syn-button-text-color-text-active: var(--syn-button-color-active);
|
|
72
|
+
--syn-button-text-color-text-hover: var(--syn-button-color-hover);
|
|
56
73
|
--syn-checkbox-border-radius: var(--syn-border-radius-none);
|
|
57
74
|
--syn-color-accent-50: #fffbea;
|
|
58
75
|
--syn-color-accent-100: #fff2c5;
|
|
@@ -65,6 +82,17 @@
|
|
|
65
82
|
--syn-color-accent-800: #983b08;
|
|
66
83
|
--syn-color-accent-900: #7c310b;
|
|
67
84
|
--syn-color-accent-950: #481700;
|
|
85
|
+
--syn-color-critical-50: #fffbea;
|
|
86
|
+
--syn-color-critical-100: #fff2c5;
|
|
87
|
+
--syn-color-critical-200: #ffe685;
|
|
88
|
+
--syn-color-critical-300: #ffd246;
|
|
89
|
+
--syn-color-critical-400: #ffbd1b;
|
|
90
|
+
--syn-color-critical-500: #f39200;
|
|
91
|
+
--syn-color-critical-600: #e27200;
|
|
92
|
+
--syn-color-critical-700: #bb4d02;
|
|
93
|
+
--syn-color-critical-800: #983b08;
|
|
94
|
+
--syn-color-critical-900: #7c310b;
|
|
95
|
+
--syn-color-critical-950: #481700;
|
|
68
96
|
--syn-color-error-50: #fff0f2;
|
|
69
97
|
--syn-color-error-100: #ffdee2;
|
|
70
98
|
--syn-color-error-200: #ffc3c9;
|
|
@@ -170,6 +198,7 @@
|
|
|
170
198
|
--syn-input-background-color-focus: var(--syn-input-background-color);
|
|
171
199
|
--syn-input-background-color-hover: var(--syn-input-background-color);
|
|
172
200
|
--syn-input-border-color: var(--syn-color-neutral-700);
|
|
201
|
+
--syn-input-border-color-active: var(--syn-color-neutral-1000);
|
|
173
202
|
--syn-input-border-color-disabled: var(--syn-color-neutral-700);
|
|
174
203
|
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
175
204
|
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
@@ -203,6 +232,7 @@
|
|
|
203
232
|
--syn-input-icon-color: var(--syn-color-neutral-800);
|
|
204
233
|
--syn-input-icon-color-hover: var(--syn-color-neutral-800);
|
|
205
234
|
--syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
|
|
235
|
+
--syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
|
|
206
236
|
--syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
|
|
207
237
|
--syn-input-label-color: var(--syn-color-neutral-950);
|
|
208
238
|
--syn-input-label-font-size-large: var(--syn-font-size-large);
|
|
@@ -223,6 +253,7 @@
|
|
|
223
253
|
--syn-input-spacing-medium: var(--syn-spacing-medium);
|
|
224
254
|
--syn-input-spacing-small: var(--syn-spacing-small);
|
|
225
255
|
--syn-input-width: var(--syn-border-width-small);
|
|
256
|
+
--syn-interactive-background-color-active: var(--syn-color-neutral-300);
|
|
226
257
|
--syn-interactive-background-color-hover: var(--syn-color-neutral-100);
|
|
227
258
|
--syn-interactive-emphasis-color: var(--syn-color-primary-600);
|
|
228
259
|
--syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
|
|
@@ -248,6 +279,20 @@
|
|
|
248
279
|
--syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
|
|
249
280
|
--syn-link-underline-outline: 7%;
|
|
250
281
|
--syn-logo-color: var(--syn-color-primary-600);
|
|
282
|
+
--syn-namur-color-border: var(--syn-color-neutral-950);
|
|
283
|
+
--syn-namur-critical-color: var(--syn-color-critical-600);
|
|
284
|
+
--syn-namur-critical-color-background: var(--syn-color-critical-100);
|
|
285
|
+
--syn-namur-error-color: var(--syn-color-error-500);
|
|
286
|
+
--syn-namur-error-color-background: var(--syn-color-error-100);
|
|
287
|
+
--syn-namur-icon-color: var(--syn-color-neutral-950);
|
|
288
|
+
--syn-namur-info-color: var(--syn-color-info-500);
|
|
289
|
+
--syn-namur-info-color-background: var(--syn-color-info-100);
|
|
290
|
+
--syn-namur-neutral-color: var(--syn-color-neutral-400);
|
|
291
|
+
--syn-namur-neutral-color-background: var(--syn-color-neutral-200);
|
|
292
|
+
--syn-namur-success-color: var(--syn-color-success-500);
|
|
293
|
+
--syn-namur-success-color-background: var(--syn-color-success-100);
|
|
294
|
+
--syn-namur-warning-color: var(--syn-color-warning-400);
|
|
295
|
+
--syn-namur-warning-color-background: var(--syn-color-warning-100);
|
|
251
296
|
--syn-opacity-50: 0.5; /** 50% */
|
|
252
297
|
--syn-option-background-color-active: var(--syn-color-primary-600);
|
|
253
298
|
--syn-option-background-color-hover: var(--syn-color-neutral-100);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.47.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -50,9 +50,26 @@
|
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-color-neutral-500);
|
|
53
|
+
--syn-button-border-radius-large: var(--syn-input-border-radius-large);
|
|
54
|
+
--syn-button-border-radius-medium: var(--syn-input-border-radius-medium);
|
|
55
|
+
--syn-button-border-radius-small: var(--syn-input-border-radius-small);
|
|
56
|
+
--syn-button-color: var(--syn-interactive-emphasis-color);
|
|
57
|
+
--syn-button-color-active: var(--syn-interactive-emphasis-color-active);
|
|
58
|
+
--syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
|
|
59
|
+
--syn-button-filled-color-text: inherit;
|
|
60
|
+
--syn-button-filled-color-text-active: inherit;
|
|
61
|
+
--syn-button-filled-color-text-hover: inherit;
|
|
53
62
|
--syn-button-font-size-large: var(--syn-font-size-large);
|
|
54
63
|
--syn-button-font-size-medium: var(--syn-font-size-medium);
|
|
55
64
|
--syn-button-font-size-small: var(--syn-font-size-small);
|
|
65
|
+
--syn-button-outline-color-active: none;
|
|
66
|
+
--syn-button-outline-color-hover: none;
|
|
67
|
+
--syn-button-outline-color-text: inherit;
|
|
68
|
+
--syn-button-outline-color-text-active: var(--syn-color-primary-950);
|
|
69
|
+
--syn-button-outline-color-text-hover: var(--syn-color-primary-900);
|
|
70
|
+
--syn-button-text-color-text: var(--syn-button-color);
|
|
71
|
+
--syn-button-text-color-text-active: var(--syn-button-color-active);
|
|
72
|
+
--syn-button-text-color-text-hover: var(--syn-button-color-hover);
|
|
56
73
|
--syn-checkbox-border-radius: var(--syn-border-radius-none);
|
|
57
74
|
--syn-color-accent-50: #481700;
|
|
58
75
|
--syn-color-accent-100: #7c310b;
|
|
@@ -65,6 +82,17 @@
|
|
|
65
82
|
--syn-color-accent-800: #ffe685;
|
|
66
83
|
--syn-color-accent-900: #fff2c5;
|
|
67
84
|
--syn-color-accent-950: #fffbea;
|
|
85
|
+
--syn-color-critical-50: #481700;
|
|
86
|
+
--syn-color-critical-100: #7c310b;
|
|
87
|
+
--syn-color-critical-200: #983b08;
|
|
88
|
+
--syn-color-critical-300: #bb4d02;
|
|
89
|
+
--syn-color-critical-400: #e27200;
|
|
90
|
+
--syn-color-critical-500: #f39200;
|
|
91
|
+
--syn-color-critical-600: #ffbd1b;
|
|
92
|
+
--syn-color-critical-700: #ffd246;
|
|
93
|
+
--syn-color-critical-800: #ffe685;
|
|
94
|
+
--syn-color-critical-900: #fff2c5;
|
|
95
|
+
--syn-color-critical-950: #fffbea;
|
|
68
96
|
--syn-color-error-50: #4e010a;
|
|
69
97
|
--syn-color-error-100: #8d0f1e;
|
|
70
98
|
--syn-color-error-200: #ab091c;
|
|
@@ -170,6 +198,7 @@
|
|
|
170
198
|
--syn-input-background-color-focus: var(--syn-input-background-color);
|
|
171
199
|
--syn-input-background-color-hover: var(--syn-input-background-color);
|
|
172
200
|
--syn-input-border-color: var(--syn-color-neutral-700);
|
|
201
|
+
--syn-input-border-color-active: var(--syn-color-neutral-1000);
|
|
173
202
|
--syn-input-border-color-disabled: var(--syn-color-neutral-700);
|
|
174
203
|
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
175
204
|
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
@@ -203,6 +232,7 @@
|
|
|
203
232
|
--syn-input-icon-color: var(--syn-color-neutral-800);
|
|
204
233
|
--syn-input-icon-color-hover: var(--syn-color-neutral-800);
|
|
205
234
|
--syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
|
|
235
|
+
--syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
|
|
206
236
|
--syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
|
|
207
237
|
--syn-input-label-color: var(--syn-color-neutral-950);
|
|
208
238
|
--syn-input-label-font-size-large: var(--syn-font-size-large);
|
|
@@ -223,6 +253,7 @@
|
|
|
223
253
|
--syn-input-spacing-medium: var(--syn-spacing-medium);
|
|
224
254
|
--syn-input-spacing-small: var(--syn-spacing-small);
|
|
225
255
|
--syn-input-width: var(--syn-border-width-small);
|
|
256
|
+
--syn-interactive-background-color-active: var(--syn-color-neutral-300);
|
|
226
257
|
--syn-interactive-background-color-hover: var(--syn-color-neutral-100);
|
|
227
258
|
--syn-interactive-emphasis-color: var(--syn-color-primary-600);
|
|
228
259
|
--syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
|
|
@@ -248,6 +279,20 @@
|
|
|
248
279
|
--syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
|
|
249
280
|
--syn-link-underline-outline: 7%;
|
|
250
281
|
--syn-logo-color: var(--syn-color-primary-400);
|
|
282
|
+
--syn-namur-color-border: var(--syn-color-neutral-50);
|
|
283
|
+
--syn-namur-critical-color: var(--syn-color-critical-600);
|
|
284
|
+
--syn-namur-critical-color-background: var(--syn-color-critical-100);
|
|
285
|
+
--syn-namur-error-color: var(--syn-color-error-500);
|
|
286
|
+
--syn-namur-error-color-background: var(--syn-color-error-100);
|
|
287
|
+
--syn-namur-icon-color: var(--syn-color-neutral-50);
|
|
288
|
+
--syn-namur-info-color: var(--syn-color-info-500);
|
|
289
|
+
--syn-namur-info-color-background: var(--syn-color-info-50);
|
|
290
|
+
--syn-namur-neutral-color: var(--syn-color-neutral-600);
|
|
291
|
+
--syn-namur-neutral-color-background: var(--syn-color-neutral-800);
|
|
292
|
+
--syn-namur-success-color: var(--syn-color-success-500);
|
|
293
|
+
--syn-namur-success-color-background: var(--syn-color-success-100);
|
|
294
|
+
--syn-namur-warning-color: var(--syn-color-warning-600);
|
|
295
|
+
--syn-namur-warning-color-background: var(--syn-color-warning-100);
|
|
251
296
|
--syn-opacity-50: 0.5; /** 50% */
|
|
252
297
|
--syn-option-background-color-active: var(--syn-color-primary-400);
|
|
253
298
|
--syn-option-background-color-hover: var(--syn-color-neutral-100);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.47.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -50,9 +50,26 @@
|
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-color-neutral-500);
|
|
53
|
+
--syn-button-border-radius-large: var(--syn-input-border-radius-large);
|
|
54
|
+
--syn-button-border-radius-medium: var(--syn-input-border-radius-medium);
|
|
55
|
+
--syn-button-border-radius-small: var(--syn-input-border-radius-small);
|
|
56
|
+
--syn-button-color: var(--syn-interactive-emphasis-color);
|
|
57
|
+
--syn-button-color-active: var(--syn-interactive-emphasis-color-active);
|
|
58
|
+
--syn-button-color-hover: var(--syn-interactive-emphasis-color-hover);
|
|
59
|
+
--syn-button-filled-color-text: inherit;
|
|
60
|
+
--syn-button-filled-color-text-active: inherit;
|
|
61
|
+
--syn-button-filled-color-text-hover: inherit;
|
|
53
62
|
--syn-button-font-size-large: var(--syn-font-size-large);
|
|
54
63
|
--syn-button-font-size-medium: var(--syn-font-size-medium);
|
|
55
64
|
--syn-button-font-size-small: var(--syn-font-size-small);
|
|
65
|
+
--syn-button-outline-color-active: none;
|
|
66
|
+
--syn-button-outline-color-hover: none;
|
|
67
|
+
--syn-button-outline-color-text: inherit;
|
|
68
|
+
--syn-button-outline-color-text-active: var(--syn-color-primary-950);
|
|
69
|
+
--syn-button-outline-color-text-hover: var(--syn-color-primary-900);
|
|
70
|
+
--syn-button-text-color-text: var(--syn-button-color);
|
|
71
|
+
--syn-button-text-color-text-active: var(--syn-button-color-active);
|
|
72
|
+
--syn-button-text-color-text-hover: var(--syn-button-color-hover);
|
|
56
73
|
--syn-checkbox-border-radius: var(--syn-border-radius-none);
|
|
57
74
|
--syn-color-accent-50: #fffbea;
|
|
58
75
|
--syn-color-accent-100: #fff2c5;
|
|
@@ -65,6 +82,17 @@
|
|
|
65
82
|
--syn-color-accent-800: #983b08;
|
|
66
83
|
--syn-color-accent-900: #7c310b;
|
|
67
84
|
--syn-color-accent-950: #481700;
|
|
85
|
+
--syn-color-critical-50: #fffbea;
|
|
86
|
+
--syn-color-critical-100: #fff2c5;
|
|
87
|
+
--syn-color-critical-200: #ffe685;
|
|
88
|
+
--syn-color-critical-300: #ffd246;
|
|
89
|
+
--syn-color-critical-400: #ffbd1b;
|
|
90
|
+
--syn-color-critical-500: #f39200;
|
|
91
|
+
--syn-color-critical-600: #e27200;
|
|
92
|
+
--syn-color-critical-700: #bb4d02;
|
|
93
|
+
--syn-color-critical-800: #983b08;
|
|
94
|
+
--syn-color-critical-900: #7c310b;
|
|
95
|
+
--syn-color-critical-950: #481700;
|
|
68
96
|
--syn-color-error-50: #fff0f2;
|
|
69
97
|
--syn-color-error-100: #ffdee2;
|
|
70
98
|
--syn-color-error-200: #ffc3c9;
|
|
@@ -170,6 +198,7 @@
|
|
|
170
198
|
--syn-input-background-color-focus: var(--syn-input-background-color);
|
|
171
199
|
--syn-input-background-color-hover: var(--syn-input-background-color);
|
|
172
200
|
--syn-input-border-color: var(--syn-color-neutral-700);
|
|
201
|
+
--syn-input-border-color-active: var(--syn-color-neutral-1000);
|
|
173
202
|
--syn-input-border-color-disabled: var(--syn-color-neutral-700);
|
|
174
203
|
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
175
204
|
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
@@ -203,6 +232,7 @@
|
|
|
203
232
|
--syn-input-icon-color: var(--syn-color-neutral-800);
|
|
204
233
|
--syn-input-icon-color-hover: var(--syn-color-neutral-800);
|
|
205
234
|
--syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
|
|
235
|
+
--syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
|
|
206
236
|
--syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
|
|
207
237
|
--syn-input-label-color: var(--syn-color-neutral-950);
|
|
208
238
|
--syn-input-label-font-size-large: var(--syn-font-size-large);
|
|
@@ -223,6 +253,7 @@
|
|
|
223
253
|
--syn-input-spacing-medium: var(--syn-spacing-medium);
|
|
224
254
|
--syn-input-spacing-small: var(--syn-spacing-small);
|
|
225
255
|
--syn-input-width: var(--syn-border-width-small);
|
|
256
|
+
--syn-interactive-background-color-active: var(--syn-color-neutral-300);
|
|
226
257
|
--syn-interactive-background-color-hover: var(--syn-color-neutral-100);
|
|
227
258
|
--syn-interactive-emphasis-color: var(--syn-color-primary-600);
|
|
228
259
|
--syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
|
|
@@ -248,6 +279,20 @@
|
|
|
248
279
|
--syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
|
|
249
280
|
--syn-link-underline-outline: 7%;
|
|
250
281
|
--syn-logo-color: var(--syn-color-primary-600);
|
|
282
|
+
--syn-namur-color-border: var(--syn-color-neutral-950);
|
|
283
|
+
--syn-namur-critical-color: var(--syn-color-critical-600);
|
|
284
|
+
--syn-namur-critical-color-background: var(--syn-color-critical-100);
|
|
285
|
+
--syn-namur-error-color: var(--syn-color-error-500);
|
|
286
|
+
--syn-namur-error-color-background: var(--syn-color-error-100);
|
|
287
|
+
--syn-namur-icon-color: var(--syn-color-neutral-950);
|
|
288
|
+
--syn-namur-info-color: var(--syn-color-info-500);
|
|
289
|
+
--syn-namur-info-color-background: var(--syn-color-info-100);
|
|
290
|
+
--syn-namur-neutral-color: var(--syn-color-neutral-400);
|
|
291
|
+
--syn-namur-neutral-color-background: var(--syn-color-neutral-200);
|
|
292
|
+
--syn-namur-success-color: var(--syn-color-success-500);
|
|
293
|
+
--syn-namur-success-color-background: var(--syn-color-success-100);
|
|
294
|
+
--syn-namur-warning-color: var(--syn-color-warning-400);
|
|
295
|
+
--syn-namur-warning-color-background: var(--syn-color-warning-100);
|
|
251
296
|
--syn-opacity-50: 0.5; /** 50% */
|
|
252
297
|
--syn-option-background-color-active: var(--syn-color-primary-600);
|
|
253
298
|
--syn-option-background-color-hover: var(--syn-color-neutral-100);
|