@wix/design-system-tokens 1.122.0 → 1.124.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 (24) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +16 -0
  3. package/all.css +71 -19
  4. package/all.scss +81 -21
  5. package/all.st.css +140 -36
  6. package/component.st.css +138 -36
  7. package/foundation.st.css +2 -0
  8. package/odeditor/all.css +98 -22
  9. package/odeditor/all.scss +119 -34
  10. package/odeditor/all.st.css +174 -22
  11. package/odeditor/component.st.css +172 -22
  12. package/odeditor/foundation.st.css +2 -0
  13. package/package.json +4 -4
  14. package/studio/all.css +74 -30
  15. package/studio/all.scss +84 -32
  16. package/studio/all.st.css +144 -56
  17. package/studio/component.st.css +142 -56
  18. package/studio/foundation.st.css +2 -0
  19. package/wixel/all.css +81 -37
  20. package/wixel/all.scss +91 -39
  21. package/wixel/all.st.css +354 -266
  22. package/wixel/component.st.css +296 -210
  23. package/wixel/foundation.st.css +11 -9
  24. package/wixel/semantic.st.css +47 -47
package/component.st.css CHANGED
@@ -202,7 +202,10 @@
202
202
  @property st-global(--wds-checkbox-group-gap-vertical);
203
203
  @property st-global(--wds-checkbox-icon);
204
204
  @property st-global(--wds-checkbox-icon-disabled);
205
+ @property st-global(--wds-checkbox-label-disabled);
206
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
205
207
  @property st-global(--wds-checkbox-label-font-line-height-small);
208
+ @property st-global(--wds-checkbox-label-font-size-medium);
206
209
  @property st-global(--wds-checkbox-label-font-size-small);
207
210
  @property st-global(--wds-circular-progress-bar-background-fill-error);
208
211
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -965,10 +968,25 @@
965
968
  @property st-global(--wds-timeline-title-font-line-height);
966
969
  @property st-global(--wds-timeline-title-font-size);
967
970
  @property st-global(--wds-toast-background-fill);
971
+ @property st-global(--wds-toggle-button-border-color-dark);
972
+ @property st-global(--wds-toggle-button-border-color-dark-disabled);
973
+ @property st-global(--wds-toggle-button-border-color-dark-hover);
974
+ @property st-global(--wds-toggle-button-border-color-inverted);
975
+ @property st-global(--wds-toggle-button-border-color-inverted-disabled);
976
+ @property st-global(--wds-toggle-button-border-color-inverted-hover);
977
+ @property st-global(--wds-toggle-button-border-color-standard);
978
+ @property st-global(--wds-toggle-button-border-color-standard-disabled);
979
+ @property st-global(--wds-toggle-button-border-color-standard-hover);
968
980
  @property st-global(--wds-toggle-button-border-radius-square-large);
969
981
  @property st-global(--wds-toggle-button-border-radius-square-medium);
970
982
  @property st-global(--wds-toggle-button-border-radius-square-small);
971
983
  @property st-global(--wds-toggle-button-border-radius-square-tiny);
984
+ @property st-global(--wds-toggle-button-fill-dark);
985
+ @property st-global(--wds-toggle-button-fill-dark-disabled);
986
+ @property st-global(--wds-toggle-button-fill-dark-hover);
987
+ @property st-global(--wds-toggle-button-fill-dark-selected);
988
+ @property st-global(--wds-toggle-button-fill-dark-selected-disabled);
989
+ @property st-global(--wds-toggle-button-fill-dark-selected-hover);
972
990
  @property st-global(--wds-toggle-button-fill-inverted);
973
991
  @property st-global(--wds-toggle-button-fill-inverted-disabled);
974
992
  @property st-global(--wds-toggle-button-fill-inverted-hover);
@@ -981,39 +999,72 @@
981
999
  @property st-global(--wds-toggle-button-fill-standard-selected);
982
1000
  @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
983
1001
  @property st-global(--wds-toggle-button-fill-standard-selected-hover);
1002
+ @property st-global(--wds-toggle-button-inner-shadow-blur-primary);
1003
+ @property st-global(--wds-toggle-button-inner-shadow-blur-secondary);
1004
+ @property st-global(--wds-toggle-button-inner-shadow-fill-primary);
1005
+ @property st-global(--wds-toggle-button-inner-shadow-fill-secondary);
1006
+ @property st-global(--wds-toggle-button-inner-shadow-x-primary);
1007
+ @property st-global(--wds-toggle-button-inner-shadow-x-secondary);
1008
+ @property st-global(--wds-toggle-button-inner-shadow-y-primary);
1009
+ @property st-global(--wds-toggle-button-inner-shadow-y-secondary);
1010
+ @property st-global(--wds-toggle-button-label-fill-dark-default);
1011
+ @property st-global(--wds-toggle-button-label-fill-dark-disabled);
1012
+ @property st-global(--wds-toggle-button-label-fill-dark-hover);
1013
+ @property st-global(--wds-toggle-button-label-fill-dark-selected);
1014
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-disabled);
1015
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-hover);
1016
+ @property st-global(--wds-toggle-button-label-fill-inverted-default);
1017
+ @property st-global(--wds-toggle-button-label-fill-inverted-disabled);
1018
+ @property st-global(--wds-toggle-button-label-fill-inverted-hover);
1019
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected);
1020
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-disabled);
1021
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-hover);
984
1022
  @property st-global(--wds-toggle-button-label-fill-standard-default);
985
1023
  @property st-global(--wds-toggle-button-label-fill-standard-disabled);
986
1024
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
987
1025
  @property st-global(--wds-toggle-button-label-fill-standard-selected);
988
1026
  @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
989
- @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
990
- @property st-global(--wds-toggle-button-label-font-size-pill-small);
1027
+ @property st-global(--wds-toggle-button-label-font-line-height-round-small);
1028
+ @property st-global(--wds-toggle-button-label-font-size-round-small);
991
1029
  @property st-global(--wds-toggle-button-label-font-size-square-large);
992
1030
  @property st-global(--wds-toggle-button-label-font-size-square-medium);
993
1031
  @property st-global(--wds-toggle-button-label-font-size-square-small);
994
1032
  @property st-global(--wds-toggle-button-label-font-size-square-tiny);
995
1033
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1034
+ @property st-global(--wds-toggle-button-label-font-weight-round);
996
1035
  @property st-global(--wds-toggle-button-label-font-weight-square);
997
1036
  @property st-global(--wds-toggle-button-padding-large);
998
- @property st-global(--wds-toggle-button-padding-left-large);
999
- @property st-global(--wds-toggle-button-padding-left-large-round);
1000
- @property st-global(--wds-toggle-button-padding-left-medium);
1001
- @property st-global(--wds-toggle-button-padding-left-medium-round);
1002
- @property st-global(--wds-toggle-button-padding-left-small);
1003
- @property st-global(--wds-toggle-button-padding-left-small-round);
1004
- @property st-global(--wds-toggle-button-padding-left-tiny);
1005
- @property st-global(--wds-toggle-button-padding-left-tiny-round);
1037
+ @property st-global(--wds-toggle-button-padding-large-round);
1006
1038
  @property st-global(--wds-toggle-button-padding-medium);
1007
- @property st-global(--wds-toggle-button-padding-right-large);
1008
- @property st-global(--wds-toggle-button-padding-right-large-round);
1009
- @property st-global(--wds-toggle-button-padding-right-medium);
1010
- @property st-global(--wds-toggle-button-padding-right-medium-round);
1011
- @property st-global(--wds-toggle-button-padding-right-small);
1012
- @property st-global(--wds-toggle-button-padding-right-small-round);
1013
- @property st-global(--wds-toggle-button-padding-right-tiny);
1014
- @property st-global(--wds-toggle-button-padding-right-tiny-round);
1039
+ @property st-global(--wds-toggle-button-padding-medium-round);
1015
1040
  @property st-global(--wds-toggle-button-padding-small);
1041
+ @property st-global(--wds-toggle-button-padding-small-round);
1016
1042
  @property st-global(--wds-toggle-button-padding-tiny);
1043
+ @property st-global(--wds-toggle-button-padding-tiny-round);
1044
+ @property st-global(--wds-toggle-button-shadow-blur-primary);
1045
+ @property st-global(--wds-toggle-button-shadow-blur-primary-inverted);
1046
+ @property st-global(--wds-toggle-button-shadow-blur-secondary);
1047
+ @property st-global(--wds-toggle-button-shadow-blur-secondary-inverted);
1048
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary);
1049
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary-inverted);
1050
+ @property st-global(--wds-toggle-button-shadow-fill-primary);
1051
+ @property st-global(--wds-toggle-button-shadow-fill-primary-inverted);
1052
+ @property st-global(--wds-toggle-button-shadow-fill-secondary);
1053
+ @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1054
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1055
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1056
+ @property st-global(--wds-toggle-button-shadow-x-primary);
1057
+ @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1058
+ @property st-global(--wds-toggle-button-shadow-x-secondary);
1059
+ @property st-global(--wds-toggle-button-shadow-x-secondary-inverted);
1060
+ @property st-global(--wds-toggle-button-shadow-x-tertiary);
1061
+ @property st-global(--wds-toggle-button-shadow-x-tertiary-inverted);
1062
+ @property st-global(--wds-toggle-button-shadow-y-primary);
1063
+ @property st-global(--wds-toggle-button-shadow-y-primary-inverted);
1064
+ @property st-global(--wds-toggle-button-shadow-y-secondary);
1065
+ @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1066
+ @property st-global(--wds-toggle-button-shadow-y-tertiary);
1067
+ @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1017
1068
  @property st-global(--wds-toggle-switch-border-error-disabled);
1018
1069
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1019
1070
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1335,7 +1386,10 @@
1335
1386
  --wds-checkbox-group-gap-vertical: 12px;
1336
1387
  --wds-checkbox-icon: #ffffff;
1337
1388
  --wds-checkbox-icon-disabled: rgba(0, 6, 36, .3);
1389
+ --wds-checkbox-label-disabled: #000624;
1390
+ --wds-checkbox-label-font-line-height-medium: 24px;
1338
1391
  --wds-checkbox-label-font-line-height-small: 18px;
1392
+ --wds-checkbox-label-font-size-medium: 16px;
1339
1393
  --wds-checkbox-label-font-size-small: 14px;
1340
1394
  --wds-circular-progress-bar-background-fill-error: #fbd0cd;
1341
1395
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
@@ -2098,10 +2152,25 @@
2098
2152
  --wds-timeline-title-font-line-height: 18px;
2099
2153
  --wds-timeline-title-font-size: 14px;
2100
2154
  --wds-toast-background-fill: #000624;
2155
+ --wds-toggle-button-border-color-dark: #dfe5eb;
2156
+ --wds-toggle-button-border-color-dark-disabled: rgba(0, 6, 36, .1);
2157
+ --wds-toggle-button-border-color-dark-hover: #d6e6fe;
2158
+ --wds-toggle-button-border-color-inverted: #dfe5eb;
2159
+ --wds-toggle-button-border-color-inverted-disabled: rgba(0, 6, 36, .1);
2160
+ --wds-toggle-button-border-color-inverted-hover: #d6e6fe;
2161
+ --wds-toggle-button-border-color-standard: #dfe5eb;
2162
+ --wds-toggle-button-border-color-standard-disabled: rgba(0, 6, 36, .1);
2163
+ --wds-toggle-button-border-color-standard-hover: #d6e6fe;
2101
2164
  --wds-toggle-button-border-radius-square-large: 6px;
2102
2165
  --wds-toggle-button-border-radius-square-medium: 6px;
2103
2166
  --wds-toggle-button-border-radius-square-small: 4px;
2104
2167
  --wds-toggle-button-border-radius-square-tiny: 4px;
2168
+ --wds-toggle-button-fill-dark: #ffffff;
2169
+ --wds-toggle-button-fill-dark-disabled: #ffffff;
2170
+ --wds-toggle-button-fill-dark-hover: #ffffff;
2171
+ --wds-toggle-button-fill-dark-selected: #000624;
2172
+ --wds-toggle-button-fill-dark-selected-disabled: rgba(0, 6, 36, .3);
2173
+ --wds-toggle-button-fill-dark-selected-hover: #44485f;
2105
2174
  --wds-toggle-button-fill-inverted: #ffffff;
2106
2175
  --wds-toggle-button-fill-inverted-disabled: #ffffff;
2107
2176
  --wds-toggle-button-fill-inverted-hover: #e7f0ff;
@@ -2114,39 +2183,72 @@
2114
2183
  --wds-toggle-button-fill-standard-selected: #d6e6fe;
2115
2184
  --wds-toggle-button-fill-standard-selected-disabled: rgba(0, 6, 36, .3);
2116
2185
  --wds-toggle-button-fill-standard-selected-hover: #a8caff;
2186
+ --wds-toggle-button-inner-shadow-blur-primary: 0;
2187
+ --wds-toggle-button-inner-shadow-blur-secondary: 0;
2188
+ --wds-toggle-button-inner-shadow-fill-primary: rgba(255, 255, 255, 0);
2189
+ --wds-toggle-button-inner-shadow-fill-secondary: rgba(255, 255, 255, 0);
2190
+ --wds-toggle-button-inner-shadow-x-primary: 0;
2191
+ --wds-toggle-button-inner-shadow-x-secondary: 0;
2192
+ --wds-toggle-button-inner-shadow-y-primary: 0;
2193
+ --wds-toggle-button-inner-shadow-y-secondary: 0;
2194
+ --wds-toggle-button-label-fill-dark-default: #000624;
2195
+ --wds-toggle-button-label-fill-dark-disabled: rgba(0, 6, 36, .3);
2196
+ --wds-toggle-button-label-fill-dark-hover: #44485f;
2197
+ --wds-toggle-button-label-fill-dark-selected: #ffffff;
2198
+ --wds-toggle-button-label-fill-dark-selected-disabled: rgba(255, 255, 255, .7);
2199
+ --wds-toggle-button-label-fill-dark-selected-hover: #ffffff;
2200
+ --wds-toggle-button-label-fill-inverted-default: #000624;
2201
+ --wds-toggle-button-label-fill-inverted-disabled: rgba(0, 6, 36, .3);
2202
+ --wds-toggle-button-label-fill-inverted-hover: #116dff;
2203
+ --wds-toggle-button-label-fill-inverted-selected: #ffffff;
2204
+ --wds-toggle-button-label-fill-inverted-selected-disabled: #ffffff;
2205
+ --wds-toggle-button-label-fill-inverted-selected-hover: #ffffff;
2117
2206
  --wds-toggle-button-label-fill-standard-default: #000624;
2118
2207
  --wds-toggle-button-label-fill-standard-disabled: rgba(0, 6, 36, .3);
2119
2208
  --wds-toggle-button-label-fill-standard-hover: #116dff;
2120
2209
  --wds-toggle-button-label-fill-standard-selected: #116dff;
2121
2210
  --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
2122
- --wds-toggle-button-label-font-line-height-pill-small: 18px;
2123
- --wds-toggle-button-label-font-size-pill-small: 14px;
2211
+ --wds-toggle-button-label-font-line-height-round-small: 18px;
2212
+ --wds-toggle-button-label-font-size-round-small: 14px;
2124
2213
  --wds-toggle-button-label-font-size-square-large: 12px;
2125
2214
  --wds-toggle-button-label-font-size-square-medium: 12px;
2126
2215
  --wds-toggle-button-label-font-size-square-small: 12px;
2127
2216
  --wds-toggle-button-label-font-size-square-tiny: 12px;
2128
2217
  --wds-toggle-button-label-font-weight-pill: 400;
2218
+ --wds-toggle-button-label-font-weight-round: 400;
2129
2219
  --wds-toggle-button-label-font-weight-square: 400;
2130
2220
  --wds-toggle-button-padding-large: 18px;
2131
- --wds-toggle-button-padding-left-large: 9px;
2132
- --wds-toggle-button-padding-left-large-round: 12px;
2133
- --wds-toggle-button-padding-left-medium: 6px;
2134
- --wds-toggle-button-padding-left-medium-round: 12px;
2135
- --wds-toggle-button-padding-left-small: 6px;
2136
- --wds-toggle-button-padding-left-small-round: 12px;
2137
- --wds-toggle-button-padding-left-tiny: 3px;
2138
- --wds-toggle-button-padding-left-tiny-round: 6px;
2221
+ --wds-toggle-button-padding-large-round: 30px;
2139
2222
  --wds-toggle-button-padding-medium: 12px;
2140
- --wds-toggle-button-padding-right-large: 18px;
2141
- --wds-toggle-button-padding-right-large-round: 30px;
2142
- --wds-toggle-button-padding-right-medium: 12px;
2143
- --wds-toggle-button-padding-right-medium-round: 24px;
2144
- --wds-toggle-button-padding-right-small: 12px;
2145
- --wds-toggle-button-padding-right-small-round: 18px;
2146
- --wds-toggle-button-padding-right-tiny: 6px;
2147
- --wds-toggle-button-padding-right-tiny-round: 12px;
2223
+ --wds-toggle-button-padding-medium-round: 24px;
2148
2224
  --wds-toggle-button-padding-small: 12px;
2225
+ --wds-toggle-button-padding-small-round: 18px;
2149
2226
  --wds-toggle-button-padding-tiny: 6px;
2227
+ --wds-toggle-button-padding-tiny-round: 12px;
2228
+ --wds-toggle-button-shadow-blur-primary: 0;
2229
+ --wds-toggle-button-shadow-blur-primary-inverted: 0;
2230
+ --wds-toggle-button-shadow-blur-secondary: 0;
2231
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0;
2232
+ --wds-toggle-button-shadow-blur-tertiary: 0;
2233
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 0;
2234
+ --wds-toggle-button-shadow-fill-primary: rgba(0, 6, 36, 0);
2235
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(0, 6, 36, 0);
2236
+ --wds-toggle-button-shadow-fill-secondary: rgba(0, 6, 36, 0);
2237
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(0, 6, 36, 0);
2238
+ --wds-toggle-button-shadow-fill-tertiary: rgba(0, 6, 36, 0);
2239
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(0, 6, 36, 0);
2240
+ --wds-toggle-button-shadow-x-primary: 0;
2241
+ --wds-toggle-button-shadow-x-primary-inverted: 0;
2242
+ --wds-toggle-button-shadow-x-secondary: 0;
2243
+ --wds-toggle-button-shadow-x-secondary-inverted: 0;
2244
+ --wds-toggle-button-shadow-x-tertiary: 0;
2245
+ --wds-toggle-button-shadow-x-tertiary-inverted: 0;
2246
+ --wds-toggle-button-shadow-y-primary: 0;
2247
+ --wds-toggle-button-shadow-y-primary-inverted: 0;
2248
+ --wds-toggle-button-shadow-y-secondary: 0;
2249
+ --wds-toggle-button-shadow-y-secondary-inverted: 0;
2250
+ --wds-toggle-button-shadow-y-tertiary: 0;
2251
+ --wds-toggle-button-shadow-y-tertiary-inverted: 0;
2150
2252
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
2151
2253
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
2152
2254
  --wds-toggle-switch-border-success-disabled: rgba(0, 6, 36, .1);
package/foundation.st.css CHANGED
@@ -29,6 +29,7 @@
29
29
  @property st-global(--wds-color-black-100-transparent-10);
30
30
  @property st-global(--wds-color-black-100-transparent-15);
31
31
  @property st-global(--wds-color-black-100-transparent-20);
32
+ @property st-global(--wds-color-black-100-transparent-25);
32
33
  @property st-global(--wds-color-black-100-transparent-30);
33
34
  @property st-global(--wds-color-black-100-transparent-40);
34
35
  @property st-global(--wds-color-black-100-transparent-50);
@@ -250,6 +251,7 @@
250
251
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
251
252
  --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
252
253
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
254
+ --wds-color-black-100-transparent-25: rgba(0, 6, 36, .25);
253
255
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
254
256
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
255
257
  --wds-color-black-100-transparent-50: rgba(0, 6, 36, .5);
package/odeditor/all.css CHANGED
@@ -227,6 +227,7 @@
227
227
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
228
228
  --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
229
229
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
230
+ --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
230
231
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
231
232
  --wds-color-black-100-transparent-15: rgba(19, 23, 32, .15);
232
233
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
@@ -274,6 +275,21 @@
274
275
  --wds-toggle-switch-knob-size-medium: 14px;
275
276
  --wds-toggle-switch-knob-size-large: 20px;
276
277
  --wds-toggle-switch-icon: false;
278
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
279
+ --wds-toggle-button-shadow-y-tertiary: 0.4px;
280
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
281
+ --wds-toggle-button-shadow-y-secondary: 1.2px;
282
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
283
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
284
+ --wds-toggle-button-shadow-x-tertiary: 0.4px;
285
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
286
+ --wds-toggle-button-shadow-x-secondary: 1.2px;
287
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
288
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
289
+ --wds-toggle-button-shadow-blur-tertiary: 0.6px;
290
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
291
+ --wds-toggle-button-shadow-blur-secondary: 1.7px;
292
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
277
293
  --wds-thumbnail-checkmark: true;
278
294
  --wds-tabs-selection-height: 3px;
279
295
  --wds-swatches-swatch-active-border-radius-small: 5px;
@@ -761,21 +777,68 @@
761
777
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
762
778
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
763
779
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
780
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-100);
781
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-25);
782
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-10);
783
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
784
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-300-transparent-20);
785
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-15);
786
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
787
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
788
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
764
789
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
765
- --wds-toggle-button-padding-tiny: var(--wds-space-150);
790
+ --wds-toggle-button-padding-tiny: var(--wds-space-300);
766
791
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
767
- --wds-toggle-button-padding-small: var(--wds-space-300);
768
- --wds-toggle-button-padding-medium-round: var(--wds-space-400);
769
- --wds-toggle-button-padding-medium: var(--wds-space-300);
770
- --wds-toggle-button-padding-large-round: var(--wds-space-400);
771
- --wds-toggle-button-padding-large: var(--wds-space-400);
772
- --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
773
- --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
792
+ --wds-toggle-button-padding-small: var(--wds-space-400);
793
+ --wds-toggle-button-padding-medium-round: var(--wds-space-500);
794
+ --wds-toggle-button-padding-medium: var(--wds-space-500);
795
+ --wds-toggle-button-padding-large-round: var(--wds-space-600);
796
+ --wds-toggle-button-padding-large: var(--wds-space-600);
797
+ --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-semi-bold);
798
+ --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-semi-bold);
774
799
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-semi-bold);
775
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
776
- --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-0);
777
- --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-0);
778
- --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-0);
800
+ --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-black-500);
801
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-blue-50);
802
+ --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-black-500);
803
+ --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-black-500);
804
+ --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
805
+ --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-black-500);
806
+ --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-black-500);
807
+ --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-25);
808
+ --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-25);
809
+ --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-25);
810
+ --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
811
+ --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white);
812
+ --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white);
813
+ --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
814
+ --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
815
+ --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
816
+ --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
817
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
818
+ --wds-toggle-button-fill-standard-hover: var(--wds-color-black-100-transparent-0);
819
+ --wds-toggle-button-fill-standard-disabled: var(--wds-color-black-100-transparent-0);
820
+ --wds-toggle-button-fill-standard: var(--wds-color-black-100-transparent-0);
821
+ --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-black-700);
822
+ --wds-toggle-button-fill-inverted-disabled: var(--wds-color-black-100-transparent-0);
823
+ --wds-toggle-button-fill-inverted: var(--wds-color-black-100-transparent-0);
824
+ --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-black-500);
825
+ --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-black-700);
826
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
827
+ --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
828
+ --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
829
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
830
+ --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
831
+ --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
832
+ --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
833
+ --wds-toggle-button-border-color-standard-hover: var(--wds-color-blue-300);
834
+ --wds-toggle-button-border-color-standard-disabled: var(--wds-color-white-transparent-0);
835
+ --wds-toggle-button-border-color-standard: var(--wds-color-white-transparent-0);
836
+ --wds-toggle-button-border-color-inverted-hover: var(--wds-color-white-transparent-0);
837
+ --wds-toggle-button-border-color-inverted-disabled: var(--wds-color-white-transparent-0);
838
+ --wds-toggle-button-border-color-inverted: var(--wds-color-white-transparent-0);
839
+ --wds-toggle-button-border-color-dark-hover: var(--wds-color-white-transparent-0);
840
+ --wds-toggle-button-border-color-dark-disabled: var(--wds-color-white-transparent-0);
841
+ --wds-toggle-button-border-color-dark: var(--wds-color-white-transparent-0);
779
842
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
780
843
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
781
844
  --wds-thumbnail-illustration-fill-3: var(--wds-color-blue-500);
@@ -1419,15 +1482,25 @@
1419
1482
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1420
1483
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1421
1484
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1485
+ --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1486
+ --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1487
+ --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1488
+ --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1422
1489
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1423
- --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1424
- --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1425
- --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1426
- --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1427
- --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1428
- --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1429
- --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1430
- --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1490
+ --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1491
+ --wds-toggle-button-label-fill-standard: var(--wds-color-text-standard-primary);
1492
+ --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1493
+ --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
1494
+ --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1495
+ --wds-toggle-button-label-fill-inverted: var(--wds-color-text-standard-primary);
1496
+ --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary);
1497
+ --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary);
1498
+ --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-primary);
1499
+ --wds-toggle-button-label-fill-dark-default: var(--wds-color-text-standard-primary);
1500
+ --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-dark-tertiary-hover);
1501
+ --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1502
+ --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1503
+ --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1431
1504
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1432
1505
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1433
1506
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1663,6 +1736,8 @@
1663
1736
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary-disabled);
1664
1737
  --wds-circular-progress-bar-background-fill-error: var(--wds-color-fill-destructive-secondary-disabled);
1665
1738
  --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1739
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-small);
1740
+ --wds-checkbox-label-disabled: var(--wds-color-text-disabled);
1666
1741
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1667
1742
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1668
1743
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary);
@@ -1673,7 +1748,7 @@
1673
1748
  --wds-checkbox-fill: var(--wds-color-fill-standard-tertiary);
1674
1749
  --wds-checkbox-border-hover: var(--wds-color-fill-standard-primary);
1675
1750
  --wds-checkbox-border-disabled: var(--wds-color-border-dark-primary-disabled);
1676
- --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1751
+ --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1677
1752
  --wds-checkbox-border: var(--wds-color-border-dark-primary);
1678
1753
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1679
1754
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
@@ -1794,7 +1869,8 @@
1794
1869
  --wds-field-set-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1795
1870
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1796
1871
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1797
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-extra-tiny);
1872
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1873
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
1798
1874
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
1799
1875
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
1800
1876
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);