@wix/design-system-tokens 1.161.1 → 1.162.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 (29) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/all.css +7 -0
  3. package/all.scss +7 -0
  4. package/all.st.css +14 -0
  5. package/component.st.css +8 -0
  6. package/foundation.st.css +6 -0
  7. package/odeditor/all.css +11 -6
  8. package/odeditor/all.scss +11 -6
  9. package/odeditor/all.st.css +23 -13
  10. package/odeditor/component.st.css +17 -9
  11. package/odeditor/foundation.st.css +2 -0
  12. package/odeditor/semantic.st.css +4 -4
  13. package/odeditor-dark/all.css +117 -112
  14. package/odeditor-dark/all.scss +117 -112
  15. package/odeditor-dark/all.st.css +1014 -1004
  16. package/odeditor-dark/component.st.css +585 -577
  17. package/odeditor-dark/foundation.st.css +104 -102
  18. package/odeditor-dark/semantic.st.css +325 -325
  19. package/package.json +2 -2
  20. package/studio/all.css +7 -0
  21. package/studio/all.scss +7 -0
  22. package/studio/all.st.css +14 -0
  23. package/studio/component.st.css +8 -0
  24. package/studio/foundation.st.css +6 -0
  25. package/wixel/all.css +5 -0
  26. package/wixel/all.scss +5 -0
  27. package/wixel/all.st.css +10 -0
  28. package/wixel/component.st.css +8 -0
  29. package/wixel/foundation.st.css +2 -0
package/odeditor/component.st.css CHANGED
@@ -570,6 +570,7 @@
570
570
  @property st-global(--wds-list-item-action-fill-hover);
571
571
  @property st-global(--wds-list-item-action-gap);
572
572
  @property st-global(--wds-list-item-action-label-fill-active);
573
+ @property st-global(--wds-list-item-action-label-fill-pressed-destructive);
573
574
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
574
575
  @property st-global(--wds-list-item-action-label-font-line-height-small);
575
576
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -580,6 +581,7 @@
580
581
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
581
582
  @property st-global(--wds-list-item-action-padding-vertical-small);
582
583
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
584
+ @property st-global(--wds-list-item-action-subtitle-fill-pressed-destructive);
583
585
  @property st-global(--wds-list-item-action-subtitle-font-line-height);
584
586
  @property st-global(--wds-list-item-action-subtitle-font-size);
585
587
  @property st-global(--wds-list-item-action-suffix-fill);
@@ -766,6 +768,7 @@
766
768
  @property st-global(--wds-section-helper-border-preview);
767
769
  @property st-global(--wds-section-helper-border-radius);
768
770
  @property st-global(--wds-section-helper-close-button-offset);
771
+ @property st-global(--wds-section-helper-fill-premium);
769
772
  @property st-global(--wds-section-helper-fill-preview);
770
773
  @property st-global(--wds-section-helper-fill-standard);
771
774
  @property st-global(--wds-section-helper-horizontal-margin);
@@ -967,6 +970,7 @@
967
970
  @property st-global(--wds-slider-track-border-border-radius);
968
971
  @property st-global(--wds-slider-track-border-radius-transparent);
969
972
  @property st-global(--wds-slider-track-color);
973
+ @property st-global(--wds-slider-track-color-disabled);
970
974
  @property st-global(--wds-slider-track-size);
971
975
  @property st-global(--wds-slider-track-size-transparent);
972
976
  @property st-global(--wds-social-post-preview-content-padding-horizontal);
@@ -1346,7 +1350,7 @@
1346
1350
  --wds-angle-input-knob-disabled: #ffffff;
1347
1351
  --wds-angle-input-knob-fill: #ffffff;
1348
1352
  --wds-angle-input-knob-size: 6px;
1349
- --wds-angle-input-ring-border: #e8e7e7;
1353
+ --wds-angle-input-ring-border: #dedede;
1350
1354
  --wds-announcement-modal-actions-padding: 42px;
1351
1355
  --wds-announcement-modal-border-radius: 24px;
1352
1356
  --wds-announcement-modal-content-gap: 12px;
@@ -1646,8 +1650,8 @@
1646
1650
  --wds-custom-modal-header-subtitle-font-size: 14px;
1647
1651
  --wds-date-picker-icon-fill: #383838;
1648
1652
  --wds-date-picker-icon-fill-disabled: #a8a6a5;
1649
- --wds-divider-fill-color-light-primary: #e8e7e7;
1650
- --wds-divider-fill-color-light-secondary: #e8e7e7;
1653
+ --wds-divider-fill-color-light-primary: #dedede;
1654
+ --wds-divider-fill-color-light-secondary: #dedede;
1651
1655
  --wds-dock-area-fill: #f8f6f6;
1652
1656
  --wds-dock-point-fill-active: #2f5dff;
1653
1657
  --wds-dock-point-fill-fill: #767574;
@@ -1690,9 +1694,9 @@
1690
1694
  --wds-form-field-label-line-height-small: 16px;
1691
1695
  --wds-form-field-label-line-height-tiny: 12px;
1692
1696
  --wds-icon-button-color-border-dark-secondary: #767574;
1693
- --wds-icon-button-color-border-dark-secondary-active: #e8e7e7;
1697
+ --wds-icon-button-color-border-dark-secondary-active: #dedede;
1694
1698
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
1695
- --wds-icon-button-color-border-dark-secondary-hover: #e8e7e7;
1699
+ --wds-icon-button-color-border-dark-secondary-hover: #dedede;
1696
1700
  --wds-icon-button-color-border-light-secondary: rgba(255, 255, 255, .5);
1697
1701
  --wds-icon-button-color-border-light-secondary-active: #ffffff;
1698
1702
  --wds-icon-button-color-border-light-secondary-disabled: #f0efef;
@@ -1877,6 +1881,7 @@
1877
1881
  --wds-list-item-action-fill-hover: #f8f6f6;
1878
1882
  --wds-list-item-action-gap: 2px;
1879
1883
  --wds-list-item-action-label-fill-active: #151414;
1884
+ --wds-list-item-action-label-fill-pressed-destructive: #df3336;
1880
1885
  --wds-list-item-action-label-font-line-height-medium: 24px;
1881
1886
  --wds-list-item-action-label-font-line-height-small: 18px;
1882
1887
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -1887,6 +1892,7 @@
1887
1892
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1888
1893
  --wds-list-item-action-padding-vertical-small: 8px;
1889
1894
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1895
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #383838;
1890
1896
  --wds-list-item-action-subtitle-font-line-height: 16px;
1891
1897
  --wds-list-item-action-subtitle-font-size: 12px;
1892
1898
  --wds-list-item-action-suffix-fill: #151414;
@@ -1954,7 +1960,7 @@
1954
1960
  --wds-list-item-select-suffix-pressed: #1c3fe5;
1955
1961
  --wds-list-item-select-title: #151414;
1956
1962
  --wds-list-item-select-title-disabled: #a8a6a5;
1957
- --wds-loader-fill: #d5dfff;
1963
+ --wds-loader-fill: #f0efef;
1958
1964
  --wds-loader-fill-error: #df3336;
1959
1965
  --wds-loader-fill-light: #ffffff;
1960
1966
  --wds-loader-fill-loading: #0f2ccf;
@@ -2073,6 +2079,7 @@
2073
2079
  --wds-section-helper-border-preview: #e8e7e7;
2074
2080
  --wds-section-helper-border-radius: 6px;
2075
2081
  --wds-section-helper-close-button-offset: 0px;
2082
+ --wds-section-helper-fill-premium: #f5f7ff;
2076
2083
  --wds-section-helper-fill-preview: #f8f6f6;
2077
2084
  --wds-section-helper-fill-standard: #f5f7ff;
2078
2085
  --wds-section-helper-horizontal-margin: 6px;
@@ -2274,6 +2281,7 @@
2274
2281
  --wds-slider-track-border-border-radius: 1000px;
2275
2282
  --wds-slider-track-border-radius-transparent: 1000px;
2276
2283
  --wds-slider-track-color: #e8e7e7;
2284
+ --wds-slider-track-color-disabled: #a8a6a5;
2277
2285
  --wds-slider-track-size: 2px;
2278
2286
  --wds-slider-track-size-transparent: 2px;
2279
2287
  --wds-social-post-preview-content-padding-horizontal: 12px;
@@ -2291,7 +2299,7 @@
2291
2299
  --wds-subtitle-font-size-medium: 12px;
2292
2300
  --wds-suffix-active-font-weight: 600;
2293
2301
  --wds-swatches-fill-border-disabled: rgba(19, 23, 32, .05);
2294
- --wds-swatches-fill-border-no-value: #e8e7e7;
2302
+ --wds-swatches-fill-border-no-value: #dedede;
2295
2303
  --wds-swatches-fill-border-no-value-dash: #ed8f90;
2296
2304
  --wds-swatches-fill-border-selected: #383838;
2297
2305
  --wds-swatches-fill-disabled: #f0efef;
@@ -2361,7 +2369,7 @@
2361
2369
  --wds-testimonial-list-gap: 24px;
2362
2370
  --wds-text-button-font-weight-normal: 600;
2363
2371
  --wds-text-button-font-weight-thin: 500;
2364
- --wds-thumbnail-border-color: #e8e7e7;
2372
+ --wds-thumbnail-border-color: #dedede;
2365
2373
  --wds-thumbnail-border-color-disabled: rgba(19, 23, 32, .1);
2366
2374
  --wds-thumbnail-border-color-hover: #acbeff;
2367
2375
  --wds-thumbnail-border-color-selected: #2f5dff;
@@ -2376,7 +2384,7 @@
2376
2384
  --wds-thumbnail-illustration-fill-1: #7896ff;
2377
2385
  --wds-thumbnail-illustration-fill-2: #2f5dff;
2378
2386
  --wds-thumbnail-illustration-fill-3: #eaefff;
2379
- --wds-thumbnail-overlay-fill: rgba(19, 23, 32, .1);
2387
+ --wds-thumbnail-overlay-fill: rgba(255, 255, 255, 0);
2380
2388
  --wds-thumbnail-subtitle-fill: #383838;
2381
2389
  --wds-thumbnail-subtitle-font-line-height-tiny: 16px;
2382
2390
  --wds-thumbnail-subtitle-font-size-tiny: 12px;
package/odeditor/foundation.st.css CHANGED
@@ -62,6 +62,7 @@
62
62
  @property st-global(--wds-color-blue-200);
63
63
  @property st-global(--wds-color-blue-250);
64
64
  @property st-global(--wds-color-blue-300);
65
+ @property st-global(--wds-color-blue-350);
65
66
  @property st-global(--wds-color-blue-400);
66
67
  @property st-global(--wds-color-blue-500);
67
68
  @property st-global(--wds-color-blue-600);
@@ -293,6 +294,7 @@
293
294
  --wds-color-blue-200: #597dff;
294
295
  --wds-color-blue-250: #7896ff;
295
296
  --wds-color-blue-300: #acbeff;
297
+ --wds-color-blue-350: #40506C;
296
298
  --wds-color-blue-400: #d5dfff;
297
299
  --wds-color-blue-500: #eaefff;
298
300
  --wds-color-blue-600: #f5f7ff;
package/odeditor/semantic.st.css CHANGED
@@ -503,10 +503,10 @@
503
503
  --wds-color-border-dark-primary-active: #383838;
504
504
  --wds-color-border-dark-primary-disabled: rgba(19, 23, 32, .1);
505
505
  --wds-color-border-dark-primary-hover: #525150;
506
- --wds-color-border-dark-secondary: #e8e7e7;
507
- --wds-color-border-dark-secondary-active: #e8e7e7;
506
+ --wds-color-border-dark-secondary: #dedede;
507
+ --wds-color-border-dark-secondary-active: #dedede;
508
508
  --wds-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
509
- --wds-color-border-dark-secondary-hover: #e8e7e7;
509
+ --wds-color-border-dark-secondary-hover: #dedede;
510
510
  --wds-color-border-destructive-primary: #ed8f90;
511
511
  --wds-color-border-destructive-primary-active: #df3336;
512
512
  --wds-color-border-destructive-primary-disabled: rgba(19, 23, 32, .1);
@@ -944,7 +944,7 @@
944
944
  --wds-shadow-x-tertiary-toggle-button: 0.4px;
945
945
  --wds-shadow-y-input: 1px;
946
946
  --wds-shadow-y-primary-modal: 20px;
947
- --wds-shadow-y-primary-overlay: 12px;
947
+ --wds-shadow-y-primary-overlay: 20px;
948
948
  --wds-shadow-y-primary-overlay-dark: 0px;
949
949
  --wds-shadow-y-primary-raised: 1px;
950
950
  --wds-shadow-y-primary-toggle: 0px;
package/odeditor-dark/all.css CHANGED
@@ -32,8 +32,16 @@
32
32
  --wds-space-0: 0px;
33
33
  --wds-shadow-spread-secondary-raised: -0.70;
34
34
  --wds-shadow-focus-spread: 0;
35
+ --wds-shadow-fill-secondary-raised: #0006241F;
36
+ --wds-shadow-fill-secondary-overlay: #00000061;
37
+ --wds-shadow-fill-primary-raised: #0006244D;
38
+ --wds-shadow-fill-primary-overlay-dark: #00000052;
39
+ --wds-shadow-fill-primary-overlay: #00000052;
40
+ --wds-shadow-fill-primary-modal: #00000040;
35
41
  --wds-shadow-y-tertiary-toggle-button: 0.4px;
36
42
  --wds-shadow-y-secondary-toggle-button: 1.2px;
43
+ --wds-shadow-y-secondary-overlay: 12;
44
+ --wds-shadow-y-primary-modal: 9;
37
45
  --wds-shadow-y-600: 20px;
38
46
  --wds-shadow-y-350: 10px;
39
47
  --wds-shadow-y-300: 12px;
@@ -147,34 +155,34 @@
147
155
  --wds-color-border-ai-primary-disabled: #ffffff;
148
156
  --wds-color-border-ai-primary-active: #ffffff;
149
157
  --wds-color-border-ai-primary: #ffffff;
150
- --wds-color-yellow-600: #fef6ed;
151
- --wds-color-yellow-500: #fef3e5;
152
- --wds-color-yellow-400: #fdead2;
153
- --wds-color-yellow-300: #fcd29d;
154
- --wds-color-yellow-200: #fabd71;
155
- --wds-color-yellow-100: #f9ad4d;
156
- --wds-color-yellow-50: #e7a047;
157
- --wds-color-yellow-0: #d49341;
158
- --wds-color-white-transparent-80: rgba(255, 255, 255, .8);
159
- --wds-color-white-transparent-70: rgba(255, 255, 255, .7);
160
- --wds-color-white-transparent-60: rgba(255, 255, 255, .6);
161
- --wds-color-white-transparent-50: rgba(255, 255, 255, .5);
162
- --wds-color-white-transparent-30: rgba(255, 255, 255, .3);
163
- --wds-color-white-transparent-20: rgba(255, 255, 255, .2);
164
- --wds-color-white-transparent-12: rgba(255, 255, 255, .12);
165
- --wds-color-white-transparent-10: rgba(255, 255, 255, .1);
166
- --wds-color-white-transparent-5: rgba(255, 255, 255, .05);
167
- --wds-color-white-transparent-1: rgba(255, 255, 255, .01);
168
- --wds-color-white-transparent-0: rgba(255, 255, 255, 0);
169
- --wds-color-white: #ffffff;
170
- --wds-color-red-600: #fcebeb;
171
- --wds-color-red-500: #f9d6d7;
172
- --wds-color-red-400: #f4b8b9;
173
- --wds-color-red-300: #ed8f90;
174
- --wds-color-red-200: #e55c5e;
175
- --wds-color-red-100: #df3336;
176
- --wds-color-red-50: #be2b2e;
177
- --wds-color-red-0: #9c2426;
158
+ --wds-color-yellow-600: #3E2B13;
159
+ --wds-color-yellow-500: #6F502B;
160
+ --wds-color-yellow-400: #946933;
161
+ --wds-color-yellow-300: #C68B40;
162
+ --wds-color-yellow-200: #F9AD4D;
163
+ --wds-color-yellow-100: #FFCB62;
164
+ --wds-color-yellow-50: #FEDB9A;
165
+ --wds-color-yellow-0: #FEF6ED;
166
+ --wds-color-white-transparent-80: rgba(0, 0, 0, .8);
167
+ --wds-color-white-transparent-70: rgba(0, 0, 0, .7);
168
+ --wds-color-white-transparent-60: rgba(0, 0, 0, .6);
169
+ --wds-color-white-transparent-50: rgba(0, 0, 0, .5);
170
+ --wds-color-white-transparent-30: rgba(0, 0, 0, .3);
171
+ --wds-color-white-transparent-20: rgba(0, 0, 0, .2);
172
+ --wds-color-white-transparent-12: rgba(0, 0, 0, .12);
173
+ --wds-color-white-transparent-10: rgba(0, 0, 0, .1);
174
+ --wds-color-white-transparent-5: rgba(0, 0, 0, .05);
175
+ --wds-color-white-transparent-1: rgba(0, 0, 0, .01);
176
+ --wds-color-white-transparent-0: rgba(0, 0, 0, 0);
177
+ --wds-color-white: #2C2D30;
178
+ --wds-color-red-600: #380D0E;
179
+ --wds-color-red-500: #4D2324;
180
+ --wds-color-red-400: #A6464B;
181
+ --wds-color-red-300: #A6464B;
182
+ --wds-color-red-200: #D34D55;
183
+ --wds-color-red-100: #FF7680;
184
+ --wds-color-red-50: #FEBEC0;
185
+ --wds-color-red-0: #F9D6D7;
178
186
  --wds-color-purple-700: #faf0ff;
179
187
  --wds-color-purple-600: #f8f2ff;
180
188
  --wds-color-purple-500: #f1e5fe;
@@ -184,14 +192,14 @@
184
192
  --wds-color-purple-100: #7200f3;
185
193
  --wds-color-purple-50: #6100cf;
186
194
  --wds-color-purple-0: #5000aa;
187
- --wds-color-orange-600: #fdf1ec;
188
- --wds-color-orange-500: #fbe3d9;
189
- --wds-color-orange-400: #fbcfbb;
190
- --wds-color-orange-300: #fda77f;
191
- --wds-color-orange-200: #fe9361;
192
- --wds-color-orange-100: #ff8044;
193
- --wds-color-orange-50: #d96d3a;
194
- --wds-color-orange-0: #ae3e09;
195
+ --wds-color-orange-600: #26130A;
196
+ --wds-color-orange-500: #512916;
197
+ --wds-color-orange-400: #7D3F21;
198
+ --wds-color-orange-300: #A8542D;
199
+ --wds-color-orange-200: #D46A38;
200
+ --wds-color-orange-100: #FF8044;
201
+ --wds-color-orange-50: #FBCFBB;
202
+ --wds-color-orange-0: #FBE3D9;
195
203
  --wds-color-iris-600: #eeecfe;
196
204
  --wds-color-iris-500: #e7e4fe;
197
205
  --wds-color-iris-400: #d6d1fc;
@@ -200,52 +208,53 @@
200
208
  --wds-color-iris-100: #5a48f5;
201
209
  --wds-color-iris-50: #5443e3;
202
210
  --wds-color-iris-0: #4d3dd0;
203
- --wds-color-green-600: #f1f5ed;
204
- --wds-color-green-500: #effae5;
205
- --wds-color-green-400: #daf3c0;
206
- --wds-color-green-300: #bde2a7;
207
- --wds-color-green-200: #97c693;
208
- --wds-color-green-100: #4b916d;
209
- --wds-color-green-50: #11664f;
210
- --wds-color-green-0: #0d4f3d;
211
- --wds-color-blue-600: #f5f7ff;
212
- --wds-color-blue-500: #eaefff;
213
- --wds-color-blue-400: #d5dfff;
214
- --wds-color-blue-300: #acbeff;
215
- --wds-color-blue-250: #7896ff;
216
- --wds-color-blue-200: #597dff;
217
- --wds-color-blue-100: #2f5dff;
218
- --wds-color-blue-50: #1c3fe5;
219
- --wds-color-blue-0: #0f2ccf;
220
- --wds-color-black-300-transparent-70: rgba(118, 117, 116, .7);
221
- --wds-color-black-300-transparent-60: rgba(118, 117, 116, .6);
222
- --wds-color-black-300-transparent-50: rgba(118, 117, 116, .5);
223
- --wds-color-black-300-transparent-20: rgba(118, 117, 116, 0.2);
224
- --wds-color-black-300-transparent-18: rgba(124, 124, 124, 0.18);
225
- --wds-color-black-300-transparent-0: rgba(118, 117, 116, 0);
226
- --wds-color-black-200-transparent-70: rgba(82, 81, 80, .7);
227
- --wds-color-black-200-transparent-60: rgba(82, 81, 80, .6);
228
- --wds-color-black-200-transparent-50: rgba(82, 81, 80, .5);
229
- --wds-color-black-200-transparent-0: rgba(82, 81, 80, 0);
230
- --wds-color-black-100-transparent-70: rgba(19, 23, 32, .7);
231
- --wds-color-black-100-transparent-50: rgba(19, 23, 32, .5);
232
- --wds-color-black-100-transparent-40: rgba(19, 23, 32, .4);
233
- --wds-color-black-100-transparent-30: rgba(19, 23, 32, .3);
234
- --wds-color-black-100-transparent-25: rgba(19, 23, 32, .25);
235
- --wds-color-black-100-transparent-20: rgba(19, 23, 32, .2);
236
- --wds-color-black-100-transparent-15: rgba(19, 23, 32, .15);
237
- --wds-color-black-100-transparent-10: rgba(19, 23, 32, .1);
238
- --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
239
- --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
240
- --wds-color-black-750: #f8f6f6;
241
- --wds-color-black-700: #f0efef;
242
- --wds-color-black-600: #e8e7e7;
243
- --wds-color-black-550: #dedede;
244
- --wds-color-black-500: #a8a6a5;
245
- --wds-color-black-400: #767574;
246
- --wds-color-black-300: #525150;
247
- --wds-color-black-200: #383838;
248
- --wds-color-black-100: #151414;
211
+ --wds-color-green-600: #13241B;
212
+ --wds-color-green-500: #264B43;
213
+ --wds-color-green-400: #396F5C;
214
+ --wds-color-green-300: #4B9476;
215
+ --wds-color-green-200: #5EB88F;
216
+ --wds-color-green-100: #53DA98;
217
+ --wds-color-green-50: #A3E5C5;
218
+ --wds-color-green-0: #D6ECE1;
219
+ --wds-color-blue-600: #111214;
220
+ --wds-color-blue-500: #212328;
221
+ --wds-color-blue-400: #343F53;
222
+ --wds-color-blue-300: #485B7E;
223
+ --wds-color-blue-250: #5B78A9;
224
+ --wds-color-blue-200: #6F94D4;
225
+ --wds-color-blue-100: #82B0FF;
226
+ --wds-color-blue-50: #B1CCFF;
227
+ --wds-color-blue-0: #E0E7FF;
228
+ --wds-color-black-300-transparent-70: rgba(168, 166, 165, .7);
229
+ --wds-color-black-300-transparent-60: rgba(168, 166, 165, .6);
230
+ --wds-color-black-300-transparent-50: rgba(168, 166, 165, .5);
231
+ --wds-color-black-300-transparent-20: rgba(168, 166, 165, 0.2);
232
+ --wds-color-black-300-transparent-18: rgba(168, 166, 165, 0.18);
233
+ --wds-color-black-300-transparent-0: rgba(168, 166, 165, 0);
234
+ --wds-color-black-200-transparent-70: rgba(212, 211, 210, .7);
235
+ --wds-color-black-200-transparent-60: rgba(212, 211, 210, .6);
236
+ --wds-color-black-200-transparent-50: rgba(212, 211, 210, .5);
237
+ --wds-color-black-200-transparent-20: rgba(212, 211, 210, .2);
238
+ --wds-color-black-200-transparent-0: rgba(212, 211, 210, 0);
239
+ --wds-color-black-100-transparent-70: rgba(255, 255, 255, .7);
240
+ --wds-color-black-100-transparent-50: rgba(255, 255, 255, .5);
241
+ --wds-color-black-100-transparent-40: rgba(255, 255, 255, .4);
242
+ --wds-color-black-100-transparent-30: rgba(255, 255, 255, .3);
243
+ --wds-color-black-100-transparent-25: rgba(255, 255, 255, .25);
244
+ --wds-color-black-100-transparent-20: rgba(255, 255, 255, .2);
245
+ --wds-color-black-100-transparent-15: rgba(255, 255, 255, .15);
246
+ --wds-color-black-100-transparent-10: rgba(255, 255, 255, .1);
247
+ --wds-color-black-100-transparent-5: rgba(255, 255, 255, .05);
248
+ --wds-color-black-100-transparent-0: rgba(255, 255, 255, 0);
249
+ --wds-color-black-750: #212122;
250
+ --wds-color-black-700: #353534;
251
+ --wds-color-black-600: #454544;
252
+ --wds-color-black-550: #666565;
253
+ --wds-color-black-500: #878685;
254
+ --wds-color-black-400: #A09E9D;
255
+ --wds-color-black-300: #A8A6A5;
256
+ --wds-color-black-200: #D4D3D2;
257
+ --wds-color-black-100: #FFFFFF;
249
258
  --wds-breakpoint-x-large: 1572px;
250
259
  --wds-breakpoint-small: 490px;
251
260
  --wds-breakpoint-medium: 768px;
@@ -301,6 +310,8 @@
301
310
  --wds-toggle-button-shadow-blur-secondary-inverted: 0.6px;
302
311
  --wds-toggle-button-shadow-blur-secondary: 1.7px;
303
312
  --wds-toggle-button-shadow-blur-primary-inverted: 30px;
313
+ --wds-toggle-button-inner-shadow-fill-secondary: #404040;
314
+ --wds-toggle-button-inner-shadow-fill-primary: #333333;
304
315
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
305
316
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
306
317
  --wds-tabs-selection-height: 3px;
@@ -365,7 +376,7 @@
365
376
  --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-20);
366
377
  --wds-inner-shadow-fill-secondary: var(--wds-color-white);
367
378
  --wds-inner-shadow-fill-primary: var(--wds-color-white);
368
- --wds-inner-shadow-fill-input: var(--wds-color-black-300-transparent-20);
379
+ --wds-inner-shadow-fill-input: var(--wds-color-white-transparent-50);
369
380
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
370
381
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
371
382
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-35);
@@ -392,7 +403,6 @@
392
403
  --wds-space-padding-horizontal-medium: var(--wds-space-300);
393
404
  --wds-space-padding-horizontal-large: var(--wds-space-400);
394
405
  --wds-space-mobile-viewport-spacing: var(--wds-space-800);
395
- --wds-shadow-x-secondary-raised: var(--wds-shadow-x-25);
396
406
  --wds-shadow-surface-modal: var(--wds-shadow-x-50) var(--wds-shadow-y-600) var(--wds-shadow-blur-800) var(--wds-color-black-100-transparent-10), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) var(--wds-color-black-100-transparent-0);
397
407
  --wds-shadow-focus-warning: 0 0 0 var(--wds-color-yellow-400);
398
408
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
@@ -400,37 +410,30 @@
400
410
  --wds-shadow-focus-inner-standard: 0 0 0 3px var(--wds-color-blue-300) inset;
401
411
  --wds-shadow-focus-inner-destructive: 0 0 0 3px var(--wds-color-red-400) inset;
402
412
  --wds-shadow-focus-destructive: 0 0 0 var(--wds-color-red-400);
403
- --wds-shadow-fill-tertiary-raised: var(--wds-color-black-100-transparent-5);
404
- --wds-shadow-fill-tertiary-toggle-button: var(--wds-color-black-100-transparent-25);
405
- --wds-shadow-fill-secondary-toggle-button: var(--wds-color-black-100-transparent-15);
413
+ --wds-shadow-fill-tertiary-toggle-button: var(--wds-color-white);
414
+ --wds-shadow-fill-tertiary-raised: var(--wds-color-black-100-transparent-0);
415
+ --wds-shadow-fill-secondary-toggle-button: var(--wds-color-white);
406
416
  --wds-shadow-fill-secondary-toggle: var(--wds-color-black-100-transparent-0);
407
- --wds-shadow-fill-secondary-raised: var(--wds-color-black-100-transparent-5);
408
417
  --wds-shadow-fill-secondary-overlay-dark: var(--wds-color-black-100-transparent-0);
409
- --wds-shadow-fill-secondary-overlay: var(--wds-color-black-100-transparent-0);
410
418
  --wds-shadow-fill-secondary-modal: var(--wds-color-black-100-transparent-0);
411
- --wds-shadow-fill-quaternary-raised: var(--wds-color-black-100-transparent-5);
412
- --wds-shadow-fill-primary-toggle-button: var(--wds-color-black-100-transparent-5);
419
+ --wds-shadow-fill-quaternary-raised: var(--wds-color-black-100-transparent-0);
420
+ --wds-shadow-fill-primary-toggle-button: var(--wds-color-black-100-transparent-0);
413
421
  --wds-shadow-fill-primary-toggle: var(--wds-color-black-100-transparent-0);
414
422
  --wds-shadow-fill-primary-slider: var(--wds-color-black-100-transparent-0);
415
- --wds-shadow-fill-primary-raised: var(--wds-color-black-100-transparent-5);
416
- --wds-shadow-fill-primary-overlay-dark: var(--wds-color-black-100-transparent-15);
417
- --wds-shadow-fill-primary-overlay: var(--wds-color-black-100-transparent-10);
418
- --wds-shadow-fill-primary-modal: var(--wds-color-black-100-transparent-10);
419
423
  --wds-shadow-fill-input: var(--wds-color-black-300-transparent-20);
420
424
  --wds-shadow-y-secondary-toggle: var(--wds-shadow-y-0);
421
- --wds-shadow-y-secondary-raised: var(--wds-shadow-y-0);
425
+ --wds-shadow-y-secondary-raised: var(--wds-shadow-y-50);
422
426
  --wds-shadow-y-secondary-overlay-dark: var(--wds-shadow-y-0);
423
- --wds-shadow-y-secondary-overlay: var(--wds-shadow-y-0);
424
427
  --wds-shadow-y-secondary-modal: var(--wds-shadow-y-0);
425
428
  --wds-shadow-y-primary-toggle-button: var(--wds-shadow-y-100);
426
429
  --wds-shadow-y-primary-toggle: var(--wds-shadow-y-0);
427
- --wds-shadow-y-primary-raised: var(--wds-shadow-y-25);
430
+ --wds-shadow-y-primary-raised: var(--wds-shadow-y-0);
428
431
  --wds-shadow-y-primary-overlay-dark: var(--wds-shadow-y-0);
429
- --wds-shadow-y-primary-overlay: var(--wds-shadow-y-300);
430
- --wds-shadow-y-primary-modal: var(--wds-shadow-y-600);
432
+ --wds-shadow-y-primary-overlay: var(--wds-shadow-y-0);
431
433
  --wds-shadow-y-input: var(--wds-shadow-y-25);
434
+ --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
432
435
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-25);
433
- --wds-shadow-x-primary-modal: var(--wds-shadow-x-50);
436
+ --wds-shadow-x-primary-modal: var(--wds-shadow-x-0);
434
437
  --wds-shadow-x-input: var(--wds-shadow-x-25);
435
438
  --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
436
439
  --wds-shadow-inner-400-right: -32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, -8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
@@ -445,16 +448,16 @@
445
448
  --wds-shadow-inner-200: 1px 1px 4px var(--wds-color-black-100-transparent-20) inset;
446
449
  --wds-shadow-inner-100: 1px 1px 2px var(--wds-color-black-100-transparent-10) inset, 1px 1px 2px var(--wds-color-white-transparent-10);
447
450
  --wds-shadow-blur-secondary-toggle: var(--wds-shadow-blur-0);
448
- --wds-shadow-blur-secondary-raised: var(--wds-shadow-blur-25);
451
+ --wds-shadow-blur-secondary-raised: var(--wds-shadow-blur-50);
449
452
  --wds-shadow-blur-secondary-overlay-dark: var(--wds-shadow-blur-0);
450
- --wds-shadow-blur-secondary-overlay: var(--wds-shadow-blur-0);
453
+ --wds-shadow-blur-secondary-overlay: var(--wds-shadow-blur-800);
451
454
  --wds-shadow-blur-secondary-modal: var(--wds-shadow-blur-0);
452
455
  --wds-shadow-blur-primary-toggle-button: var(--wds-shadow-blur-50);
453
456
  --wds-shadow-blur-primary-toggle: var(--wds-shadow-blur-0);
454
- --wds-shadow-blur-primary-raised: var(--wds-shadow-blur-135);
457
+ --wds-shadow-blur-primary-raised: var(--wds-shadow-blur-50);
455
458
  --wds-shadow-blur-primary-overlay-dark: var(--wds-shadow-blur-125);
456
- --wds-shadow-blur-primary-overlay: var(--wds-shadow-blur-800);
457
- --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-800);
459
+ --wds-shadow-blur-primary-overlay: var(--wds-shadow-blur-125);
460
+ --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-500);
458
461
  --wds-shadow-blur-input: var(--wds-shadow-blur-35);
459
462
  --wds-shadow-400: 0 8px 8px var(--wds-color-black-100-transparent-10), 0 3px 24px var(--wds-color-black-100-transparent-20);
460
463
  --wds-shadow-300: 0 var(--wds-shadow-y-300) var(--wds-shadow-blur-800) 0 var(--wds-color-black-100-transparent-10), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) 0 var(--wds-color-black-100-transparent-0);
@@ -851,8 +854,6 @@
851
854
  --wds-toggle-button-inner-shadow-y-primary: var(--wds-shadow-y-25);
852
855
  --wds-toggle-button-inner-shadow-x-secondary: var(--wds-shadow-x-25);
853
856
  --wds-toggle-button-inner-shadow-x-primary: var(--wds-shadow-x-25);
854
- --wds-toggle-button-inner-shadow-fill-secondary: var(--wds-color-white);
855
- --wds-toggle-button-inner-shadow-fill-primary: var(--wds-color-white);
856
857
  --wds-toggle-button-fill-standard-selected-hover: var(--wds-color-blue-400);
857
858
  --wds-toggle-button-fill-standard-selected-disabled: var(--wds-color-black-700);
858
859
  --wds-toggle-button-fill-standard-selected: var(--wds-color-blue-500);
@@ -961,6 +962,7 @@
961
962
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
962
963
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
963
964
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-300);
965
+ --wds-slider-track-color-disabled: var(--wds-color-black-600);
964
966
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
965
967
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
966
968
  --wds-slider-slider-marks-label-font-size: var(--wds-font-size-200);
@@ -1096,8 +1098,9 @@
1096
1098
  --wds-section-helper-horizontal-padding-small: var(--wds-space-300);
1097
1099
  --wds-section-helper-horizontal-padding-medium: var(--wds-space-400);
1098
1100
  --wds-section-helper-horizontal-margin: var(--wds-space-150);
1099
- --wds-section-helper-fill-standard: var(--wds-color-blue-600);
1101
+ --wds-section-helper-fill-standard: var(--wds-color-blue-500);
1100
1102
  --wds-section-helper-fill-preview: var(--wds-color-black-750);
1103
+ --wds-section-helper-fill-premium: var(--wds-color-blue-500);
1101
1104
  --wds-section-helper-close-button-offset: var(--wds-space-0);
1102
1105
  --wds-section-helper-border-radius: var(--wds-border-radius-300);
1103
1106
  --wds-section-helper-border-preview: var(--wds-color-black-600);
@@ -1140,9 +1143,9 @@
1140
1143
  --wds-popover-menu-paddings-vertical: var(--wds-space-200);
1141
1144
  --wds-popover-menu-paddings-horizontal: var(--wds-space-200);
1142
1145
  --wds-popover-menu-border-radius: var(--wds-border-radius-600);
1143
- --wds-popover-border-width: var(--wds-border-width-none);
1146
+ --wds-popover-border-width: var(--wds-border-width-100);
1144
1147
  --wds-popover-border-radius: var(--wds-border-radius-600);
1145
- --wds-popover-border-fill: var(--wds-color-black-100-transparent-0);
1148
+ --wds-popover-border-fill: var(--wds-color-black-700);
1146
1149
  --wds-palette-border: var(--wds-border-radius-200);
1147
1150
  --wds-pagination-padding-vertical: var(--wds-space-50);
1148
1151
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -1224,6 +1227,7 @@
1224
1227
  --wds-list-item-action-padding-vertical-medium: var(--wds-space-200);
1225
1228
  --wds-list-item-action-padding-horizontal-small: var(--wds-space-200);
1226
1229
  --wds-list-item-action-padding-horizontal-medium: var(--wds-space-200);
1230
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-red-50);
1227
1231
  --wds-list-item-action-gap: var(--wds-space-50);
1228
1232
  --wds-list-item-action-border-radius: var(--wds-border-radius-400);
1229
1233
  --wds-list-item-action-affix-margin: var(--wds-space-100);
@@ -1701,7 +1705,7 @@
1701
1705
  --wds-loader-fill-success: var(--wds-color-fill-standard-primary);
1702
1706
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1703
1707
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1704
- --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1708
+ --wds-loader-fill: var(--wds-color-fill-dark-secondary);
1705
1709
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1706
1710
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1707
1711
  --wds-list-item-select-suffix: var(--wds-color-text-standard-primary);
@@ -1731,6 +1735,7 @@
1731
1735
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1732
1736
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1733
1737
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
1738
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-primary);
1734
1739
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1735
1740
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1736
1741
  --wds-list-item-action-label-fill-active: var(--wds-color-text-standard-primary);