@wix/design-system-tokens 1.123.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 (23) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +68 -19
  3. package/all.scss +68 -19
  4. package/all.st.css +134 -36
  5. package/component.st.css +132 -36
  6. package/foundation.st.css +2 -0
  7. package/odeditor/all.css +93 -20
  8. package/odeditor/all.scss +93 -20
  9. package/odeditor/all.st.css +166 -20
  10. package/odeditor/component.st.css +164 -20
  11. package/odeditor/foundation.st.css +2 -0
  12. package/package.json +3 -3
  13. package/studio/all.css +69 -28
  14. package/studio/all.scss +69 -28
  15. package/studio/all.st.css +136 -54
  16. package/studio/component.st.css +134 -54
  17. package/studio/foundation.st.css +2 -0
  18. package/wixel/all.css +76 -35
  19. package/wixel/all.scss +76 -35
  20. package/wixel/all.st.css +347 -265
  21. package/wixel/component.st.css +289 -209
  22. package/wixel/foundation.st.css +11 -9
  23. package/wixel/semantic.st.css +47 -47
package/component.st.css CHANGED
@@ -968,10 +968,25 @@
968
968
  @property st-global(--wds-timeline-title-font-line-height);
969
969
  @property st-global(--wds-timeline-title-font-size);
970
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);
971
980
  @property st-global(--wds-toggle-button-border-radius-square-large);
972
981
  @property st-global(--wds-toggle-button-border-radius-square-medium);
973
982
  @property st-global(--wds-toggle-button-border-radius-square-small);
974
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);
975
990
  @property st-global(--wds-toggle-button-fill-inverted);
976
991
  @property st-global(--wds-toggle-button-fill-inverted-disabled);
977
992
  @property st-global(--wds-toggle-button-fill-inverted-hover);
@@ -984,39 +999,72 @@
984
999
  @property st-global(--wds-toggle-button-fill-standard-selected);
985
1000
  @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
986
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);
987
1022
  @property st-global(--wds-toggle-button-label-fill-standard-default);
988
1023
  @property st-global(--wds-toggle-button-label-fill-standard-disabled);
989
1024
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
990
1025
  @property st-global(--wds-toggle-button-label-fill-standard-selected);
991
1026
  @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
992
- @property st-global(--wds-toggle-button-label-font-line-height-pill-small);
993
- @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);
994
1029
  @property st-global(--wds-toggle-button-label-font-size-square-large);
995
1030
  @property st-global(--wds-toggle-button-label-font-size-square-medium);
996
1031
  @property st-global(--wds-toggle-button-label-font-size-square-small);
997
1032
  @property st-global(--wds-toggle-button-label-font-size-square-tiny);
998
1033
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1034
+ @property st-global(--wds-toggle-button-label-font-weight-round);
999
1035
  @property st-global(--wds-toggle-button-label-font-weight-square);
1000
1036
  @property st-global(--wds-toggle-button-padding-large);
1001
- @property st-global(--wds-toggle-button-padding-left-large);
1002
- @property st-global(--wds-toggle-button-padding-left-large-round);
1003
- @property st-global(--wds-toggle-button-padding-left-medium);
1004
- @property st-global(--wds-toggle-button-padding-left-medium-round);
1005
- @property st-global(--wds-toggle-button-padding-left-small);
1006
- @property st-global(--wds-toggle-button-padding-left-small-round);
1007
- @property st-global(--wds-toggle-button-padding-left-tiny);
1008
- @property st-global(--wds-toggle-button-padding-left-tiny-round);
1037
+ @property st-global(--wds-toggle-button-padding-large-round);
1009
1038
  @property st-global(--wds-toggle-button-padding-medium);
1010
- @property st-global(--wds-toggle-button-padding-right-large);
1011
- @property st-global(--wds-toggle-button-padding-right-large-round);
1012
- @property st-global(--wds-toggle-button-padding-right-medium);
1013
- @property st-global(--wds-toggle-button-padding-right-medium-round);
1014
- @property st-global(--wds-toggle-button-padding-right-small);
1015
- @property st-global(--wds-toggle-button-padding-right-small-round);
1016
- @property st-global(--wds-toggle-button-padding-right-tiny);
1017
- @property st-global(--wds-toggle-button-padding-right-tiny-round);
1039
+ @property st-global(--wds-toggle-button-padding-medium-round);
1018
1040
  @property st-global(--wds-toggle-button-padding-small);
1041
+ @property st-global(--wds-toggle-button-padding-small-round);
1019
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);
1020
1068
  @property st-global(--wds-toggle-switch-border-error-disabled);
1021
1069
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1022
1070
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -2104,10 +2152,25 @@
2104
2152
  --wds-timeline-title-font-line-height: 18px;
2105
2153
  --wds-timeline-title-font-size: 14px;
2106
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;
2107
2164
  --wds-toggle-button-border-radius-square-large: 6px;
2108
2165
  --wds-toggle-button-border-radius-square-medium: 6px;
2109
2166
  --wds-toggle-button-border-radius-square-small: 4px;
2110
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;
2111
2174
  --wds-toggle-button-fill-inverted: #ffffff;
2112
2175
  --wds-toggle-button-fill-inverted-disabled: #ffffff;
2113
2176
  --wds-toggle-button-fill-inverted-hover: #e7f0ff;
@@ -2120,39 +2183,72 @@
2120
2183
  --wds-toggle-button-fill-standard-selected: #d6e6fe;
2121
2184
  --wds-toggle-button-fill-standard-selected-disabled: rgba(0, 6, 36, .3);
2122
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;
2123
2206
  --wds-toggle-button-label-fill-standard-default: #000624;
2124
2207
  --wds-toggle-button-label-fill-standard-disabled: rgba(0, 6, 36, .3);
2125
2208
  --wds-toggle-button-label-fill-standard-hover: #116dff;
2126
2209
  --wds-toggle-button-label-fill-standard-selected: #116dff;
2127
2210
  --wds-toggle-button-label-fill-standard-selected-disabled: rgba(255, 255, 255, .7);
2128
- --wds-toggle-button-label-font-line-height-pill-small: 18px;
2129
- --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;
2130
2213
  --wds-toggle-button-label-font-size-square-large: 12px;
2131
2214
  --wds-toggle-button-label-font-size-square-medium: 12px;
2132
2215
  --wds-toggle-button-label-font-size-square-small: 12px;
2133
2216
  --wds-toggle-button-label-font-size-square-tiny: 12px;
2134
2217
  --wds-toggle-button-label-font-weight-pill: 400;
2218
+ --wds-toggle-button-label-font-weight-round: 400;
2135
2219
  --wds-toggle-button-label-font-weight-square: 400;
2136
2220
  --wds-toggle-button-padding-large: 18px;
2137
- --wds-toggle-button-padding-left-large: 9px;
2138
- --wds-toggle-button-padding-left-large-round: 12px;
2139
- --wds-toggle-button-padding-left-medium: 6px;
2140
- --wds-toggle-button-padding-left-medium-round: 12px;
2141
- --wds-toggle-button-padding-left-small: 6px;
2142
- --wds-toggle-button-padding-left-small-round: 12px;
2143
- --wds-toggle-button-padding-left-tiny: 3px;
2144
- --wds-toggle-button-padding-left-tiny-round: 6px;
2221
+ --wds-toggle-button-padding-large-round: 30px;
2145
2222
  --wds-toggle-button-padding-medium: 12px;
2146
- --wds-toggle-button-padding-right-large: 18px;
2147
- --wds-toggle-button-padding-right-large-round: 30px;
2148
- --wds-toggle-button-padding-right-medium: 12px;
2149
- --wds-toggle-button-padding-right-medium-round: 24px;
2150
- --wds-toggle-button-padding-right-small: 12px;
2151
- --wds-toggle-button-padding-right-small-round: 18px;
2152
- --wds-toggle-button-padding-right-tiny: 6px;
2153
- --wds-toggle-button-padding-right-tiny-round: 12px;
2223
+ --wds-toggle-button-padding-medium-round: 24px;
2154
2224
  --wds-toggle-button-padding-small: 12px;
2225
+ --wds-toggle-button-padding-small-round: 18px;
2155
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;
2156
2252
  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
2157
2253
  --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
2158
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);
package/odeditor/all.scss CHANGED
@@ -7,6 +7,21 @@
7
7
  --wds-toggle-switch-knob-size-medium: 14px;
8
8
  --wds-toggle-switch-knob-size-large: 20px;
9
9
  --wds-toggle-switch-icon: false;
10
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
11
+ --wds-toggle-button-shadow-y-tertiary: 0.4px;
12
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
13
+ --wds-toggle-button-shadow-y-secondary: 1.2px;
14
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
15
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
16
+ --wds-toggle-button-shadow-x-tertiary: 0.4px;
17
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
18
+ --wds-toggle-button-shadow-x-secondary: 1.2px;
19
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
20
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
21
+ --wds-toggle-button-shadow-blur-tertiary: 0.6px;
22
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
23
+ --wds-toggle-button-shadow-blur-secondary: 1.7px;
24
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
10
25
  --wds-thumbnail-checkmark: true;
11
26
  --wds-tabs-selection-height: 3px;
12
27
  --wds-swatches-swatch-active-border-radius-small: 5px;
@@ -289,6 +304,7 @@
289
304
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
290
305
  --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
291
306
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
307
+ --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
292
308
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
293
309
  --wds-color-black-100-transparent-15: rgba(19, 23, 32, .15);
294
310
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
@@ -369,21 +385,68 @@
369
385
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
370
386
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
371
387
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
388
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-100);
389
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-25);
390
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-10);
391
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-25);
392
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-300-transparent-20);
393
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-15);
394
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-5);
395
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-5);
396
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-50);
372
397
  --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
373
- --wds-toggle-button-padding-tiny: var(--wds-space-150);
398
+ --wds-toggle-button-padding-tiny: var(--wds-space-300);
374
399
  --wds-toggle-button-padding-small-round: var(--wds-space-400);
375
- --wds-toggle-button-padding-small: var(--wds-space-300);
376
- --wds-toggle-button-padding-medium-round: var(--wds-space-400);
377
- --wds-toggle-button-padding-medium: var(--wds-space-300);
378
- --wds-toggle-button-padding-large-round: var(--wds-space-400);
379
- --wds-toggle-button-padding-large: var(--wds-space-400);
380
- --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
381
- --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
400
+ --wds-toggle-button-padding-small: var(--wds-space-400);
401
+ --wds-toggle-button-padding-medium-round: var(--wds-space-500);
402
+ --wds-toggle-button-padding-medium: var(--wds-space-500);
403
+ --wds-toggle-button-padding-large-round: var(--wds-space-600);
404
+ --wds-toggle-button-padding-large: var(--wds-space-600);
405
+ --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-semi-bold);
406
+ --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-semi-bold);
382
407
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-semi-bold);
383
- --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
384
- --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-0);
385
- --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-0);
386
- --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-0);
408
+ --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-black-500);
409
+ --wds-toggle-button-label-fill-standard-hover: var(--wds-color-blue-50);
410
+ --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-black-500);
411
+ --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-black-500);
412
+ --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-black-500);
413
+ --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-black-500);
414
+ --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-black-500);
415
+ --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-25);
416
+ --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-25);
417
+ --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-25);
418
+ --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
419
+ --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white);
420
+ --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white);
421
+ --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
422
+ --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
423
+ --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
424
+ --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
425
+ --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
426
+ --wds-toggle-button-fill-standard-hover: var(--wds-color-black-100-transparent-0);
427
+ --wds-toggle-button-fill-standard-disabled: var(--wds-color-black-100-transparent-0);
428
+ --wds-toggle-button-fill-standard: var(--wds-color-black-100-transparent-0);
429
+ --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-black-700);
430
+ --wds-toggle-button-fill-inverted-disabled: var(--wds-color-black-100-transparent-0);
431
+ --wds-toggle-button-fill-inverted: var(--wds-color-black-100-transparent-0);
432
+ --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-black-500);
433
+ --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-black-700);
434
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-black-550);
435
+ --wds-toggle-button-fill-dark-disabled: var(--wds-color-black-100-transparent-0);
436
+ --wds-toggle-button-fill-dark: var(--wds-color-black-100-transparent-0);
437
+ --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-400);
438
+ --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-400);
439
+ --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-400);
440
+ --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-400);
441
+ --wds-toggle-button-border-color-standard-hover: var(--wds-color-blue-300);
442
+ --wds-toggle-button-border-color-standard-disabled: var(--wds-color-white-transparent-0);
443
+ --wds-toggle-button-border-color-standard: var(--wds-color-white-transparent-0);
444
+ --wds-toggle-button-border-color-inverted-hover: var(--wds-color-white-transparent-0);
445
+ --wds-toggle-button-border-color-inverted-disabled: var(--wds-color-white-transparent-0);
446
+ --wds-toggle-button-border-color-inverted: var(--wds-color-white-transparent-0);
447
+ --wds-toggle-button-border-color-dark-hover: var(--wds-color-white-transparent-0);
448
+ --wds-toggle-button-border-color-dark-disabled: var(--wds-color-white-transparent-0);
449
+ --wds-toggle-button-border-color-dark: var(--wds-color-white-transparent-0);
387
450
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
388
451
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
389
452
  --wds-thumbnail-illustration-fill-3: var(--wds-color-blue-500);
@@ -1401,15 +1464,25 @@
1401
1464
  --wds-toggle-switch-fill-error-active-hover: var(--wds-color-fill-destructive-primary-hover);
1402
1465
  --wds-toggle-switch-fill-error-active: var(--wds-color-fill-destructive-primary);
1403
1466
  --wds-toggle-switch-fill-error: var(--wds-color-fill-dark-primary);
1467
+ --wds-toggle-button-label-font-size-square-tiny: var(--wds-font-size-body-tiny);
1468
+ --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1469
+ --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1470
+ --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1404
1471
  --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1405
- --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1406
- --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
1407
- --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-standard-primary-hover);
1408
- --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
1409
- --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-standard-primary);
1410
- --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1411
- --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1412
- --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1472
+ --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1473
+ --wds-toggle-button-label-fill-standard: var(--wds-color-text-standard-primary);
1474
+ --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1475
+ --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
1476
+ --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1477
+ --wds-toggle-button-label-fill-inverted: var(--wds-color-text-standard-primary);
1478
+ --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary);
1479
+ --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary);
1480
+ --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-primary);
1481
+ --wds-toggle-button-label-fill-dark-default: var(--wds-color-text-standard-primary);
1482
+ --wds-toggle-button-fill-inverted-selected-hover: var(--wds-color-fill-dark-tertiary-hover);
1483
+ --wds-toggle-button-fill-inverted-selected: var(--wds-color-fill-dark-tertiary);
1484
+ --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-dark-secondary-hover);
1485
+ --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-dark-secondary-hover);
1413
1486
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1414
1487
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
1415
1488
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);