@wix/design-system-tokens 1.119.0 → 1.121.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 CHANGED
@@ -1,3 +1,16 @@
1
+ ## 1.121.0 - 2025-07-24
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Button): tokenization for Editor3 [15091](https://github.com/wix-private/wix-design-systems/pull/15091)
6
+ - breaking(IconButton): new component level tokens implemented [15097](https://github.com/wix-private/wix-design-systems/pull/15097)
7
+
8
+ ## 1.120.0 - 2025-07-16
9
+
10
+ ### Features
11
+
12
+ - feat(tokens): introduce `Editor3` definitions [14941](https://github.com/wix-private/wix-design-systems/pull/14941)
13
+
1
14
  ## 1.119.0 - 2025-07-15
2
15
 
3
16
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -13,6 +13,7 @@
13
13
  --wds-space-900: 54px;
14
14
  --wds-space-850: 51px;
15
15
  --wds-space-800: 48px;
16
+ --wds-space-750: 45px;
16
17
  --wds-space-700: 42px;
17
18
  --wds-space-600: 36px;
18
19
  --wds-space-500: 30px;
@@ -28,18 +29,31 @@
28
29
  --wds-space-50: 3px;
29
30
  --wds-space-25: 1px;
30
31
  --wds-space-0: 0;
32
+ --wds-shadow-spread-secondary-raised: 0;
31
33
  --wds-shadow-focus-spread: 3;
32
34
  --wds-shadow-y-350: 3px;
33
- --wds-shadow-y-300: 0;
34
- --wds-shadow-y-200: 0;
35
- --wds-shadow-y-100: 0;
35
+ --wds-shadow-y-300: 12px;
36
+ --wds-shadow-y-200: 9px;
37
+ --wds-shadow-y-150: 8px;
38
+ --wds-shadow-y-100: 6px;
39
+ --wds-shadow-y-50: 3px;
40
+ --wds-shadow-y-25: 2px;
36
41
  --wds-shadow-y-0: 0;
42
+ --wds-shadow-x-25: 2px;
43
+ --wds-shadow-x-0: 0;
44
+ --wds-shadow-blur-800: 36px;
45
+ --wds-shadow-blur-500: 24px;
37
46
  --wds-shadow-blur-400: 24px;
38
47
  --wds-shadow-blur-200: 18px;
39
- --wds-shadow-blur-150: 6px;
48
+ --wds-shadow-blur-150: 8px;
49
+ --wds-shadow-blur-135: 7px;
50
+ --wds-shadow-blur-125: 6px;
40
51
  --wds-shadow-blur-100: 6px;
52
+ --wds-shadow-blur-75: 4px;
41
53
  --wds-shadow-blur-50: 3px;
42
54
  --wds-shadow-blur-35: 2px;
55
+ --wds-shadow-blur-25: 1px;
56
+ --wds-shadow-blur-0: 0;
43
57
  --wds-font-weight-semi-bold: 600;
44
58
  --wds-font-weight-regular: 400;
45
59
  --wds-font-weight-medium: 500;
@@ -116,6 +130,7 @@
116
130
  --wds-color-fill-accent-3: #6544F9;
117
131
  --wds-color-fill-accent-2: #17B0E2;
118
132
  --wds-color-fill-accent-1: #1684EA;
133
+ --wds-color-border-stage-wip: #ffffff;
119
134
  --wds-color-border-ai-primary-hover: #ffffff;
120
135
  --wds-color-border-ai-primary-disabled: #ffffff;
121
136
  --wds-color-border-ai-primary-active: #ffffff;
@@ -194,6 +209,7 @@
194
209
  --wds-color-black-300-transparent-70: rgba(134, 138, 165, 0.7000);
195
210
  --wds-color-black-300-transparent-60: rgba(134, 138, 165, 0.6000);
196
211
  --wds-color-black-300-transparent-50: rgba(134, 138, 165, 0.5000);
212
+ --wds-color-black-300-transparent-20: rgba(134, 138, 165, 0.2000);
197
213
  --wds-color-black-300-transparent-0: rgba(134, 138, 165, 0.0000);
198
214
  --wds-color-black-200-transparent-70: rgba(68, 72, 95, .7);
199
215
  --wds-color-black-200-transparent-60: rgba(68, 72, 95, .6);
@@ -204,6 +220,7 @@
204
220
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
205
221
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
206
222
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
223
+ --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
207
224
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
208
225
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
209
226
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
@@ -222,6 +239,7 @@
222
239
  --wds-breakpoint-large: 1186px;
223
240
  --wds-border-width-none: 0;
224
241
  --wds-border-width-200: 2px;
242
+ --wds-border-width-150: 1.5px;
225
243
  --wds-border-width-100: 1px;
226
244
  --wds-border-radius-full: 1000px;
227
245
  --wds-border-radius-600: 12px;
@@ -256,7 +274,7 @@
256
274
  --wds-slider-track-size: 4px;
257
275
  --wds-slider-slider-knob-size-transparent: 16px;
258
276
  --wds-slider-slider-knob-size-hover: 18px;
259
- --wds-slider-slider-knob-size: 12px;
277
+ --wds-slider-slider-knob-size: 4px;
260
278
  --wds-slider-slider-knob-shadow: false;
261
279
  --wds-slider-slider-knob-border-width-hover: 12px;
262
280
  --wds-slider-slider-knob-border-width: 4px;
@@ -326,19 +344,39 @@
326
344
  --wds-space-padding-horizontal-medium: var(--wds-space-300);
327
345
  --wds-space-padding-horizontal-large: var(--wds-space-400);
328
346
  --wds-space-mobile-viewport-spacing: var(--wds-space-500);
347
+ --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
329
348
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
330
349
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
331
350
  --wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
332
351
  --wds-shadow-focus-inner-standard: 0 0 0 3px var(--wds-color-blue-300) inset;
333
352
  --wds-shadow-focus-inner-destructive: 0 0 0 3px var(--wds-color-red-400) inset;
334
353
  --wds-shadow-focus-destructive: 0 0 0 3px var(--wds-color-red-400);
354
+ --wds-shadow-fill-tertiary-raised: var(--wds-color-black-100-transparent-0);
335
355
  --wds-shadow-fill-secondary-toggle: var(--wds-color-black-100-transparent-50);
336
356
  --wds-shadow-fill-secondary-raised: var(--wds-color-black-100-transparent-5);
357
+ --wds-shadow-fill-secondary-overlay-dark: var(--wds-color-black-100-transparent-5);
337
358
  --wds-shadow-fill-secondary-overlay: var(--wds-color-black-100-transparent-5);
338
359
  --wds-shadow-fill-secondary-modal: var(--wds-color-black-100-transparent-10);
360
+ --wds-shadow-fill-quaternary-raised: var(--wds-color-black-100-transparent-0);
361
+ --wds-shadow-fill-primary-toggle: var(--wds-color-black-100-transparent-20);
362
+ --wds-shadow-fill-primary-slider: var(--wds-color-black-100-transparent-0);
339
363
  --wds-shadow-fill-primary-raised: var(--wds-color-black-100-transparent-10);
364
+ --wds-shadow-fill-primary-overlay-dark: var(--wds-color-black-100-transparent-10);
340
365
  --wds-shadow-fill-primary-overlay: var(--wds-color-black-100-transparent-10);
341
366
  --wds-shadow-fill-primary-modal: var(--wds-color-black-100-transparent-20);
367
+ --wds-shadow-fill-input: var(--wds-color-black-100-transparent-0);
368
+ --wds-shadow-y-secondary-toggle: var(--wds-shadow-y-25);
369
+ --wds-shadow-y-secondary-raised: var(--wds-shadow-y-25);
370
+ --wds-shadow-y-secondary-overlay-dark: var(--wds-shadow-y-100);
371
+ --wds-shadow-y-secondary-overlay: var(--wds-shadow-y-100);
372
+ --wds-shadow-y-secondary-modal: var(--wds-shadow-y-150);
373
+ --wds-shadow-y-primary-toggle: var(--wds-shadow-y-0);
374
+ --wds-shadow-y-primary-raised: var(--wds-shadow-y-0);
375
+ --wds-shadow-y-primary-overlay-dark: var(--wds-shadow-y-0);
376
+ --wds-shadow-y-primary-overlay: var(--wds-shadow-y-0);
377
+ --wds-shadow-y-primary-modal: var(--wds-shadow-y-50);
378
+ --wds-shadow-y-input: var(--wds-shadow-y-0);
379
+ --wds-shadow-x-input: var(--wds-shadow-x-0);
342
380
  --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
343
381
  --wds-shadow-inner-400-right: -32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, -8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
344
382
  --wds-shadow-inner-400-left: 32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, 8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
@@ -351,6 +389,17 @@
351
389
  --wds-shadow-inner-300: 0 0 18px var(--wds-color-black-100-transparent-10) inset, 0 0 6px var(--wds-color-black-100-transparent-5) inset;
352
390
  --wds-shadow-inner-200: 1px 1px 4px var(--wds-color-black-100-transparent-20) inset;
353
391
  --wds-shadow-inner-100: 1px 1px 2px var(--wds-color-black-100-transparent-10) inset, 1px 1px 2px var(--wds-color-white-transparent-10);
392
+ --wds-shadow-blur-secondary-toggle: var(--wds-shadow-blur-25);
393
+ --wds-shadow-blur-secondary-raised: var(--wds-shadow-blur-75);
394
+ --wds-shadow-blur-secondary-overlay-dark: var(--wds-shadow-blur-100);
395
+ --wds-shadow-blur-secondary-overlay: var(--wds-shadow-blur-100);
396
+ --wds-shadow-blur-secondary-modal: var(--wds-shadow-blur-150);
397
+ --wds-shadow-blur-primary-toggle: var(--wds-shadow-blur-50);
398
+ --wds-shadow-blur-primary-raised: var(--wds-shadow-blur-100);
399
+ --wds-shadow-blur-primary-overlay-dark: var(--wds-shadow-blur-200);
400
+ --wds-shadow-blur-primary-overlay: var(--wds-shadow-blur-200);
401
+ --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-400);
402
+ --wds-shadow-blur-input: var(--wds-shadow-blur-0);
354
403
  --wds-shadow-400: 0 3px 24px var(--wds-color-black-100-transparent-20), 0 8px 8px var(--wds-color-black-100-transparent-10);
355
404
  --wds-shadow-300: 0 0 18px var(--wds-color-black-100-transparent-10), 0 6px 6px var(--wds-color-black-100-transparent-5);
356
405
  --wds-shadow-200: 0 0 6px var(--wds-color-black-100-transparent-10), 0 2px 4px var(--wds-color-black-100-transparent-10);
@@ -372,6 +421,7 @@
372
421
  --wds-font-size-body-small: var(--wds-font-size-300);
373
422
  --wds-font-size-body-medium: var(--wds-font-size-500);
374
423
  --wds-font-size-body-extra-tiny: var(--wds-font-size-100);
424
+ --wds-font-line-height-600: var(--wds-space-600);
375
425
  --wds-font-line-height-500: var(--wds-space-600);
376
426
  --wds-font-line-height-400: var(--wds-space-475);
377
427
  --wds-font-line-height-300: var(--wds-space-400);
@@ -543,6 +593,10 @@
543
593
  --wds-color-fill-premium-primary-disabled: var(--wds-color-black-100-transparent-30);
544
594
  --wds-color-fill-premium-primary-active: var(--wds-color-purple-0);
545
595
  --wds-color-fill-premium-primary: var(--wds-color-purple-100);
596
+ --wds-color-fill-light-tertiary-hover: var(--wds-color-blue-500);
597
+ --wds-color-fill-light-tertiary-disabled: var(--wds-color-white-transparent-0);
598
+ --wds-color-fill-light-tertiary-active: var(--wds-color-blue-400);
599
+ --wds-color-fill-light-tertiary: var(--wds-color-white);
546
600
  --wds-color-fill-light-secondary-hover: var(--wds-color-blue-500);
547
601
  --wds-color-fill-light-secondary-disabled: var(--wds-color-white-transparent-0);
548
602
  --wds-color-fill-light-secondary-active: var(--wds-color-blue-400);
@@ -796,6 +850,8 @@
796
850
  --wds-swatches-list-gap: var(--wds-space-200);
797
851
  --wds-stepper-prefix-size-number: var(--wds-space-400);
798
852
  --wds-stepper-prefix-size-circle: var(--wds-space-500);
853
+ --wds-status-toast-vertical-padding: var(--wds-space-150);
854
+ --wds-status-toast-horizontal-padding: var(--wds-space-200);
799
855
  --wds-social-preview-content-padding-vertical: var(--wds-space-150);
800
856
  --wds-social-preview-content-padding-horizontal: var(--wds-space-200);
801
857
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-200);
@@ -803,6 +859,7 @@
803
859
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
804
860
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
805
861
  --wds-slider-slider-mark-size: var(--wds-space-100);
862
+ --wds-slider-slider-knob-color-disabled: var(--wds-color-black-500);
806
863
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-300);
807
864
  --wds-skeleton-border-radius-line: var(--wds-border-radius-full);
808
865
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
@@ -1189,6 +1246,9 @@
1189
1246
  --wds-button-gap-medium: var(--wds-space-100);
1190
1247
  --wds-button-gap-large: var(--wds-space-200);
1191
1248
  --wds-button-font-weight-tiny: var(--wds-font-weight-bold);
1249
+ --wds-button-font-weight-small: var(--wds-font-weight-medium);
1250
+ --wds-button-font-weight-medium: var(--wds-font-weight-medium);
1251
+ --wds-button-font-weight-large: var(--wds-font-weight-medium);
1192
1252
  --wds-button-border-radius-tiny: var(--wds-border-radius-full);
1193
1253
  --wds-button-border-radius-small: var(--wds-border-radius-full);
1194
1254
  --wds-button-border-radius-medium: var(--wds-border-radius-full);
@@ -1350,7 +1410,7 @@
1350
1410
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1351
1411
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
1352
1412
  --wds-slider-track-color: var(--wds-color-fill-standard-secondary);
1353
- --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary);
1413
+ --wds-slider-slider-knob-color-hover: var(--wds-color-fill-standard-primary-hover);
1354
1414
  --wds-slider-slider-knob-color: var(--wds-color-fill-standard-primary);
1355
1415
  --wds-sidebar-item-text-neutral-disabled: var(--wds-color-text-disabled);
1356
1416
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
@@ -1457,27 +1517,117 @@
1457
1517
  --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
1458
1518
  --wds-info-icon-fill-hover: var(--wds-color-text-primary);
1459
1519
  --wds-info-icon-fill: var(--wds-color-text-primary);
1460
- --wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-fill-standard-primary-hover);
1461
- --wds-icon-button-color-text-standard-tertiary-active: var(--wds-color-fill-standard-primary-active);
1520
+ --wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-text-primary);
1521
+ --wds-icon-button-color-text-standard-tertiary-disabled: var(--wds-color-text-disabled);
1522
+ --wds-icon-button-color-text-standard-tertiary-active: var(--wds-color-text-primary);
1462
1523
  --wds-icon-button-color-text-standard-tertiary: var(--wds-color-text-primary);
1463
1524
  --wds-icon-button-color-text-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
1525
+ --wds-icon-button-color-text-standard-secondary-disabled: var(--wds-color-text-disabled);
1464
1526
  --wds-icon-button-color-text-standard-secondary-active: var(--wds-color-text-standard-primary-light);
1465
1527
  --wds-icon-button-color-text-standard-secondary: var(--wds-color-text-primary);
1466
1528
  --wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary-light);
1529
+ --wds-icon-button-color-text-standard-primary-disabled: var(--wds-color-text-disabled-light);
1467
1530
  --wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary-light);
1468
1531
  --wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary-light);
1469
- --wds-icon-button-color-fill-standard-tertiary-hover: var(--wds-color-fill-standard-tertiary);
1470
- --wds-icon-button-color-fill-standard-tertiary-active: var(--wds-color-fill-standard-tertiary);
1471
- --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-standard-tertiary);
1532
+ --wds-icon-button-color-text-premium-tertiary-hover: var(--wds-color-text-premium);
1533
+ --wds-icon-button-color-text-premium-tertiary-disabled: var(--wds-color-text-disabled);
1534
+ --wds-icon-button-color-text-premium-tertiary-active: var(--wds-color-text-premium);
1535
+ --wds-icon-button-color-text-premium-tertiary: var(--wds-color-text-premium);
1536
+ --wds-icon-button-color-text-premium-secondary-hover: var(--wds-color-text-standard-primary-light);
1537
+ --wds-icon-button-color-text-premium-secondary-disabled: var(--wds-color-text-disabled);
1538
+ --wds-icon-button-color-text-premium-secondary-active: var(--wds-color-text-standard-primary-light);
1539
+ --wds-icon-button-color-text-premium-secondary: var(--wds-color-text-premium);
1540
+ --wds-icon-button-color-text-premium-primary-hover: var(--wds-color-text-standard-primary-light);
1541
+ --wds-icon-button-color-text-premium-primary-disabled: var(--wds-color-text-disabled-light);
1542
+ --wds-icon-button-color-text-premium-primary-active: var(--wds-color-text-standard-primary-light);
1543
+ --wds-icon-button-color-text-premium-primary: var(--wds-color-text-standard-primary-light);
1544
+ --wds-icon-button-color-text-light-tertiary-hover: var(--wds-color-text-primary);
1545
+ --wds-icon-button-color-text-light-tertiary-disabled: var(--wds-color-text-disabled-light);
1546
+ --wds-icon-button-color-text-light-tertiary-active: var(--wds-color-text-primary);
1547
+ --wds-icon-button-color-text-light-tertiary: var(--wds-color-text-standard-primary-light);
1548
+ --wds-icon-button-color-text-light-secondary-hover: var(--wds-color-text-primary);
1549
+ --wds-icon-button-color-text-light-secondary-disabled: var(--wds-color-text-disabled);
1550
+ --wds-icon-button-color-text-light-secondary-active: var(--wds-color-text-primary);
1551
+ --wds-icon-button-color-text-light-secondary: var(--wds-color-text-standard-primary-light);
1552
+ --wds-icon-button-color-text-light-primary-hover: var(--wds-color-text-primary);
1553
+ --wds-icon-button-color-text-light-primary-disabled: var(--wds-color-text-disabled);
1554
+ --wds-icon-button-color-text-light-primary-active: var(--wds-color-text-primary);
1555
+ --wds-icon-button-color-text-light-primary: var(--wds-color-text-primary);
1556
+ --wds-icon-button-color-text-dark-tertiary-hover: var(--wds-color-text-standard-primary);
1557
+ --wds-icon-button-color-text-dark-tertiary-disabled: var(--wds-color-text-disabled);
1558
+ --wds-icon-button-color-text-dark-tertiary-active: var(--wds-color-text-standard-primary);
1559
+ --wds-icon-button-color-text-dark-tertiary: var(--wds-color-text-standard-primary);
1560
+ --wds-icon-button-color-text-dark-secondary-hover: var(--wds-color-text-standard-primary-light);
1561
+ --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-text-disabled);
1562
+ --wds-icon-button-color-text-dark-secondary-active: var(--wds-color-text-standard-primary-light);
1563
+ --wds-icon-button-color-text-dark-secondary: var(--wds-color-text-standard-primary);
1564
+ --wds-icon-button-color-text-dark-primary-hover: var(--wds-color-text-standard-primary-light);
1565
+ --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-text-disabled-light);
1566
+ --wds-icon-button-color-text-dark-primary-active: var(--wds-color-text-standard-primary-light);
1567
+ --wds-icon-button-color-text-dark-primary: var(--wds-color-text-standard-primary-light);
1568
+ --wds-icon-button-color-fill-standard-tertiary-hover: var(--wds-color-fill-light-secondary-hover);
1569
+ --wds-icon-button-color-fill-standard-tertiary-disabled: var(--wds-color-fill-light-secondary-disabled);
1570
+ --wds-icon-button-color-fill-standard-tertiary-active: var(--wds-color-fill-light-secondary-active);
1571
+ --wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-light-secondary);
1472
1572
  --wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
1473
- --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-secondary-active);
1573
+ --wds-icon-button-color-fill-standard-secondary-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1574
+ --wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
1474
1575
  --wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1475
1576
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1577
+ --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1476
1578
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1477
1579
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
1478
- --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
1479
- --wds-icon-button-color-border-standard-secondary-active: var(--wds-color-fill-standard-secondary-active);
1580
+ --wds-icon-button-color-fill-premium-tertiary-hover: var(--wds-color-fill-premium-light-secondary-hover);
1581
+ --wds-icon-button-color-fill-premium-tertiary-disabled: var(--wds-color-fill-premium-light-secondary-disabled);
1582
+ --wds-icon-button-color-fill-premium-tertiary-active: var(--wds-color-fill-premium-light-secondary-active);
1583
+ --wds-icon-button-color-fill-premium-tertiary: var(--wds-color-fill-premium-light-secondary);
1584
+ --wds-icon-button-color-fill-premium-secondary-hover: var(--wds-color-fill-premium-primary-hover);
1585
+ --wds-icon-button-color-fill-premium-secondary-disabled: var(--wds-color-fill-premium-tertiary-disabled);
1586
+ --wds-icon-button-color-fill-premium-secondary-active: var(--wds-color-fill-premium-primary-active);
1587
+ --wds-icon-button-color-fill-premium-secondary: var(--wds-color-fill-premium-tertiary);
1588
+ --wds-icon-button-color-fill-premium-primary-hover: var(--wds-color-fill-premium-primary-hover);
1589
+ --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1590
+ --wds-icon-button-color-fill-premium-primary-active: var(--wds-color-fill-premium-primary-active);
1591
+ --wds-icon-button-color-fill-premium-primary: var(--wds-color-fill-premium-primary);
1592
+ --wds-icon-button-color-fill-light-tertiary-hover: var(--wds-color-fill-light-secondary-hover);
1593
+ --wds-icon-button-color-fill-light-tertiary-disabled: var(--wds-color-fill-light-secondary-disabled);
1594
+ --wds-icon-button-color-fill-light-tertiary-active: var(--wds-color-fill-light-secondary-active);
1595
+ --wds-icon-button-color-fill-light-tertiary: var(--wds-color-fill-light-secondary);
1596
+ --wds-icon-button-color-fill-light-secondary-hover: var(--wds-color-fill-light-secondary-hover);
1597
+ --wds-icon-button-color-fill-light-secondary-disabled: var(--wds-color-fill-light-secondary-disabled);
1598
+ --wds-icon-button-color-fill-light-secondary-active: var(--wds-color-fill-light-secondary-active);
1599
+ --wds-icon-button-color-fill-light-secondary: var(--wds-color-fill-light-secondary);
1600
+ --wds-icon-button-color-fill-light-primary-hover: var(--wds-color-fill-light-primary-hover);
1601
+ --wds-icon-button-color-fill-light-primary-disabled: var(--wds-color-fill-light-primary-disabled);
1602
+ --wds-icon-button-color-fill-light-primary-active: var(--wds-color-fill-light-primary-active);
1603
+ --wds-icon-button-color-fill-light-primary: var(--wds-color-fill-light-primary);
1604
+ --wds-icon-button-color-fill-dark-tertiary-hover: var(--wds-color-fill-dark-tertiary-hover);
1605
+ --wds-icon-button-color-fill-dark-tertiary-disabled: var(--wds-color-fill-light-secondary-disabled);
1606
+ --wds-icon-button-color-fill-dark-tertiary-active: var(--wds-color-fill-dark-tertiary-active);
1607
+ --wds-icon-button-color-fill-dark-tertiary: var(--wds-color-fill-light-secondary);
1608
+ --wds-icon-button-color-fill-dark-secondary-hover: var(--wds-color-fill-dark-primary-hover);
1609
+ --wds-icon-button-color-fill-dark-secondary-disabled: var(--wds-color-fill-light-secondary-disabled);
1610
+ --wds-icon-button-color-fill-dark-secondary-active: var(--wds-color-fill-dark-primary-active);
1611
+ --wds-icon-button-color-fill-dark-secondary: var(--wds-color-fill-light-secondary);
1612
+ --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
1613
+ --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1614
+ --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
1615
+ --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
1616
+ --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-border-standard-secondary-hover);
1617
+ --wds-icon-button-color-border-standard-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
1618
+ --wds-icon-button-color-border-standard-secondary-active: var(--wds-color-border-standard-secondary-active);
1480
1619
  --wds-icon-button-color-border-standard-secondary: var(--wds-color-border-standard-secondary);
1620
+ --wds-icon-button-color-border-premium-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
1621
+ --wds-icon-button-color-border-premium-secondary-active: var(--wds-color-border-premium-secondary-active);
1622
+ --wds-icon-button-color-border-premium-secondary: var(--wds-color-border-premium-secondary);
1623
+ --wds-icon-button-color-border-light-secondary-hover: var(--wds-color-border-light-hover);
1624
+ --wds-icon-button-color-border-light-secondary-disabled: var(--wds-color-border-light-disabled);
1625
+ --wds-icon-button-color-border-light-secondary-active: var(--wds-color-border-light-active);
1626
+ --wds-icon-button-color-border-light-secondary: var(--wds-color-border-light);
1627
+ --wds-icon-button-color-border-dark-secondary-hover: var(--wds-color-border-dark-primary-active);
1628
+ --wds-icon-button-color-border-dark-secondary-disabled: var(--wds-color-border-dark-secondary-disabled);
1629
+ --wds-icon-button-color-border-dark-secondary-active: var(--wds-color-border-dark-primary-active);
1630
+ --wds-icon-button-color-border-dark-secondary: var(--wds-color-border-dark-primary);
1481
1631
  --wds-form-field-label-font-size-tiny: var(--wds-font-size-body-tiny);
1482
1632
  --wds-form-field-label-font-size-small: var(--wds-font-size-body-small);
1483
1633
  --wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
@@ -1530,20 +1680,72 @@
1530
1680
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1531
1681
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1532
1682
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1533
- --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1534
1683
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1684
+ --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
1685
+ --wds-button-label-fill-standard-secondary-disabled: var(--wds-color-text-disabled);
1686
+ --wds-button-label-fill-standard-secondary-active: var(--wds-color-text-standard-primary-light);
1687
+ --wds-button-label-fill-standard-secondary: var(--wds-color-text-standard-primary-light);
1688
+ --wds-button-label-fill-standard-primary-disabled: var(--wds-color-text-disabled-light);
1689
+ --wds-button-label-fill-premium-secondary-hover: var(--wds-color-text-standard-primary-light);
1690
+ --wds-button-label-fill-premium-secondary-disabled: var(--wds-color-text-disabled);
1691
+ --wds-button-label-fill-premium-secondary-active: var(--wds-color-text-standard-primary-light);
1692
+ --wds-button-label-fill-premium-secondary: var(--wds-color-text-premium);
1693
+ --wds-button-label-fill-premium-primary-disabled: var(--wds-color-text-disabled-light);
1694
+ --wds-button-label-fill-destructive-secondary-hover: var(--wds-color-text-standard-primary-light);
1695
+ --wds-button-label-fill-destructive-secondary-disabled: var(--wds-color-text-disabled);
1696
+ --wds-button-label-fill-destructive-secondary-active: var(--wds-color-text-standard-primary-light);
1697
+ --wds-button-label-fill-destructive-secondary: var(--wds-color-text-destructive);
1698
+ --wds-button-label-fill-destructive-primary-disabled: var(--wds-color-text-disabled-light);
1699
+ --wds-button-label-fill-dark-secondary-hover: var(--wds-color-text-standard-primary-light);
1700
+ --wds-button-label-fill-dark-secondary-disabled: var(--wds-color-text-disabled);
1701
+ --wds-button-label-fill-dark-secondary-active: var(--wds-color-text-standard-primary-light);
1702
+ --wds-button-label-fill-dark-secondary: var(--wds-color-text-standard-primary);
1703
+ --wds-button-label-fill-dark-primary-disabled: var(--wds-color-text-disabled-light);
1535
1704
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
1536
1705
  --wds-button-font-size-small: var(--wds-font-size-body-small);
1537
1706
  --wds-button-font-size-medium: var(--wds-font-size-body-medium);
1538
1707
  --wds-button-font-size-large: var(--wds-font-size-body-medium);
1539
1708
  --wds-button-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary);
1709
+ --wds-button-fill-standard-secondary-disabled: var(--wds-color-fill-standard-tertiary);
1540
1710
  --wds-button-fill-standard-secondary-active: linear-gradient(0deg, var(--wds-color-fill-standard-primary-active) 0%, var(--wds-color-fill-standard-primary-active) 100%);
1541
1711
  --wds-button-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
1542
1712
  --wds-button-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
1713
+ --wds-button-fill-standard-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1543
1714
  --wds-button-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
1544
1715
  --wds-button-fill-standard-primary: var(--wds-color-fill-standard-primary);
1716
+ --wds-button-fill-premium-secondary-hover: var(--wds-color-fill-premium-primary-hover);
1717
+ --wds-button-fill-premium-secondary-disabled: var(--wds-color-fill-premium-tertiary-disabled);
1718
+ --wds-button-fill-premium-secondary-active: var(--wds-color-fill-premium-primary-active);
1719
+ --wds-button-fill-premium-secondary: var(--wds-color-fill-premium-tertiary);
1720
+ --wds-button-fill-premium-primary-disabled: var(--wds-color-fill-premium-primary-disabled);
1545
1721
  --wds-button-fill-gradient-hover-secondary: var(--wds-color-fill-standard-primary-hover);
1546
1722
  --wds-button-fill-gradient-hover-primary: var(--wds-color-fill-standard-primary-hover);
1723
+ --wds-button-fill-destructive-secondary-hover: var(--wds-color-fill-destructive-primary-hover);
1724
+ --wds-button-fill-destructive-secondary-disabled: var(--wds-color-fill-destructive-tertiary-disabled);
1725
+ --wds-button-fill-destructive-secondary-active: var(--wds-color-fill-destructive-primary-active);
1726
+ --wds-button-fill-destructive-secondary: var(--wds-color-fill-standard-tertiary);
1727
+ --wds-button-fill-destructive-primary-disabled: var(--wds-color-fill-destructive-primary-disabled);
1728
+ --wds-button-fill-dark-secondary-hover: var(--wds-color-fill-dark-primary-hover);
1729
+ --wds-button-fill-dark-secondary-disabled: var(--wds-color-fill-dark-tertiary-disabled);
1730
+ --wds-button-fill-dark-secondary-active: var(--wds-color-fill-dark-primary);
1731
+ --wds-button-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
1732
+ --wds-button-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1733
+ --wds-button-border-standard-secondary-hover: var(--wds-color-border-standard-primary-active);
1734
+ --wds-button-border-standard-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
1735
+ --wds-button-border-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
1736
+ --wds-button-border-standard-secondary: var(--wds-color-border-standard-secondary);
1737
+ --wds-button-border-premium-secondary-hover: var(--wds-color-border-premium-primary-active);
1738
+ --wds-button-border-premium-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
1739
+ --wds-button-border-premium-secondary-active: var(--wds-color-fill-premium-primary-active);
1740
+ --wds-button-border-premium-secondary: var(--wds-color-border-premium-secondary);
1741
+ --wds-button-border-destructive-secondary-hover: var(--wds-color-border-destructive-secondary-active);
1742
+ --wds-button-border-destructive-secondary-disabled: var(--wds-color-border-destructive-primary-disabled);
1743
+ --wds-button-border-destructive-secondary-active: var(--wds-color-fill-destructive-primary-active);
1744
+ --wds-button-border-destructive-secondary: var(--wds-color-border-destructive-secondary);
1745
+ --wds-button-border-dark-secondary-hover: var(--wds-color-border-dark-primary-active);
1746
+ --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
1747
+ --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
1748
+ --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1547
1749
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1548
1750
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1549
1751
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
@@ -1597,6 +1799,7 @@
1597
1799
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
1598
1800
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
1599
1801
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
1802
+ --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
1600
1803
  --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-body-medium);
1601
1804
  --wds-add-item-title-font-line-height-tiny: var(--wds-font-line-height-body-small);
1602
1805
  --wds-add-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);