@wix/design-system-tokens 1.129.0 → 1.131.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 (26) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/all.css +86 -22
  3. package/all.scss +86 -22
  4. package/all.st.css +224 -96
  5. package/component.st.css +173 -59
  6. package/foundation.st.css +15 -15
  7. package/odeditor/all.css +84 -51
  8. package/odeditor/all.scss +84 -51
  9. package/odeditor/all.st.css +159 -93
  10. package/odeditor/component.st.css +112 -60
  11. package/odeditor/foundation.st.css +16 -16
  12. package/odeditor/semantic.st.css +31 -17
  13. package/package.json +2 -2
  14. package/semantic.st.css +36 -22
  15. package/studio/all.css +98 -33
  16. package/studio/all.scss +98 -33
  17. package/studio/all.st.css +264 -134
  18. package/studio/component.st.css +186 -70
  19. package/studio/foundation.st.css +17 -17
  20. package/studio/semantic.st.css +61 -47
  21. package/wixel/all.css +105 -29
  22. package/wixel/all.scss +105 -29
  23. package/wixel/all.st.css +247 -95
  24. package/wixel/component.st.css +178 -64
  25. package/wixel/foundation.st.css +10 -10
  26. package/wixel/semantic.st.css +59 -21
package/studio/foundation.st.css CHANGED
@@ -220,16 +220,16 @@
220
220
  @property st-global(--wds-space-2400);
221
221
 
222
222
  .root {
223
- --wds-background-blur-0: 0;
224
- --wds-background-blur-10: 0;
225
- --wds-background-blur-50: 0;
226
- --wds-background-blur-150: 0;
227
- --wds-background-blur-200: 0;
228
- --wds-background-blur-250: 0;
229
- --wds-background-blur-300: 0;
230
- --wds-background-blur-350: 0;
231
- --wds-background-blur-375: 0;
232
- --wds-border-radius-0: 0;
223
+ --wds-background-blur-0: 0px;
224
+ --wds-background-blur-10: 0px;
225
+ --wds-background-blur-50: 0px;
226
+ --wds-background-blur-150: 0px;
227
+ --wds-background-blur-200: 0px;
228
+ --wds-background-blur-250: 0px;
229
+ --wds-background-blur-300: 0px;
230
+ --wds-background-blur-350: 0px;
231
+ --wds-background-blur-375: 0px;
232
+ --wds-border-radius-0: 0px;
233
233
  --wds-border-radius-100: 2px;
234
234
  --wds-border-radius-200: 4px;
235
235
  --wds-border-radius-300: 6px;
@@ -240,7 +240,7 @@
240
240
  --wds-border-width-100: 1px;
241
241
  --wds-border-width-150: 1.5px;
242
242
  --wds-border-width-200: 2px;
243
- --wds-border-width-none: 0;
243
+ --wds-border-width-none: 0px;
244
244
  --wds-breakpoint-large: 1186px;
245
245
  --wds-breakpoint-medium: 768px;
246
246
  --wds-breakpoint-small: 490px;
@@ -346,7 +346,7 @@
346
346
  --wds-color-yellow-600: #fef6ed;
347
347
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
348
348
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
349
- --wds-font-letter-spacing-0: 0;
349
+ --wds-font-letter-spacing-0: 0px;
350
350
  --wds-font-letter-spacing-100: 1px;
351
351
  --wds-font-line-height-100: 16px;
352
352
  --wds-font-line-height-200: 20px;
@@ -371,7 +371,7 @@
371
371
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
372
372
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
373
373
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
374
- --wds-shadow-blur-0: 0;
374
+ --wds-shadow-blur-0: 0px;
375
375
  --wds-shadow-blur-25: 2px;
376
376
  --wds-shadow-blur-35: 3px;
377
377
  --wds-shadow-blur-50: 4px;
@@ -400,17 +400,17 @@
400
400
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(19, 23, 32, .2) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
401
401
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(19, 23, 32, .2) inset, 0 8px 6px -6px rgba(19, 23, 32, .05) inset;
402
402
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
403
- --wds-shadow-x-0: 0;
403
+ --wds-shadow-x-0: 0px;
404
404
  --wds-shadow-x-25: 1px;
405
- --wds-shadow-y-0: 0;
405
+ --wds-shadow-y-0: 0px;
406
406
  --wds-shadow-y-25: 1px;
407
407
  --wds-shadow-y-50: 2px;
408
408
  --wds-shadow-y-100: 4px;
409
409
  --wds-shadow-y-150: 6px;
410
410
  --wds-shadow-y-200: 8px;
411
411
  --wds-shadow-y-300: 12px;
412
- --wds-shadow-y-350: 0;
413
- --wds-space-0: 0;
412
+ --wds-shadow-y-350: 0px;
413
+ --wds-space-0: 0px;
414
414
  --wds-space-25: 1px;
415
415
  --wds-space-50: 2px;
416
416
  --wds-space-100: 4px;
package/studio/semantic.st.css CHANGED
@@ -34,6 +34,8 @@
34
34
  @property st-global(--wds-color-border-light-active);
35
35
  @property st-global(--wds-color-border-light-disabled);
36
36
  @property st-global(--wds-color-border-light-hover);
37
+ @property st-global(--wds-color-border-light-primary-active);
38
+ @property st-global(--wds-color-border-light-primary-disabled);
37
39
  @property st-global(--wds-color-border-premium-primary);
38
40
  @property st-global(--wds-color-border-premium-primary-active);
39
41
  @property st-global(--wds-color-border-premium-primary-disabled);
@@ -342,6 +344,10 @@
342
344
  @property st-global(--wds-color-fill-warning-secondary-active);
343
345
  @property st-global(--wds-color-fill-warning-secondary-disabled);
344
346
  @property st-global(--wds-color-fill-warning-secondary-hover);
347
+ @property st-global(--wds-color-fill-warning-tertiary);
348
+ @property st-global(--wds-color-fill-warning-tertiary-active);
349
+ @property st-global(--wds-color-fill-warning-tertiary-disabled);
350
+ @property st-global(--wds-color-fill-warning-tertiary-hover);
345
351
  @property st-global(--wds-color-text-destructive);
346
352
  @property st-global(--wds-color-text-disabled);
347
353
  @property st-global(--wds-color-text-disabled-light);
@@ -399,6 +405,7 @@
399
405
  @property st-global(--wds-inner-shadow-fill-input);
400
406
  @property st-global(--wds-inner-shadow-fill-primary);
401
407
  @property st-global(--wds-inner-shadow-fill-secondary);
408
+ @property st-global(--wds-inner-shadow-fill-track);
402
409
  @property st-global(--wds-inner-shadow-x-input);
403
410
  @property st-global(--wds-inner-shadow-x-primary);
404
411
  @property st-global(--wds-inner-shadow-x-secondary);
@@ -485,13 +492,13 @@
485
492
  @property st-global(--wds-width-default-2);
486
493
 
487
494
  .root {
488
- --wds-background-blur-modal: 0;
495
+ --wds-background-blur-modal: 0px;
489
496
  --wds-border-radius-surface-default: 4px;
490
497
  --wds-border-radius-surface-modal: 4px;
491
- --wds-border-radius-surface-modal-backdrop: 0;
498
+ --wds-border-radius-surface-modal-backdrop: 0px;
492
499
  --wds-border-radius-surface-overlay: 4px;
493
500
  --wds-border-radius-surface-raised: 4px;
494
- --wds-border-radius-surface-sunken: 0;
501
+ --wds-border-radius-surface-sunken: 0px;
495
502
  --wds-border-width-default: 1px;
496
503
  --wds-color-border-ai-primary: #5a48f5;
497
504
  --wds-color-border-ai-primary-active: #ffffff;
@@ -521,6 +528,8 @@
521
528
  --wds-color-border-light-active: #ffffff;
522
529
  --wds-color-border-light-disabled: rgba(255, 255, 255, .3);
523
530
  --wds-color-border-light-hover: rgba(255, 255, 255, .7);
531
+ --wds-color-border-light-primary-active: #ffffff;
532
+ --wds-color-border-light-primary-disabled: rgba(255, 255, 255, .3);
524
533
  --wds-color-border-premium-primary: #cf8cf1;
525
534
  --wds-color-border-premium-primary-active: #9a27d5;
526
535
  --wds-color-border-premium-primary-disabled: rgba(19, 23, 32, .1);
@@ -829,6 +838,10 @@
829
838
  --wds-color-fill-warning-secondary-active: #fdead2;
830
839
  --wds-color-fill-warning-secondary-disabled: #e5e5e5;
831
840
  --wds-color-fill-warning-secondary-hover: #fcd29d;
841
+ --wds-color-fill-warning-tertiary: #ffffff;
842
+ --wds-color-fill-warning-tertiary-active: #fdead2;
843
+ --wds-color-fill-warning-tertiary-disabled: #ffffff;
844
+ --wds-color-fill-warning-tertiary-hover: #f7f8f8;
832
845
  --wds-color-text-destructive: #ee4437;
833
846
  --wds-color-text-disabled: #bebebe;
834
847
  --wds-color-text-disabled-light: rgba(255, 255, 255, .7);
@@ -847,10 +860,10 @@
847
860
  --wds-color-text-success: #25a55a;
848
861
  --wds-color-text-urgent: #f96132;
849
862
  --wds-color-text-warning: #f9ad4d;
850
- --wds-font-letter-spacing-heading-1: 0;
851
- --wds-font-letter-spacing-heading-2: 0;
852
- --wds-font-letter-spacing-heading-3: 0;
853
- --wds-font-letter-spacing-heading-4: 0;
863
+ --wds-font-letter-spacing-heading-1: 0px;
864
+ --wds-font-letter-spacing-heading-2: 0px;
865
+ --wds-font-letter-spacing-heading-3: 0px;
866
+ --wds-font-letter-spacing-heading-4: 0px;
854
867
  --wds-font-letter-spacing-heading-5: 1px;
855
868
  --wds-font-letter-spacing-heading-6: 1px;
856
869
  --wds-font-line-height-body-extra-tiny: 16px;
@@ -880,32 +893,33 @@
880
893
  --wds-font-weight-heading-4: 700;
881
894
  --wds-font-weight-heading-5: 700;
882
895
  --wds-font-weight-heading-6: 400;
883
- --wds-inner-shadow-blur-input: 0;
884
- --wds-inner-shadow-blur-primary: 0;
885
- --wds-inner-shadow-blur-secondary: 0;
896
+ --wds-inner-shadow-blur-input: 0px;
897
+ --wds-inner-shadow-blur-primary: 0px;
898
+ --wds-inner-shadow-blur-secondary: 0px;
886
899
  --wds-inner-shadow-fill-input: rgba(19, 23, 32, 0);
887
900
  --wds-inner-shadow-fill-primary: rgba(255, 255, 255, 0);
888
901
  --wds-inner-shadow-fill-secondary: rgba(255, 255, 255, 0);
889
- --wds-inner-shadow-x-input: 0;
890
- --wds-inner-shadow-x-primary: 0;
891
- --wds-inner-shadow-x-secondary: 0;
892
- --wds-inner-shadow-y-input: 0;
893
- --wds-inner-shadow-y-primary: 0;
894
- --wds-inner-shadow-y-secondary: 0;
895
- --wds-shadow-blur-input: 0;
902
+ --wds-inner-shadow-fill-track: rgba(19, 23, 32, 0);
903
+ --wds-inner-shadow-x-input: 0px;
904
+ --wds-inner-shadow-x-primary: 0px;
905
+ --wds-inner-shadow-x-secondary: 0px;
906
+ --wds-inner-shadow-y-input: 0px;
907
+ --wds-inner-shadow-y-primary: 0px;
908
+ --wds-inner-shadow-y-secondary: 0px;
909
+ --wds-shadow-blur-input: 0px;
896
910
  --wds-shadow-blur-primary-modal: 18px;
897
911
  --wds-shadow-blur-primary-overlay: 12px;
898
- --wds-shadow-blur-primary-overlay-dark: 0;
912
+ --wds-shadow-blur-primary-overlay-dark: 0px;
899
913
  --wds-shadow-blur-primary-raised: 3px;
900
- --wds-shadow-blur-primary-toggle: 0;
901
- --wds-shadow-blur-primary-toggle-button: 0;
902
- --wds-shadow-blur-secondary-modal: 0;
903
- --wds-shadow-blur-secondary-overlay: 0;
914
+ --wds-shadow-blur-primary-toggle: 0px;
915
+ --wds-shadow-blur-primary-toggle-button: 0px;
916
+ --wds-shadow-blur-secondary-modal: 0px;
917
+ --wds-shadow-blur-secondary-overlay: 0px;
904
918
  --wds-shadow-blur-secondary-overlay-dark: 12px;
905
- --wds-shadow-blur-secondary-raised: 0;
906
- --wds-shadow-blur-secondary-toggle: 0;
907
- --wds-shadow-blur-secondary-toggle-button: 0;
908
- --wds-shadow-blur-tertiary-toggle-button: 0;
919
+ --wds-shadow-blur-secondary-raised: 0px;
920
+ --wds-shadow-blur-secondary-toggle: 0px;
921
+ --wds-shadow-blur-secondary-toggle-button: 0px;
922
+ --wds-shadow-blur-tertiary-toggle-button: 0px;
909
923
  --wds-shadow-fill-input: rgba(19, 23, 32, 0);
910
924
  --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .2);
911
925
  --wds-shadow-fill-primary-overlay: rgba(19, 23, 32, .1);
@@ -933,27 +947,27 @@
933
947
  --wds-shadow-spread-secondary-raised: 0;
934
948
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
935
949
  --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
936
- --wds-shadow-surface-overlay-dark: 0 0 12px 0 rgba(19, 23, 32, .2);
937
- --wds-shadow-surface-raised: 0 0 3px 0 rgba(19, 23, 32, .1), 0 0 0 0 rgba(19, 23, 32, .05);
938
- --wds-shadow-x-input: 0;
939
- --wds-shadow-x-primary-toggle-button: 0;
940
- --wds-shadow-x-secondary-raised: 0;
941
- --wds-shadow-x-secondary-toggle-button: 0;
942
- --wds-shadow-x-tertiary-toggle-button: 0;
943
- --wds-shadow-y-input: 0;
944
- --wds-shadow-y-primary-modal: 0;
945
- --wds-shadow-y-primary-overlay: 0;
946
- --wds-shadow-y-primary-overlay-dark: 0;
947
- --wds-shadow-y-primary-raised: 0;
948
- --wds-shadow-y-primary-toggle: 0;
949
- --wds-shadow-y-primary-toggle-button: 0;
950
- --wds-shadow-y-secondary-modal: 0;
951
- --wds-shadow-y-secondary-overlay: 0;
952
- --wds-shadow-y-secondary-overlay-dark: 0;
953
- --wds-shadow-y-secondary-raised: 0;
954
- --wds-shadow-y-secondary-toggle: 0;
955
- --wds-shadow-y-secondary-toggle-button: 0;
956
- --wds-shadow-y-tertiary-toggle-button: 0;
950
+ --wds-shadow-surface-overlay-dark: 0 0px 12px 0 rgba(19, 23, 32, .2);
951
+ --wds-shadow-surface-raised: 0 0px 3px 0 rgba(19, 23, 32, .1), 0 0px 0 0 rgba(19, 23, 32, .05);
952
+ --wds-shadow-x-input: 0px;
953
+ --wds-shadow-x-primary-toggle-button: 0px;
954
+ --wds-shadow-x-secondary-raised: 0px;
955
+ --wds-shadow-x-secondary-toggle-button: 0px;
956
+ --wds-shadow-x-tertiary-toggle-button: 0px;
957
+ --wds-shadow-y-input: 0px;
958
+ --wds-shadow-y-primary-modal: 0px;
959
+ --wds-shadow-y-primary-overlay: 0px;
960
+ --wds-shadow-y-primary-overlay-dark: 0px;
961
+ --wds-shadow-y-primary-raised: 0px;
962
+ --wds-shadow-y-primary-toggle: 0px;
963
+ --wds-shadow-y-primary-toggle-button: 0px;
964
+ --wds-shadow-y-secondary-modal: 0px;
965
+ --wds-shadow-y-secondary-overlay: 0px;
966
+ --wds-shadow-y-secondary-overlay-dark: 0px;
967
+ --wds-shadow-y-secondary-raised: 0px;
968
+ --wds-shadow-y-secondary-toggle: 0px;
969
+ --wds-shadow-y-secondary-toggle-button: 0px;
970
+ --wds-shadow-y-tertiary-toggle-button: 0px;
957
971
  --wds-space-mobile-viewport-spacing: 32px;
958
972
  --wds-space-padding-horizontal-large: 24px;
959
973
  --wds-space-padding-horizontal-medium: 20px;
package/wixel/all.css CHANGED
@@ -28,7 +28,7 @@
28
28
  --wds-space-100: 4px;
29
29
  --wds-space-50: 2px;
30
30
  --wds-space-25: 1px;
31
- --wds-space-0: 0;
31
+ --wds-space-0: 0px;
32
32
  --wds-shadow-spread-secondary-raised: -0.70;
33
33
  --wds-shadow-focus-spread: 0;
34
34
  --wds-shadow-y-350: 10px;
@@ -38,9 +38,9 @@
38
38
  --wds-shadow-y-100: 1px;
39
39
  --wds-shadow-y-50: 2px;
40
40
  --wds-shadow-y-25: 1px;
41
- --wds-shadow-y-0: 0;
41
+ --wds-shadow-y-0: 0px;
42
42
  --wds-shadow-x-25: 1px;
43
- --wds-shadow-x-0: 0;
43
+ --wds-shadow-x-0: 0px;
44
44
  --wds-shadow-blur-800: 30px;
45
45
  --wds-shadow-blur-500: 20px;
46
46
  --wds-shadow-blur-400: 30px;
@@ -53,10 +53,10 @@
53
53
  --wds-shadow-blur-50: 4px;
54
54
  --wds-shadow-blur-35: 3px;
55
55
  --wds-shadow-blur-25: 2px;
56
- --wds-shadow-blur-0: 0;
57
- --wds-shadow-400: 0;
58
- --wds-shadow-200: 0;
59
- --wds-shadow-100: 0;
56
+ --wds-shadow-blur-0: 0px;
57
+ --wds-shadow-400: 0px;
58
+ --wds-shadow-200: 0px;
59
+ --wds-shadow-100: 0px;
60
60
  --wds-font-weight-semi-bold: 600;
61
61
  --wds-font-weight-regular: 400;
62
62
  --wds-font-weight-medium: 500;
@@ -72,7 +72,7 @@
72
72
  --wds-font-size-100: 10px;
73
73
  --wds-font-letter-spacing-heading-3: -0.50;
74
74
  --wds-font-letter-spacing-100: 1px;
75
- --wds-font-letter-spacing-0: 0;
75
+ --wds-font-letter-spacing-0: 0px;
76
76
  --wds-font-family-display: "Madefor Display", "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
77
77
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
78
78
  --wds-color-text-stage-master: #47cb2e;
@@ -282,7 +282,7 @@
282
282
  --wds-border-radius-300: 6px;
283
283
  --wds-border-radius-200: 4px;
284
284
  --wds-border-radius-100: 2px;
285
- --wds-border-radius-0: 0;
285
+ --wds-border-radius-0: 0px;
286
286
  --wds-background-blur-375: 30px;
287
287
  --wds-background-blur-350: 28px;
288
288
  --wds-background-blur-300: 24px;
@@ -291,16 +291,16 @@
291
291
  --wds-background-blur-150: 12px;
292
292
  --wds-background-blur-50: 8px;
293
293
  --wds-background-blur-10: 4px;
294
- --wds-background-blur-0: 0;
294
+ --wds-background-blur-0: 0px;
295
295
  --wds-toggle-switch-width-small: 24px;
296
296
  --wds-toggle-switch-width-medium: 32px;
297
297
  --wds-toggle-switch-width-large: 40px;
298
- --wds-toggle-switch-knob-text-height: 0;
298
+ --wds-toggle-switch-knob-text-height: 0px;
299
299
  --wds-toggle-switch-knob-size-small: 12px;
300
300
  --wds-toggle-switch-knob-size-medium: 16px;
301
301
  --wds-toggle-switch-knob-size-large: 20px;
302
302
  --wds-toggle-switch-icon: false;
303
- --wds-thumbnail-border-width-default: 0;
303
+ --wds-thumbnail-border-width-default: 0px;
304
304
  --wds-tabs-selection-height: 1px;
305
305
  --wds-status-toast-width: 600px;
306
306
  --wds-slider-track-size-transparent: 4px;
@@ -360,6 +360,19 @@
360
360
  --wds-avatar-group-gap-condensed: -2px;
361
361
  --wds-width-default-2: var(--wds-border-width-none);
362
362
  --wds-width-default: var(--wds-border-width-none);
363
+ --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
364
+ --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
365
+ --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
366
+ --wds-inner-shadow-x-secondary: var(--wds-shadow-x-0);
367
+ --wds-inner-shadow-x-primary: var(--wds-shadow-x-0);
368
+ --wds-inner-shadow-x-input: var(--wds-shadow-x-0);
369
+ --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-0);
370
+ --wds-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
371
+ --wds-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
372
+ --wds-inner-shadow-fill-input: var(--wds-color-black-100-transparent-0);
373
+ --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
374
+ --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
375
+ --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
363
376
  --wds-border-width-default: var(--wds-border-width-none);
364
377
  --wds-border-radius-surface-sunken: var(--wds-border-radius-0);
365
378
  --wds-border-radius-surface-raised: var(--wds-border-radius-600);
@@ -489,6 +502,10 @@
489
502
  --wds-color-text-disabled-light: var(--wds-color-white-transparent-70);
490
503
  --wds-color-text-disabled: var(--wds-color-black-100-transparent-30);
491
504
  --wds-color-text-destructive: var(--wds-color-red-100);
505
+ --wds-color-fill-warning-tertiary-hover: var(--wds-color-black-750);
506
+ --wds-color-fill-warning-tertiary-disabled: var(--wds-color-white);
507
+ --wds-color-fill-warning-tertiary-active: var(--wds-color-yellow-400);
508
+ --wds-color-fill-warning-tertiary: var(--wds-color-white);
492
509
  --wds-color-fill-warning-secondary-hover: var(--wds-color-yellow-300);
493
510
  --wds-color-fill-warning-secondary-active: var(--wds-color-yellow-500);
494
511
  --wds-color-fill-warning-secondary: var(--wds-color-yellow-500);
@@ -708,6 +725,8 @@
708
725
  --wds-color-border-premium-primary-disabled: var(--wds-color-black-100-transparent-10);
709
726
  --wds-color-border-premium-primary-active: var(--wds-color-purple-100);
710
727
  --wds-color-border-premium-primary: var(--wds-color-purple-300);
728
+ --wds-color-border-light-primary-disabled: var(--wds-color-white-transparent-30);
729
+ --wds-color-border-light-primary-active: var(--wds-color-white);
711
730
  --wds-color-border-light-hover: var(--wds-color-white-transparent-70);
712
731
  --wds-color-border-light-disabled: var(--wds-color-white-transparent-30);
713
732
  --wds-color-border-light-active: var(--wds-color-white);
@@ -765,6 +784,8 @@
765
784
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-600);
766
785
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-600);
767
786
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
787
+ --wds-variable-input-padding-vertical-tiny: var(--wds-space-100);
788
+ --wds-variable-input-padding-vertical-small: var(--wds-space-100);
768
789
  --wds-tooltip-padding-vertical-small: var(--wds-space-150);
769
790
  --wds-tooltip-padding-vertical-medium: var(--wds-space-200);
770
791
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
@@ -836,8 +857,11 @@
836
857
  --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
837
858
  --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
838
859
  --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
860
+ --wds-toast-vertical-padding: var(--wds-space-150);
861
+ --wds-toast-horizontal-padding: var(--wds-space-200);
839
862
  --wds-thumbnail-title-padding-top: var(--wds-space-150);
840
863
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-semi-bold);
864
+ --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-10);
841
865
  --wds-thumbnail-illustration-fill-3: var(--wds-color-black-750);
842
866
  --wds-thumbnail-illustration-fill-2: var(--wds-color-black-100);
843
867
  --wds-thumbnail-illustration-fill-1: var(--wds-color-black-400);
@@ -896,8 +920,6 @@
896
920
  --wds-swatches-list-gap: var(--wds-space-200);
897
921
  --wds-stepper-prefix-size-number: var(--wds-space-600);
898
922
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
899
- --wds-status-toast-vertical-padding: var(--wds-space-150);
900
- --wds-status-toast-horizontal-padding: var(--wds-space-200);
901
923
  --wds-social-preview-content-padding-vertical: var(--wds-space-200);
902
924
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
903
925
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
@@ -958,11 +980,13 @@
958
980
  --wds-side-panel-header-padding-vertical: var(--wds-space-400);
959
981
  --wds-side-panel-header-padding-right: var(--wds-space-200);
960
982
  --wds-side-panel-header-padding-left: var(--wds-space-600);
983
+ --wds-side-panel-header-divider-height: var(--wds-border-width-100);
961
984
  --wds-side-panel-footnote-padding-vertical: var(--wds-space-200);
962
985
  --wds-side-panel-footnote-padding-horizontal: var(--wds-space-600);
963
986
  --wds-side-panel-footer-padding-vertical: var(--wds-space-400);
964
987
  --wds-side-panel-footer-padding-horizontal: var(--wds-space-600);
965
988
  --wds-side-panel-footer-fill: var(--wds-color-white-transparent-0);
989
+ --wds-side-panel-footer-divider-height: var(--wds-border-width-100);
966
990
  --wds-side-panel-footer-border-width: var(--wds-border-width-200);
967
991
  --wds-side-panel-floating-header-padding-vertical: var(--wds-space-475);
968
992
  --wds-side-panel-floating-header-padding-right: var(--wds-space-400);
@@ -1009,6 +1033,8 @@
1009
1033
  --wds-segmented-toggle-icononly-padding-horizontal-medium: var(--wds-space-175);
1010
1034
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1011
1035
  --wds-segmented-toggle-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1036
+ --wds-segmented-toggle-container-border-radius-small: var(--wds-border-radius-400);
1037
+ --wds-segmented-toggle-container-border-radius-medium: var(--wds-border-radius-400);
1012
1038
  --wds-segmented-toggle-border-width-selected: var(--wds-border-width-none);
1013
1039
  --wds-segmented-toggle-border-width-default: var(--wds-border-width-none);
1014
1040
  --wds-segmented-toggle-border-width: var(--wds-border-width-none);
@@ -1081,6 +1107,7 @@
1081
1107
  --wds-notification-fill-standard: var(--wds-color-blue-200);
1082
1108
  --wds-notification-fill-premium: var(--wds-color-purple-200);
1083
1109
  --wds-notification-fill-error: var(--wds-color-red-200);
1110
+ --wds-nestable-list-paddings: var(--wds-space-0);
1084
1111
  --wds-mobile-modal-footer-padding-vertical: var(--wds-space-600);
1085
1112
  --wds-mobile-modal-footer-padding-horizontal: var(--wds-space-600);
1086
1113
  --wds-mobile-modal-content-padding-vertical: var(--wds-space-600);
@@ -1112,32 +1139,36 @@
1112
1139
  --wds-list-item-select-icon-padding-horizontal-medium: var(--wds-space-300);
1113
1140
  --wds-list-item-select-suffix-active-font-weight: var(--wds-font-weight-regular);
1114
1141
  --wds-list-item-select-padding-vertical-small-screen-small: var(--wds-space-200);
1115
- --wds-list-item-select-padding-vertical-small: var(--wds-space-300);
1142
+ --wds-list-item-select-padding-vertical-small: var(--wds-space-150);
1116
1143
  --wds-list-item-select-padding-vertical-medium-screen-small: var(--wds-space-200);
1117
- --wds-list-item-select-padding-vertical-medium: var(--wds-space-100);
1144
+ --wds-list-item-select-padding-vertical-medium: var(--wds-space-150);
1118
1145
  --wds-list-item-select-padding-right-small: var(--wds-space-400);
1119
1146
  --wds-list-item-select-padding-right-medium: var(--wds-space-400);
1120
1147
  --wds-list-item-select-padding-left-small: var(--wds-space-300);
1121
1148
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
1122
- --wds-list-item-select-padding-horizontal-small: var(--wds-space-200);
1123
- --wds-list-item-select-padding-horizontal-medium: var(--wds-space-200);
1124
- --wds-list-item-select-label-font-weight-small: var(--wds-font-weight-regular);
1149
+ --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
1150
+ --wds-list-item-select-padding-horizontal-medium: var(--wds-space-300);
1151
+ --wds-list-item-select-label-hover-font-weight-medium: var(--wds-font-weight-regular);
1125
1152
  --wds-list-item-select-label-font-weight-medium: var(--wds-font-weight-regular);
1153
+ --wds-list-item-select-label-font-weight-active: var(--wds-font-weight-regular);
1154
+ --wds-list-item-select-gap: var(--wds-space-0);
1126
1155
  --wds-list-item-select-border-radius: var(--wds-border-radius-400);
1127
- --wds-list-item-select-affix-margin: var(--wds-space-150);
1156
+ --wds-list-item-select-affix-margin: var(--wds-space-100);
1128
1157
  --wds-list-item-select-active-fill-disabled: var(--wds-color-fill-standard-secondary-disabled);
1129
1158
  --wds-list-item-section-padding-horizontal: var(--wds-space-400);
1159
+ --wds-list-item-section-font-weight: var(--wds-font-weight-bold);
1160
+ --wds-list-item-section-divider-padding-horizontal: var(--wds-space-400);
1130
1161
  --wds-list-item-action-title-font-weight-active: var(--wds-font-weight-regular);
1131
1162
  --wds-list-item-action-title-font-weight: var(--wds-font-weight-regular);
1132
1163
  --wds-list-item-action-padding-vertical-small-screen-small: var(--wds-space-200);
1133
- --wds-list-item-action-padding-vertical-small: var(--wds-space-300);
1164
+ --wds-list-item-action-padding-vertical-small: var(--wds-space-150);
1134
1165
  --wds-list-item-action-padding-vertical-medium-screen-small: var(--wds-space-200);
1135
- --wds-list-item-action-padding-vertical-medium: var(--wds-space-300);
1136
- --wds-list-item-action-padding-horizontal-small: var(--wds-space-200);
1137
- --wds-list-item-action-padding-horizontal-medium: var(--wds-space-200);
1138
- --wds-list-item-action-gap-small: var(--wds-space-150);
1139
- --wds-list-item-action-gap-medium: var(--wds-space-150);
1166
+ --wds-list-item-action-padding-vertical-medium: var(--wds-space-150);
1167
+ --wds-list-item-action-padding-horizontal-small: var(--wds-space-300);
1168
+ --wds-list-item-action-padding-horizontal-medium: var(--wds-space-300);
1169
+ --wds-list-item-action-gap: var(--wds-space-0);
1140
1170
  --wds-list-item-action-border-radius: var(--wds-border-radius-400);
1171
+ --wds-list-item-action-affix-margin: var(--wds-space-100);
1141
1172
  --wds-list-item-padding-vertical-xx-tiny: var(--wds-space-100);
1142
1173
  --wds-list-item-padding-vertical-x-tiny: var(--wds-space-200);
1143
1174
  --wds-list-item-padding-vertical-tiny: var(--wds-space-300);
@@ -1153,6 +1184,7 @@
1153
1184
  --wds-list-item-indentation-level-3: var(--wds-space-700);
1154
1185
  --wds-list-item-indentation-level-2: var(--wds-space-300);
1155
1186
  --wds-list-item-gap-columns: var(--wds-space-600);
1187
+ --wds-linear-progress-bar-value-gap: var(--wds-space-300);
1156
1188
  --wds-linear-progress-bar-border-radius: var(--wds-border-radius-0);
1157
1189
  --wds-internal-color-picker-padding-vertical: var(--wds-space-300);
1158
1190
  --wds-internal-color-picker-padding-horizontal: var(--wds-space-400);
@@ -1203,6 +1235,7 @@
1203
1235
  --wds-floating-helper-padding-vertical: var(--wds-space-700);
1204
1236
  --wds-floating-helper-padding-horizontal: var(--wds-space-800);
1205
1237
  --wds-floating-helper-main-action-padding-top: var(--wds-space-400);
1238
+ --wds-fill-button-border-width: var(--wds-border-width-none);
1206
1239
  --wds-field-set-label-gap-tiny: var(--wds-space-150);
1207
1240
  --wds-field-set-label-gap-small: var(--wds-space-200);
1208
1241
  --wds-field-set-label-font-weight: var(--wds-font-weight-medium);
@@ -1360,8 +1393,8 @@
1360
1393
  --wds-badge-size-small: var(--wds-space-500);
1361
1394
  --wds-badge-size-medium: var(--wds-space-600);
1362
1395
  --wds-badge-padding-vertical-tiny: var(--wds-space-0);
1363
- --wds-badge-padding-vertical-small: var(--wds-space-50);
1364
- --wds-badge-padding-vertical-medium: var(--wds-space-100);
1396
+ --wds-badge-padding-vertical-small: var(--wds-space-0);
1397
+ --wds-badge-padding-vertical-medium: var(--wds-space-50);
1365
1398
  --wds-badge-padding-horizontal-tiny: var(--wds-space-100);
1366
1399
  --wds-badge-padding-horizontal-small: var(--wds-space-200);
1367
1400
  --wds-badge-padding-horizontal-medium: var(--wds-space-300);
@@ -1379,7 +1412,10 @@
1379
1412
  --wds-add-item-padding-vertical-large: var(--wds-space-700);
1380
1413
  --wds-add-item-padding-horizontal-tiny: var(--wds-space-300);
1381
1414
  --wds-add-item-padding-horizontal-large: var(--wds-space-700);
1415
+ --wds-add-item-fill-disabled: var(--wds-color-black-100-transparent-5);
1416
+ --wds-add-item-fill: var(--wds-color-blue-600);
1382
1417
  --wds-add-item-border-radius: var(--wds-border-radius-600);
1418
+ --wds-add-item-border-dashed-radius: var(--wds-border-radius-100);
1383
1419
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-semi-bold);
1384
1420
  --wds-accordion-title-font-weight: var(--wds-font-weight-semi-bold);
1385
1421
  --wds-accordion-inner-content-padding-top: var(--wds-space-400);
@@ -1522,6 +1558,7 @@
1522
1558
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1523
1559
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1524
1560
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1561
+ --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1525
1562
  --wds-status-toast-text-font-size: var(--wds-font-size-body-tiny);
1526
1563
  --wds-status-toast-text-fill: var(--wds-color-text-standard-primary-light);
1527
1564
  --wds-status-toast-info-icon-fill: var(--wds-color-text-standard-primary-light);
@@ -1581,6 +1618,7 @@
1581
1618
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1582
1619
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1583
1620
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1621
+ --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1584
1622
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
1585
1623
  --wds-message-modal-title-font-size: var(--wds-font-size-heading-4);
1586
1624
  --wds-message-modal-text-font-size: var(--wds-font-size-body-small);
@@ -1588,7 +1626,6 @@
1588
1626
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1589
1627
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1590
1628
  --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1591
- --wds-list-item-select-title-pressed: var(--wds-color-text-standard-primary);
1592
1629
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1593
1630
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1594
1631
  --wds-list-item-select-suffix-pressed: var(--wds-color-text-placeholder);
@@ -1615,6 +1652,7 @@
1615
1652
  --wds-list-item-select-active-fill-active-screen-small: var(--wds-color-fill-standard-secondary-active);
1616
1653
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-secondary-active);
1617
1654
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-secondary);
1655
+ --wds-list-item-section-title-label-fill: var(--wds-color-text-placeholder);
1618
1656
  --wds-list-item-section-font-size: var(--wds-font-size-body-tiny);
1619
1657
  --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1620
1658
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
@@ -1627,6 +1665,7 @@
1627
1665
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1628
1666
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1629
1667
  --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1668
+ --wds-linear-progress-bar-label-font-letter-spacing: var(--wds-font-letter-spacing-heading-6);
1630
1669
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1631
1670
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1632
1671
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
@@ -1753,6 +1792,10 @@
1753
1792
  --wds-form-field-label-font-size-tiny: var(--wds-font-size-body-tiny);
1754
1793
  --wds-form-field-label-font-size-small: var(--wds-font-size-body-small);
1755
1794
  --wds-form-field-label-fill: var(--wds-color-text-standard-primary);
1795
+ --wds-fill-button-icon-color: var(--wds-color-text-primary);
1796
+ --wds-fill-button-fill-hover: var(--wds-color-fill-standard-secondary-hover);
1797
+ --wds-fill-button-fill: var(--wds-color-fill-standard-secondary);
1798
+ --wds-fill-button-border-color: var(--wds-color-border-standard-secondary);
1756
1799
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1757
1800
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1758
1801
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
@@ -1849,10 +1892,41 @@
1849
1892
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
1850
1893
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
1851
1894
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
1895
+ --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
1896
+ --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
1897
+ --wds-badge-outline-warning-border-color: var(--wds-color-border-warning-primary);
1898
+ --wds-badge-outline-urgent-label-color: var(--wds-color-text-urgent);
1899
+ --wds-badge-outline-urgent-fill: var(--wds-color-fill-urgent-tertiary);
1900
+ --wds-badge-outline-urgent-border-color: var(--wds-color-border-urgent-primary);
1901
+ --wds-badge-outline-success-label-color: var(--wds-color-text-success);
1902
+ --wds-badge-outline-success-fill: var(--wds-color-fill-success-tertiary);
1903
+ --wds-badge-outline-success-border-color: var(--wds-color-border-success-primary);
1904
+ --wds-badge-outline-standard-label-color: var(--wds-color-text-primary);
1905
+ --wds-badge-outline-standard-fill: var(--wds-color-fill-standard-tertiary);
1906
+ --wds-badge-outline-standard-border-color: var(--wds-color-border-standard-primary);
1907
+ --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
1908
+ --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary);
1909
+ --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
1910
+ --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
1911
+ --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-tertiary);
1912
+ --wds-badge-outline-neutral-border-color: var(--wds-color-border-dark-primary);
1913
+ --wds-badge-outline-destructive-label-color: var(--wds-color-text-destructive);
1914
+ --wds-badge-outline-destructive-fill: var(--wds-color-fill-destructive-tertiary);
1915
+ --wds-badge-outline-destructive-border-color: var(--wds-color-border-destructive-primary);
1916
+ --wds-badge-outline-dark-label-color: var(--wds-color-text-standard-secondary);
1917
+ --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
1918
+ --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
1919
+ --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
1852
1920
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
1853
1921
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
1854
1922
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-tiny);
1855
1923
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-small);
1924
+ --wds-add-item-label-color: var(--wds-color-text-primary);
1925
+ --wds-add-item-fill-pressed: var(--wds-color-fill-standard-tertiary-active);
1926
+ --wds-add-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1927
+ --wds-add-item-border-color-hover: var(--wds-color-border-standard-primary-hover);
1928
+ --wds-add-item-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
1929
+ --wds-add-item-border-color: var(--wds-color-border-standard-primary);
1856
1930
  --wds-accordion-title-font-size-small: var(--wds-font-size-body-tiny);
1857
1931
  --wds-accordion-title-font-size-medium: var(--wds-font-size-body-small);
1858
1932
  --wds-accordion-title-fill-hover: var(--wds-color-text-primary);
@@ -1886,6 +1960,7 @@
1886
1960
  --wds-list-item-action-subtitle-font-line-height: var(--wds-font-line-height-body-tiny);
1887
1961
  --wds-list-item-action-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1888
1962
  --wds-list-item-action-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1963
+ --wds-linear-progress-bar-label-font-line-height: var(--wds-font-line-height-heading-6);
1889
1964
  --wds-input-value-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1890
1965
  --wds-input-value-font-line-height-small: var(--wds-font-line-height-body-tiny);
1891
1966
  --wds-input-value-font-line-height-medium: var(--wds-font-line-height-body-small);
@@ -1907,6 +1982,7 @@
1907
1982
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-small);
1908
1983
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-small);
1909
1984
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
1985
+ --wds-badge-label-font-line-height-small: var(--wds-font-line-height-body-small);
1910
1986
  --wds-announcement-modal-title-font-line-height: var(--wds-font-line-height-heading-1);
1911
1987
  --wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-body-small);
1912
1988
  --wds-add-item-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);