@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/odeditor/component.st.css CHANGED
@@ -246,7 +246,10 @@
246
246
  @property st-global(--wds-checkbox-group-gap-vertical);
247
247
  @property st-global(--wds-checkbox-icon);
248
248
  @property st-global(--wds-checkbox-icon-disabled);
249
+ @property st-global(--wds-checkbox-label-disabled);
250
+ @property st-global(--wds-checkbox-label-font-line-height-medium);
249
251
  @property st-global(--wds-checkbox-label-font-line-height-small);
252
+ @property st-global(--wds-checkbox-label-font-size-medium);
250
253
  @property st-global(--wds-checkbox-label-font-size-small);
251
254
  @property st-global(--wds-circular-progress-bar-background-fill-error);
252
255
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
@@ -994,20 +997,68 @@
994
997
  @property st-global(--wds-thumbnail-title-padding-top);
995
998
  @property st-global(--wds-timeline-title-font-line-height);
996
999
  @property st-global(--wds-timeline-title-font-size);
1000
+ @property st-global(--wds-toggle-button-border-color-dark);
1001
+ @property st-global(--wds-toggle-button-border-color-dark-disabled);
1002
+ @property st-global(--wds-toggle-button-border-color-dark-hover);
1003
+ @property st-global(--wds-toggle-button-border-color-inverted);
1004
+ @property st-global(--wds-toggle-button-border-color-inverted-disabled);
1005
+ @property st-global(--wds-toggle-button-border-color-inverted-hover);
1006
+ @property st-global(--wds-toggle-button-border-color-standard);
1007
+ @property st-global(--wds-toggle-button-border-color-standard-disabled);
1008
+ @property st-global(--wds-toggle-button-border-color-standard-hover);
997
1009
  @property st-global(--wds-toggle-button-border-radius-square-large);
998
1010
  @property st-global(--wds-toggle-button-border-radius-square-medium);
999
1011
  @property st-global(--wds-toggle-button-border-radius-square-small);
1000
1012
  @property st-global(--wds-toggle-button-border-radius-square-tiny);
1013
+ @property st-global(--wds-toggle-button-fill-dark);
1014
+ @property st-global(--wds-toggle-button-fill-dark-disabled);
1015
+ @property st-global(--wds-toggle-button-fill-dark-hover);
1016
+ @property st-global(--wds-toggle-button-fill-dark-selected);
1017
+ @property st-global(--wds-toggle-button-fill-dark-selected-disabled);
1018
+ @property st-global(--wds-toggle-button-fill-dark-selected-hover);
1001
1019
  @property st-global(--wds-toggle-button-fill-inverted);
1002
1020
  @property st-global(--wds-toggle-button-fill-inverted-disabled);
1003
1021
  @property st-global(--wds-toggle-button-fill-inverted-hover);
1004
1022
  @property st-global(--wds-toggle-button-fill-inverted-selected);
1005
1023
  @property st-global(--wds-toggle-button-fill-inverted-selected-disabled);
1006
1024
  @property st-global(--wds-toggle-button-fill-inverted-selected-hover);
1025
+ @property st-global(--wds-toggle-button-fill-standard);
1026
+ @property st-global(--wds-toggle-button-fill-standard-disabled);
1007
1027
  @property st-global(--wds-toggle-button-fill-standard-hover);
1028
+ @property st-global(--wds-toggle-button-fill-standard-selected);
1029
+ @property st-global(--wds-toggle-button-fill-standard-selected-disabled);
1030
+ @property st-global(--wds-toggle-button-fill-standard-selected-hover);
1031
+ @property st-global(--wds-toggle-button-inner-shadow-blur-primary);
1032
+ @property st-global(--wds-toggle-button-inner-shadow-blur-secondary);
1033
+ @property st-global(--wds-toggle-button-inner-shadow-fill-primary);
1034
+ @property st-global(--wds-toggle-button-inner-shadow-fill-secondary);
1035
+ @property st-global(--wds-toggle-button-inner-shadow-x-primary);
1036
+ @property st-global(--wds-toggle-button-inner-shadow-x-secondary);
1037
+ @property st-global(--wds-toggle-button-inner-shadow-y-primary);
1038
+ @property st-global(--wds-toggle-button-inner-shadow-y-secondary);
1039
+ @property st-global(--wds-toggle-button-label-fill-dark-default);
1040
+ @property st-global(--wds-toggle-button-label-fill-dark-disabled);
1041
+ @property st-global(--wds-toggle-button-label-fill-dark-hover);
1042
+ @property st-global(--wds-toggle-button-label-fill-dark-selected);
1043
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-disabled);
1044
+ @property st-global(--wds-toggle-button-label-fill-dark-selected-hover);
1045
+ @property st-global(--wds-toggle-button-label-fill-inverted);
1046
+ @property st-global(--wds-toggle-button-label-fill-inverted-disabled);
1047
+ @property st-global(--wds-toggle-button-label-fill-inverted-hover);
1048
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected);
1049
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-disabled);
1050
+ @property st-global(--wds-toggle-button-label-fill-inverted-selected-hover);
1051
+ @property st-global(--wds-toggle-button-label-fill-standard);
1052
+ @property st-global(--wds-toggle-button-label-fill-standard-disabled);
1008
1053
  @property st-global(--wds-toggle-button-label-fill-standard-hover);
1054
+ @property st-global(--wds-toggle-button-label-fill-standard-selected);
1055
+ @property st-global(--wds-toggle-button-label-fill-standard-selected-disabled);
1009
1056
  @property st-global(--wds-toggle-button-label-font-line-height-round-small);
1010
1057
  @property st-global(--wds-toggle-button-label-font-size-round-small);
1058
+ @property st-global(--wds-toggle-button-label-font-size-square-large);
1059
+ @property st-global(--wds-toggle-button-label-font-size-square-medium);
1060
+ @property st-global(--wds-toggle-button-label-font-size-square-small);
1061
+ @property st-global(--wds-toggle-button-label-font-size-square-tiny);
1011
1062
  @property st-global(--wds-toggle-button-label-font-weight-pill);
1012
1063
  @property st-global(--wds-toggle-button-label-font-weight-round);
1013
1064
  @property st-global(--wds-toggle-button-label-font-weight-square);
@@ -1019,6 +1070,30 @@
1019
1070
  @property st-global(--wds-toggle-button-padding-small-round);
1020
1071
  @property st-global(--wds-toggle-button-padding-tiny);
1021
1072
  @property st-global(--wds-toggle-button-padding-tiny-round);
1073
+ @property st-global(--wds-toggle-button-shadow-blur-primary);
1074
+ @property st-global(--wds-toggle-button-shadow-blur-primary-inverted);
1075
+ @property st-global(--wds-toggle-button-shadow-blur-secondary);
1076
+ @property st-global(--wds-toggle-button-shadow-blur-secondary-inverted);
1077
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary);
1078
+ @property st-global(--wds-toggle-button-shadow-blur-tertiary-inverted);
1079
+ @property st-global(--wds-toggle-button-shadow-fill-primary);
1080
+ @property st-global(--wds-toggle-button-shadow-fill-primary-inverted);
1081
+ @property st-global(--wds-toggle-button-shadow-fill-secondary);
1082
+ @property st-global(--wds-toggle-button-shadow-fill-secondary-inverted);
1083
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary);
1084
+ @property st-global(--wds-toggle-button-shadow-fill-tertiary-inverted);
1085
+ @property st-global(--wds-toggle-button-shadow-x-primary);
1086
+ @property st-global(--wds-toggle-button-shadow-x-primary-inverted);
1087
+ @property st-global(--wds-toggle-button-shadow-x-secondary);
1088
+ @property st-global(--wds-toggle-button-shadow-x-secondary-inverted);
1089
+ @property st-global(--wds-toggle-button-shadow-x-tertiary);
1090
+ @property st-global(--wds-toggle-button-shadow-x-tertiary-inverted);
1091
+ @property st-global(--wds-toggle-button-shadow-y-primary);
1092
+ @property st-global(--wds-toggle-button-shadow-y-primary-inverted);
1093
+ @property st-global(--wds-toggle-button-shadow-y-secondary);
1094
+ @property st-global(--wds-toggle-button-shadow-y-secondary-inverted);
1095
+ @property st-global(--wds-toggle-button-shadow-y-tertiary);
1096
+ @property st-global(--wds-toggle-button-shadow-y-tertiary-inverted);
1022
1097
  @property st-global(--wds-toggle-switch-border-error-disabled);
1023
1098
  @property st-global(--wds-toggle-switch-border-standard-disabled);
1024
1099
  @property st-global(--wds-toggle-switch-border-success-disabled);
@@ -1363,7 +1438,7 @@
1363
1438
  --wds-card-tab-padding-vertical-medium: 16px;
1364
1439
  --wds-card-tab-padding-vertical-small: 16px;
1365
1440
  --wds-checkbox-border: #767574;
1366
- --wds-checkbox-border-active: #7896ff;
1441
+ --wds-checkbox-border-active: #2f5dff;
1367
1442
  --wds-checkbox-border-active-disabled: rgba(19, 23, 32, 0);
1368
1443
  --wds-checkbox-border-active-hover: rgba(19, 23, 32, 0);
1369
1444
  --wds-checkbox-border-disabled: rgba(19, 23, 32, .1);
@@ -1378,7 +1453,10 @@
1378
1453
  --wds-checkbox-group-gap-vertical: 12px;
1379
1454
  --wds-checkbox-icon: #ffffff;
1380
1455
  --wds-checkbox-icon-disabled: rgba(255, 255, 255, .7);
1381
- --wds-checkbox-label-font-line-height-small: 12px;
1456
+ --wds-checkbox-label-disabled: #a8a6a5;
1457
+ --wds-checkbox-label-font-line-height-medium: 18px;
1458
+ --wds-checkbox-label-font-line-height-small: 16px;
1459
+ --wds-checkbox-label-font-size-medium: 14px;
1382
1460
  --wds-checkbox-label-font-size-small: 12px;
1383
1461
  --wds-circular-progress-bar-background-fill-error: rgba(19, 23, 32, .1);
1384
1462
  --wds-circular-progress-bar-background-fill-premium: rgba(19, 23, 32, .1);
@@ -2126,31 +2204,103 @@
2126
2204
  --wds-thumbnail-title-padding-top: 4px;
2127
2205
  --wds-timeline-title-font-line-height: 16px;
2128
2206
  --wds-timeline-title-font-size: 12px;
2129
- --wds-toggle-button-border-radius-square-large: 0;
2130
- --wds-toggle-button-border-radius-square-medium: 0;
2131
- --wds-toggle-button-border-radius-square-small: 0;
2132
- --wds-toggle-button-border-radius-square-tiny: 4px;
2133
- --wds-toggle-button-fill-inverted: #ffffff;
2134
- --wds-toggle-button-fill-inverted-disabled: #ffffff;
2135
- --wds-toggle-button-fill-inverted-hover: #eaefff;
2136
- --wds-toggle-button-fill-inverted-selected: #2f5dff;
2137
- --wds-toggle-button-fill-inverted-selected-disabled: rgba(19, 23, 32, .3);
2138
- --wds-toggle-button-fill-inverted-selected-hover: #1c3fe5;
2139
- --wds-toggle-button-fill-standard-hover: #eaefff;
2140
- --wds-toggle-button-label-fill-standard-hover: #151414;
2207
+ --wds-toggle-button-border-color-dark: rgba(255, 255, 255, 0);
2208
+ --wds-toggle-button-border-color-dark-disabled: rgba(255, 255, 255, 0);
2209
+ --wds-toggle-button-border-color-dark-hover: rgba(255, 255, 255, 0);
2210
+ --wds-toggle-button-border-color-inverted: rgba(255, 255, 255, 0);
2211
+ --wds-toggle-button-border-color-inverted-disabled: rgba(255, 255, 255, 0);
2212
+ --wds-toggle-button-border-color-inverted-hover: rgba(255, 255, 255, 0);
2213
+ --wds-toggle-button-border-color-standard: rgba(255, 255, 255, 0);
2214
+ --wds-toggle-button-border-color-standard-disabled: rgba(255, 255, 255, 0);
2215
+ --wds-toggle-button-border-color-standard-hover: #acbeff;
2216
+ --wds-toggle-button-border-radius-square-large: 8px;
2217
+ --wds-toggle-button-border-radius-square-medium: 8px;
2218
+ --wds-toggle-button-border-radius-square-small: 8px;
2219
+ --wds-toggle-button-border-radius-square-tiny: 8px;
2220
+ --wds-toggle-button-fill-dark: rgba(19, 23, 32, 0);
2221
+ --wds-toggle-button-fill-dark-disabled: rgba(19, 23, 32, 0);
2222
+ --wds-toggle-button-fill-dark-hover: #e8e7e7;
2223
+ --wds-toggle-button-fill-dark-selected: #dedede;
2224
+ --wds-toggle-button-fill-dark-selected-disabled: #f0efef;
2225
+ --wds-toggle-button-fill-dark-selected-hover: #a8a6a5;
2226
+ --wds-toggle-button-fill-inverted: rgba(19, 23, 32, 0);
2227
+ --wds-toggle-button-fill-inverted-disabled: rgba(19, 23, 32, 0);
2228
+ --wds-toggle-button-fill-inverted-hover: #e8e7e7;
2229
+ --wds-toggle-button-fill-inverted-selected: #ffffff;
2230
+ --wds-toggle-button-fill-inverted-selected-disabled: #f0efef;
2231
+ --wds-toggle-button-fill-inverted-selected-hover: #f0efef;
2232
+ --wds-toggle-button-fill-standard: rgba(19, 23, 32, 0);
2233
+ --wds-toggle-button-fill-standard-disabled: rgba(19, 23, 32, 0);
2234
+ --wds-toggle-button-fill-standard-hover: rgba(19, 23, 32, 0);
2235
+ --wds-toggle-button-fill-standard-selected: #eaefff;
2236
+ --wds-toggle-button-fill-standard-selected-disabled: #f0efef;
2237
+ --wds-toggle-button-fill-standard-selected-hover: #d5dfff;
2238
+ --wds-toggle-button-inner-shadow-blur-primary: 2px;
2239
+ --wds-toggle-button-inner-shadow-blur-secondary: 2px;
2240
+ --wds-toggle-button-inner-shadow-fill-primary: #ffffff;
2241
+ --wds-toggle-button-inner-shadow-fill-secondary: #ffffff;
2242
+ --wds-toggle-button-inner-shadow-x-primary: 1px;
2243
+ --wds-toggle-button-inner-shadow-x-secondary: 1px;
2244
+ --wds-toggle-button-inner-shadow-y-primary: 1px;
2245
+ --wds-toggle-button-inner-shadow-y-secondary: 1px;
2246
+ --wds-toggle-button-label-fill-dark-default: #151414;
2247
+ --wds-toggle-button-label-fill-dark-disabled: #a8a6a5;
2248
+ --wds-toggle-button-label-fill-dark-hover: #151414;
2249
+ --wds-toggle-button-label-fill-dark-selected: #151414;
2250
+ --wds-toggle-button-label-fill-dark-selected-disabled: #a8a6a5;
2251
+ --wds-toggle-button-label-fill-dark-selected-hover: #151414;
2252
+ --wds-toggle-button-label-fill-inverted: #151414;
2253
+ --wds-toggle-button-label-fill-inverted-disabled: #a8a6a5;
2254
+ --wds-toggle-button-label-fill-inverted-hover: #151414;
2255
+ --wds-toggle-button-label-fill-inverted-selected: #151414;
2256
+ --wds-toggle-button-label-fill-inverted-selected-disabled: #a8a6a5;
2257
+ --wds-toggle-button-label-fill-inverted-selected-hover: #151414;
2258
+ --wds-toggle-button-label-fill-standard: #151414;
2259
+ --wds-toggle-button-label-fill-standard-disabled: #a8a6a5;
2260
+ --wds-toggle-button-label-fill-standard-hover: #1c3fe5;
2261
+ --wds-toggle-button-label-fill-standard-selected: #2f5dff;
2262
+ --wds-toggle-button-label-fill-standard-selected-disabled: #a8a6a5;
2141
2263
  --wds-toggle-button-label-font-line-height-round-small: 16px;
2142
2264
  --wds-toggle-button-label-font-size-round-small: 12px;
2265
+ --wds-toggle-button-label-font-size-square-large: 12px;
2266
+ --wds-toggle-button-label-font-size-square-medium: 12px;
2267
+ --wds-toggle-button-label-font-size-square-small: 12px;
2268
+ --wds-toggle-button-label-font-size-square-tiny: 12px;
2143
2269
  --wds-toggle-button-label-font-weight-pill: 600;
2144
- --wds-toggle-button-label-font-weight-round: 400;
2145
- --wds-toggle-button-label-font-weight-square: 400;
2146
- --wds-toggle-button-padding-large: 16px;
2147
- --wds-toggle-button-padding-large-round: 16px;
2148
- --wds-toggle-button-padding-medium: 12px;
2149
- --wds-toggle-button-padding-medium-round: 16px;
2150
- --wds-toggle-button-padding-small: 12px;
2270
+ --wds-toggle-button-label-font-weight-round: 600;
2271
+ --wds-toggle-button-label-font-weight-square: 600;
2272
+ --wds-toggle-button-padding-large: 24px;
2273
+ --wds-toggle-button-padding-large-round: 24px;
2274
+ --wds-toggle-button-padding-medium: 20px;
2275
+ --wds-toggle-button-padding-medium-round: 20px;
2276
+ --wds-toggle-button-padding-small: 16px;
2151
2277
  --wds-toggle-button-padding-small-round: 16px;
2152
- --wds-toggle-button-padding-tiny: 6px;
2278
+ --wds-toggle-button-padding-tiny: 12px;
2153
2279
  --wds-toggle-button-padding-tiny-round: 12px;
2280
+ --wds-toggle-button-shadow-blur-primary: 4px;
2281
+ --wds-toggle-button-shadow-blur-primary-inverted: 30px;
2282
+ --wds-toggle-button-shadow-blur-secondary: 1.7px;
2283
+ --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
2284
+ --wds-toggle-button-shadow-blur-tertiary: 0.6px;
2285
+ --wds-toggle-button-shadow-blur-tertiary-inverted: 4px;
2286
+ --wds-toggle-button-shadow-fill-primary: rgba(19, 23, 32, .05);
2287
+ --wds-toggle-button-shadow-fill-primary-inverted: rgba(19, 23, 32, .05);
2288
+ --wds-toggle-button-shadow-fill-secondary: rgba(19, 23, 32, .15);
2289
+ --wds-toggle-button-shadow-fill-secondary-inverted: rgba(118, 117, 116, 0.2);
2290
+ --wds-toggle-button-shadow-fill-tertiary: rgba(19, 23, 32, .25);
2291
+ --wds-toggle-button-shadow-fill-tertiary-inverted: rgba(19, 23, 32, .1);
2292
+ --wds-toggle-button-shadow-x-primary: 1px;
2293
+ --wds-toggle-button-shadow-x-primary-inverted: -8px;
2294
+ --wds-toggle-button-shadow-x-secondary: 1.2px;
2295
+ --wds-toggle-button-shadow-x-secondary-inverted: 0.4px;
2296
+ --wds-toggle-button-shadow-x-tertiary: 0.4px;
2297
+ --wds-toggle-button-shadow-x-tertiary-inverted: 1px;
2298
+ --wds-toggle-button-shadow-y-primary: 4px;
2299
+ --wds-toggle-button-shadow-y-primary-inverted: 5px;
2300
+ --wds-toggle-button-shadow-y-secondary: 1.2px;
2301
+ --wds-toggle-button-shadow-y-secondary-inverted: 0.4px;
2302
+ --wds-toggle-button-shadow-y-tertiary: 0.4px;
2303
+ --wds-toggle-button-shadow-y-tertiary-inverted: 4px;
2154
2304
  --wds-toggle-switch-border-error-disabled: rgba(19, 23, 32, 0);
2155
2305
  --wds-toggle-switch-border-standard-disabled: rgba(19, 23, 32, 0);
2156
2306
  --wds-toggle-switch-border-success-disabled: rgba(19, 23, 32, 0);
package/odeditor/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(19, 23, 32, .1);
251
252
  --wds-color-black-100-transparent-15: rgba(19, 23, 32, .15);
252
253
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
254
+ --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
253
255
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
254
256
  --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
255
257
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.122.0",
3
+ "version": "1.124.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -12,12 +12,12 @@
12
12
  "style-dictionary": "^3.9.2",
13
13
  "ts-jest": "^29.2.5",
14
14
  "ts-node": "^10.9.2",
15
- "typescript": "^5.7.2"
15
+ "typescript": "^5.8.3"
16
16
  },
17
17
  "description": "Design system tokens",
18
18
  "scripts": {
19
19
  "build": "cp -r tokens/* .",
20
- "generate": "ts-node src/generate.ts & yarn run lint",
20
+ "generate": "ts-node src/generate.ts && yarn run lint && yarn run build",
21
21
  "test": "jest",
22
22
  "test:watch": "jest --watch",
23
23
  "lint": "yarn run eslint ./src --fix",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "03545faac4efb65addfb12c27bb3ba990321c263d74aca3fde1b7b44"
36
+ "falconPackageHash": "2123b30c753a607b8ad7ef22f9b87857bb77740d932cfcb81c1e2ad1"
37
37
  }
package/studio/all.css CHANGED
@@ -248,6 +248,7 @@
248
248
  --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
249
249
  --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
250
250
  --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
251
+ --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
251
252
  --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
252
253
  --wds-color-black-100-transparent-15: rgba(19, 23, 32, 0.15);
253
254
  --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
@@ -777,43 +778,60 @@
777
778
  --wds-toggle-switch-border-success-disabled: var(--wds-color-black-100-transparent-0);
778
779
  --wds-toggle-switch-border-standard-disabled: var(--wds-color-black-100-transparent-0);
779
780
  --wds-toggle-switch-border-error-disabled: var(--wds-color-black-100-transparent-0);
781
+ --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
782
+ --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
783
+ --wds-toggle-button-shadow-y-secondary-inverted: var(--wds-shadow-y-0);
784
+ --wds-toggle-button-shadow-y-secondary: var(--wds-shadow-y-0);
785
+ --wds-toggle-button-shadow-y-primary-inverted: var(--wds-shadow-y-0);
786
+ --wds-toggle-button-shadow-y-primary: var(--wds-shadow-y-0);
787
+ --wds-toggle-button-shadow-x-tertiary-inverted: var(--wds-shadow-x-0);
788
+ --wds-toggle-button-shadow-x-tertiary: var(--wds-shadow-x-0);
789
+ --wds-toggle-button-shadow-x-secondary-inverted: var(--wds-shadow-x-0);
790
+ --wds-toggle-button-shadow-x-secondary: var(--wds-shadow-x-0);
791
+ --wds-toggle-button-shadow-x-primary-inverted: var(--wds-shadow-x-0);
792
+ --wds-toggle-button-shadow-x-primary: var(--wds-shadow-x-0);
793
+ --wds-toggle-button-shadow-fill-tertiary-inverted: var(--wds-color-black-100-transparent-0);
794
+ --wds-toggle-button-shadow-fill-tertiary: var(--wds-color-black-100-transparent-0);
795
+ --wds-toggle-button-shadow-fill-secondary-inverted: var(--wds-color-black-100-transparent-0);
796
+ --wds-toggle-button-shadow-fill-secondary: var(--wds-color-black-100-transparent-0);
797
+ --wds-toggle-button-shadow-fill-primary-inverted: var(--wds-color-black-100-transparent-0);
798
+ --wds-toggle-button-shadow-fill-primary: var(--wds-color-black-100-transparent-0);
799
+ --wds-toggle-button-shadow-blur-tertiary-inverted: var(--wds-shadow-blur-0);
800
+ --wds-toggle-button-shadow-blur-tertiary: var(--wds-shadow-blur-0);
801
+ --wds-toggle-button-shadow-blur-secondary-inverted: var(--wds-shadow-blur-0);
802
+ --wds-toggle-button-shadow-blur-secondary: var(--wds-shadow-blur-0);
803
+ --wds-toggle-button-shadow-blur-primary-inverted: var(--wds-shadow-blur-0);
804
+ --wds-toggle-button-shadow-blur-primary: var(--wds-shadow-blur-0);
805
+ --wds-toggle-button-padding-tiny-round: var(--wds-space-300);
780
806
  --wds-toggle-button-padding-tiny: var(--wds-space-150);
807
+ --wds-toggle-button-padding-small-round: var(--wds-space-400);
781
808
  --wds-toggle-button-padding-small: var(--wds-space-300);
782
- --wds-toggle-button-padding-right-tiny-round: var(--wds-space-300);
783
- --wds-toggle-button-padding-right-tiny: var(--wds-space-150);
784
- --wds-toggle-button-padding-right-small-round: var(--wds-space-400);
785
- --wds-toggle-button-padding-right-small: var(--wds-space-300);
786
- --wds-toggle-button-padding-right-medium-round: var(--wds-space-400);
787
- --wds-toggle-button-padding-right-medium: var(--wds-space-300);
788
- --wds-toggle-button-padding-right-large-round: var(--wds-space-400);
789
- --wds-toggle-button-padding-right-large: var(--wds-space-400);
809
+ --wds-toggle-button-padding-medium-round: var(--wds-space-400);
790
810
  --wds-toggle-button-padding-medium: var(--wds-space-300);
791
- --wds-toggle-button-padding-left-tiny-round: var(--wds-space-150);
792
- --wds-toggle-button-padding-left-tiny: var(--wds-space-100);
793
- --wds-toggle-button-padding-left-small-round: var(--wds-space-300);
794
- --wds-toggle-button-padding-left-small: var(--wds-space-150);
795
- --wds-toggle-button-padding-left-medium-round: var(--wds-space-300);
796
- --wds-toggle-button-padding-left-medium: var(--wds-space-150);
797
- --wds-toggle-button-padding-left-large-round: var(--wds-space-300);
798
- --wds-toggle-button-padding-left-large: var(--wds-space-200);
811
+ --wds-toggle-button-padding-large-round: var(--wds-space-400);
799
812
  --wds-toggle-button-padding-large: var(--wds-space-400);
800
- --wds-toggle-button-padding-horizontal-tiny-round: var(--wds-space-300);
801
- --wds-toggle-button-padding-horizontal-tiny: var(--wds-space-150);
802
- --wds-toggle-button-padding-horizontal-small-round: var(--wds-space-400);
803
- --wds-toggle-button-padding-horizontal-small: var(--wds-space-300);
804
- --wds-toggle-button-padding-horizontal-medium-round: var(--wds-space-400);
805
- --wds-toggle-button-padding-horizontal-medium: var(--wds-space-300);
806
- --wds-toggle-button-padding-horizontal-large-round: var(--wds-space-400);
807
- --wds-toggle-button-padding-horizontal-large: var(--wds-space-400);
808
813
  --wds-toggle-button-label-font-weight-square: var(--wds-font-weight-regular);
814
+ --wds-toggle-button-label-font-weight-round: var(--wds-font-weight-regular);
809
815
  --wds-toggle-button-label-font-weight-pill: var(--wds-font-weight-regular);
810
816
  --wds-toggle-button-label-fill-standard-disabled: var(--wds-color-text-disabled);
817
+ --wds-toggle-button-label-fill-inverted-disabled: var(--wds-color-text-disabled);
818
+ --wds-toggle-button-label-fill-dark-disabled: var(--wds-color-text-disabled);
819
+ --wds-toggle-button-inner-shadow-y-secondary: var(--wds-shadow-y-0);
820
+ --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-0);
821
+ --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-0);
822
+ --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-0);
823
+ --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white-transparent-0);
824
+ --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white-transparent-0);
825
+ --wds-toggle-button-inner-shadow-blur-secondary: var(--wds-shadow-blur-0);
826
+ --wds-toggle-button-inner-shadow-blur-primary: var(--wds-shadow-blur-0);
811
827
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
812
828
  --wds-toggle-button-fill-inverted-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
829
+ --wds-toggle-button-fill-dark-selected-disabled: var(--wds-color-fill-standard-primary-disabled);
813
830
  --wds-toggle-button-border-radius-square-tiny: var(--wds-border-radius-200);
814
831
  --wds-toggle-button-border-radius-square-small: var(--wds-border-radius-200);
815
- --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-300);
816
- --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-300);
832
+ --wds-toggle-button-border-radius-square-medium: var(--wds-border-radius-200);
833
+ --wds-toggle-button-border-radius-square-large: var(--wds-border-radius-200);
834
+ --wds-toggle-button-border-color-standard-disabled: var(--wds-color-fill-standard-secondary-disabled);
817
835
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
818
836
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-regular);
819
837
  --wds-thumbnail-illustration-fill-3: var(--wds-color-black-750);
@@ -1431,11 +1449,21 @@
1431
1449
  --wds-toggle-button-label-font-size-square-small: var(--wds-font-size-body-tiny);
1432
1450
  --wds-toggle-button-label-font-size-square-medium: var(--wds-font-size-body-tiny);
1433
1451
  --wds-toggle-button-label-font-size-square-large: var(--wds-font-size-body-tiny);
1434
- --wds-toggle-button-label-font-size-pill-small: var(--wds-font-size-body-tiny);
1452
+ --wds-toggle-button-label-font-size-round-small: var(--wds-font-size-body-tiny);
1435
1453
  --wds-toggle-button-label-fill-standard-selected-disabled: var(--wds-color-text-disabled-light);
1436
1454
  --wds-toggle-button-label-fill-standard-selected: var(--wds-color-text-primary);
1437
1455
  --wds-toggle-button-label-fill-standard-hover: var(--wds-color-text-standard-primary);
1438
1456
  --wds-toggle-button-label-fill-standard-default: var(--wds-color-text-standard-primary);
1457
+ --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary-light);
1458
+ --wds-toggle-button-label-fill-inverted-selected-disabled: var(--wds-color-text-standard-primary-light);
1459
+ --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary-light);
1460
+ --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1461
+ --wds-toggle-button-label-fill-inverted-default: var(--wds-color-text-standard-primary);
1462
+ --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary-light);
1463
+ --wds-toggle-button-label-fill-dark-selected-disabled: var(--wds-color-text-disabled-light);
1464
+ --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary-light);
1465
+ --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-secondary);
1466
+ --wds-toggle-button-label-fill-dark-default: var(--wds-color-text-standard-primary);
1439
1467
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-fill-standard-secondary-hover);
1440
1468
  --wds-toggle-button-fill-standard-selected: var(--wds-color-fill-standard-secondary);
1441
1469
  --wds-toggle-button-fill-standard-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1446,6 +1474,19 @@
1446
1474
  --wds-toggle-button-fill-inverted-hover: var(--wds-color-fill-standard-tertiary-hover);
1447
1475
  --wds-toggle-button-fill-inverted-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1448
1476
  --wds-toggle-button-fill-inverted: var(--wds-color-fill-standard-tertiary);
1477
+ --wds-toggle-button-fill-dark-selected-hover: var(--wds-color-fill-dark-primary-hover);
1478
+ --wds-toggle-button-fill-dark-selected: var(--wds-color-fill-dark-primary);
1479
+ --wds-toggle-button-fill-dark-hover: var(--wds-color-fill-standard-tertiary-hover);
1480
+ --wds-toggle-button-fill-dark-disabled: var(--wds-color-fill-standard-tertiary-disabled);
1481
+ --wds-toggle-button-fill-dark: var(--wds-color-fill-standard-tertiary);
1482
+ --wds-toggle-button-border-color-standard-hover: var(--wds-color-border-standard-tertiary);
1483
+ --wds-toggle-button-border-color-standard: var(--wds-color-fill-standard-tertiary);
1484
+ --wds-toggle-button-border-color-inverted-hover: var(--wds-color-border-standard-tertiary-hover);
1485
+ --wds-toggle-button-border-color-inverted-disabled: var(--wds-color-border-standard-tertiary-disabled);
1486
+ --wds-toggle-button-border-color-inverted: var(--wds-color-border-standard-tertiary);
1487
+ --wds-toggle-button-border-color-dark-hover: var(--wds-color-border-standard-tertiary-hover);
1488
+ --wds-toggle-button-border-color-dark-disabled: var(--wds-color-border-standard-tertiary-disabled);
1489
+ --wds-toggle-button-border-color-dark: var(--wds-color-border-standard-tertiary);
1449
1490
  --wds-toast-background-fill: var(--wds-color-fill-dark-primary);
1450
1491
  --wds-timeline-title-font-size: var(--wds-font-size-body-tiny);
1451
1492
  --wds-thumbnail-title-font-size-tiny: var(--wds-font-size-body-tiny);
@@ -1679,7 +1720,9 @@
1679
1720
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1680
1721
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
1681
1722
  --wds-circular-progress-bar-foreground-fill-error: var(--wds-color-fill-destructive-primary);
1682
- --wds-checkbox-label-font-size-small: var(--wds-font-size-body-tiny);
1723
+ --wds-checkbox-label-font-size-small: var(--wds-font-size-body-small);
1724
+ --wds-checkbox-label-font-size-medium: var(--wds-font-size-body-medium);
1725
+ --wds-checkbox-label-disabled: var(--wds-color-text-standard-primary);
1683
1726
  --wds-checkbox-icon-disabled: var(--wds-color-text-disabled-light);
1684
1727
  --wds-checkbox-icon: var(--wds-color-text-standard-primary-light);
1685
1728
  --wds-checkbox-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
@@ -1768,7 +1811,7 @@
1768
1811
  --wds-accordion-background-fill-light-hover: var(--wds-color-fill-standard-tertiary-hover);
1769
1812
  --wds-accordion-background-fill-light: var(--wds-color-fill-standard-tertiary);
1770
1813
  --wds-vertical-tabs-section-text-font-line-height-small: var(--wds-font-line-height-body-tiny);
1771
- --wds-toggle-button-label-font-line-height-pill-small: var(--wds-font-line-height-body-tiny);
1814
+ --wds-toggle-button-label-font-line-height-round-small: var(--wds-font-line-height-body-tiny);
1772
1815
  --wds-timeline-title-font-line-height: var(--wds-font-line-height-body-tiny);
1773
1816
  --wds-thumbnail-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1774
1817
  --wds-thumbnail-subtitle-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
@@ -1801,7 +1844,8 @@
1801
1844
  --wds-divider-gradient-border: linear-gradient(90deg, var(--wds-divider-fill-color-light-secondary) 0%, var(--wds-divider-fill-color-light-primary) 16%, var(--wds-divider-fill-color-light-primary) 84%, var(--wds-divider-fill-color-light-secondary) 100%);
1802
1845
  --wds-custom-modal-header-title-font-line-height: var(--wds-font-line-height-body-small);
1803
1846
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
1804
- --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
1847
+ --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
1848
+ --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
1805
1849
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
1806
1850
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
1807
1851
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);