@wix/design-system-tokens 1.120.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.
Files changed (22) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/all.css +165 -13
  3. package/all.st.css +319 -15
  4. package/component.st.css +309 -15
  5. package/foundation.st.css +2 -0
  6. package/odeditor/all.css +35 -28
  7. package/odeditor/all.st.css +76 -62
  8. package/odeditor/component.st.css +43 -39
  9. package/odeditor/foundation.st.css +2 -0
  10. package/odeditor/semantic.st.css +31 -23
  11. package/package.json +2 -2
  12. package/semantic.st.css +8 -0
  13. package/studio/all.css +164 -12
  14. package/studio/all.st.css +317 -13
  15. package/studio/component.st.css +307 -13
  16. package/studio/foundation.st.css +2 -0
  17. package/studio/semantic.st.css +8 -0
  18. package/wixel/all.css +164 -12
  19. package/wixel/all.st.css +318 -14
  20. package/wixel/component.st.css +308 -14
  21. package/wixel/foundation.st.css +2 -0
  22. package/wixel/semantic.st.css +8 -0
package/all.st.css CHANGED
@@ -86,19 +86,52 @@
86
86
  @property st-global(--wds-breakpoint-medium);
87
87
  @property st-global(--wds-breakpoint-small);
88
88
  @property st-global(--wds-breakpoint-x-large);
89
- @property st-global(--wds-button-border-fill-standard-secondary);
89
+ @property st-global(--wds-button-border-dark-secondary);
90
+ @property st-global(--wds-button-border-dark-secondary-active);
91
+ @property st-global(--wds-button-border-dark-secondary-disabled);
92
+ @property st-global(--wds-button-border-dark-secondary-hover);
93
+ @property st-global(--wds-button-border-destructive-secondary);
94
+ @property st-global(--wds-button-border-destructive-secondary-active);
95
+ @property st-global(--wds-button-border-destructive-secondary-disabled);
96
+ @property st-global(--wds-button-border-destructive-secondary-hover);
97
+ @property st-global(--wds-button-border-premium-secondary);
98
+ @property st-global(--wds-button-border-premium-secondary-active);
99
+ @property st-global(--wds-button-border-premium-secondary-disabled);
100
+ @property st-global(--wds-button-border-premium-secondary-hover);
90
101
  @property st-global(--wds-button-border-radius-large);
91
102
  @property st-global(--wds-button-border-radius-medium);
92
103
  @property st-global(--wds-button-border-radius-small);
93
104
  @property st-global(--wds-button-border-radius-tiny);
105
+ @property st-global(--wds-button-border-standard-secondary);
106
+ @property st-global(--wds-button-border-standard-secondary-active);
107
+ @property st-global(--wds-button-border-standard-secondary-disabled);
108
+ @property st-global(--wds-button-border-standard-secondary-hover);
109
+ @property st-global(--wds-button-fill-dark-primary-disabled);
110
+ @property st-global(--wds-button-fill-dark-secondary);
111
+ @property st-global(--wds-button-fill-dark-secondary-active);
112
+ @property st-global(--wds-button-fill-dark-secondary-disabled);
113
+ @property st-global(--wds-button-fill-dark-secondary-hover);
114
+ @property st-global(--wds-button-fill-destructive-primary-disabled);
115
+ @property st-global(--wds-button-fill-destructive-secondary);
116
+ @property st-global(--wds-button-fill-destructive-secondary-active);
117
+ @property st-global(--wds-button-fill-destructive-secondary-disabled);
118
+ @property st-global(--wds-button-fill-destructive-secondary-hover);
94
119
  @property st-global(--wds-button-fill-gradient-hover-primary);
95
120
  @property st-global(--wds-button-fill-gradient-hover-secondary);
121
+ @property st-global(--wds-button-fill-premium-primary-disabled);
122
+ @property st-global(--wds-button-fill-premium-secondary);
123
+ @property st-global(--wds-button-fill-premium-secondary-active);
124
+ @property st-global(--wds-button-fill-premium-secondary-disabled);
125
+ @property st-global(--wds-button-fill-premium-secondary-hover);
96
126
  @property st-global(--wds-button-fill-standard-primary);
97
127
  @property st-global(--wds-button-fill-standard-primary-active);
128
+ @property st-global(--wds-button-fill-standard-primary-disabled);
98
129
  @property st-global(--wds-button-fill-standard-primary-hover);
99
130
  @property st-global(--wds-button-fill-standard-secondary);
100
131
  @property st-global(--wds-button-fill-standard-secondary-active);
132
+ @property st-global(--wds-button-fill-standard-secondary-disabled);
101
133
  @property st-global(--wds-button-fill-standard-secondary-hover);
134
+ @property st-global(--wds-button-font-line-height-extra-large);
102
135
  @property st-global(--wds-button-font-line-height-large);
103
136
  @property st-global(--wds-button-font-line-height-medium);
104
137
  @property st-global(--wds-button-font-line-height-small);
@@ -107,6 +140,9 @@
107
140
  @property st-global(--wds-button-font-size-medium);
108
141
  @property st-global(--wds-button-font-size-small);
109
142
  @property st-global(--wds-button-font-size-tiny);
143
+ @property st-global(--wds-button-font-weight-large);
144
+ @property st-global(--wds-button-font-weight-medium);
145
+ @property st-global(--wds-button-font-weight-small);
110
146
  @property st-global(--wds-button-font-weight-tiny);
111
147
  @property st-global(--wds-button-gap-large);
112
148
  @property st-global(--wds-button-gap-medium);
@@ -116,9 +152,27 @@
116
152
  @property st-global(--wds-button-icon-offset-medium);
117
153
  @property st-global(--wds-button-icon-offset-small);
118
154
  @property st-global(--wds-button-icon-offset-tiny);
155
+ @property st-global(--wds-button-label-fill-dark-primary-disabled);
156
+ @property st-global(--wds-button-label-fill-dark-secondary);
157
+ @property st-global(--wds-button-label-fill-dark-secondary-active);
158
+ @property st-global(--wds-button-label-fill-dark-secondary-disabled);
159
+ @property st-global(--wds-button-label-fill-dark-secondary-hover);
160
+ @property st-global(--wds-button-label-fill-destructive-primary-disabled);
161
+ @property st-global(--wds-button-label-fill-destructive-secondary);
162
+ @property st-global(--wds-button-label-fill-destructive-secondary-active);
163
+ @property st-global(--wds-button-label-fill-destructive-secondary-disabled);
164
+ @property st-global(--wds-button-label-fill-destructive-secondary-hover);
165
+ @property st-global(--wds-button-label-fill-premium-primary-disabled);
166
+ @property st-global(--wds-button-label-fill-premium-secondary);
167
+ @property st-global(--wds-button-label-fill-premium-secondary-active);
168
+ @property st-global(--wds-button-label-fill-premium-secondary-disabled);
169
+ @property st-global(--wds-button-label-fill-premium-secondary-hover);
170
+ @property st-global(--wds-button-label-fill-standard-primary-disabled);
119
171
  @property st-global(--wds-button-label-fill-standard-secondary);
172
+ @property st-global(--wds-button-label-fill-standard-secondary-active);
173
+ @property st-global(--wds-button-label-fill-standard-secondary-disabled);
174
+ @property st-global(--wds-button-label-fill-standard-secondary-hover);
120
175
  @property st-global(--wds-button-label-fill-transparent-tertiary);
121
- @property st-global(--wds-button-label-font-size-large);
122
176
  @property st-global(--wds-button-outline-hover);
123
177
  @property st-global(--wds-button-padding-horizontal-extra-large);
124
178
  @property st-global(--wds-button-padding-horizontal-large);
@@ -221,6 +275,7 @@
221
275
  @property st-global(--wds-color-black-200-transparent-70);
222
276
  @property st-global(--wds-color-black-300);
223
277
  @property st-global(--wds-color-black-300-transparent-0);
278
+ @property st-global(--wds-color-black-300-transparent-20);
224
279
  @property st-global(--wds-color-black-300-transparent-50);
225
280
  @property st-global(--wds-color-black-300-transparent-60);
226
281
  @property st-global(--wds-color-black-300-transparent-70);
@@ -812,26 +867,116 @@
812
867
  @property st-global(--wds-gallery-item-padding-right-small);
813
868
  @property st-global(--wds-gallery-item-padding-vertical-medium);
814
869
  @property st-global(--wds-gallery-item-padding-vertical-small);
870
+ @property st-global(--wds-icon-button-color-border-dark-secondary);
871
+ @property st-global(--wds-icon-button-color-border-dark-secondary-active);
872
+ @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
873
+ @property st-global(--wds-icon-button-color-border-dark-secondary-hover);
874
+ @property st-global(--wds-icon-button-color-border-light-secondary);
875
+ @property st-global(--wds-icon-button-color-border-light-secondary-active);
876
+ @property st-global(--wds-icon-button-color-border-light-secondary-disabled);
877
+ @property st-global(--wds-icon-button-color-border-light-secondary-hover);
878
+ @property st-global(--wds-icon-button-color-border-premium-secondary);
879
+ @property st-global(--wds-icon-button-color-border-premium-secondary-active);
880
+ @property st-global(--wds-icon-button-color-border-premium-secondary-disabled);
815
881
  @property st-global(--wds-icon-button-color-border-standard-secondary);
816
882
  @property st-global(--wds-icon-button-color-border-standard-secondary-active);
883
+ @property st-global(--wds-icon-button-color-border-standard-secondary-disabled);
817
884
  @property st-global(--wds-icon-button-color-border-standard-secondary-hover);
885
+ @property st-global(--wds-icon-button-color-fill-dark-primary);
886
+ @property st-global(--wds-icon-button-color-fill-dark-primary-active);
887
+ @property st-global(--wds-icon-button-color-fill-dark-primary-disabled);
888
+ @property st-global(--wds-icon-button-color-fill-dark-primary-hover);
889
+ @property st-global(--wds-icon-button-color-fill-dark-secondary);
890
+ @property st-global(--wds-icon-button-color-fill-dark-secondary-active);
891
+ @property st-global(--wds-icon-button-color-fill-dark-secondary-disabled);
892
+ @property st-global(--wds-icon-button-color-fill-dark-secondary-hover);
893
+ @property st-global(--wds-icon-button-color-fill-dark-tertiary);
894
+ @property st-global(--wds-icon-button-color-fill-dark-tertiary-active);
895
+ @property st-global(--wds-icon-button-color-fill-dark-tertiary-disabled);
896
+ @property st-global(--wds-icon-button-color-fill-dark-tertiary-hover);
897
+ @property st-global(--wds-icon-button-color-fill-light-primary);
898
+ @property st-global(--wds-icon-button-color-fill-light-primary-active);
899
+ @property st-global(--wds-icon-button-color-fill-light-primary-disabled);
900
+ @property st-global(--wds-icon-button-color-fill-light-primary-hover);
901
+ @property st-global(--wds-icon-button-color-fill-light-secondary);
902
+ @property st-global(--wds-icon-button-color-fill-light-secondary-active);
903
+ @property st-global(--wds-icon-button-color-fill-light-secondary-disabled);
904
+ @property st-global(--wds-icon-button-color-fill-light-secondary-hover);
905
+ @property st-global(--wds-icon-button-color-fill-light-tertiary);
906
+ @property st-global(--wds-icon-button-color-fill-light-tertiary-active);
907
+ @property st-global(--wds-icon-button-color-fill-light-tertiary-disabled);
908
+ @property st-global(--wds-icon-button-color-fill-light-tertiary-hover);
909
+ @property st-global(--wds-icon-button-color-fill-premium-primary);
910
+ @property st-global(--wds-icon-button-color-fill-premium-primary-active);
911
+ @property st-global(--wds-icon-button-color-fill-premium-primary-disabled);
912
+ @property st-global(--wds-icon-button-color-fill-premium-primary-hover);
913
+ @property st-global(--wds-icon-button-color-fill-premium-secondary);
914
+ @property st-global(--wds-icon-button-color-fill-premium-secondary-active);
915
+ @property st-global(--wds-icon-button-color-fill-premium-secondary-disabled);
916
+ @property st-global(--wds-icon-button-color-fill-premium-secondary-hover);
917
+ @property st-global(--wds-icon-button-color-fill-premium-tertiary);
918
+ @property st-global(--wds-icon-button-color-fill-premium-tertiary-active);
919
+ @property st-global(--wds-icon-button-color-fill-premium-tertiary-disabled);
920
+ @property st-global(--wds-icon-button-color-fill-premium-tertiary-hover);
818
921
  @property st-global(--wds-icon-button-color-fill-standard-primary);
819
922
  @property st-global(--wds-icon-button-color-fill-standard-primary-active);
923
+ @property st-global(--wds-icon-button-color-fill-standard-primary-disabled);
820
924
  @property st-global(--wds-icon-button-color-fill-standard-primary-hover);
821
925
  @property st-global(--wds-icon-button-color-fill-standard-secondary);
822
926
  @property st-global(--wds-icon-button-color-fill-standard-secondary-active);
927
+ @property st-global(--wds-icon-button-color-fill-standard-secondary-disabled);
823
928
  @property st-global(--wds-icon-button-color-fill-standard-secondary-hover);
824
929
  @property st-global(--wds-icon-button-color-fill-standard-tertiary);
825
930
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
931
+ @property st-global(--wds-icon-button-color-fill-standard-tertiary-disabled);
826
932
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
933
+ @property st-global(--wds-icon-button-color-text-dark-primary);
934
+ @property st-global(--wds-icon-button-color-text-dark-primary-active);
935
+ @property st-global(--wds-icon-button-color-text-dark-primary-disabled);
936
+ @property st-global(--wds-icon-button-color-text-dark-primary-hover);
937
+ @property st-global(--wds-icon-button-color-text-dark-secondary);
938
+ @property st-global(--wds-icon-button-color-text-dark-secondary-active);
939
+ @property st-global(--wds-icon-button-color-text-dark-secondary-disabled);
940
+ @property st-global(--wds-icon-button-color-text-dark-secondary-hover);
941
+ @property st-global(--wds-icon-button-color-text-dark-tertiary);
942
+ @property st-global(--wds-icon-button-color-text-dark-tertiary-active);
943
+ @property st-global(--wds-icon-button-color-text-dark-tertiary-disabled);
944
+ @property st-global(--wds-icon-button-color-text-dark-tertiary-hover);
945
+ @property st-global(--wds-icon-button-color-text-light-primary);
946
+ @property st-global(--wds-icon-button-color-text-light-primary-active);
947
+ @property st-global(--wds-icon-button-color-text-light-primary-disabled);
948
+ @property st-global(--wds-icon-button-color-text-light-primary-hover);
949
+ @property st-global(--wds-icon-button-color-text-light-secondary);
950
+ @property st-global(--wds-icon-button-color-text-light-secondary-active);
951
+ @property st-global(--wds-icon-button-color-text-light-secondary-disabled);
952
+ @property st-global(--wds-icon-button-color-text-light-secondary-hover);
953
+ @property st-global(--wds-icon-button-color-text-light-tertiary);
954
+ @property st-global(--wds-icon-button-color-text-light-tertiary-active);
955
+ @property st-global(--wds-icon-button-color-text-light-tertiary-disabled);
956
+ @property st-global(--wds-icon-button-color-text-light-tertiary-hover);
957
+ @property st-global(--wds-icon-button-color-text-premium-primary);
958
+ @property st-global(--wds-icon-button-color-text-premium-primary-active);
959
+ @property st-global(--wds-icon-button-color-text-premium-primary-disabled);
960
+ @property st-global(--wds-icon-button-color-text-premium-primary-hover);
961
+ @property st-global(--wds-icon-button-color-text-premium-secondary);
962
+ @property st-global(--wds-icon-button-color-text-premium-secondary-active);
963
+ @property st-global(--wds-icon-button-color-text-premium-secondary-disabled);
964
+ @property st-global(--wds-icon-button-color-text-premium-secondary-hover);
965
+ @property st-global(--wds-icon-button-color-text-premium-tertiary);
966
+ @property st-global(--wds-icon-button-color-text-premium-tertiary-active);
967
+ @property st-global(--wds-icon-button-color-text-premium-tertiary-disabled);
968
+ @property st-global(--wds-icon-button-color-text-premium-tertiary-hover);
827
969
  @property st-global(--wds-icon-button-color-text-standard-primary);
828
970
  @property st-global(--wds-icon-button-color-text-standard-primary-active);
971
+ @property st-global(--wds-icon-button-color-text-standard-primary-disabled);
829
972
  @property st-global(--wds-icon-button-color-text-standard-primary-hover);
830
973
  @property st-global(--wds-icon-button-color-text-standard-secondary);
831
974
  @property st-global(--wds-icon-button-color-text-standard-secondary-active);
975
+ @property st-global(--wds-icon-button-color-text-standard-secondary-disabled);
832
976
  @property st-global(--wds-icon-button-color-text-standard-secondary-hover);
833
977
  @property st-global(--wds-icon-button-color-text-standard-tertiary);
834
978
  @property st-global(--wds-icon-button-color-text-standard-tertiary-active);
979
+ @property st-global(--wds-icon-button-color-text-standard-tertiary-disabled);
835
980
  @property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
836
981
  @property st-global(--wds-image-border-radius-default);
837
982
  @property st-global(--wds-image-border-radius-none);
@@ -1184,6 +1329,7 @@
1184
1329
  @property st-global(--wds-shadow-blur-400);
1185
1330
  @property st-global(--wds-shadow-blur-500);
1186
1331
  @property st-global(--wds-shadow-blur-800);
1332
+ @property st-global(--wds-shadow-blur-input);
1187
1333
  @property st-global(--wds-shadow-blur-primary-modal);
1188
1334
  @property st-global(--wds-shadow-blur-primary-overlay);
1189
1335
  @property st-global(--wds-shadow-blur-primary-overlay-dark);
@@ -1194,6 +1340,7 @@
1194
1340
  @property st-global(--wds-shadow-blur-secondary-overlay-dark);
1195
1341
  @property st-global(--wds-shadow-blur-secondary-raised);
1196
1342
  @property st-global(--wds-shadow-blur-secondary-toggle);
1343
+ @property st-global(--wds-shadow-fill-input);
1197
1344
  @property st-global(--wds-shadow-fill-primary-modal);
1198
1345
  @property st-global(--wds-shadow-fill-primary-overlay);
1199
1346
  @property st-global(--wds-shadow-fill-primary-overlay-dark);
@@ -1237,6 +1384,7 @@
1237
1384
  @property st-global(--wds-shadow-surface-raised);
1238
1385
  @property st-global(--wds-shadow-x-0);
1239
1386
  @property st-global(--wds-shadow-x-25);
1387
+ @property st-global(--wds-shadow-x-input);
1240
1388
  @property st-global(--wds-shadow-x-secondary-raised);
1241
1389
  @property st-global(--wds-shadow-y-0);
1242
1390
  @property st-global(--wds-shadow-y-25);
@@ -1246,6 +1394,7 @@
1246
1394
  @property st-global(--wds-shadow-y-200);
1247
1395
  @property st-global(--wds-shadow-y-300);
1248
1396
  @property st-global(--wds-shadow-y-350);
1397
+ @property st-global(--wds-shadow-y-input);
1249
1398
  @property st-global(--wds-shadow-y-primary-modal);
1250
1399
  @property st-global(--wds-shadow-y-primary-overlay);
1251
1400
  @property st-global(--wds-shadow-y-primary-overlay-dark);
@@ -1348,6 +1497,7 @@
1348
1497
  @property st-global(--wds-slider-slider-knob-border-width);
1349
1498
  @property st-global(--wds-slider-slider-knob-border-width-hover);
1350
1499
  @property st-global(--wds-slider-slider-knob-color);
1500
+ @property st-global(--wds-slider-slider-knob-color-disabled);
1351
1501
  @property st-global(--wds-slider-slider-knob-color-hover);
1352
1502
  @property st-global(--wds-slider-slider-knob-shadow);
1353
1503
  @property st-global(--wds-slider-slider-knob-size);
@@ -1407,10 +1557,12 @@
1407
1557
  @property st-global(--wds-space-padding-vertical-x-tiny);
1408
1558
  @property st-global(--wds-space-padding-vertical-xx-tiny);
1409
1559
  @property st-global(--wds-space-viewport-spacing);
1560
+ @property st-global(--wds-status-toast-horizontal-padding);
1410
1561
  @property st-global(--wds-status-toast-info-icon-fill);
1411
1562
  @property st-global(--wds-status-toast-text-fill);
1412
1563
  @property st-global(--wds-status-toast-text-font-line-height);
1413
1564
  @property st-global(--wds-status-toast-text-font-size);
1565
+ @property st-global(--wds-status-toast-vertical-padding);
1414
1566
  @property st-global(--wds-status-toast-width);
1415
1567
  @property st-global(--wds-stepper-prefix-size-circle);
1416
1568
  @property st-global(--wds-stepper-prefix-size-number);
@@ -1742,19 +1894,52 @@
1742
1894
  --wds-breakpoint-medium: 768px;
1743
1895
  --wds-breakpoint-small: 490px;
1744
1896
  --wds-breakpoint-x-large: 1572px;
1745
- --wds-button-border-fill-standard-secondary: #d6e6fe;
1897
+ --wds-button-border-dark-secondary: #868aa5;
1898
+ --wds-button-border-dark-secondary-active: #000624;
1899
+ --wds-button-border-dark-secondary-disabled: rgba(0, 6, 36, .1);
1900
+ --wds-button-border-dark-secondary-hover: #44485f;
1901
+ --wds-button-border-destructive-secondary: #fbd0cd;
1902
+ --wds-button-border-destructive-secondary-active: #b81206;
1903
+ --wds-button-border-destructive-secondary-disabled: rgba(0, 6, 36, .1);
1904
+ --wds-button-border-destructive-secondary-hover: #e62214;
1905
+ --wds-button-border-premium-secondary: #e3c3f4;
1906
+ --wds-button-border-premium-secondary-active: #7416a5;
1907
+ --wds-button-border-premium-secondary-disabled: rgba(0, 6, 36, .1);
1908
+ --wds-button-border-premium-secondary-hover: #9a27d5;
1746
1909
  --wds-button-border-radius-large: 1000px;
1747
1910
  --wds-button-border-radius-medium: 1000px;
1748
1911
  --wds-button-border-radius-small: 1000px;
1749
1912
  --wds-button-border-radius-tiny: 1000px;
1913
+ --wds-button-border-standard-secondary: #d6e6fe;
1914
+ --wds-button-border-standard-secondary-active: #084ebd;
1915
+ --wds-button-border-standard-secondary-disabled: rgba(0, 6, 36, .1);
1916
+ --wds-button-border-standard-secondary-hover: #116dff;
1917
+ --wds-button-fill-dark-primary-disabled: rgba(0, 6, 36, .3);
1918
+ --wds-button-fill-dark-secondary: #ffffff;
1919
+ --wds-button-fill-dark-secondary-active: #000624;
1920
+ --wds-button-fill-dark-secondary-disabled: #ffffff;
1921
+ --wds-button-fill-dark-secondary-hover: #44485f;
1922
+ --wds-button-fill-destructive-primary-disabled: rgba(0, 6, 36, .3);
1923
+ --wds-button-fill-destructive-secondary: #ffffff;
1924
+ --wds-button-fill-destructive-secondary-active: #b81206;
1925
+ --wds-button-fill-destructive-secondary-disabled: #ffffff;
1926
+ --wds-button-fill-destructive-secondary-hover: #d0180b;
1750
1927
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1751
1928
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1929
+ --wds-button-fill-premium-primary-disabled: rgba(0, 6, 36, .3);
1930
+ --wds-button-fill-premium-secondary: #ffffff;
1931
+ --wds-button-fill-premium-secondary-active: #7416a5;
1932
+ --wds-button-fill-premium-secondary-disabled: #ffffff;
1933
+ --wds-button-fill-premium-secondary-hover: #8e1dd1;
1752
1934
  --wds-button-fill-standard-primary: #116dff;
1753
1935
  --wds-button-fill-standard-primary-active: #084ebd;
1936
+ --wds-button-fill-standard-primary-disabled: rgba(0, 6, 36, .3);
1754
1937
  --wds-button-fill-standard-primary-hover: #0f62e6;
1755
1938
  --wds-button-fill-standard-secondary: #ffffff;
1756
1939
  --wds-button-fill-standard-secondary-active: linear-gradient(0deg, #084ebd 0%, #084ebd 100%);
1940
+ --wds-button-fill-standard-secondary-disabled: #ffffff;
1757
1941
  --wds-button-fill-standard-secondary-hover: #116dff;
1942
+ --wds-button-font-line-height-extra-large: 24px;
1758
1943
  --wds-button-font-line-height-large: 24px;
1759
1944
  --wds-button-font-line-height-medium: 24px;
1760
1945
  --wds-button-font-line-height-small: 18px;
@@ -1763,6 +1948,9 @@
1763
1948
  --wds-button-font-size-medium: 16px;
1764
1949
  --wds-button-font-size-small: 14px;
1765
1950
  --wds-button-font-size-tiny: 12px;
1951
+ --wds-button-font-weight-large: 500;
1952
+ --wds-button-font-weight-medium: 500;
1953
+ --wds-button-font-weight-small: 500;
1766
1954
  --wds-button-font-weight-tiny: 700;
1767
1955
  --wds-button-gap-large: 12px;
1768
1956
  --wds-button-gap-medium: 6px;
@@ -1772,9 +1960,27 @@
1772
1960
  --wds-button-icon-offset-medium: 12px;
1773
1961
  --wds-button-icon-offset-small: 12px;
1774
1962
  --wds-button-icon-offset-tiny: 12px;
1775
- --wds-button-label-fill-standard-secondary: #116dff;
1963
+ --wds-button-label-fill-dark-primary-disabled: rgba(255, 255, 255, .7);
1964
+ --wds-button-label-fill-dark-secondary: #000624;
1965
+ --wds-button-label-fill-dark-secondary-active: #ffffff;
1966
+ --wds-button-label-fill-dark-secondary-disabled: rgba(0, 6, 36, .3);
1967
+ --wds-button-label-fill-dark-secondary-hover: #ffffff;
1968
+ --wds-button-label-fill-destructive-primary-disabled: rgba(255, 255, 255, .7);
1969
+ --wds-button-label-fill-destructive-secondary: #e62214;
1970
+ --wds-button-label-fill-destructive-secondary-active: #ffffff;
1971
+ --wds-button-label-fill-destructive-secondary-disabled: rgba(0, 6, 36, .3);
1972
+ --wds-button-label-fill-destructive-secondary-hover: #ffffff;
1973
+ --wds-button-label-fill-premium-primary-disabled: rgba(255, 255, 255, .7);
1974
+ --wds-button-label-fill-premium-secondary: #9a27d5;
1975
+ --wds-button-label-fill-premium-secondary-active: #ffffff;
1976
+ --wds-button-label-fill-premium-secondary-disabled: rgba(0, 6, 36, .3);
1977
+ --wds-button-label-fill-premium-secondary-hover: #ffffff;
1978
+ --wds-button-label-fill-standard-primary-disabled: rgba(255, 255, 255, .7);
1979
+ --wds-button-label-fill-standard-secondary: #ffffff;
1980
+ --wds-button-label-fill-standard-secondary-active: #ffffff;
1981
+ --wds-button-label-fill-standard-secondary-disabled: rgba(0, 6, 36, .3);
1982
+ --wds-button-label-fill-standard-secondary-hover: #ffffff;
1776
1983
  --wds-button-label-fill-transparent-tertiary: #ffffff;
1777
- --wds-button-label-font-size-large: 16px;
1778
1984
  --wds-button-outline-hover: transparent;
1779
1985
  --wds-button-padding-horizontal-extra-large: 36px;
1780
1986
  --wds-button-padding-horizontal-large: 30px;
@@ -1877,6 +2083,7 @@
1877
2083
  --wds-color-black-200-transparent-70: rgba(68, 72, 95, .7);
1878
2084
  --wds-color-black-300: #595d70;
1879
2085
  --wds-color-black-300-transparent-0: rgba(134, 138, 165, 0.0000);
2086
+ --wds-color-black-300-transparent-20: rgba(134, 138, 165, 0.2000);
1880
2087
  --wds-color-black-300-transparent-50: rgba(134, 138, 165, 0.5000);
1881
2088
  --wds-color-black-300-transparent-60: rgba(134, 138, 165, 0.6000);
1882
2089
  --wds-color-black-300-transparent-70: rgba(134, 138, 165, 0.7000);
@@ -2468,27 +2675,117 @@
2468
2675
  --wds-gallery-item-padding-right-small: 18px;
2469
2676
  --wds-gallery-item-padding-vertical-medium: 18px;
2470
2677
  --wds-gallery-item-padding-vertical-small: 12px;
2678
+ --wds-icon-button-color-border-dark-secondary: #868aa5;
2679
+ --wds-icon-button-color-border-dark-secondary-active: #44485f;
2680
+ --wds-icon-button-color-border-dark-secondary-disabled: rgba(0, 6, 36, .1);
2681
+ --wds-icon-button-color-border-dark-secondary-hover: #44485f;
2682
+ --wds-icon-button-color-border-light-secondary: rgba(255, 255, 255, .5);
2683
+ --wds-icon-button-color-border-light-secondary-active: #ffffff;
2684
+ --wds-icon-button-color-border-light-secondary-disabled: rgba(255, 255, 255, .3);
2685
+ --wds-icon-button-color-border-light-secondary-hover: rgba(255, 255, 255, .7);
2686
+ --wds-icon-button-color-border-premium-secondary: #e3c3f4;
2687
+ --wds-icon-button-color-border-premium-secondary-active: #9a27d5;
2688
+ --wds-icon-button-color-border-premium-secondary-disabled: rgba(0, 6, 36, .1);
2471
2689
  --wds-icon-button-color-border-standard-secondary: #d6e6fe;
2472
- --wds-icon-button-color-border-standard-secondary-active: #5999ff;
2473
- --wds-icon-button-color-border-standard-secondary-hover: #0f62e6;
2690
+ --wds-icon-button-color-border-standard-secondary-active: #116dff;
2691
+ --wds-icon-button-color-border-standard-secondary-disabled: rgba(0, 6, 36, .1);
2692
+ --wds-icon-button-color-border-standard-secondary-hover: #a8caff;
2693
+ --wds-icon-button-color-fill-dark-primary: #000624;
2694
+ --wds-icon-button-color-fill-dark-primary-active: #000624;
2695
+ --wds-icon-button-color-fill-dark-primary-disabled: rgba(0, 6, 36, .3);
2696
+ --wds-icon-button-color-fill-dark-primary-hover: #44485f;
2697
+ --wds-icon-button-color-fill-dark-secondary: rgba(255, 255, 255, 0);
2698
+ --wds-icon-button-color-fill-dark-secondary-active: #000624;
2699
+ --wds-icon-button-color-fill-dark-secondary-disabled: rgba(255, 255, 255, 0);
2700
+ --wds-icon-button-color-fill-dark-secondary-hover: #44485f;
2701
+ --wds-icon-button-color-fill-dark-tertiary: rgba(255, 255, 255, 0);
2702
+ --wds-icon-button-color-fill-dark-tertiary-active: #cfd1dc;
2703
+ --wds-icon-button-color-fill-dark-tertiary-disabled: rgba(255, 255, 255, 0);
2704
+ --wds-icon-button-color-fill-dark-tertiary-hover: #dfe5eb;
2705
+ --wds-icon-button-color-fill-light-primary: #ffffff;
2706
+ --wds-icon-button-color-fill-light-primary-active: #d6e6fe;
2707
+ --wds-icon-button-color-fill-light-primary-disabled: rgba(255, 255, 255, .3);
2708
+ --wds-icon-button-color-fill-light-primary-hover: #e7f0ff;
2709
+ --wds-icon-button-color-fill-light-secondary: rgba(255, 255, 255, 0);
2710
+ --wds-icon-button-color-fill-light-secondary-active: #d6e6fe;
2711
+ --wds-icon-button-color-fill-light-secondary-disabled: rgba(255, 255, 255, 0);
2712
+ --wds-icon-button-color-fill-light-secondary-hover: #e7f0ff;
2713
+ --wds-icon-button-color-fill-light-tertiary: rgba(255, 255, 255, 0);
2714
+ --wds-icon-button-color-fill-light-tertiary-active: #d6e6fe;
2715
+ --wds-icon-button-color-fill-light-tertiary-disabled: rgba(255, 255, 255, 0);
2716
+ --wds-icon-button-color-fill-light-tertiary-hover: #e7f0ff;
2717
+ --wds-icon-button-color-fill-premium-primary: #9a27d5;
2718
+ --wds-icon-button-color-fill-premium-primary-active: #7416a5;
2719
+ --wds-icon-button-color-fill-premium-primary-disabled: rgba(0, 6, 36, .3);
2720
+ --wds-icon-button-color-fill-premium-primary-hover: #8e1dd1;
2721
+ --wds-icon-button-color-fill-premium-secondary: #ffffff;
2722
+ --wds-icon-button-color-fill-premium-secondary-active: #7416a5;
2723
+ --wds-icon-button-color-fill-premium-secondary-disabled: #ffffff;
2724
+ --wds-icon-button-color-fill-premium-secondary-hover: #8e1dd1;
2725
+ --wds-icon-button-color-fill-premium-tertiary: rgba(255, 255, 255, 0);
2726
+ --wds-icon-button-color-fill-premium-tertiary-active: #e3c3f4;
2727
+ --wds-icon-button-color-fill-premium-tertiary-disabled: rgba(255, 255, 255, 0);
2728
+ --wds-icon-button-color-fill-premium-tertiary-hover: #f1e0f9;
2474
2729
  --wds-icon-button-color-fill-standard-primary: #116dff;
2475
2730
  --wds-icon-button-color-fill-standard-primary-active: #084ebd;
2731
+ --wds-icon-button-color-fill-standard-primary-disabled: rgba(0, 6, 36, .3);
2476
2732
  --wds-icon-button-color-fill-standard-primary-hover: #0f62e6;
2477
2733
  --wds-icon-button-color-fill-standard-secondary: #ffffff;
2478
- --wds-icon-button-color-fill-standard-secondary-active: #5999ff;
2734
+ --wds-icon-button-color-fill-standard-secondary-active: #084ebd;
2735
+ --wds-icon-button-color-fill-standard-secondary-disabled: #ffffff;
2479
2736
  --wds-icon-button-color-fill-standard-secondary-hover: #0f62e6;
2480
- --wds-icon-button-color-fill-standard-tertiary: #ffffff;
2481
- --wds-icon-button-color-fill-standard-tertiary-active: #ffffff;
2482
- --wds-icon-button-color-fill-standard-tertiary-hover: #ffffff;
2737
+ --wds-icon-button-color-fill-standard-tertiary: rgba(255, 255, 255, 0);
2738
+ --wds-icon-button-color-fill-standard-tertiary-active: #d6e6fe;
2739
+ --wds-icon-button-color-fill-standard-tertiary-disabled: rgba(255, 255, 255, 0);
2740
+ --wds-icon-button-color-fill-standard-tertiary-hover: #e7f0ff;
2741
+ --wds-icon-button-color-text-dark-primary: #ffffff;
2742
+ --wds-icon-button-color-text-dark-primary-active: #ffffff;
2743
+ --wds-icon-button-color-text-dark-primary-disabled: rgba(255, 255, 255, .7);
2744
+ --wds-icon-button-color-text-dark-primary-hover: #ffffff;
2745
+ --wds-icon-button-color-text-dark-secondary: #000624;
2746
+ --wds-icon-button-color-text-dark-secondary-active: #ffffff;
2747
+ --wds-icon-button-color-text-dark-secondary-disabled: rgba(0, 6, 36, .3);
2748
+ --wds-icon-button-color-text-dark-secondary-hover: #ffffff;
2749
+ --wds-icon-button-color-text-dark-tertiary: #000624;
2750
+ --wds-icon-button-color-text-dark-tertiary-active: #000624;
2751
+ --wds-icon-button-color-text-dark-tertiary-disabled: rgba(0, 6, 36, .3);
2752
+ --wds-icon-button-color-text-dark-tertiary-hover: #000624;
2753
+ --wds-icon-button-color-text-light-primary: #116dff;
2754
+ --wds-icon-button-color-text-light-primary-active: #116dff;
2755
+ --wds-icon-button-color-text-light-primary-disabled: rgba(0, 6, 36, .3);
2756
+ --wds-icon-button-color-text-light-primary-hover: #116dff;
2757
+ --wds-icon-button-color-text-light-secondary: #ffffff;
2758
+ --wds-icon-button-color-text-light-secondary-active: #116dff;
2759
+ --wds-icon-button-color-text-light-secondary-disabled: rgba(0, 6, 36, .3);
2760
+ --wds-icon-button-color-text-light-secondary-hover: #116dff;
2761
+ --wds-icon-button-color-text-light-tertiary: #ffffff;
2762
+ --wds-icon-button-color-text-light-tertiary-active: #116dff;
2763
+ --wds-icon-button-color-text-light-tertiary-disabled: rgba(255, 255, 255, .7);
2764
+ --wds-icon-button-color-text-light-tertiary-hover: #116dff;
2765
+ --wds-icon-button-color-text-premium-primary: #ffffff;
2766
+ --wds-icon-button-color-text-premium-primary-active: #ffffff;
2767
+ --wds-icon-button-color-text-premium-primary-disabled: rgba(255, 255, 255, .7);
2768
+ --wds-icon-button-color-text-premium-primary-hover: #ffffff;
2769
+ --wds-icon-button-color-text-premium-secondary: #9a27d5;
2770
+ --wds-icon-button-color-text-premium-secondary-active: #ffffff;
2771
+ --wds-icon-button-color-text-premium-secondary-disabled: rgba(0, 6, 36, .3);
2772
+ --wds-icon-button-color-text-premium-secondary-hover: #ffffff;
2773
+ --wds-icon-button-color-text-premium-tertiary: #9a27d5;
2774
+ --wds-icon-button-color-text-premium-tertiary-active: #9a27d5;
2775
+ --wds-icon-button-color-text-premium-tertiary-disabled: rgba(0, 6, 36, .3);
2776
+ --wds-icon-button-color-text-premium-tertiary-hover: #9a27d5;
2483
2777
  --wds-icon-button-color-text-standard-primary: #ffffff;
2484
2778
  --wds-icon-button-color-text-standard-primary-active: #ffffff;
2779
+ --wds-icon-button-color-text-standard-primary-disabled: rgba(255, 255, 255, .7);
2485
2780
  --wds-icon-button-color-text-standard-primary-hover: #ffffff;
2486
2781
  --wds-icon-button-color-text-standard-secondary: #116dff;
2487
2782
  --wds-icon-button-color-text-standard-secondary-active: #ffffff;
2783
+ --wds-icon-button-color-text-standard-secondary-disabled: rgba(0, 6, 36, .3);
2488
2784
  --wds-icon-button-color-text-standard-secondary-hover: #ffffff;
2489
2785
  --wds-icon-button-color-text-standard-tertiary: #116dff;
2490
- --wds-icon-button-color-text-standard-tertiary-active: #084ebd;
2491
- --wds-icon-button-color-text-standard-tertiary-hover: #0f62e6;
2786
+ --wds-icon-button-color-text-standard-tertiary-active: #116dff;
2787
+ --wds-icon-button-color-text-standard-tertiary-disabled: rgba(0, 6, 36, .3);
2788
+ --wds-icon-button-color-text-standard-tertiary-hover: #116dff;
2492
2789
  --wds-image-border-radius-default: 8px;
2493
2790
  --wds-image-border-radius-none: 0;
2494
2791
  --wds-info-icon-fill: #116dff;
@@ -2840,6 +3137,7 @@
2840
3137
  --wds-shadow-blur-400: 24px;
2841
3138
  --wds-shadow-blur-500: 24px;
2842
3139
  --wds-shadow-blur-800: 36px;
3140
+ --wds-shadow-blur-input: 0;
2843
3141
  --wds-shadow-blur-primary-modal: 24px;
2844
3142
  --wds-shadow-blur-primary-overlay: 18px;
2845
3143
  --wds-shadow-blur-primary-overlay-dark: 18px;
@@ -2850,6 +3148,7 @@
2850
3148
  --wds-shadow-blur-secondary-overlay-dark: 6px;
2851
3149
  --wds-shadow-blur-secondary-raised: 4px;
2852
3150
  --wds-shadow-blur-secondary-toggle: 1px;
3151
+ --wds-shadow-fill-input: rgba(0, 6, 36, 0);
2853
3152
  --wds-shadow-fill-primary-modal: rgba(0, 6, 36, .2);
2854
3153
  --wds-shadow-fill-primary-overlay: rgba(0, 6, 36, .1);
2855
3154
  --wds-shadow-fill-primary-overlay-dark: rgba(0, 6, 36, .1);
@@ -2893,6 +3192,7 @@
2893
3192
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2894
3193
  --wds-shadow-x-0: 0;
2895
3194
  --wds-shadow-x-25: 2px;
3195
+ --wds-shadow-x-input: 0;
2896
3196
  --wds-shadow-x-secondary-raised: 0;
2897
3197
  --wds-shadow-y-0: 0;
2898
3198
  --wds-shadow-y-25: 2px;
@@ -2902,6 +3202,7 @@
2902
3202
  --wds-shadow-y-200: 9px;
2903
3203
  --wds-shadow-y-300: 12px;
2904
3204
  --wds-shadow-y-350: 3px;
3205
+ --wds-shadow-y-input: 0;
2905
3206
  --wds-shadow-y-primary-modal: 3px;
2906
3207
  --wds-shadow-y-primary-overlay: 0;
2907
3208
  --wds-shadow-y-primary-overlay-dark: 0;
@@ -3004,9 +3305,10 @@
3004
3305
  --wds-slider-slider-knob-border-width: 4px;
3005
3306
  --wds-slider-slider-knob-border-width-hover: 12px;
3006
3307
  --wds-slider-slider-knob-color: #116dff;
3007
- --wds-slider-slider-knob-color-hover: #116dff;
3308
+ --wds-slider-slider-knob-color-disabled: #acafc4;
3309
+ --wds-slider-slider-knob-color-hover: #0f62e6;
3008
3310
  --wds-slider-slider-knob-shadow: false;
3009
- --wds-slider-slider-knob-size: 12px;
3311
+ --wds-slider-slider-knob-size: 4px;
3010
3312
  --wds-slider-slider-knob-size-hover: 18px;
3011
3313
  --wds-slider-slider-knob-size-transparent: 16px;
3012
3314
  --wds-slider-slider-mark-size: 6px;
@@ -3063,10 +3365,12 @@
3063
3365
  --wds-space-padding-vertical-x-tiny: 6px;
3064
3366
  --wds-space-padding-vertical-xx-tiny: 3px;
3065
3367
  --wds-space-viewport-spacing: 48px;
3368
+ --wds-status-toast-horizontal-padding: 12px;
3066
3369
  --wds-status-toast-info-icon-fill: #ffffff;
3067
3370
  --wds-status-toast-text-fill: #ffffff;
3068
3371
  --wds-status-toast-text-font-line-height: 24px;
3069
3372
  --wds-status-toast-text-font-size: 16px;
3373
+ --wds-status-toast-vertical-padding: 9px;
3070
3374
  --wds-status-toast-width: 600px;
3071
3375
  --wds-stepper-prefix-size-circle: 30px;
3072
3376
  --wds-stepper-prefix-size-number: 24px;