@wix/design-system-tokens 1.119.0 → 1.120.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +55 -4
  3. package/all.st.css +106 -4
  4. package/component.st.css +4 -0
  5. package/foundation.st.css +36 -4
  6. package/odeditor/all.css +1795 -0
  7. package/odeditor/all.st.css +3589 -0
  8. package/odeditor/component.st.css +2241 -0
  9. package/odeditor/foundation.st.css +439 -0
  10. package/odeditor/semantic.st.css +915 -0
  11. package/package.json +2 -2
  12. package/semantic.st.css +66 -0
  13. package/studio/all.css +56 -5
  14. package/studio/all.st.css +107 -5
  15. package/studio/component.st.css +4 -0
  16. package/studio/foundation.st.css +37 -5
  17. package/studio/semantic.st.css +66 -0
  18. package/wixel/all.css +47 -0
  19. package/wixel/all.st.css +94 -0
  20. package/wixel/component.st.css +4 -0
  21. package/wixel/foundation.st.css +32 -0
  22. package/wixel/semantic.st.css +58 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.120.0 - 2025-07-16
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): introduce `Editor3` definitions [14941](https://github.com/wix-private/wix-design-systems/pull/14941)
6
+
1
7
  ## 1.119.0 - 2025-07-15
2
8
 
3
9
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -13,6 +13,7 @@
13
13
  --wds-space-900: 54px;
14
14
  --wds-space-850: 51px;
15
15
  --wds-space-800: 48px;
16
+ --wds-space-750: 45px;
16
17
  --wds-space-700: 42px;
17
18
  --wds-space-600: 36px;
18
19
  --wds-space-500: 30px;
@@ -28,18 +29,31 @@
28
29
  --wds-space-50: 3px;
29
30
  --wds-space-25: 1px;
30
31
  --wds-space-0: 0;
32
+ --wds-shadow-spread-secondary-raised: 0;
31
33
  --wds-shadow-focus-spread: 3;
32
34
  --wds-shadow-y-350: 3px;
33
- --wds-shadow-y-300: 0;
34
- --wds-shadow-y-200: 0;
35
- --wds-shadow-y-100: 0;
35
+ --wds-shadow-y-300: 12px;
36
+ --wds-shadow-y-200: 9px;
37
+ --wds-shadow-y-150: 8px;
38
+ --wds-shadow-y-100: 6px;
39
+ --wds-shadow-y-50: 3px;
40
+ --wds-shadow-y-25: 2px;
36
41
  --wds-shadow-y-0: 0;
42
+ --wds-shadow-x-25: 2px;
43
+ --wds-shadow-x-0: 0;
44
+ --wds-shadow-blur-800: 36px;
45
+ --wds-shadow-blur-500: 24px;
37
46
  --wds-shadow-blur-400: 24px;
38
47
  --wds-shadow-blur-200: 18px;
39
- --wds-shadow-blur-150: 6px;
48
+ --wds-shadow-blur-150: 8px;
49
+ --wds-shadow-blur-135: 7px;
50
+ --wds-shadow-blur-125: 6px;
40
51
  --wds-shadow-blur-100: 6px;
52
+ --wds-shadow-blur-75: 4px;
41
53
  --wds-shadow-blur-50: 3px;
42
54
  --wds-shadow-blur-35: 2px;
55
+ --wds-shadow-blur-25: 1px;
56
+ --wds-shadow-blur-0: 0;
43
57
  --wds-font-weight-semi-bold: 600;
44
58
  --wds-font-weight-regular: 400;
45
59
  --wds-font-weight-medium: 500;
@@ -116,6 +130,7 @@
116
130
  --wds-color-fill-accent-3: #6544F9;
117
131
  --wds-color-fill-accent-2: #17B0E2;
118
132
  --wds-color-fill-accent-1: #1684EA;
133
+ --wds-color-border-stage-wip: #ffffff;
119
134
  --wds-color-border-ai-primary-hover: #ffffff;
120
135
  --wds-color-border-ai-primary-disabled: #ffffff;
121
136
  --wds-color-border-ai-primary-active: #ffffff;
@@ -204,6 +219,7 @@
204
219
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
205
220
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
206
221
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
222
+ --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
207
223
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
208
224
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
209
225
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
@@ -222,6 +238,7 @@
222
238
  --wds-breakpoint-large: 1186px;
223
239
  --wds-border-width-none: 0;
224
240
  --wds-border-width-200: 2px;
241
+ --wds-border-width-150: 1.5px;
225
242
  --wds-border-width-100: 1px;
226
243
  --wds-border-radius-full: 1000px;
227
244
  --wds-border-radius-600: 12px;
@@ -326,19 +343,36 @@
326
343
  --wds-space-padding-horizontal-medium: var(--wds-space-300);
327
344
  --wds-space-padding-horizontal-large: var(--wds-space-400);
328
345
  --wds-space-mobile-viewport-spacing: var(--wds-space-500);
346
+ --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
329
347
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
330
348
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
331
349
  --wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
332
350
  --wds-shadow-focus-inner-standard: 0 0 0 3px var(--wds-color-blue-300) inset;
333
351
  --wds-shadow-focus-inner-destructive: 0 0 0 3px var(--wds-color-red-400) inset;
334
352
  --wds-shadow-focus-destructive: 0 0 0 3px var(--wds-color-red-400);
353
+ --wds-shadow-fill-tertiary-raised: var(--wds-color-black-100-transparent-0);
335
354
  --wds-shadow-fill-secondary-toggle: var(--wds-color-black-100-transparent-50);
336
355
  --wds-shadow-fill-secondary-raised: var(--wds-color-black-100-transparent-5);
356
+ --wds-shadow-fill-secondary-overlay-dark: var(--wds-color-black-100-transparent-5);
337
357
  --wds-shadow-fill-secondary-overlay: var(--wds-color-black-100-transparent-5);
338
358
  --wds-shadow-fill-secondary-modal: var(--wds-color-black-100-transparent-10);
359
+ --wds-shadow-fill-quaternary-raised: var(--wds-color-black-100-transparent-0);
360
+ --wds-shadow-fill-primary-toggle: var(--wds-color-black-100-transparent-20);
361
+ --wds-shadow-fill-primary-slider: var(--wds-color-black-100-transparent-0);
339
362
  --wds-shadow-fill-primary-raised: var(--wds-color-black-100-transparent-10);
363
+ --wds-shadow-fill-primary-overlay-dark: var(--wds-color-black-100-transparent-10);
340
364
  --wds-shadow-fill-primary-overlay: var(--wds-color-black-100-transparent-10);
341
365
  --wds-shadow-fill-primary-modal: var(--wds-color-black-100-transparent-20);
366
+ --wds-shadow-y-secondary-toggle: var(--wds-shadow-y-25);
367
+ --wds-shadow-y-secondary-raised: var(--wds-shadow-y-25);
368
+ --wds-shadow-y-secondary-overlay-dark: var(--wds-shadow-y-100);
369
+ --wds-shadow-y-secondary-overlay: var(--wds-shadow-y-100);
370
+ --wds-shadow-y-secondary-modal: var(--wds-shadow-y-150);
371
+ --wds-shadow-y-primary-toggle: var(--wds-shadow-y-0);
372
+ --wds-shadow-y-primary-raised: var(--wds-shadow-y-0);
373
+ --wds-shadow-y-primary-overlay-dark: var(--wds-shadow-y-0);
374
+ --wds-shadow-y-primary-overlay: var(--wds-shadow-y-0);
375
+ --wds-shadow-y-primary-modal: var(--wds-shadow-y-50);
342
376
  --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;
343
377
  --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;
344
378
  --wds-shadow-inner-400-left: 32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, 8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
@@ -351,6 +385,16 @@
351
385
  --wds-shadow-inner-300: 0 0 18px var(--wds-color-black-100-transparent-10) inset, 0 0 6px var(--wds-color-black-100-transparent-5) inset;
352
386
  --wds-shadow-inner-200: 1px 1px 4px var(--wds-color-black-100-transparent-20) inset;
353
387
  --wds-shadow-inner-100: 1px 1px 2px var(--wds-color-black-100-transparent-10) inset, 1px 1px 2px var(--wds-color-white-transparent-10);
388
+ --wds-shadow-blur-secondary-toggle: var(--wds-shadow-blur-25);
389
+ --wds-shadow-blur-secondary-raised: var(--wds-shadow-blur-75);
390
+ --wds-shadow-blur-secondary-overlay-dark: var(--wds-shadow-blur-100);
391
+ --wds-shadow-blur-secondary-overlay: var(--wds-shadow-blur-100);
392
+ --wds-shadow-blur-secondary-modal: var(--wds-shadow-blur-150);
393
+ --wds-shadow-blur-primary-toggle: var(--wds-shadow-blur-50);
394
+ --wds-shadow-blur-primary-raised: var(--wds-shadow-blur-100);
395
+ --wds-shadow-blur-primary-overlay-dark: var(--wds-shadow-blur-200);
396
+ --wds-shadow-blur-primary-overlay: var(--wds-shadow-blur-200);
397
+ --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-400);
354
398
  --wds-shadow-400: 0 3px 24px var(--wds-color-black-100-transparent-20), 0 8px 8px var(--wds-color-black-100-transparent-10);
355
399
  --wds-shadow-300: 0 0 18px var(--wds-color-black-100-transparent-10), 0 6px 6px var(--wds-color-black-100-transparent-5);
356
400
  --wds-shadow-200: 0 0 6px var(--wds-color-black-100-transparent-10), 0 2px 4px var(--wds-color-black-100-transparent-10);
@@ -372,6 +416,7 @@
372
416
  --wds-font-size-body-small: var(--wds-font-size-300);
373
417
  --wds-font-size-body-medium: var(--wds-font-size-500);
374
418
  --wds-font-size-body-extra-tiny: var(--wds-font-size-100);
419
+ --wds-font-line-height-600: var(--wds-space-600);
375
420
  --wds-font-line-height-500: var(--wds-space-600);
376
421
  --wds-font-line-height-400: var(--wds-space-475);
377
422
  --wds-font-line-height-300: var(--wds-space-400);
@@ -543,6 +588,10 @@
543
588
  --wds-color-fill-premium-primary-disabled: var(--wds-color-black-100-transparent-30);
544
589
  --wds-color-fill-premium-primary-active: var(--wds-color-purple-0);
545
590
  --wds-color-fill-premium-primary: var(--wds-color-purple-100);
591
+ --wds-color-fill-light-tertiary-hover: var(--wds-color-blue-500);
592
+ --wds-color-fill-light-tertiary-disabled: var(--wds-color-white-transparent-0);
593
+ --wds-color-fill-light-tertiary-active: var(--wds-color-blue-400);
594
+ --wds-color-fill-light-tertiary: var(--wds-color-white);
546
595
  --wds-color-fill-light-secondary-hover: var(--wds-color-blue-500);
547
596
  --wds-color-fill-light-secondary-disabled: var(--wds-color-white-transparent-0);
548
597
  --wds-color-fill-light-secondary-active: var(--wds-color-blue-400);
@@ -1532,6 +1581,7 @@
1532
1581
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1533
1582
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1534
1583
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1584
+ --wds-button-label-fill-standard-secondary: var(--wds-color-text-primary);
1535
1585
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
1536
1586
  --wds-button-font-size-small: var(--wds-font-size-body-small);
1537
1587
  --wds-button-font-size-medium: var(--wds-font-size-body-medium);
@@ -1544,6 +1594,7 @@
1544
1594
  --wds-button-fill-standard-primary: var(--wds-color-fill-standard-primary);
1545
1595
  --wds-button-fill-gradient-hover-secondary: var(--wds-color-fill-standard-primary-hover);
1546
1596
  --wds-button-fill-gradient-hover-primary: var(--wds-color-fill-standard-primary-hover);
1597
+ --wds-button-border-fill-standard-secondary: var(--wds-color-border-standard-secondary);
1547
1598
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
1548
1599
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
1549
1600
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
package/all.st.css CHANGED
@@ -64,6 +64,7 @@
64
64
  @property st-global(--wds-border-radius-surface-raised);
65
65
  @property st-global(--wds-border-radius-surface-sunken);
66
66
  @property st-global(--wds-border-width-100);
67
+ @property st-global(--wds-border-width-150);
67
68
  @property st-global(--wds-border-width-200);
68
69
  @property st-global(--wds-border-width-default);
69
70
  @property st-global(--wds-border-width-none);
@@ -85,6 +86,7 @@
85
86
  @property st-global(--wds-breakpoint-medium);
86
87
  @property st-global(--wds-breakpoint-small);
87
88
  @property st-global(--wds-breakpoint-x-large);
89
+ @property st-global(--wds-button-border-fill-standard-secondary);
88
90
  @property st-global(--wds-button-border-radius-large);
89
91
  @property st-global(--wds-button-border-radius-medium);
90
92
  @property st-global(--wds-button-border-radius-small);
@@ -114,6 +116,7 @@
114
116
  @property st-global(--wds-button-icon-offset-medium);
115
117
  @property st-global(--wds-button-icon-offset-small);
116
118
  @property st-global(--wds-button-icon-offset-tiny);
119
+ @property st-global(--wds-button-label-fill-standard-secondary);
117
120
  @property st-global(--wds-button-label-fill-transparent-tertiary);
118
121
  @property st-global(--wds-button-label-font-size-large);
119
122
  @property st-global(--wds-button-outline-hover);
@@ -205,6 +208,7 @@
205
208
  @property st-global(--wds-color-black-100-transparent-0);
206
209
  @property st-global(--wds-color-black-100-transparent-5);
207
210
  @property st-global(--wds-color-black-100-transparent-10);
211
+ @property st-global(--wds-color-black-100-transparent-15);
208
212
  @property st-global(--wds-color-black-100-transparent-20);
209
213
  @property st-global(--wds-color-black-100-transparent-30);
210
214
  @property st-global(--wds-color-black-100-transparent-40);
@@ -276,6 +280,7 @@
276
280
  @property st-global(--wds-color-border-premium-tertiary-active);
277
281
  @property st-global(--wds-color-border-premium-tertiary-disabled);
278
282
  @property st-global(--wds-color-border-premium-tertiary-hover);
283
+ @property st-global(--wds-color-border-stage-wip);
279
284
  @property st-global(--wds-color-border-standard-primary);
280
285
  @property st-global(--wds-color-border-standard-primary-active);
281
286
  @property st-global(--wds-color-border-standard-primary-disabled);
@@ -388,6 +393,10 @@
388
393
  @property st-global(--wds-color-fill-light-secondary-active);
389
394
  @property st-global(--wds-color-fill-light-secondary-disabled);
390
395
  @property st-global(--wds-color-fill-light-secondary-hover);
396
+ @property st-global(--wds-color-fill-light-tertiary);
397
+ @property st-global(--wds-color-fill-light-tertiary-active);
398
+ @property st-global(--wds-color-fill-light-tertiary-disabled);
399
+ @property st-global(--wds-color-fill-light-tertiary-hover);
391
400
  @property st-global(--wds-color-fill-premium-light-primary);
392
401
  @property st-global(--wds-color-fill-premium-light-primary-active);
393
402
  @property st-global(--wds-color-fill-premium-light-primary-disabled);
@@ -745,6 +754,7 @@
745
754
  @property st-global(--wds-font-line-height-300);
746
755
  @property st-global(--wds-font-line-height-400);
747
756
  @property st-global(--wds-font-line-height-500);
757
+ @property st-global(--wds-font-line-height-600);
748
758
  @property st-global(--wds-font-line-height-body-extra-tiny);
749
759
  @property st-global(--wds-font-line-height-body-medium);
750
760
  @property st-global(--wds-font-line-height-body-small);
@@ -1161,19 +1171,42 @@
1161
1171
  @property st-global(--wds-shadow-200);
1162
1172
  @property st-global(--wds-shadow-300);
1163
1173
  @property st-global(--wds-shadow-400);
1174
+ @property st-global(--wds-shadow-blur-0);
1175
+ @property st-global(--wds-shadow-blur-25);
1164
1176
  @property st-global(--wds-shadow-blur-35);
1165
1177
  @property st-global(--wds-shadow-blur-50);
1178
+ @property st-global(--wds-shadow-blur-75);
1166
1179
  @property st-global(--wds-shadow-blur-100);
1180
+ @property st-global(--wds-shadow-blur-125);
1181
+ @property st-global(--wds-shadow-blur-135);
1167
1182
  @property st-global(--wds-shadow-blur-150);
1168
1183
  @property st-global(--wds-shadow-blur-200);
1169
1184
  @property st-global(--wds-shadow-blur-400);
1185
+ @property st-global(--wds-shadow-blur-500);
1186
+ @property st-global(--wds-shadow-blur-800);
1187
+ @property st-global(--wds-shadow-blur-primary-modal);
1188
+ @property st-global(--wds-shadow-blur-primary-overlay);
1189
+ @property st-global(--wds-shadow-blur-primary-overlay-dark);
1190
+ @property st-global(--wds-shadow-blur-primary-raised);
1191
+ @property st-global(--wds-shadow-blur-primary-toggle);
1192
+ @property st-global(--wds-shadow-blur-secondary-modal);
1193
+ @property st-global(--wds-shadow-blur-secondary-overlay);
1194
+ @property st-global(--wds-shadow-blur-secondary-overlay-dark);
1195
+ @property st-global(--wds-shadow-blur-secondary-raised);
1196
+ @property st-global(--wds-shadow-blur-secondary-toggle);
1170
1197
  @property st-global(--wds-shadow-fill-primary-modal);
1171
1198
  @property st-global(--wds-shadow-fill-primary-overlay);
1199
+ @property st-global(--wds-shadow-fill-primary-overlay-dark);
1172
1200
  @property st-global(--wds-shadow-fill-primary-raised);
1201
+ @property st-global(--wds-shadow-fill-primary-slider);
1202
+ @property st-global(--wds-shadow-fill-primary-toggle);
1203
+ @property st-global(--wds-shadow-fill-quaternary-raised);
1173
1204
  @property st-global(--wds-shadow-fill-secondary-modal);
1174
1205
  @property st-global(--wds-shadow-fill-secondary-overlay);
1206
+ @property st-global(--wds-shadow-fill-secondary-overlay-dark);
1175
1207
  @property st-global(--wds-shadow-fill-secondary-raised);
1176
1208
  @property st-global(--wds-shadow-fill-secondary-toggle);
1209
+ @property st-global(--wds-shadow-fill-tertiary-raised);
1177
1210
  @property st-global(--wds-shadow-focus-destructive);
1178
1211
  @property st-global(--wds-shadow-focus-inner-destructive);
1179
1212
  @property st-global(--wds-shadow-focus-inner-standard);
@@ -1197,15 +1230,32 @@
1197
1230
  @property st-global(--wds-shadow-inner-400-right);
1198
1231
  @property st-global(--wds-shadow-inner-400-top);
1199
1232
  @property st-global(--wds-shadow-inner-400-vertical);
1233
+ @property st-global(--wds-shadow-spread-secondary-raised);
1200
1234
  @property st-global(--wds-shadow-surface-modal);
1201
1235
  @property st-global(--wds-shadow-surface-overlay);
1202
1236
  @property st-global(--wds-shadow-surface-overlay-dark);
1203
1237
  @property st-global(--wds-shadow-surface-raised);
1238
+ @property st-global(--wds-shadow-x-0);
1239
+ @property st-global(--wds-shadow-x-25);
1240
+ @property st-global(--wds-shadow-x-secondary-raised);
1204
1241
  @property st-global(--wds-shadow-y-0);
1242
+ @property st-global(--wds-shadow-y-25);
1243
+ @property st-global(--wds-shadow-y-50);
1205
1244
  @property st-global(--wds-shadow-y-100);
1245
+ @property st-global(--wds-shadow-y-150);
1206
1246
  @property st-global(--wds-shadow-y-200);
1207
1247
  @property st-global(--wds-shadow-y-300);
1208
1248
  @property st-global(--wds-shadow-y-350);
1249
+ @property st-global(--wds-shadow-y-primary-modal);
1250
+ @property st-global(--wds-shadow-y-primary-overlay);
1251
+ @property st-global(--wds-shadow-y-primary-overlay-dark);
1252
+ @property st-global(--wds-shadow-y-primary-raised);
1253
+ @property st-global(--wds-shadow-y-primary-toggle);
1254
+ @property st-global(--wds-shadow-y-secondary-modal);
1255
+ @property st-global(--wds-shadow-y-secondary-overlay);
1256
+ @property st-global(--wds-shadow-y-secondary-overlay-dark);
1257
+ @property st-global(--wds-shadow-y-secondary-raised);
1258
+ @property st-global(--wds-shadow-y-secondary-toggle);
1209
1259
  @property st-global(--wds-side-panel-back-button-top-padding);
1210
1260
  @property st-global(--wds-side-panel-content-padding-horizontal);
1211
1261
  @property st-global(--wds-side-panel-content-padding-vertical);
@@ -1328,6 +1378,7 @@
1328
1378
  @property st-global(--wds-space-500);
1329
1379
  @property st-global(--wds-space-600);
1330
1380
  @property st-global(--wds-space-700);
1381
+ @property st-global(--wds-space-750);
1331
1382
  @property st-global(--wds-space-800);
1332
1383
  @property st-global(--wds-space-850);
1333
1384
  @property st-global(--wds-space-900);
@@ -1669,6 +1720,7 @@
1669
1720
  --wds-border-radius-surface-raised: 8px;
1670
1721
  --wds-border-radius-surface-sunken: 0;
1671
1722
  --wds-border-width-100: 1px;
1723
+ --wds-border-width-150: 1.5px;
1672
1724
  --wds-border-width-200: 2px;
1673
1725
  --wds-border-width-default: 1px;
1674
1726
  --wds-border-width-none: 0;
@@ -1690,6 +1742,7 @@
1690
1742
  --wds-breakpoint-medium: 768px;
1691
1743
  --wds-breakpoint-small: 490px;
1692
1744
  --wds-breakpoint-x-large: 1572px;
1745
+ --wds-button-border-fill-standard-secondary: #d6e6fe;
1693
1746
  --wds-button-border-radius-large: 1000px;
1694
1747
  --wds-button-border-radius-medium: 1000px;
1695
1748
  --wds-button-border-radius-small: 1000px;
@@ -1719,6 +1772,7 @@
1719
1772
  --wds-button-icon-offset-medium: 12px;
1720
1773
  --wds-button-icon-offset-small: 12px;
1721
1774
  --wds-button-icon-offset-tiny: 12px;
1775
+ --wds-button-label-fill-standard-secondary: #116dff;
1722
1776
  --wds-button-label-fill-transparent-tertiary: #ffffff;
1723
1777
  --wds-button-label-font-size-large: 16px;
1724
1778
  --wds-button-outline-hover: transparent;
@@ -1810,6 +1864,7 @@
1810
1864
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
1811
1865
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
1812
1866
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
1867
+ --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
1813
1868
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
1814
1869
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
1815
1870
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
@@ -1881,6 +1936,7 @@
1881
1936
  --wds-color-border-premium-tertiary-active: #cf8cf1;
1882
1937
  --wds-color-border-premium-tertiary-disabled: rgba(0, 6, 36, .1);
1883
1938
  --wds-color-border-premium-tertiary-hover: #e3c3f4;
1939
+ --wds-color-border-stage-wip: #ffffff;
1884
1940
  --wds-color-border-standard-primary: #a8caff;
1885
1941
  --wds-color-border-standard-primary-active: #116dff;
1886
1942
  --wds-color-border-standard-primary-disabled: rgba(0, 6, 36, .1);
@@ -1993,6 +2049,10 @@
1993
2049
  --wds-color-fill-light-secondary-active: #d6e6fe;
1994
2050
  --wds-color-fill-light-secondary-disabled: rgba(255, 255, 255, 0);
1995
2051
  --wds-color-fill-light-secondary-hover: #e7f0ff;
2052
+ --wds-color-fill-light-tertiary: #ffffff;
2053
+ --wds-color-fill-light-tertiary-active: #d6e6fe;
2054
+ --wds-color-fill-light-tertiary-disabled: rgba(255, 255, 255, 0);
2055
+ --wds-color-fill-light-tertiary-hover: #e7f0ff;
1996
2056
  --wds-color-fill-premium-light-primary: #ffffff;
1997
2057
  --wds-color-fill-premium-light-primary-active: #e3c3f4;
1998
2058
  --wds-color-fill-premium-light-primary-disabled: rgba(255, 255, 255, .3);
@@ -2350,6 +2410,7 @@
2350
2410
  --wds-font-line-height-300: 24px;
2351
2411
  --wds-font-line-height-400: 28px;
2352
2412
  --wds-font-line-height-500: 36px;
2413
+ --wds-font-line-height-600: 36px;
2353
2414
  --wds-font-line-height-body-extra-tiny: 12px;
2354
2415
  --wds-font-line-height-body-medium: 24px;
2355
2416
  --wds-font-line-height-body-small: 18px;
@@ -2766,19 +2827,42 @@
2766
2827
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2767
2828
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
2768
2829
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
2830
+ --wds-shadow-blur-0: 0;
2831
+ --wds-shadow-blur-25: 1px;
2769
2832
  --wds-shadow-blur-35: 2px;
2770
2833
  --wds-shadow-blur-50: 3px;
2834
+ --wds-shadow-blur-75: 4px;
2771
2835
  --wds-shadow-blur-100: 6px;
2772
- --wds-shadow-blur-150: 6px;
2836
+ --wds-shadow-blur-125: 6px;
2837
+ --wds-shadow-blur-135: 7px;
2838
+ --wds-shadow-blur-150: 8px;
2773
2839
  --wds-shadow-blur-200: 18px;
2774
2840
  --wds-shadow-blur-400: 24px;
2841
+ --wds-shadow-blur-500: 24px;
2842
+ --wds-shadow-blur-800: 36px;
2843
+ --wds-shadow-blur-primary-modal: 24px;
2844
+ --wds-shadow-blur-primary-overlay: 18px;
2845
+ --wds-shadow-blur-primary-overlay-dark: 18px;
2846
+ --wds-shadow-blur-primary-raised: 6px;
2847
+ --wds-shadow-blur-primary-toggle: 3px;
2848
+ --wds-shadow-blur-secondary-modal: 8px;
2849
+ --wds-shadow-blur-secondary-overlay: 6px;
2850
+ --wds-shadow-blur-secondary-overlay-dark: 6px;
2851
+ --wds-shadow-blur-secondary-raised: 4px;
2852
+ --wds-shadow-blur-secondary-toggle: 1px;
2775
2853
  --wds-shadow-fill-primary-modal: rgba(0, 6, 36, .2);
2776
2854
  --wds-shadow-fill-primary-overlay: rgba(0, 6, 36, .1);
2855
+ --wds-shadow-fill-primary-overlay-dark: rgba(0, 6, 36, .1);
2777
2856
  --wds-shadow-fill-primary-raised: rgba(0, 6, 36, .1);
2857
+ --wds-shadow-fill-primary-slider: rgba(0, 6, 36, 0);
2858
+ --wds-shadow-fill-primary-toggle: rgba(0, 6, 36, .2);
2859
+ --wds-shadow-fill-quaternary-raised: rgba(0, 6, 36, 0);
2778
2860
  --wds-shadow-fill-secondary-modal: rgba(0, 6, 36, .1);
2779
2861
  --wds-shadow-fill-secondary-overlay: rgba(0, 6, 36, .05);
2862
+ --wds-shadow-fill-secondary-overlay-dark: rgba(0, 6, 36, .05);
2780
2863
  --wds-shadow-fill-secondary-raised: rgba(0, 6, 36, .05);
2781
2864
  --wds-shadow-fill-secondary-toggle: rgba(0, 6, 36, .5);
2865
+ --wds-shadow-fill-tertiary-raised: rgba(0, 6, 36, 0);
2782
2866
  --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
2783
2867
  --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
2784
2868
  --wds-shadow-focus-inner-standard: 0 0 0 3px #a8caff inset;
@@ -2802,15 +2886,32 @@
2802
2886
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(0, 6, 36, .2) inset, -8px 0 6px -6px rgba(0, 6, 36, .05) inset;
2803
2887
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(0, 6, 36, .2) inset, 0 8px 6px -6px rgba(0, 6, 36, .05) inset;
2804
2888
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
2889
+ --wds-shadow-spread-secondary-raised: 0;
2805
2890
  --wds-shadow-surface-modal: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
2806
2891
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
2807
2892
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
2808
2893
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2894
+ --wds-shadow-x-0: 0;
2895
+ --wds-shadow-x-25: 2px;
2896
+ --wds-shadow-x-secondary-raised: 0;
2809
2897
  --wds-shadow-y-0: 0;
2810
- --wds-shadow-y-100: 0;
2811
- --wds-shadow-y-200: 0;
2812
- --wds-shadow-y-300: 0;
2898
+ --wds-shadow-y-25: 2px;
2899
+ --wds-shadow-y-50: 3px;
2900
+ --wds-shadow-y-100: 6px;
2901
+ --wds-shadow-y-150: 8px;
2902
+ --wds-shadow-y-200: 9px;
2903
+ --wds-shadow-y-300: 12px;
2813
2904
  --wds-shadow-y-350: 3px;
2905
+ --wds-shadow-y-primary-modal: 3px;
2906
+ --wds-shadow-y-primary-overlay: 0;
2907
+ --wds-shadow-y-primary-overlay-dark: 0;
2908
+ --wds-shadow-y-primary-raised: 0;
2909
+ --wds-shadow-y-primary-toggle: 0;
2910
+ --wds-shadow-y-secondary-modal: 8px;
2911
+ --wds-shadow-y-secondary-overlay: 6px;
2912
+ --wds-shadow-y-secondary-overlay-dark: 6px;
2913
+ --wds-shadow-y-secondary-raised: 2px;
2914
+ --wds-shadow-y-secondary-toggle: 2px;
2814
2915
  --wds-side-panel-back-button-top-padding: 0;
2815
2916
  --wds-side-panel-content-padding-horizontal: 24px;
2816
2917
  --wds-side-panel-content-padding-vertical: 24px;
@@ -2933,6 +3034,7 @@
2933
3034
  --wds-space-500: 30px;
2934
3035
  --wds-space-600: 36px;
2935
3036
  --wds-space-700: 42px;
3037
+ --wds-space-750: 45px;
2936
3038
  --wds-space-800: 48px;
2937
3039
  --wds-space-850: 51px;
2938
3040
  --wds-space-900: 54px;
package/component.st.css CHANGED
@@ -54,6 +54,7 @@
54
54
  @property st-global(--wds-breadcrumbs-text-line-height-small);
55
55
  @property st-global(--wds-breadcrumbs-text-weight-default);
56
56
  @property st-global(--wds-breadcrumbs-text-weight-selected);
57
+ @property st-global(--wds-button-border-fill-standard-secondary);
57
58
  @property st-global(--wds-button-border-radius-large);
58
59
  @property st-global(--wds-button-border-radius-medium);
59
60
  @property st-global(--wds-button-border-radius-small);
@@ -83,6 +84,7 @@
83
84
  @property st-global(--wds-button-icon-offset-medium);
84
85
  @property st-global(--wds-button-icon-offset-small);
85
86
  @property st-global(--wds-button-icon-offset-tiny);
87
+ @property st-global(--wds-button-label-fill-standard-secondary);
86
88
  @property st-global(--wds-button-label-fill-transparent-tertiary);
87
89
  @property st-global(--wds-button-label-font-size-large);
88
90
  @property st-global(--wds-button-outline-hover);
@@ -1030,6 +1032,7 @@
1030
1032
  --wds-breadcrumbs-text-line-height-small: 18px;
1031
1033
  --wds-breadcrumbs-text-weight-default: 400;
1032
1034
  --wds-breadcrumbs-text-weight-selected: 500;
1035
+ --wds-button-border-fill-standard-secondary: #d6e6fe;
1033
1036
  --wds-button-border-radius-large: 1000px;
1034
1037
  --wds-button-border-radius-medium: 1000px;
1035
1038
  --wds-button-border-radius-small: 1000px;
@@ -1059,6 +1062,7 @@
1059
1062
  --wds-button-icon-offset-medium: 12px;
1060
1063
  --wds-button-icon-offset-small: 12px;
1061
1064
  --wds-button-icon-offset-tiny: 12px;
1065
+ --wds-button-label-fill-standard-secondary: #116dff;
1062
1066
  --wds-button-label-fill-transparent-tertiary: #ffffff;
1063
1067
  --wds-button-label-font-size-large: 16px;
1064
1068
  --wds-button-outline-hover: transparent;
package/foundation.st.css CHANGED
@@ -16,6 +16,7 @@
16
16
  @property st-global(--wds-border-radius-600);
17
17
  @property st-global(--wds-border-radius-full);
18
18
  @property st-global(--wds-border-width-100);
19
+ @property st-global(--wds-border-width-150);
19
20
  @property st-global(--wds-border-width-200);
20
21
  @property st-global(--wds-border-width-none);
21
22
  @property st-global(--wds-breakpoint-large);
@@ -26,6 +27,7 @@
26
27
  @property st-global(--wds-color-black-100-transparent-0);
27
28
  @property st-global(--wds-color-black-100-transparent-5);
28
29
  @property st-global(--wds-color-black-100-transparent-10);
30
+ @property st-global(--wds-color-black-100-transparent-15);
29
31
  @property st-global(--wds-color-black-100-transparent-20);
30
32
  @property st-global(--wds-color-black-100-transparent-30);
31
33
  @property st-global(--wds-color-black-100-transparent-40);
@@ -127,6 +129,7 @@
127
129
  @property st-global(--wds-font-line-height-300);
128
130
  @property st-global(--wds-font-line-height-400);
129
131
  @property st-global(--wds-font-line-height-500);
132
+ @property st-global(--wds-font-line-height-600);
130
133
  @property st-global(--wds-font-size-100);
131
134
  @property st-global(--wds-font-size-200);
132
135
  @property st-global(--wds-font-size-300);
@@ -144,12 +147,19 @@
144
147
  @property st-global(--wds-shadow-200);
145
148
  @property st-global(--wds-shadow-300);
146
149
  @property st-global(--wds-shadow-400);
150
+ @property st-global(--wds-shadow-blur-0);
151
+ @property st-global(--wds-shadow-blur-25);
147
152
  @property st-global(--wds-shadow-blur-35);
148
153
  @property st-global(--wds-shadow-blur-50);
154
+ @property st-global(--wds-shadow-blur-75);
149
155
  @property st-global(--wds-shadow-blur-100);
156
+ @property st-global(--wds-shadow-blur-125);
157
+ @property st-global(--wds-shadow-blur-135);
150
158
  @property st-global(--wds-shadow-blur-150);
151
159
  @property st-global(--wds-shadow-blur-200);
152
160
  @property st-global(--wds-shadow-blur-400);
161
+ @property st-global(--wds-shadow-blur-500);
162
+ @property st-global(--wds-shadow-blur-800);
153
163
  @property st-global(--wds-shadow-inner-100);
154
164
  @property st-global(--wds-shadow-inner-200);
155
165
  @property st-global(--wds-shadow-inner-300);
@@ -166,8 +176,13 @@
166
176
  @property st-global(--wds-shadow-inner-400-right);
167
177
  @property st-global(--wds-shadow-inner-400-top);
168
178
  @property st-global(--wds-shadow-inner-400-vertical);
179
+ @property st-global(--wds-shadow-x-0);
180
+ @property st-global(--wds-shadow-x-25);
169
181
  @property st-global(--wds-shadow-y-0);
182
+ @property st-global(--wds-shadow-y-25);
183
+ @property st-global(--wds-shadow-y-50);
170
184
  @property st-global(--wds-shadow-y-100);
185
+ @property st-global(--wds-shadow-y-150);
171
186
  @property st-global(--wds-shadow-y-200);
172
187
  @property st-global(--wds-shadow-y-300);
173
188
  @property st-global(--wds-shadow-y-350);
@@ -186,6 +201,7 @@
186
201
  @property st-global(--wds-space-500);
187
202
  @property st-global(--wds-space-600);
188
203
  @property st-global(--wds-space-700);
204
+ @property st-global(--wds-space-750);
189
205
  @property st-global(--wds-space-800);
190
206
  @property st-global(--wds-space-850);
191
207
  @property st-global(--wds-space-900);
@@ -220,6 +236,7 @@
220
236
  --wds-border-radius-600: 12px;
221
237
  --wds-border-radius-full: 1000px;
222
238
  --wds-border-width-100: 1px;
239
+ --wds-border-width-150: 1.5px;
223
240
  --wds-border-width-200: 2px;
224
241
  --wds-border-width-none: 0;
225
242
  --wds-breakpoint-large: 1186px;
@@ -230,6 +247,7 @@
230
247
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
231
248
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
232
249
  --wds-color-black-100-transparent-10: rgba(0, 6, 36, .1);
250
+ --wds-color-black-100-transparent-15: rgba(0, 6, 36, 0.15);
233
251
  --wds-color-black-100-transparent-20: rgba(0, 6, 36, .2);
234
252
  --wds-color-black-100-transparent-30: rgba(0, 6, 36, .3);
235
253
  --wds-color-black-100-transparent-40: rgba(0, 6, 36, .4);
@@ -331,6 +349,7 @@
331
349
  --wds-font-line-height-300: 24px;
332
350
  --wds-font-line-height-400: 28px;
333
351
  --wds-font-line-height-500: 36px;
352
+ --wds-font-line-height-600: 36px;
334
353
  --wds-font-size-100: 10px;
335
354
  --wds-font-size-200: 12px;
336
355
  --wds-font-size-300: 14px;
@@ -348,12 +367,19 @@
348
367
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
349
368
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
350
369
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
370
+ --wds-shadow-blur-0: 0;
371
+ --wds-shadow-blur-25: 1px;
351
372
  --wds-shadow-blur-35: 2px;
352
373
  --wds-shadow-blur-50: 3px;
374
+ --wds-shadow-blur-75: 4px;
353
375
  --wds-shadow-blur-100: 6px;
354
- --wds-shadow-blur-150: 6px;
376
+ --wds-shadow-blur-125: 6px;
377
+ --wds-shadow-blur-135: 7px;
378
+ --wds-shadow-blur-150: 8px;
355
379
  --wds-shadow-blur-200: 18px;
356
380
  --wds-shadow-blur-400: 24px;
381
+ --wds-shadow-blur-500: 24px;
382
+ --wds-shadow-blur-800: 36px;
357
383
  --wds-shadow-inner-100: 1px 1px 2px rgba(0, 6, 36, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
358
384
  --wds-shadow-inner-200: 1px 1px 4px rgba(0, 6, 36, .2) inset;
359
385
  --wds-shadow-inner-300: 0 0 18px rgba(0, 6, 36, .1) inset, 0 0 6px rgba(0, 6, 36, .05) inset;
@@ -370,10 +396,15 @@
370
396
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(0, 6, 36, .2) inset, -8px 0 6px -6px rgba(0, 6, 36, .05) inset;
371
397
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(0, 6, 36, .2) inset, 0 8px 6px -6px rgba(0, 6, 36, .05) inset;
372
398
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
399
+ --wds-shadow-x-0: 0;
400
+ --wds-shadow-x-25: 2px;
373
401
  --wds-shadow-y-0: 0;
374
- --wds-shadow-y-100: 0;
375
- --wds-shadow-y-200: 0;
376
- --wds-shadow-y-300: 0;
402
+ --wds-shadow-y-25: 2px;
403
+ --wds-shadow-y-50: 3px;
404
+ --wds-shadow-y-100: 6px;
405
+ --wds-shadow-y-150: 8px;
406
+ --wds-shadow-y-200: 9px;
407
+ --wds-shadow-y-300: 12px;
377
408
  --wds-shadow-y-350: 3px;
378
409
  --wds-space-0: 0;
379
410
  --wds-space-25: 1px;
@@ -390,6 +421,7 @@
390
421
  --wds-space-500: 30px;
391
422
  --wds-space-600: 36px;
392
423
  --wds-space-700: 42px;
424
+ --wds-space-750: 45px;
393
425
  --wds-space-800: 48px;
394
426
  --wds-space-850: 51px;
395
427
  --wds-space-900: 54px;