@wix/design-system-tokens 1.85.0 → 1.86.1

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 (17) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/all.css +27 -6
  3. package/all.st.css +51 -9
  4. package/component.st.css +31 -7
  5. package/foundation.st.css +18 -2
  6. package/package.json +3 -3
  7. package/semantic.st.css +2 -0
  8. package/studio/all.css +28 -8
  9. package/studio/all.st.css +51 -11
  10. package/studio/component.st.css +31 -9
  11. package/studio/foundation.st.css +18 -2
  12. package/studio/semantic.st.css +2 -0
  13. package/wixel/all.css +72 -51
  14. package/wixel/all.st.css +130 -88
  15. package/wixel/component.st.css +102 -80
  16. package/wixel/foundation.st.css +21 -3
  17. package/wixel/semantic.st.css +7 -5
package/studio/all.css CHANGED
@@ -9,8 +9,8 @@
9
9
  --wds-accordion-title-font-line-height-small: 16px;
10
10
  --wds-accordion-title-font-size-medium: 14px;
11
11
  --wds-accordion-title-font-size-small: 12px;
12
- --wds-accordion-title-font-weight: 700;
13
- --wds-accordion-title-font-weight-small: 700;
12
+ --wds-accordion-title-font-weight: 500;
13
+ --wds-accordion-title-font-weight-small: 500;
14
14
  --wds-add-item-border-radius: 4px;
15
15
  --wds-add-item-padding-horizontal-large: 28px;
16
16
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -58,6 +58,7 @@
58
58
  --wds-button-border-radius-tiny: 4px;
59
59
  --wds-button-fill-gradient-hover-primary: #0f62e6;
60
60
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
61
+ --wds-button-fill-standard-primary-hover: #0f62e6;
61
62
  --wds-button-fill-standard-secondary: #ffffff;
62
63
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
63
64
  --wds-button-font-line-height-large: 24px;
@@ -79,14 +80,17 @@
79
80
  --wds-button-icon-offset-tiny: 12px;
80
81
  --wds-button-label-font-size-large: 16px;
81
82
  --wds-button-outline-hover: #e2e3ea;
83
+ --wds-button-padding-horizontal-extra-large: 20px;
82
84
  --wds-button-padding-horizontal-large: 16px;
83
85
  --wds-button-padding-horizontal-medium: 16px;
84
86
  --wds-button-padding-horizontal-small: 12px;
85
87
  --wds-button-padding-horizontal-tiny: 12px;
88
+ --wds-button-padding-vertical-extra-large: 10px;
86
89
  --wds-button-padding-vertical-large: 6px;
87
90
  --wds-button-padding-vertical-medium: 6px;
88
91
  --wds-button-padding-vertical-small: 6px;
89
92
  --wds-button-padding-vertical-tiny: 2px;
93
+ --wds-button-size-extra-large: 40px;
90
94
  --wds-button-size-large: 36px;
91
95
  --wds-button-size-large-screen-small: 44px;
92
96
  --wds-button-size-medium: 32px;
@@ -206,6 +210,9 @@
206
210
  --wds-custom-modal-header-title-font-size: 14px;
207
211
  --wds-divider-fill-color-light-1: #e2e3ea;
208
212
  --wds-divider-fill-color-light-2: #e2e3ea;
213
+ --wds-divider-fill-color-light-primary: #e2e3ea;
214
+ --wds-divider-fill-color-light-secondary: #e2e3ea;
215
+ --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
209
216
  --wds-dock-background-fill: #ebf2ff;
210
217
  --wds-dock-background-fill-active: #dce9ff;
211
218
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -334,18 +341,18 @@
334
341
  --wds-list-item-padding-vertical-tiny: 12px;
335
342
  --wds-list-item-padding-vertical-x-tiny: 8px;
336
343
  --wds-list-item-padding-vertical-xx-tiny: 4px;
344
+ --wds-list-item-action-affix-margin: 4px;
337
345
  --wds-list-item-action-border-radius: 0;
338
346
  --wds-list-item-action-label-font-line-height-medium: 20px;
339
- --wds-list-item-action-label-font-line-height-small: 16px;
347
+ --wds-list-item-action-label-font-line-height-small: 18px;
340
348
  --wds-list-item-action-label-font-size-medium: 14px;
341
349
  --wds-list-item-action-label-font-size-small: 12px;
342
350
  --wds-list-item-action-padding-horizontal-medium: 12px;
343
351
  --wds-list-item-action-padding-horizontal-small: 12px;
344
352
  --wds-list-item-action-padding-vertical-medium: 4px;
345
353
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
346
- --wds-list-item-action-padding-vertical-small: 4px;
354
+ --wds-list-item-action-padding-vertical-small: 6px;
347
355
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
348
- --wds-list-item-action-prefix-margin: 4px;
349
356
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
350
357
  --wds-list-item-action-subtitle-font-size-medium: 12px;
351
358
  --wds-list-item-section-font-size: 12px;
@@ -365,6 +372,7 @@
365
372
  --wds-list-item-select-active-title-disabled: #bebebe;
366
373
  --wds-list-item-select-active-title-disabled-screen-small: #bebebe;
367
374
  --wds-list-item-select-active-title-screen-small: #116dff;
375
+ --wds-list-item-select-affix-margin: 6px;
368
376
  --wds-list-item-select-fill: #ffffff;
369
377
  --wds-list-item-select-fill-active: #dce9ff;
370
378
  --wds-list-item-select-fill-disabled: #ffffff;
@@ -379,7 +387,6 @@
379
387
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
380
388
  --wds-list-item-select-padding-vertical-small: 4px;
381
389
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
382
- --wds-list-item-select-prefix-margin: 6px;
383
390
  --wds-list-item-select-subtitle: #868aa5;
384
391
  --wds-list-item-select-subtitle-disabled: #bebebe;
385
392
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -685,6 +692,10 @@
685
692
  --wds-tabs-padding-horizontal-small: 12px;
686
693
  --wds-tabs-padding-vertical-medium: 16px;
687
694
  --wds-tabs-padding-vertical-small: 12px;
695
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
696
+ --wds-tabs-selection-fill-primary: #116dff;
697
+ --wds-tabs-selection-fill-secondary: #116dff;
698
+ --wds-tabs-selection-height: 3px;
688
699
  --wds-tag-border-radius-large: 4px;
689
700
  --wds-tag-border-radius-medium: 4px;
690
701
  --wds-tag-border-radius-small: 4px;
@@ -705,7 +716,7 @@
705
716
  --wds-tag-size-tiny: 20px;
706
717
  --wds-testimonial-list-gap: 24px;
707
718
  --wds-thumbnail-border-radius: 4px;
708
- --wds-thumbnail-border-width-default: 0;
719
+ --wds-thumbnail-border-width-default: 1px;
709
720
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
710
721
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
711
722
  --wds-thumbnail-gap: 12px;
@@ -865,7 +876,15 @@
865
876
  --wds-vertical-tabs-section-title-padding-top-medium: 24px;
866
877
  --wds-vertical-tabs-section-title-padding-top-small: 16px;
867
878
  --wds-vertical-tabs-section-title-padding-top-tiny: 4px;
868
- --wds-background-blur-100: 0;
879
+ --wds-background-blur-0: 0;
880
+ --wds-background-blur-10: 0;
881
+ --wds-background-blur-50: 0;
882
+ --wds-background-blur-150: 0;
883
+ --wds-background-blur-200: 0;
884
+ --wds-background-blur-250: 0;
885
+ --wds-background-blur-300: 0;
886
+ --wds-background-blur-350: 0;
887
+ --wds-background-blur-375: 0;
869
888
  --wds-border-radius-0: 0;
870
889
  --wds-border-radius-100: 2px;
871
890
  --wds-border-radius-200: 4px;
@@ -1473,6 +1492,7 @@
1473
1492
  --wds-border-radius-surface-overlay: 4px;
1474
1493
  --wds-border-radius-surface-raised: 4px;
1475
1494
  --wds-border-radius-surface-sunken: 0;
1495
+ --wds-border-width-default: 1px;
1476
1496
  --wds-width-default: 1px;
1477
1497
  --wds-width-default-2: 1px;
1478
1498
  }
package/studio/all.st.css CHANGED
@@ -25,7 +25,15 @@
25
25
  @property st-global(--wds-announcement-modal-text-font-size);
26
26
  @property st-global(--wds-avatar-group-gap-condensed);
27
27
  @property st-global(--wds-avatar-group-gap-default);
28
- @property st-global(--wds-background-blur-100);
28
+ @property st-global(--wds-background-blur-0);
29
+ @property st-global(--wds-background-blur-10);
30
+ @property st-global(--wds-background-blur-50);
31
+ @property st-global(--wds-background-blur-150);
32
+ @property st-global(--wds-background-blur-200);
33
+ @property st-global(--wds-background-blur-250);
34
+ @property st-global(--wds-background-blur-300);
35
+ @property st-global(--wds-background-blur-350);
36
+ @property st-global(--wds-background-blur-375);
29
37
  @property st-global(--wds-badge-border-radius-medium);
30
38
  @property st-global(--wds-badge-border-radius-small);
31
39
  @property st-global(--wds-badge-border-radius-tiny);
@@ -54,6 +62,7 @@
54
62
  @property st-global(--wds-border-radius-surface-sunken);
55
63
  @property st-global(--wds-border-width-100);
56
64
  @property st-global(--wds-border-width-200);
65
+ @property st-global(--wds-border-width-default);
57
66
  @property st-global(--wds-border-width-none);
58
67
  @property st-global(--wds-breadcrumbs-border-radius);
59
68
  @property st-global(--wds-breadcrumbs-font-size-small);
@@ -79,6 +88,7 @@
79
88
  @property st-global(--wds-button-border-radius-tiny);
80
89
  @property st-global(--wds-button-fill-gradient-hover-primary);
81
90
  @property st-global(--wds-button-fill-gradient-hover-secondary);
91
+ @property st-global(--wds-button-fill-standard-primary-hover);
82
92
  @property st-global(--wds-button-fill-standard-secondary);
83
93
  @property st-global(--wds-button-fill-standard-secondary-hover);
84
94
  @property st-global(--wds-button-font-line-height-large);
@@ -100,14 +110,17 @@
100
110
  @property st-global(--wds-button-icon-offset-tiny);
101
111
  @property st-global(--wds-button-label-font-size-large);
102
112
  @property st-global(--wds-button-outline-hover);
113
+ @property st-global(--wds-button-padding-horizontal-extra-large);
103
114
  @property st-global(--wds-button-padding-horizontal-large);
104
115
  @property st-global(--wds-button-padding-horizontal-medium);
105
116
  @property st-global(--wds-button-padding-horizontal-small);
106
117
  @property st-global(--wds-button-padding-horizontal-tiny);
118
+ @property st-global(--wds-button-padding-vertical-extra-large);
107
119
  @property st-global(--wds-button-padding-vertical-large);
108
120
  @property st-global(--wds-button-padding-vertical-medium);
109
121
  @property st-global(--wds-button-padding-vertical-small);
110
122
  @property st-global(--wds-button-padding-vertical-tiny);
123
+ @property st-global(--wds-button-size-extra-large);
111
124
  @property st-global(--wds-button-size-large);
112
125
  @property st-global(--wds-button-size-large-screen-small);
113
126
  @property st-global(--wds-button-size-medium);
@@ -671,6 +684,9 @@
671
684
  @property st-global(--wds-custom-modal-header-title-font-size);
672
685
  @property st-global(--wds-divider-fill-color-light-1);
673
686
  @property st-global(--wds-divider-fill-color-light-2);
687
+ @property st-global(--wds-divider-fill-color-light-primary);
688
+ @property st-global(--wds-divider-fill-color-light-secondary);
689
+ @property st-global(--wds-divider-gradient-border);
674
690
  @property st-global(--wds-dock-background-fill);
675
691
  @property st-global(--wds-dock-background-fill-active);
676
692
  @property st-global(--wds-dock-background-fill-disabled);
@@ -839,6 +855,7 @@
839
855
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
840
856
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
841
857
  @property st-global(--wds-linear-progress-bar-border-radius);
858
+ @property st-global(--wds-list-item-action-affix-margin);
842
859
  @property st-global(--wds-list-item-action-border-radius);
843
860
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
844
861
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -850,7 +867,6 @@
850
867
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
851
868
  @property st-global(--wds-list-item-action-padding-vertical-small);
852
869
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
853
- @property st-global(--wds-list-item-action-prefix-margin);
854
870
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
855
871
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
856
872
  @property st-global(--wds-list-item-gap-columns);
@@ -885,6 +901,7 @@
885
901
  @property st-global(--wds-list-item-select-active-title-disabled);
886
902
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
887
903
  @property st-global(--wds-list-item-select-active-title-screen-small);
904
+ @property st-global(--wds-list-item-select-affix-margin);
888
905
  @property st-global(--wds-list-item-select-fill);
889
906
  @property st-global(--wds-list-item-select-fill-active);
890
907
  @property st-global(--wds-list-item-select-fill-disabled);
@@ -901,7 +918,6 @@
901
918
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
902
919
  @property st-global(--wds-list-item-select-padding-vertical-small);
903
920
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
904
- @property st-global(--wds-list-item-select-prefix-margin);
905
921
  @property st-global(--wds-list-item-select-subtitle);
906
922
  @property st-global(--wds-list-item-select-subtitle-disabled);
907
923
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -1292,6 +1308,10 @@
1292
1308
  @property st-global(--wds-tabs-padding-horizontal-small);
1293
1309
  @property st-global(--wds-tabs-padding-vertical-medium);
1294
1310
  @property st-global(--wds-tabs-padding-vertical-small);
1311
+ @property st-global(--wds-tabs-selection-border);
1312
+ @property st-global(--wds-tabs-selection-fill-primary);
1313
+ @property st-global(--wds-tabs-selection-fill-secondary);
1314
+ @property st-global(--wds-tabs-selection-height);
1295
1315
  @property st-global(--wds-tag-border-radius-large);
1296
1316
  @property st-global(--wds-tag-border-radius-medium);
1297
1317
  @property st-global(--wds-tag-border-radius-small);
@@ -1486,8 +1506,8 @@
1486
1506
  --wds-accordion-title-font-line-height-small: 16px;
1487
1507
  --wds-accordion-title-font-size-medium: 14px;
1488
1508
  --wds-accordion-title-font-size-small: 12px;
1489
- --wds-accordion-title-font-weight: 700;
1490
- --wds-accordion-title-font-weight-small: 700;
1509
+ --wds-accordion-title-font-weight: 500;
1510
+ --wds-accordion-title-font-weight-small: 500;
1491
1511
  --wds-add-item-border-radius: 4px;
1492
1512
  --wds-add-item-padding-horizontal-large: 28px;
1493
1513
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1503,7 +1523,15 @@
1503
1523
  --wds-announcement-modal-text-font-size: 14px;
1504
1524
  --wds-avatar-group-gap-condensed: -2px;
1505
1525
  --wds-avatar-group-gap-default: 4px;
1506
- --wds-background-blur-100: 0;
1526
+ --wds-background-blur-0: 0;
1527
+ --wds-background-blur-10: 0;
1528
+ --wds-background-blur-50: 0;
1529
+ --wds-background-blur-150: 0;
1530
+ --wds-background-blur-200: 0;
1531
+ --wds-background-blur-250: 0;
1532
+ --wds-background-blur-300: 0;
1533
+ --wds-background-blur-350: 0;
1534
+ --wds-background-blur-375: 0;
1507
1535
  --wds-badge-border-radius-medium: 2px;
1508
1536
  --wds-badge-border-radius-small: 2px;
1509
1537
  --wds-badge-border-radius-tiny: 2px;
@@ -1532,6 +1560,7 @@
1532
1560
  --wds-border-radius-surface-sunken: 0;
1533
1561
  --wds-border-width-100: 1px;
1534
1562
  --wds-border-width-200: 2px;
1563
+ --wds-border-width-default: 1px;
1535
1564
  --wds-border-width-none: 0;
1536
1565
  --wds-breadcrumbs-border-radius: 2px;
1537
1566
  --wds-breadcrumbs-font-size-small: 12px;
@@ -1557,6 +1586,7 @@
1557
1586
  --wds-button-border-radius-tiny: 4px;
1558
1587
  --wds-button-fill-gradient-hover-primary: #0f62e6;
1559
1588
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
1589
+ --wds-button-fill-standard-primary-hover: #0f62e6;
1560
1590
  --wds-button-fill-standard-secondary: #ffffff;
1561
1591
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
1562
1592
  --wds-button-font-line-height-large: 24px;
@@ -1578,14 +1608,17 @@
1578
1608
  --wds-button-icon-offset-tiny: 12px;
1579
1609
  --wds-button-label-font-size-large: 16px;
1580
1610
  --wds-button-outline-hover: #e2e3ea;
1611
+ --wds-button-padding-horizontal-extra-large: 20px;
1581
1612
  --wds-button-padding-horizontal-large: 16px;
1582
1613
  --wds-button-padding-horizontal-medium: 16px;
1583
1614
  --wds-button-padding-horizontal-small: 12px;
1584
1615
  --wds-button-padding-horizontal-tiny: 12px;
1616
+ --wds-button-padding-vertical-extra-large: 10px;
1585
1617
  --wds-button-padding-vertical-large: 6px;
1586
1618
  --wds-button-padding-vertical-medium: 6px;
1587
1619
  --wds-button-padding-vertical-small: 6px;
1588
1620
  --wds-button-padding-vertical-tiny: 2px;
1621
+ --wds-button-size-extra-large: 40px;
1589
1622
  --wds-button-size-large: 36px;
1590
1623
  --wds-button-size-large-screen-small: 44px;
1591
1624
  --wds-button-size-medium: 32px;
@@ -2149,6 +2182,9 @@
2149
2182
  --wds-custom-modal-header-title-font-size: 14px;
2150
2183
  --wds-divider-fill-color-light-1: #e2e3ea;
2151
2184
  --wds-divider-fill-color-light-2: #e2e3ea;
2185
+ --wds-divider-fill-color-light-primary: #e2e3ea;
2186
+ --wds-divider-fill-color-light-secondary: #e2e3ea;
2187
+ --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
2152
2188
  --wds-dock-background-fill: #ebf2ff;
2153
2189
  --wds-dock-background-fill-active: #dce9ff;
2154
2190
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -2317,18 +2353,18 @@
2317
2353
  --wds-internal-thumbnail-illustration-size-small: 51px;
2318
2354
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
2319
2355
  --wds-linear-progress-bar-border-radius: 0;
2356
+ --wds-list-item-action-affix-margin: 4px;
2320
2357
  --wds-list-item-action-border-radius: 0;
2321
2358
  --wds-list-item-action-label-font-line-height-medium: 20px;
2322
- --wds-list-item-action-label-font-line-height-small: 16px;
2359
+ --wds-list-item-action-label-font-line-height-small: 18px;
2323
2360
  --wds-list-item-action-label-font-size-medium: 14px;
2324
2361
  --wds-list-item-action-label-font-size-small: 12px;
2325
2362
  --wds-list-item-action-padding-horizontal-medium: 12px;
2326
2363
  --wds-list-item-action-padding-horizontal-small: 12px;
2327
2364
  --wds-list-item-action-padding-vertical-medium: 4px;
2328
2365
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
2329
- --wds-list-item-action-padding-vertical-small: 4px;
2366
+ --wds-list-item-action-padding-vertical-small: 6px;
2330
2367
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
2331
- --wds-list-item-action-prefix-margin: 4px;
2332
2368
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
2333
2369
  --wds-list-item-action-subtitle-font-size-medium: 12px;
2334
2370
  --wds-list-item-gap-columns: 24px;
@@ -2363,6 +2399,7 @@
2363
2399
  --wds-list-item-select-active-title-disabled: #bebebe;
2364
2400
  --wds-list-item-select-active-title-disabled-screen-small: #bebebe;
2365
2401
  --wds-list-item-select-active-title-screen-small: #116dff;
2402
+ --wds-list-item-select-affix-margin: 6px;
2366
2403
  --wds-list-item-select-fill: #ffffff;
2367
2404
  --wds-list-item-select-fill-active: #dce9ff;
2368
2405
  --wds-list-item-select-fill-disabled: #ffffff;
@@ -2379,7 +2416,6 @@
2379
2416
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
2380
2417
  --wds-list-item-select-padding-vertical-small: 4px;
2381
2418
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
2382
- --wds-list-item-select-prefix-margin: 6px;
2383
2419
  --wds-list-item-select-subtitle: #868aa5;
2384
2420
  --wds-list-item-select-subtitle-disabled: #bebebe;
2385
2421
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -2770,6 +2806,10 @@
2770
2806
  --wds-tabs-padding-horizontal-small: 12px;
2771
2807
  --wds-tabs-padding-vertical-medium: 16px;
2772
2808
  --wds-tabs-padding-vertical-small: 12px;
2809
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
2810
+ --wds-tabs-selection-fill-primary: #116dff;
2811
+ --wds-tabs-selection-fill-secondary: #116dff;
2812
+ --wds-tabs-selection-height: 3px;
2773
2813
  --wds-tag-border-radius-large: 4px;
2774
2814
  --wds-tag-border-radius-medium: 4px;
2775
2815
  --wds-tag-border-radius-small: 4px;
@@ -2790,7 +2830,7 @@
2790
2830
  --wds-tag-size-tiny: 20px;
2791
2831
  --wds-testimonial-list-gap: 24px;
2792
2832
  --wds-thumbnail-border-radius: 4px;
2793
- --wds-thumbnail-border-width-default: 0;
2833
+ --wds-thumbnail-border-width-default: 1px;
2794
2834
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
2795
2835
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
2796
2836
  --wds-thumbnail-gap: 12px;
package/studio/component.st.css CHANGED
@@ -57,6 +57,7 @@
57
57
  @property st-global(--wds-button-border-radius-tiny);
58
58
  @property st-global(--wds-button-fill-gradient-hover-primary);
59
59
  @property st-global(--wds-button-fill-gradient-hover-secondary);
60
+ @property st-global(--wds-button-fill-standard-primary-hover);
60
61
  @property st-global(--wds-button-fill-standard-secondary);
61
62
  @property st-global(--wds-button-fill-standard-secondary-hover);
62
63
  @property st-global(--wds-button-font-line-height-large);
@@ -78,14 +79,17 @@
78
79
  @property st-global(--wds-button-icon-offset-tiny);
79
80
  @property st-global(--wds-button-label-font-size-large);
80
81
  @property st-global(--wds-button-outline-hover);
82
+ @property st-global(--wds-button-padding-horizontal-extra-large);
81
83
  @property st-global(--wds-button-padding-horizontal-large);
82
84
  @property st-global(--wds-button-padding-horizontal-medium);
83
85
  @property st-global(--wds-button-padding-horizontal-small);
84
86
  @property st-global(--wds-button-padding-horizontal-tiny);
87
+ @property st-global(--wds-button-padding-vertical-extra-large);
85
88
  @property st-global(--wds-button-padding-vertical-large);
86
89
  @property st-global(--wds-button-padding-vertical-medium);
87
90
  @property st-global(--wds-button-padding-vertical-small);
88
91
  @property st-global(--wds-button-padding-vertical-tiny);
92
+ @property st-global(--wds-button-size-extra-large);
89
93
  @property st-global(--wds-button-size-large);
90
94
  @property st-global(--wds-button-size-large-screen-small);
91
95
  @property st-global(--wds-button-size-medium);
@@ -205,6 +209,9 @@
205
209
  @property st-global(--wds-custom-modal-header-title-font-size);
206
210
  @property st-global(--wds-divider-fill-color-light-1);
207
211
  @property st-global(--wds-divider-fill-color-light-2);
212
+ @property st-global(--wds-divider-fill-color-light-primary);
213
+ @property st-global(--wds-divider-fill-color-light-secondary);
214
+ @property st-global(--wds-divider-gradient-border);
208
215
  @property st-global(--wds-dock-background-fill);
209
216
  @property st-global(--wds-dock-background-fill-active);
210
217
  @property st-global(--wds-dock-background-fill-disabled);
@@ -318,6 +325,7 @@
318
325
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
319
326
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
320
327
  @property st-global(--wds-linear-progress-bar-border-radius);
328
+ @property st-global(--wds-list-item-action-affix-margin);
321
329
  @property st-global(--wds-list-item-action-border-radius);
322
330
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
323
331
  @property st-global(--wds-list-item-action-label-font-line-height-small);
@@ -329,7 +337,6 @@
329
337
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
330
338
  @property st-global(--wds-list-item-action-padding-vertical-small);
331
339
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
332
- @property st-global(--wds-list-item-action-prefix-margin);
333
340
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
334
341
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
335
342
  @property st-global(--wds-list-item-gap-columns);
@@ -364,6 +371,7 @@
364
371
  @property st-global(--wds-list-item-select-active-title-disabled);
365
372
  @property st-global(--wds-list-item-select-active-title-disabled-screen-small);
366
373
  @property st-global(--wds-list-item-select-active-title-screen-small);
374
+ @property st-global(--wds-list-item-select-affix-margin);
367
375
  @property st-global(--wds-list-item-select-fill);
368
376
  @property st-global(--wds-list-item-select-fill-active);
369
377
  @property st-global(--wds-list-item-select-fill-disabled);
@@ -380,7 +388,6 @@
380
388
  @property st-global(--wds-list-item-select-padding-vertical-medium-screen-small);
381
389
  @property st-global(--wds-list-item-select-padding-vertical-small);
382
390
  @property st-global(--wds-list-item-select-padding-vertical-small-screen-small);
383
- @property st-global(--wds-list-item-select-prefix-margin);
384
391
  @property st-global(--wds-list-item-select-subtitle);
385
392
  @property st-global(--wds-list-item-select-subtitle-disabled);
386
393
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
@@ -684,6 +691,10 @@
684
691
  @property st-global(--wds-tabs-padding-horizontal-small);
685
692
  @property st-global(--wds-tabs-padding-vertical-medium);
686
693
  @property st-global(--wds-tabs-padding-vertical-small);
694
+ @property st-global(--wds-tabs-selection-border);
695
+ @property st-global(--wds-tabs-selection-fill-primary);
696
+ @property st-global(--wds-tabs-selection-fill-secondary);
697
+ @property st-global(--wds-tabs-selection-height);
687
698
  @property st-global(--wds-tag-border-radius-large);
688
699
  @property st-global(--wds-tag-border-radius-medium);
689
700
  @property st-global(--wds-tag-border-radius-small);
@@ -876,8 +887,8 @@
876
887
  --wds-accordion-title-font-line-height-small: 16px;
877
888
  --wds-accordion-title-font-size-medium: 14px;
878
889
  --wds-accordion-title-font-size-small: 12px;
879
- --wds-accordion-title-font-weight: 700;
880
- --wds-accordion-title-font-weight-small: 700;
890
+ --wds-accordion-title-font-weight: 500;
891
+ --wds-accordion-title-font-weight-small: 500;
881
892
  --wds-add-item-border-radius: 4px;
882
893
  --wds-add-item-padding-horizontal-large: 28px;
883
894
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -925,6 +936,7 @@
925
936
  --wds-button-border-radius-tiny: 4px;
926
937
  --wds-button-fill-gradient-hover-primary: #0f62e6;
927
938
  --wds-button-fill-gradient-hover-secondary: #0f62e6;
939
+ --wds-button-fill-standard-primary-hover: #0f62e6;
928
940
  --wds-button-fill-standard-secondary: #ffffff;
929
941
  --wds-button-fill-standard-secondary-hover: #f7f8f8;
930
942
  --wds-button-font-line-height-large: 24px;
@@ -946,14 +958,17 @@
946
958
  --wds-button-icon-offset-tiny: 12px;
947
959
  --wds-button-label-font-size-large: 16px;
948
960
  --wds-button-outline-hover: #e2e3ea;
961
+ --wds-button-padding-horizontal-extra-large: 20px;
949
962
  --wds-button-padding-horizontal-large: 16px;
950
963
  --wds-button-padding-horizontal-medium: 16px;
951
964
  --wds-button-padding-horizontal-small: 12px;
952
965
  --wds-button-padding-horizontal-tiny: 12px;
966
+ --wds-button-padding-vertical-extra-large: 10px;
953
967
  --wds-button-padding-vertical-large: 6px;
954
968
  --wds-button-padding-vertical-medium: 6px;
955
969
  --wds-button-padding-vertical-small: 6px;
956
970
  --wds-button-padding-vertical-tiny: 2px;
971
+ --wds-button-size-extra-large: 40px;
957
972
  --wds-button-size-large: 36px;
958
973
  --wds-button-size-large-screen-small: 44px;
959
974
  --wds-button-size-medium: 32px;
@@ -1073,6 +1088,9 @@
1073
1088
  --wds-custom-modal-header-title-font-size: 14px;
1074
1089
  --wds-divider-fill-color-light-1: #e2e3ea;
1075
1090
  --wds-divider-fill-color-light-2: #e2e3ea;
1091
+ --wds-divider-fill-color-light-primary: #e2e3ea;
1092
+ --wds-divider-fill-color-light-secondary: #e2e3ea;
1093
+ --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
1076
1094
  --wds-dock-background-fill: #ebf2ff;
1077
1095
  --wds-dock-background-fill-active: #dce9ff;
1078
1096
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -1186,18 +1204,18 @@
1186
1204
  --wds-internal-thumbnail-illustration-size-small: 51px;
1187
1205
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1188
1206
  --wds-linear-progress-bar-border-radius: 0;
1207
+ --wds-list-item-action-affix-margin: 4px;
1189
1208
  --wds-list-item-action-border-radius: 0;
1190
1209
  --wds-list-item-action-label-font-line-height-medium: 20px;
1191
- --wds-list-item-action-label-font-line-height-small: 16px;
1210
+ --wds-list-item-action-label-font-line-height-small: 18px;
1192
1211
  --wds-list-item-action-label-font-size-medium: 14px;
1193
1212
  --wds-list-item-action-label-font-size-small: 12px;
1194
1213
  --wds-list-item-action-padding-horizontal-medium: 12px;
1195
1214
  --wds-list-item-action-padding-horizontal-small: 12px;
1196
1215
  --wds-list-item-action-padding-vertical-medium: 4px;
1197
1216
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1198
- --wds-list-item-action-padding-vertical-small: 4px;
1217
+ --wds-list-item-action-padding-vertical-small: 6px;
1199
1218
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1200
- --wds-list-item-action-prefix-margin: 4px;
1201
1219
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
1202
1220
  --wds-list-item-action-subtitle-font-size-medium: 12px;
1203
1221
  --wds-list-item-gap-columns: 24px;
@@ -1232,6 +1250,7 @@
1232
1250
  --wds-list-item-select-active-title-disabled: #bebebe;
1233
1251
  --wds-list-item-select-active-title-disabled-screen-small: #bebebe;
1234
1252
  --wds-list-item-select-active-title-screen-small: #116dff;
1253
+ --wds-list-item-select-affix-margin: 6px;
1235
1254
  --wds-list-item-select-fill: #ffffff;
1236
1255
  --wds-list-item-select-fill-active: #dce9ff;
1237
1256
  --wds-list-item-select-fill-disabled: #ffffff;
@@ -1248,7 +1267,6 @@
1248
1267
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
1249
1268
  --wds-list-item-select-padding-vertical-small: 4px;
1250
1269
  --wds-list-item-select-padding-vertical-small-screen-small: 8px;
1251
- --wds-list-item-select-prefix-margin: 6px;
1252
1270
  --wds-list-item-select-subtitle: #868aa5;
1253
1271
  --wds-list-item-select-subtitle-disabled: #bebebe;
1254
1272
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -1552,6 +1570,10 @@
1552
1570
  --wds-tabs-padding-horizontal-small: 12px;
1553
1571
  --wds-tabs-padding-vertical-medium: 16px;
1554
1572
  --wds-tabs-padding-vertical-small: 12px;
1573
+ --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
1574
+ --wds-tabs-selection-fill-primary: #116dff;
1575
+ --wds-tabs-selection-fill-secondary: #116dff;
1576
+ --wds-tabs-selection-height: 3px;
1555
1577
  --wds-tag-border-radius-large: 4px;
1556
1578
  --wds-tag-border-radius-medium: 4px;
1557
1579
  --wds-tag-border-radius-small: 4px;
@@ -1572,7 +1594,7 @@
1572
1594
  --wds-tag-size-tiny: 20px;
1573
1595
  --wds-testimonial-list-gap: 24px;
1574
1596
  --wds-thumbnail-border-radius: 4px;
1575
- --wds-thumbnail-border-width-default: 0;
1597
+ --wds-thumbnail-border-width-default: 1px;
1576
1598
  --wds-thumbnail-fill: rgba(255, 255, 255, 0);
1577
1599
  --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
1578
1600
  --wds-thumbnail-gap: 12px;
package/studio/foundation.st.css CHANGED
@@ -1,4 +1,12 @@
1
- @property st-global(--wds-background-blur-100);
1
+ @property st-global(--wds-background-blur-0);
2
+ @property st-global(--wds-background-blur-10);
3
+ @property st-global(--wds-background-blur-50);
4
+ @property st-global(--wds-background-blur-150);
5
+ @property st-global(--wds-background-blur-200);
6
+ @property st-global(--wds-background-blur-250);
7
+ @property st-global(--wds-background-blur-300);
8
+ @property st-global(--wds-background-blur-350);
9
+ @property st-global(--wds-background-blur-375);
2
10
  @property st-global(--wds-border-radius-0);
3
11
  @property st-global(--wds-border-radius-100);
4
12
  @property st-global(--wds-border-radius-200);
@@ -191,7 +199,15 @@
191
199
  @property st-global(--wds-space-2400);
192
200
 
193
201
  .root {
194
- --wds-background-blur-100: 0;
202
+ --wds-background-blur-0: 0;
203
+ --wds-background-blur-10: 0;
204
+ --wds-background-blur-50: 0;
205
+ --wds-background-blur-150: 0;
206
+ --wds-background-blur-200: 0;
207
+ --wds-background-blur-250: 0;
208
+ --wds-background-blur-300: 0;
209
+ --wds-background-blur-350: 0;
210
+ --wds-background-blur-375: 0;
195
211
  --wds-border-radius-0: 0;
196
212
  --wds-border-radius-100: 2px;
197
213
  --wds-border-radius-200: 4px;
package/studio/semantic.st.css CHANGED
@@ -4,6 +4,7 @@
4
4
  @property st-global(--wds-border-radius-surface-overlay);
5
5
  @property st-global(--wds-border-radius-surface-raised);
6
6
  @property st-global(--wds-border-radius-surface-sunken);
7
+ @property st-global(--wds-border-width-default);
7
8
  @property st-global(--wds-color-border-ai-active);
8
9
  @property st-global(--wds-color-border-ai-disabled);
9
10
  @property st-global(--wds-color-border-ai-hover);
@@ -425,6 +426,7 @@
425
426
  --wds-border-radius-surface-overlay: 4px;
426
427
  --wds-border-radius-surface-raised: 4px;
427
428
  --wds-border-radius-surface-sunken: 0;
429
+ --wds-border-width-default: 1px;
428
430
  --wds-color-border-ai-active: #ffffff;
429
431
  --wds-color-border-ai-disabled: #ffffff;
430
432
  --wds-color-border-ai-hover: #ffffff;