@wix/design-system-tokens 1.116.0 → 1.118.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 (17) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/all.css +13 -1
  3. package/all.st.css +26 -2
  4. package/component.st.css +22 -2
  5. package/foundation.st.css +2 -0
  6. package/package.json +2 -2
  7. package/semantic.st.css +2 -0
  8. package/studio/all.css +19 -7
  9. package/studio/all.st.css +33 -9
  10. package/studio/component.st.css +22 -2
  11. package/studio/foundation.st.css +7 -5
  12. package/studio/semantic.st.css +4 -2
  13. package/wixel/all.css +13 -1
  14. package/wixel/all.st.css +26 -2
  15. package/wixel/component.st.css +22 -2
  16. package/wixel/foundation.st.css +2 -0
  17. package/wixel/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## 1.118.0 - 2025-07-03
2
+
3
+ ### Features
4
+
5
+ - feat(Tokens): new popover & list item tokens [15042](https://github.com/wix-private/wix-design-systems/pull/15042)
6
+
7
+ ## 1.117.0 - 2025-07-01
8
+
9
+ ### Visual Breaking Changes
10
+
11
+ - breaking(Modal): tokenization [15010](https://github.com/wix-private/wix-design-systems/pull/15010)
12
+
13
+ ### Features
14
+
15
+ - feat(Tokens): added new fill-standard token for Tag component [15033](https://github.com/wix-private/wix-design-systems/pull/15033)
16
+
1
17
  ## 1.116.0 - 2025-06-27
2
18
 
3
19
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --wds-shadow-blur-150: 6px;
40
40
  --wds-shadow-blur-100: 6px;
41
41
  --wds-shadow-blur-50: 3px;
42
+ --wds-shadow-blur-35: 2px;
42
43
  --wds-font-weight-semi-bold: 600;
43
44
  --wds-font-weight-regular: 400;
44
45
  --wds-font-weight-medium: 500;
@@ -324,6 +325,7 @@
324
325
  --wds-space-padding-horizontal-small: var(--wds-space-250);
325
326
  --wds-space-padding-horizontal-medium: var(--wds-space-300);
326
327
  --wds-space-padding-horizontal-large: var(--wds-space-400);
328
+ --wds-space-mobile-viewport-spacing: var(--wds-space-500);
327
329
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
328
330
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
329
331
  --wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
@@ -947,7 +949,9 @@
947
949
  --wds-radio-border-radius: var(--wds-border-radius-full);
948
950
  --wds-popover-menu-paddings-vertical: var(--wds-space-200);
949
951
  --wds-popover-menu-paddings-horizontal: var(--wds-space-0);
950
- --wds-popover-border: var(--wds-border-radius-400);
952
+ --wds-popover-border-width: var(--wds-border-width-none);
953
+ --wds-popover-border-radius: var(--wds-border-radius-400);
954
+ --wds-popover-border-fill: var(--wds-color-black-100-transparent-0);
951
955
  --wds-palette-border: var(--wds-border-radius-300);
952
956
  --wds-pagination-padding-vertical: var(--wds-space-50);
953
957
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -1326,6 +1330,7 @@
1326
1330
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
1327
1331
  --wds-thumbnail-subtitle-fill: var(--wds-color-text-standard-secondary);
1328
1332
  --wds-tag-label-font-size-small: var(--wds-font-size-body-small);
1333
+ --wds-tag-fill-standard: var(--wds-color-fill-standard-secondary);
1329
1334
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1330
1335
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1331
1336
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
@@ -1375,6 +1380,7 @@
1375
1380
  --wds-radio-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
1376
1381
  --wds-radio-border-active: var(--wds-color-border-standard-secondary-active);
1377
1382
  --wds-radio-border: var(--wds-color-border-standard-secondary-active);
1383
+ --wds-popover-fill: var(--wds-color-fill-surface-overlay);
1378
1384
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1379
1385
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1380
1386
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
@@ -1413,9 +1419,15 @@
1413
1419
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-primary-active);
1414
1420
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-primary);
1415
1421
  --wds-list-item-section-font-size: var(--wds-font-size-body-small);
1422
+ --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1416
1423
  --wds-list-item-action-subtitle-font-size-medium: var(--wds-font-size-body-small);
1424
+ --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1417
1425
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-small);
1418
1426
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-medium);
1427
+ --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1428
+ --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1429
+ --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1430
+ --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1419
1431
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1420
1432
  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1421
1433
  --wds-input-value-font-size-medium: var(--wds-font-size-body-medium);
package/all.st.css CHANGED
@@ -892,6 +892,10 @@
892
892
  @property st-global(--wds-linear-progress-bar-border-radius);
893
893
  @property st-global(--wds-list-item-action-affix-margin);
894
894
  @property st-global(--wds-list-item-action-border-radius);
895
+ @property st-global(--wds-list-item-action-fill);
896
+ @property st-global(--wds-list-item-action-fill-active);
897
+ @property st-global(--wds-list-item-action-fill-hover);
898
+ @property st-global(--wds-list-item-action-label-fill-active);
895
899
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
896
900
  @property st-global(--wds-list-item-action-label-font-line-height-small);
897
901
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -902,6 +906,7 @@
902
906
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
903
907
  @property st-global(--wds-list-item-action-padding-vertical-small);
904
908
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
909
+ @property st-global(--wds-list-item-action-subtitle-fill-active);
905
910
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
906
911
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
907
912
  @property st-global(--wds-list-item-gap-columns);
@@ -919,6 +924,7 @@
919
924
  @property st-global(--wds-list-item-padding-vertical-tiny);
920
925
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
921
926
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
927
+ @property st-global(--wds-list-item-section-fill);
922
928
  @property st-global(--wds-list-item-section-font-size);
923
929
  @property st-global(--wds-list-item-section-line-height);
924
930
  @property st-global(--wds-list-item-section-padding-horizontal);
@@ -1016,7 +1022,10 @@
1016
1022
  @property st-global(--wds-pagination-padding-horizontal);
1017
1023
  @property st-global(--wds-pagination-padding-vertical);
1018
1024
  @property st-global(--wds-palette-border);
1019
- @property st-global(--wds-popover-border);
1025
+ @property st-global(--wds-popover-border-fill);
1026
+ @property st-global(--wds-popover-border-radius);
1027
+ @property st-global(--wds-popover-border-width);
1028
+ @property st-global(--wds-popover-fill);
1020
1029
  @property st-global(--wds-popover-menu-paddings-horizontal);
1021
1030
  @property st-global(--wds-popover-menu-paddings-vertical);
1022
1031
  @property st-global(--wds-radio-border);
@@ -1138,6 +1147,7 @@
1138
1147
  @property st-global(--wds-shadow-200);
1139
1148
  @property st-global(--wds-shadow-300);
1140
1149
  @property st-global(--wds-shadow-400);
1150
+ @property st-global(--wds-shadow-blur-35);
1141
1151
  @property st-global(--wds-shadow-blur-50);
1142
1152
  @property st-global(--wds-shadow-blur-100);
1143
1153
  @property st-global(--wds-shadow-blur-150);
@@ -1318,6 +1328,7 @@
1318
1328
  @property st-global(--wds-space-1600);
1319
1329
  @property st-global(--wds-space-1700);
1320
1330
  @property st-global(--wds-space-2400);
1331
+ @property st-global(--wds-space-mobile-viewport-spacing);
1321
1332
  @property st-global(--wds-space-padding-horizontal-large);
1322
1333
  @property st-global(--wds-space-padding-horizontal-medium);
1323
1334
  @property st-global(--wds-space-padding-horizontal-small);
@@ -1376,6 +1387,7 @@
1376
1387
  @property st-global(--wds-tag-border-radius-medium);
1377
1388
  @property st-global(--wds-tag-border-radius-small);
1378
1389
  @property st-global(--wds-tag-border-radius-tiny);
1390
+ @property st-global(--wds-tag-fill-standard);
1379
1391
  @property st-global(--wds-tag-label-font-line-height-small);
1380
1392
  @property st-global(--wds-tag-label-font-size-small);
1381
1393
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -2471,6 +2483,10 @@
2471
2483
  --wds-linear-progress-bar-border-radius: 1000px;
2472
2484
  --wds-list-item-action-affix-margin: 6px;
2473
2485
  --wds-list-item-action-border-radius: 0;
2486
+ --wds-list-item-action-fill: #ffffff;
2487
+ --wds-list-item-action-fill-active: #d6e6fe;
2488
+ --wds-list-item-action-fill-hover: #e7f0ff;
2489
+ --wds-list-item-action-label-fill-active: #116dff;
2474
2490
  --wds-list-item-action-label-font-line-height-medium: 24px;
2475
2491
  --wds-list-item-action-label-font-line-height-small: 18px;
2476
2492
  --wds-list-item-action-label-font-size-medium: 16px;
@@ -2481,6 +2497,7 @@
2481
2497
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
2482
2498
  --wds-list-item-action-padding-vertical-small: 6px;
2483
2499
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
2500
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
2484
2501
  --wds-list-item-action-subtitle-font-line-height-medium: 18px;
2485
2502
  --wds-list-item-action-subtitle-font-size-medium: 14px;
2486
2503
  --wds-list-item-gap-columns: 24px;
@@ -2498,6 +2515,7 @@
2498
2515
  --wds-list-item-padding-vertical-tiny: 12px;
2499
2516
  --wds-list-item-padding-vertical-x-tiny: 6px;
2500
2517
  --wds-list-item-padding-vertical-xx-tiny: 3px;
2518
+ --wds-list-item-section-fill: #ffffff;
2501
2519
  --wds-list-item-section-font-size: 14px;
2502
2520
  --wds-list-item-section-line-height: 18px;
2503
2521
  --wds-list-item-section-padding-horizontal: 24px;
@@ -2595,7 +2613,10 @@
2595
2613
  --wds-pagination-padding-horizontal: 3px;
2596
2614
  --wds-pagination-padding-vertical: 3px;
2597
2615
  --wds-palette-border: 6px;
2598
- --wds-popover-border: 8px;
2616
+ --wds-popover-border-fill: rgba(0, 6, 36, 0);
2617
+ --wds-popover-border-radius: 8px;
2618
+ --wds-popover-border-width: 0;
2619
+ --wds-popover-fill: #ffffff;
2599
2620
  --wds-popover-menu-paddings-horizontal: 0;
2600
2621
  --wds-popover-menu-paddings-vertical: 12px;
2601
2622
  --wds-radio-border: #116dff;
@@ -2717,6 +2738,7 @@
2717
2738
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2718
2739
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
2719
2740
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
2741
+ --wds-shadow-blur-35: 2px;
2720
2742
  --wds-shadow-blur-50: 3px;
2721
2743
  --wds-shadow-blur-100: 6px;
2722
2744
  --wds-shadow-blur-150: 6px;
@@ -2897,6 +2919,7 @@
2897
2919
  --wds-space-1600: 96px;
2898
2920
  --wds-space-1700: 102px;
2899
2921
  --wds-space-2400: 144px;
2922
+ --wds-space-mobile-viewport-spacing: 30px;
2900
2923
  --wds-space-padding-horizontal-large: 24px;
2901
2924
  --wds-space-padding-horizontal-medium: 18px;
2902
2925
  --wds-space-padding-horizontal-small: 15px;
@@ -2955,6 +2978,7 @@
2955
2978
  --wds-tag-border-radius-medium: 1000px;
2956
2979
  --wds-tag-border-radius-small: 1000px;
2957
2980
  --wds-tag-border-radius-tiny: 1000px;
2981
+ --wds-tag-fill-standard: #d6e6fe;
2958
2982
  --wds-tag-label-font-line-height-small: 18px;
2959
2983
  --wds-tag-label-font-size-small: 14px;
2960
2984
  --wds-tag-padding-horizontal-large: 18px;
package/component.st.css CHANGED
@@ -357,6 +357,10 @@
357
357
  @property st-global(--wds-linear-progress-bar-border-radius);
358
358
  @property st-global(--wds-list-item-action-affix-margin);
359
359
  @property st-global(--wds-list-item-action-border-radius);
360
+ @property st-global(--wds-list-item-action-fill);
361
+ @property st-global(--wds-list-item-action-fill-active);
362
+ @property st-global(--wds-list-item-action-fill-hover);
363
+ @property st-global(--wds-list-item-action-label-fill-active);
360
364
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
361
365
  @property st-global(--wds-list-item-action-label-font-line-height-small);
362
366
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -367,6 +371,7 @@
367
371
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
368
372
  @property st-global(--wds-list-item-action-padding-vertical-small);
369
373
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
374
+ @property st-global(--wds-list-item-action-subtitle-fill-active);
370
375
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
371
376
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
372
377
  @property st-global(--wds-list-item-gap-columns);
@@ -384,6 +389,7 @@
384
389
  @property st-global(--wds-list-item-padding-vertical-tiny);
385
390
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
386
391
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
392
+ @property st-global(--wds-list-item-section-fill);
387
393
  @property st-global(--wds-list-item-section-font-size);
388
394
  @property st-global(--wds-list-item-section-line-height);
389
395
  @property st-global(--wds-list-item-section-padding-horizontal);
@@ -481,7 +487,10 @@
481
487
  @property st-global(--wds-pagination-padding-horizontal);
482
488
  @property st-global(--wds-pagination-padding-vertical);
483
489
  @property st-global(--wds-palette-border);
484
- @property st-global(--wds-popover-border);
490
+ @property st-global(--wds-popover-border-fill);
491
+ @property st-global(--wds-popover-border-radius);
492
+ @property st-global(--wds-popover-border-width);
493
+ @property st-global(--wds-popover-fill);
485
494
  @property st-global(--wds-popover-menu-paddings-horizontal);
486
495
  @property st-global(--wds-popover-menu-paddings-vertical);
487
496
  @property st-global(--wds-radio-border);
@@ -751,6 +760,7 @@
751
760
  @property st-global(--wds-tag-border-radius-medium);
752
761
  @property st-global(--wds-tag-border-radius-small);
753
762
  @property st-global(--wds-tag-border-radius-tiny);
763
+ @property st-global(--wds-tag-fill-standard);
754
764
  @property st-global(--wds-tag-label-font-line-height-small);
755
765
  @property st-global(--wds-tag-label-font-size-small);
756
766
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -1309,6 +1319,10 @@
1309
1319
  --wds-linear-progress-bar-border-radius: 1000px;
1310
1320
  --wds-list-item-action-affix-margin: 6px;
1311
1321
  --wds-list-item-action-border-radius: 0;
1322
+ --wds-list-item-action-fill: #ffffff;
1323
+ --wds-list-item-action-fill-active: #d6e6fe;
1324
+ --wds-list-item-action-fill-hover: #e7f0ff;
1325
+ --wds-list-item-action-label-fill-active: #116dff;
1312
1326
  --wds-list-item-action-label-font-line-height-medium: 24px;
1313
1327
  --wds-list-item-action-label-font-line-height-small: 18px;
1314
1328
  --wds-list-item-action-label-font-size-medium: 16px;
@@ -1319,6 +1333,7 @@
1319
1333
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
1320
1334
  --wds-list-item-action-padding-vertical-small: 6px;
1321
1335
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
1336
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
1322
1337
  --wds-list-item-action-subtitle-font-line-height-medium: 18px;
1323
1338
  --wds-list-item-action-subtitle-font-size-medium: 14px;
1324
1339
  --wds-list-item-gap-columns: 24px;
@@ -1336,6 +1351,7 @@
1336
1351
  --wds-list-item-padding-vertical-tiny: 12px;
1337
1352
  --wds-list-item-padding-vertical-x-tiny: 6px;
1338
1353
  --wds-list-item-padding-vertical-xx-tiny: 3px;
1354
+ --wds-list-item-section-fill: #ffffff;
1339
1355
  --wds-list-item-section-font-size: 14px;
1340
1356
  --wds-list-item-section-line-height: 18px;
1341
1357
  --wds-list-item-section-padding-horizontal: 24px;
@@ -1433,7 +1449,10 @@
1433
1449
  --wds-pagination-padding-horizontal: 3px;
1434
1450
  --wds-pagination-padding-vertical: 3px;
1435
1451
  --wds-palette-border: 6px;
1436
- --wds-popover-border: 8px;
1452
+ --wds-popover-border-fill: rgba(0, 6, 36, 0);
1453
+ --wds-popover-border-radius: 8px;
1454
+ --wds-popover-border-width: 0;
1455
+ --wds-popover-fill: #ffffff;
1437
1456
  --wds-popover-menu-paddings-horizontal: 0;
1438
1457
  --wds-popover-menu-paddings-vertical: 12px;
1439
1458
  --wds-radio-border: #116dff;
@@ -1703,6 +1722,7 @@
1703
1722
  --wds-tag-border-radius-medium: 1000px;
1704
1723
  --wds-tag-border-radius-small: 1000px;
1705
1724
  --wds-tag-border-radius-tiny: 1000px;
1725
+ --wds-tag-fill-standard: #d6e6fe;
1706
1726
  --wds-tag-label-font-line-height-small: 18px;
1707
1727
  --wds-tag-label-font-size-small: 14px;
1708
1728
  --wds-tag-padding-horizontal-large: 18px;
package/foundation.st.css CHANGED
@@ -144,6 +144,7 @@
144
144
  @property st-global(--wds-shadow-200);
145
145
  @property st-global(--wds-shadow-300);
146
146
  @property st-global(--wds-shadow-400);
147
+ @property st-global(--wds-shadow-blur-35);
147
148
  @property st-global(--wds-shadow-blur-50);
148
149
  @property st-global(--wds-shadow-blur-100);
149
150
  @property st-global(--wds-shadow-blur-150);
@@ -347,6 +348,7 @@
347
348
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
348
349
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
349
350
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
351
+ --wds-shadow-blur-35: 2px;
350
352
  --wds-shadow-blur-50: 3px;
351
353
  --wds-shadow-blur-100: 6px;
352
354
  --wds-shadow-blur-150: 6px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.116.0",
3
+ "version": "1.118.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "0576f8a091f816875d738261ae2fe4a24b65798c4d9d4a22476e7cc2"
36
+ "falconPackageHash": "4ca1a12955abae51114feb15555cc793cde7b98df56a02b5c333a171"
37
37
  }
package/semantic.st.css CHANGED
@@ -409,6 +409,7 @@
409
409
  @property st-global(--wds-shadow-surface-overlay);
410
410
  @property st-global(--wds-shadow-surface-overlay-dark);
411
411
  @property st-global(--wds-shadow-surface-raised);
412
+ @property st-global(--wds-space-mobile-viewport-spacing);
412
413
  @property st-global(--wds-space-padding-horizontal-large);
413
414
  @property st-global(--wds-space-padding-horizontal-medium);
414
415
  @property st-global(--wds-space-padding-horizontal-small);
@@ -837,6 +838,7 @@
837
838
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
838
839
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
839
840
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
841
+ --wds-space-mobile-viewport-spacing: 30px;
840
842
  --wds-space-padding-horizontal-large: 24px;
841
843
  --wds-space-padding-horizontal-medium: 18px;
842
844
  --wds-space-padding-horizontal-small: 15px;
package/studio/all.css CHANGED
@@ -34,11 +34,12 @@
34
34
  --wds-shadow-y-200: 0;
35
35
  --wds-shadow-y-100: 0;
36
36
  --wds-shadow-y-0: 0;
37
- --wds-shadow-blur-400: 24;
38
- --wds-shadow-blur-200: 18;
39
- --wds-shadow-blur-150: 12;
40
- --wds-shadow-blur-100: 4;
41
- --wds-shadow-blur-50: 4;
37
+ --wds-shadow-blur-400: 24px;
38
+ --wds-shadow-blur-200: 18px;
39
+ --wds-shadow-blur-150: 12px;
40
+ --wds-shadow-blur-100: 4px;
41
+ --wds-shadow-blur-50: 4px;
42
+ --wds-shadow-blur-35: 3px;
42
43
  --wds-font-weight-semi-bold: 600;
43
44
  --wds-font-weight-regular: 400;
44
45
  --wds-font-weight-medium: 500;
@@ -357,6 +358,8 @@
357
358
  --wds-space-padding-horizontal-small: var(--wds-space-400);
358
359
  --wds-space-padding-horizontal-medium: var(--wds-space-500);
359
360
  --wds-space-padding-horizontal-large: var(--wds-space-600);
361
+ --wds-space-mobile-viewport-spacing: var(--wds-space-800);
362
+ --wds-shadow-surface-raised: var(--wds-shadow-y-var(--wds-shadow-y-0)) 0 var(--wds-shadow-blur-35) 0 var(--wds-shadow-fill-primary-raised), 0 0 0 0 var(--wds-shadow-fill-secondary-raised);
360
363
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-y-0) 0 var(--wds-shadow-blur-150) 0 var(--wds-color-black-100-transparent-20);
361
364
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
362
365
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
@@ -964,7 +967,9 @@
964
967
  --wds-radio-border-active-disabled: var(--wds-color-black-100-transparent-0);
965
968
  --wds-popover-menu-paddings-vertical: var(--wds-space-200);
966
969
  --wds-popover-menu-paddings-horizontal: var(--wds-space-0);
967
- --wds-popover-border: var(--wds-border-radius-200);
970
+ --wds-popover-border-width: var(--wds-border-width-none);
971
+ --wds-popover-border-radius: var(--wds-border-radius-200);
972
+ --wds-popover-border-fill: var(--wds-color-black-100-transparent-0);
968
973
  --wds-palette-border: var(--wds-border-radius-200);
969
974
  --wds-pagination-padding-vertical: var(--wds-space-50);
970
975
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -1254,7 +1259,6 @@
1254
1259
  --wds-add-item-border-radius: var(--wds-border-radius-200);
1255
1260
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-bold);
1256
1261
  --wds-accordion-title-font-weight: var(--wds-font-weight-medium);
1257
- --wds-shadow-surface-raised: var(--wds-shadow-200);
1258
1262
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1259
1263
  --wds-shadow-surface-modal: var(--wds-shadow-400);
1260
1264
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1354,6 +1358,7 @@
1354
1358
  --wds-thumbnail-subtitle-fill: var(--wds-color-text-standard-secondary);
1355
1359
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1356
1360
  --wds-tag-label-font-line-height-small: var(--wds-font-size-body-tiny);
1361
+ --wds-tag-fill-standard: var(--wds-color-fill-standard-secondary);
1357
1362
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1358
1363
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1359
1364
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -1396,6 +1401,7 @@
1396
1401
  --wds-radio-border-disabled: var(--wds-color-border-dark-primary-disabled);
1397
1402
  --wds-radio-border-active: var(--wds-color-border-standard-secondary-active);
1398
1403
  --wds-radio-border: var(--wds-color-border-dark-primary);
1404
+ --wds-popover-fill: var(--wds-color-fill-surface-overlay);
1399
1405
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1400
1406
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1401
1407
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
@@ -1426,9 +1432,15 @@
1426
1432
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-secondary-active);
1427
1433
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-secondary);
1428
1434
  --wds-list-item-section-font-size: var(--wds-font-size-body-tiny);
1435
+ --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1429
1436
  --wds-list-item-action-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1437
+ --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1430
1438
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1431
1439
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1440
+ --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1441
+ --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1442
+ --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1443
+ --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1432
1444
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1433
1445
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1434
1446
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
package/studio/all.st.css CHANGED
@@ -888,6 +888,10 @@
888
888
  @property st-global(--wds-linear-progress-bar-border-radius);
889
889
  @property st-global(--wds-list-item-action-affix-margin);
890
890
  @property st-global(--wds-list-item-action-border-radius);
891
+ @property st-global(--wds-list-item-action-fill);
892
+ @property st-global(--wds-list-item-action-fill-active);
893
+ @property st-global(--wds-list-item-action-fill-hover);
894
+ @property st-global(--wds-list-item-action-label-fill-active);
891
895
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
892
896
  @property st-global(--wds-list-item-action-label-font-line-height-small);
893
897
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -898,6 +902,7 @@
898
902
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
899
903
  @property st-global(--wds-list-item-action-padding-vertical-small);
900
904
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
905
+ @property st-global(--wds-list-item-action-subtitle-fill-active);
901
906
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
902
907
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
903
908
  @property st-global(--wds-list-item-gap-columns);
@@ -915,6 +920,7 @@
915
920
  @property st-global(--wds-list-item-padding-vertical-tiny);
916
921
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
917
922
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
923
+ @property st-global(--wds-list-item-section-fill);
918
924
  @property st-global(--wds-list-item-section-font-size);
919
925
  @property st-global(--wds-list-item-section-line-height);
920
926
  @property st-global(--wds-list-item-section-padding-horizontal);
@@ -1009,7 +1015,10 @@
1009
1015
  @property st-global(--wds-pagination-padding-horizontal);
1010
1016
  @property st-global(--wds-pagination-padding-vertical);
1011
1017
  @property st-global(--wds-palette-border);
1012
- @property st-global(--wds-popover-border);
1018
+ @property st-global(--wds-popover-border-fill);
1019
+ @property st-global(--wds-popover-border-radius);
1020
+ @property st-global(--wds-popover-border-width);
1021
+ @property st-global(--wds-popover-fill);
1013
1022
  @property st-global(--wds-popover-menu-paddings-horizontal);
1014
1023
  @property st-global(--wds-popover-menu-paddings-vertical);
1015
1024
  @property st-global(--wds-radio-border);
@@ -1126,6 +1135,7 @@
1126
1135
  @property st-global(--wds-shadow-200);
1127
1136
  @property st-global(--wds-shadow-300);
1128
1137
  @property st-global(--wds-shadow-400);
1138
+ @property st-global(--wds-shadow-blur-35);
1129
1139
  @property st-global(--wds-shadow-blur-50);
1130
1140
  @property st-global(--wds-shadow-blur-100);
1131
1141
  @property st-global(--wds-shadow-blur-150);
@@ -1306,6 +1316,7 @@
1306
1316
  @property st-global(--wds-space-1600);
1307
1317
  @property st-global(--wds-space-1700);
1308
1318
  @property st-global(--wds-space-2400);
1319
+ @property st-global(--wds-space-mobile-viewport-spacing);
1309
1320
  @property st-global(--wds-space-padding-horizontal-large);
1310
1321
  @property st-global(--wds-space-padding-horizontal-medium);
1311
1322
  @property st-global(--wds-space-padding-horizontal-small);
@@ -1364,6 +1375,7 @@
1364
1375
  @property st-global(--wds-tag-border-radius-medium);
1365
1376
  @property st-global(--wds-tag-border-radius-small);
1366
1377
  @property st-global(--wds-tag-border-radius-tiny);
1378
+ @property st-global(--wds-tag-fill-standard);
1367
1379
  @property st-global(--wds-tag-label-font-line-height-small);
1368
1380
  @property st-global(--wds-tag-label-font-size-small);
1369
1381
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -2463,6 +2475,10 @@
2463
2475
  --wds-linear-progress-bar-border-radius: 0;
2464
2476
  --wds-list-item-action-affix-margin: 4px;
2465
2477
  --wds-list-item-action-border-radius: 0;
2478
+ --wds-list-item-action-fill: #ffffff;
2479
+ --wds-list-item-action-fill-active: #dce9ff;
2480
+ --wds-list-item-action-fill-hover: #f7f8f8;
2481
+ --wds-list-item-action-label-fill-active: #116dff;
2466
2482
  --wds-list-item-action-label-font-line-height-medium: 20px;
2467
2483
  --wds-list-item-action-label-font-line-height-small: 18px;
2468
2484
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -2473,6 +2489,7 @@
2473
2489
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
2474
2490
  --wds-list-item-action-padding-vertical-small: 6px;
2475
2491
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
2492
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
2476
2493
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
2477
2494
  --wds-list-item-action-subtitle-font-size-medium: 12px;
2478
2495
  --wds-list-item-gap-columns: 24px;
@@ -2490,6 +2507,7 @@
2490
2507
  --wds-list-item-padding-vertical-tiny: 12px;
2491
2508
  --wds-list-item-padding-vertical-x-tiny: 8px;
2492
2509
  --wds-list-item-padding-vertical-xx-tiny: 4px;
2510
+ --wds-list-item-section-fill: #ffffff;
2493
2511
  --wds-list-item-section-font-size: 12px;
2494
2512
  --wds-list-item-section-line-height: 16px;
2495
2513
  --wds-list-item-section-padding-horizontal: 16px;
@@ -2584,7 +2602,10 @@
2584
2602
  --wds-pagination-padding-horizontal: 2px;
2585
2603
  --wds-pagination-padding-vertical: 2px;
2586
2604
  --wds-palette-border: 4px;
2587
- --wds-popover-border: 4px;
2605
+ --wds-popover-border-fill: rgba(19, 23, 32, 0);
2606
+ --wds-popover-border-radius: 4px;
2607
+ --wds-popover-border-width: 0;
2608
+ --wds-popover-fill: #ffffff;
2588
2609
  --wds-popover-menu-paddings-horizontal: 0;
2589
2610
  --wds-popover-menu-paddings-vertical: 8px;
2590
2611
  --wds-radio-border: #868aa5;
@@ -2701,11 +2722,12 @@
2701
2722
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
2702
2723
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
2703
2724
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
2704
- --wds-shadow-blur-50: 4;
2705
- --wds-shadow-blur-100: 4;
2706
- --wds-shadow-blur-150: 12;
2707
- --wds-shadow-blur-200: 18;
2708
- --wds-shadow-blur-400: 24;
2725
+ --wds-shadow-blur-35: 3px;
2726
+ --wds-shadow-blur-50: 4px;
2727
+ --wds-shadow-blur-100: 4px;
2728
+ --wds-shadow-blur-150: 12px;
2729
+ --wds-shadow-blur-200: 18px;
2730
+ --wds-shadow-blur-400: 24px;
2709
2731
  --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .2);
2710
2732
  --wds-shadow-fill-primary-overlay: rgba(19, 23, 32, .1);
2711
2733
  --wds-shadow-fill-primary-raised: rgba(19, 23, 32, .1);
@@ -2738,8 +2760,8 @@
2738
2760
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
2739
2761
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
2740
2762
  --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
2741
- --wds-shadow-surface-overlay-dark: 0 0 12 0 rgba(19, 23, 32, .2);
2742
- --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
2763
+ --wds-shadow-surface-overlay-dark: 0 0 12px 0 rgba(19, 23, 32, .2);
2764
+ --wds-shadow-surface-raised: 0 0 3px 0 rgba(19, 23, 32, .1), 0 0 0 0 rgba(19, 23, 32, .05);
2743
2765
  --wds-shadow-y-0: 0;
2744
2766
  --wds-shadow-y-100: 0;
2745
2767
  --wds-shadow-y-200: 0;
@@ -2881,6 +2903,7 @@
2881
2903
  --wds-space-1600: 64px;
2882
2904
  --wds-space-1700: 68px;
2883
2905
  --wds-space-2400: 96px;
2906
+ --wds-space-mobile-viewport-spacing: 32px;
2884
2907
  --wds-space-padding-horizontal-large: 24px;
2885
2908
  --wds-space-padding-horizontal-medium: 20px;
2886
2909
  --wds-space-padding-horizontal-small: 16px;
@@ -2939,6 +2962,7 @@
2939
2962
  --wds-tag-border-radius-medium: 4px;
2940
2963
  --wds-tag-border-radius-small: 4px;
2941
2964
  --wds-tag-border-radius-tiny: 4px;
2965
+ --wds-tag-fill-standard: #dce9ff;
2942
2966
  --wds-tag-label-font-line-height-small: 12px;
2943
2967
  --wds-tag-label-font-size-small: 12px;
2944
2968
  --wds-tag-padding-horizontal-large: 16px;
package/studio/component.st.css CHANGED
@@ -357,6 +357,10 @@
357
357
  @property st-global(--wds-linear-progress-bar-border-radius);
358
358
  @property st-global(--wds-list-item-action-affix-margin);
359
359
  @property st-global(--wds-list-item-action-border-radius);
360
+ @property st-global(--wds-list-item-action-fill);
361
+ @property st-global(--wds-list-item-action-fill-active);
362
+ @property st-global(--wds-list-item-action-fill-hover);
363
+ @property st-global(--wds-list-item-action-label-fill-active);
360
364
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
361
365
  @property st-global(--wds-list-item-action-label-font-line-height-small);
362
366
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -367,6 +371,7 @@
367
371
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
368
372
  @property st-global(--wds-list-item-action-padding-vertical-small);
369
373
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
374
+ @property st-global(--wds-list-item-action-subtitle-fill-active);
370
375
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
371
376
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
372
377
  @property st-global(--wds-list-item-gap-columns);
@@ -384,6 +389,7 @@
384
389
  @property st-global(--wds-list-item-padding-vertical-tiny);
385
390
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
386
391
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
392
+ @property st-global(--wds-list-item-section-fill);
387
393
  @property st-global(--wds-list-item-section-font-size);
388
394
  @property st-global(--wds-list-item-section-line-height);
389
395
  @property st-global(--wds-list-item-section-padding-horizontal);
@@ -478,7 +484,10 @@
478
484
  @property st-global(--wds-pagination-padding-horizontal);
479
485
  @property st-global(--wds-pagination-padding-vertical);
480
486
  @property st-global(--wds-palette-border);
481
- @property st-global(--wds-popover-border);
487
+ @property st-global(--wds-popover-border-fill);
488
+ @property st-global(--wds-popover-border-radius);
489
+ @property st-global(--wds-popover-border-width);
490
+ @property st-global(--wds-popover-fill);
482
491
  @property st-global(--wds-popover-menu-paddings-horizontal);
483
492
  @property st-global(--wds-popover-menu-paddings-vertical);
484
493
  @property st-global(--wds-radio-border);
@@ -743,6 +752,7 @@
743
752
  @property st-global(--wds-tag-border-radius-medium);
744
753
  @property st-global(--wds-tag-border-radius-small);
745
754
  @property st-global(--wds-tag-border-radius-tiny);
755
+ @property st-global(--wds-tag-fill-standard);
746
756
  @property st-global(--wds-tag-label-font-line-height-small);
747
757
  @property st-global(--wds-tag-label-font-size-small);
748
758
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -1309,6 +1319,10 @@
1309
1319
  --wds-linear-progress-bar-border-radius: 0;
1310
1320
  --wds-list-item-action-affix-margin: 4px;
1311
1321
  --wds-list-item-action-border-radius: 0;
1322
+ --wds-list-item-action-fill: #ffffff;
1323
+ --wds-list-item-action-fill-active: #dce9ff;
1324
+ --wds-list-item-action-fill-hover: #f7f8f8;
1325
+ --wds-list-item-action-label-fill-active: #116dff;
1312
1326
  --wds-list-item-action-label-font-line-height-medium: 20px;
1313
1327
  --wds-list-item-action-label-font-line-height-small: 18px;
1314
1328
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -1319,6 +1333,7 @@
1319
1333
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1320
1334
  --wds-list-item-action-padding-vertical-small: 6px;
1321
1335
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1336
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
1322
1337
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
1323
1338
  --wds-list-item-action-subtitle-font-size-medium: 12px;
1324
1339
  --wds-list-item-gap-columns: 24px;
@@ -1336,6 +1351,7 @@
1336
1351
  --wds-list-item-padding-vertical-tiny: 12px;
1337
1352
  --wds-list-item-padding-vertical-x-tiny: 8px;
1338
1353
  --wds-list-item-padding-vertical-xx-tiny: 4px;
1354
+ --wds-list-item-section-fill: #ffffff;
1339
1355
  --wds-list-item-section-font-size: 12px;
1340
1356
  --wds-list-item-section-line-height: 16px;
1341
1357
  --wds-list-item-section-padding-horizontal: 16px;
@@ -1430,7 +1446,10 @@
1430
1446
  --wds-pagination-padding-horizontal: 2px;
1431
1447
  --wds-pagination-padding-vertical: 2px;
1432
1448
  --wds-palette-border: 4px;
1433
- --wds-popover-border: 4px;
1449
+ --wds-popover-border-fill: rgba(19, 23, 32, 0);
1450
+ --wds-popover-border-radius: 4px;
1451
+ --wds-popover-border-width: 0;
1452
+ --wds-popover-fill: #ffffff;
1434
1453
  --wds-popover-menu-paddings-horizontal: 0;
1435
1454
  --wds-popover-menu-paddings-vertical: 8px;
1436
1455
  --wds-radio-border: #868aa5;
@@ -1695,6 +1714,7 @@
1695
1714
  --wds-tag-border-radius-medium: 4px;
1696
1715
  --wds-tag-border-radius-small: 4px;
1697
1716
  --wds-tag-border-radius-tiny: 4px;
1717
+ --wds-tag-fill-standard: #dce9ff;
1698
1718
  --wds-tag-label-font-line-height-small: 12px;
1699
1719
  --wds-tag-label-font-size-small: 12px;
1700
1720
  --wds-tag-padding-horizontal-large: 16px;
package/studio/foundation.st.css CHANGED
@@ -144,6 +144,7 @@
144
144
  @property st-global(--wds-shadow-200);
145
145
  @property st-global(--wds-shadow-300);
146
146
  @property st-global(--wds-shadow-400);
147
+ @property st-global(--wds-shadow-blur-35);
147
148
  @property st-global(--wds-shadow-blur-50);
148
149
  @property st-global(--wds-shadow-blur-100);
149
150
  @property st-global(--wds-shadow-blur-150);
@@ -347,11 +348,12 @@
347
348
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
348
349
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
349
350
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
350
- --wds-shadow-blur-50: 4;
351
- --wds-shadow-blur-100: 4;
352
- --wds-shadow-blur-150: 12;
353
- --wds-shadow-blur-200: 18;
354
- --wds-shadow-blur-400: 24;
351
+ --wds-shadow-blur-35: 3px;
352
+ --wds-shadow-blur-50: 4px;
353
+ --wds-shadow-blur-100: 4px;
354
+ --wds-shadow-blur-150: 12px;
355
+ --wds-shadow-blur-200: 18px;
356
+ --wds-shadow-blur-400: 24px;
355
357
  --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
356
358
  --wds-shadow-inner-200: 1px 1px 4px rgba(19, 23, 32, .2) inset;
357
359
  --wds-shadow-inner-300: 0 0 18px rgba(19, 23, 32, .1) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
package/studio/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-shadow-surface-overlay);
406
406
  @property st-global(--wds-shadow-surface-overlay-dark);
407
407
  @property st-global(--wds-shadow-surface-raised);
408
+ @property st-global(--wds-space-mobile-viewport-spacing);
408
409
  @property st-global(--wds-space-padding-horizontal-large);
409
410
  @property st-global(--wds-space-padding-horizontal-medium);
410
411
  @property st-global(--wds-space-padding-horizontal-small);
@@ -827,8 +828,9 @@
827
828
  --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
828
829
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
829
830
  --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
830
- --wds-shadow-surface-overlay-dark: 0 0 12 0 rgba(19, 23, 32, .2);
831
- --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
831
+ --wds-shadow-surface-overlay-dark: 0 0 12px 0 rgba(19, 23, 32, .2);
832
+ --wds-shadow-surface-raised: 0 0 3px 0 rgba(19, 23, 32, .1), 0 0 0 0 rgba(19, 23, 32, .05);
833
+ --wds-space-mobile-viewport-spacing: 32px;
832
834
  --wds-space-padding-horizontal-large: 24px;
833
835
  --wds-space-padding-horizontal-medium: 20px;
834
836
  --wds-space-padding-horizontal-small: 16px;
package/wixel/all.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --wds-shadow-blur-150: 6px;
40
40
  --wds-shadow-blur-100: 4px;
41
41
  --wds-shadow-blur-50: 4px;
42
+ --wds-shadow-blur-35: 3px;
42
43
  --wds-shadow-400: 0;
43
44
  --wds-shadow-200: 0;
44
45
  --wds-shadow-100: 0;
@@ -360,6 +361,7 @@
360
361
  --wds-space-padding-horizontal-small: var(--wds-space-400);
361
362
  --wds-space-padding-horizontal-medium: var(--wds-space-500);
362
363
  --wds-space-padding-horizontal-large: var(--wds-space-600);
364
+ --wds-space-mobile-viewport-spacing: var(--wds-space-800);
363
365
  --wds-shadow-surface-raised: 0 var(--wds-shadow-y-100) var(--wds-shadow-blur-50) var(--wds-shadow-fill-primary-raised), 0 2px 4px var(--wds-shadow-fill-secondary-raised);
364
366
  --wds-shadow-surface-overlay-dark: 0 var(--wds-shadow-y-300) var(--wds-shadow-blur-200) var(--wds-shadow-fill-primary-overlay), 0 6px 6px var(--wds-shadow-fill-secondary-raised);
365
367
  --wds-shadow-surface-overlay: 0 var(--wds-shadow-y-200) var(--wds-shadow-blur-200) var(--wds-shadow-fill-primary-overlay), 0 6px 6px var(--wds-shadow-fill-secondary-raised);
@@ -973,7 +975,9 @@
973
975
  --wds-radio-border-active-disabled: var(--wds-color-black-100-transparent-0);
974
976
  --wds-popover-menu-paddings-vertical: var(--wds-space-100);
975
977
  --wds-popover-menu-paddings-horizontal: var(--wds-space-100);
976
- --wds-popover-border: var(--wds-border-radius-600);
978
+ --wds-popover-border-width: var(--wds-border-width-none);
979
+ --wds-popover-border-radius: var(--wds-border-radius-600);
980
+ --wds-popover-border-fill: var(--wds-color-black-100-transparent-0);
977
981
  --wds-palette-border: var(--wds-border-radius-full);
978
982
  --wds-pagination-padding-vertical: var(--wds-space-50);
979
983
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -1364,6 +1368,7 @@
1364
1368
  --wds-thumbnail-fill: var(--wds-color-fill-standard-secondary);
1365
1369
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1366
1370
  --wds-tag-label-font-line-height-small: var(--wds-font-size-body-tiny);
1371
+ --wds-tag-fill-standard: var(--wds-color-fill-standard-secondary);
1367
1372
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1368
1373
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
1369
1374
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -1405,6 +1410,7 @@
1405
1410
  --wds-radio-border-disabled: var(--wds-color-border-dark-primary-disabled);
1406
1411
  --wds-radio-border-active: var(--wds-color-fill-standard-primary);
1407
1412
  --wds-radio-border: var(--wds-color-border-standard-secondary-active);
1413
+ --wds-popover-fill: var(--wds-color-fill-surface-overlay);
1408
1414
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1409
1415
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1410
1416
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
@@ -1441,9 +1447,15 @@
1441
1447
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-secondary-active);
1442
1448
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-secondary);
1443
1449
  --wds-list-item-section-font-size: var(--wds-font-size-body-tiny);
1450
+ --wds-list-item-section-fill: var(--wds-color-fill-standard-tertiary);
1444
1451
  --wds-list-item-action-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1452
+ --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1445
1453
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1446
1454
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1455
+ --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1456
+ --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1457
+ --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
1458
+ --wds-list-item-action-fill: var(--wds-color-fill-standard-tertiary);
1447
1459
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1448
1460
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1449
1461
  --wds-input-value-font-size-medium: var(--wds-font-size-body-small);
package/wixel/all.st.css CHANGED
@@ -889,6 +889,10 @@
889
889
  @property st-global(--wds-linear-progress-bar-border-radius);
890
890
  @property st-global(--wds-list-item-action-affix-margin);
891
891
  @property st-global(--wds-list-item-action-border-radius);
892
+ @property st-global(--wds-list-item-action-fill);
893
+ @property st-global(--wds-list-item-action-fill-active);
894
+ @property st-global(--wds-list-item-action-fill-hover);
895
+ @property st-global(--wds-list-item-action-label-fill-active);
892
896
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
893
897
  @property st-global(--wds-list-item-action-label-font-line-height-small);
894
898
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -899,6 +903,7 @@
899
903
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
900
904
  @property st-global(--wds-list-item-action-padding-vertical-small);
901
905
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
906
+ @property st-global(--wds-list-item-action-subtitle-fill-active);
902
907
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
903
908
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
904
909
  @property st-global(--wds-list-item-gap-columns);
@@ -916,6 +921,7 @@
916
921
  @property st-global(--wds-list-item-padding-vertical-tiny);
917
922
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
918
923
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
924
+ @property st-global(--wds-list-item-section-fill);
919
925
  @property st-global(--wds-list-item-section-font-line-height);
920
926
  @property st-global(--wds-list-item-section-font-size);
921
927
  @property st-global(--wds-list-item-section-padding-horizontal);
@@ -1014,7 +1020,10 @@
1014
1020
  @property st-global(--wds-pagination-padding-horizontal);
1015
1021
  @property st-global(--wds-pagination-padding-vertical);
1016
1022
  @property st-global(--wds-palette-border);
1017
- @property st-global(--wds-popover-border);
1023
+ @property st-global(--wds-popover-border-fill);
1024
+ @property st-global(--wds-popover-border-radius);
1025
+ @property st-global(--wds-popover-border-width);
1026
+ @property st-global(--wds-popover-fill);
1018
1027
  @property st-global(--wds-popover-menu-paddings-horizontal);
1019
1028
  @property st-global(--wds-popover-menu-paddings-vertical);
1020
1029
  @property st-global(--wds-radio-border);
@@ -1136,6 +1145,7 @@
1136
1145
  @property st-global(--wds-shadow-200);
1137
1146
  @property st-global(--wds-shadow-300);
1138
1147
  @property st-global(--wds-shadow-400);
1148
+ @property st-global(--wds-shadow-blur-35);
1139
1149
  @property st-global(--wds-shadow-blur-50);
1140
1150
  @property st-global(--wds-shadow-blur-100);
1141
1151
  @property st-global(--wds-shadow-blur-150);
@@ -1316,6 +1326,7 @@
1316
1326
  @property st-global(--wds-space-1600);
1317
1327
  @property st-global(--wds-space-1700);
1318
1328
  @property st-global(--wds-space-2400);
1329
+ @property st-global(--wds-space-mobile-viewport-spacing);
1319
1330
  @property st-global(--wds-space-padding-horizontal-large);
1320
1331
  @property st-global(--wds-space-padding-horizontal-medium);
1321
1332
  @property st-global(--wds-space-padding-horizontal-small);
@@ -1373,6 +1384,7 @@
1373
1384
  @property st-global(--wds-tag-border-radius-medium);
1374
1385
  @property st-global(--wds-tag-border-radius-small);
1375
1386
  @property st-global(--wds-tag-border-radius-tiny);
1387
+ @property st-global(--wds-tag-fill-standard);
1376
1388
  @property st-global(--wds-tag-label-font-line-height-small);
1377
1389
  @property st-global(--wds-tag-label-font-size-small);
1378
1390
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -2473,6 +2485,10 @@
2473
2485
  --wds-linear-progress-bar-border-radius: 0;
2474
2486
  --wds-list-item-action-affix-margin: 6px;
2475
2487
  --wds-list-item-action-border-radius: 8px;
2488
+ --wds-list-item-action-fill: #ffffff;
2489
+ --wds-list-item-action-fill-active: #eef0ff;
2490
+ --wds-list-item-action-fill-hover: #f4f6ff;
2491
+ --wds-list-item-action-label-fill-active: #526cff;
2476
2492
  --wds-list-item-action-label-font-line-height-medium: 20px;
2477
2493
  --wds-list-item-action-label-font-line-height-small: 16px;
2478
2494
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -2483,6 +2499,7 @@
2483
2499
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
2484
2500
  --wds-list-item-action-padding-vertical-small: 12px;
2485
2501
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
2502
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
2486
2503
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
2487
2504
  --wds-list-item-action-subtitle-font-size-medium: 12px;
2488
2505
  --wds-list-item-gap-columns: 24px;
@@ -2500,6 +2517,7 @@
2500
2517
  --wds-list-item-padding-vertical-tiny: 12px;
2501
2518
  --wds-list-item-padding-vertical-x-tiny: 8px;
2502
2519
  --wds-list-item-padding-vertical-xx-tiny: 4px;
2520
+ --wds-list-item-section-fill: #ffffff;
2503
2521
  --wds-list-item-section-font-line-height: 16px;
2504
2522
  --wds-list-item-section-font-size: 12px;
2505
2523
  --wds-list-item-section-padding-horizontal: 16px;
@@ -2598,7 +2616,10 @@
2598
2616
  --wds-pagination-padding-horizontal: 2px;
2599
2617
  --wds-pagination-padding-vertical: 2px;
2600
2618
  --wds-palette-border: 1000px;
2601
- --wds-popover-border: 12px;
2619
+ --wds-popover-border-fill: rgba(38, 37, 36, 0.0000);
2620
+ --wds-popover-border-radius: 12px;
2621
+ --wds-popover-border-width: 0;
2622
+ --wds-popover-fill: #ffffff;
2602
2623
  --wds-popover-menu-paddings-horizontal: 4px;
2603
2624
  --wds-popover-menu-paddings-vertical: 4px;
2604
2625
  --wds-radio-border: #526cff;
@@ -2720,6 +2741,7 @@
2720
2741
  --wds-shadow-200: 0;
2721
2742
  --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
2722
2743
  --wds-shadow-400: 0;
2744
+ --wds-shadow-blur-35: 3px;
2723
2745
  --wds-shadow-blur-50: 4px;
2724
2746
  --wds-shadow-blur-100: 4px;
2725
2747
  --wds-shadow-blur-150: 6px;
@@ -2900,6 +2922,7 @@
2900
2922
  --wds-space-1600: 64px;
2901
2923
  --wds-space-1700: 68px;
2902
2924
  --wds-space-2400: 96px;
2925
+ --wds-space-mobile-viewport-spacing: 32px;
2903
2926
  --wds-space-padding-horizontal-large: 24px;
2904
2927
  --wds-space-padding-horizontal-medium: 20px;
2905
2928
  --wds-space-padding-horizontal-small: 16px;
@@ -2957,6 +2980,7 @@
2957
2980
  --wds-tag-border-radius-medium: 4px;
2958
2981
  --wds-tag-border-radius-small: 4px;
2959
2982
  --wds-tag-border-radius-tiny: 4px;
2983
+ --wds-tag-fill-standard: #eef0ff;
2960
2984
  --wds-tag-label-font-line-height-small: 12px;
2961
2985
  --wds-tag-label-font-size-small: 12px;
2962
2986
  --wds-tag-padding-horizontal-large: 16px;
package/wixel/component.st.css CHANGED
@@ -354,6 +354,10 @@
354
354
  @property st-global(--wds-linear-progress-bar-border-radius);
355
355
  @property st-global(--wds-list-item-action-affix-margin);
356
356
  @property st-global(--wds-list-item-action-border-radius);
357
+ @property st-global(--wds-list-item-action-fill);
358
+ @property st-global(--wds-list-item-action-fill-active);
359
+ @property st-global(--wds-list-item-action-fill-hover);
360
+ @property st-global(--wds-list-item-action-label-fill-active);
357
361
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
358
362
  @property st-global(--wds-list-item-action-label-font-line-height-small);
359
363
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -364,6 +368,7 @@
364
368
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
365
369
  @property st-global(--wds-list-item-action-padding-vertical-small);
366
370
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
371
+ @property st-global(--wds-list-item-action-subtitle-fill-active);
367
372
  @property st-global(--wds-list-item-action-subtitle-font-line-height-medium);
368
373
  @property st-global(--wds-list-item-action-subtitle-font-size-medium);
369
374
  @property st-global(--wds-list-item-gap-columns);
@@ -381,6 +386,7 @@
381
386
  @property st-global(--wds-list-item-padding-vertical-tiny);
382
387
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
383
388
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
389
+ @property st-global(--wds-list-item-section-fill);
384
390
  @property st-global(--wds-list-item-section-font-line-height);
385
391
  @property st-global(--wds-list-item-section-font-size);
386
392
  @property st-global(--wds-list-item-section-padding-horizontal);
@@ -479,7 +485,10 @@
479
485
  @property st-global(--wds-pagination-padding-horizontal);
480
486
  @property st-global(--wds-pagination-padding-vertical);
481
487
  @property st-global(--wds-palette-border);
482
- @property st-global(--wds-popover-border);
488
+ @property st-global(--wds-popover-border-fill);
489
+ @property st-global(--wds-popover-border-radius);
490
+ @property st-global(--wds-popover-border-width);
491
+ @property st-global(--wds-popover-fill);
483
492
  @property st-global(--wds-popover-menu-paddings-horizontal);
484
493
  @property st-global(--wds-popover-menu-paddings-vertical);
485
494
  @property st-global(--wds-radio-border);
@@ -748,6 +757,7 @@
748
757
  @property st-global(--wds-tag-border-radius-medium);
749
758
  @property st-global(--wds-tag-border-radius-small);
750
759
  @property st-global(--wds-tag-border-radius-tiny);
760
+ @property st-global(--wds-tag-fill-standard);
751
761
  @property st-global(--wds-tag-label-font-line-height-small);
752
762
  @property st-global(--wds-tag-label-font-size-small);
753
763
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -1311,6 +1321,10 @@
1311
1321
  --wds-linear-progress-bar-border-radius: 0;
1312
1322
  --wds-list-item-action-affix-margin: 6px;
1313
1323
  --wds-list-item-action-border-radius: 8px;
1324
+ --wds-list-item-action-fill: #ffffff;
1325
+ --wds-list-item-action-fill-active: #eef0ff;
1326
+ --wds-list-item-action-fill-hover: #f4f6ff;
1327
+ --wds-list-item-action-label-fill-active: #526cff;
1314
1328
  --wds-list-item-action-label-font-line-height-medium: 20px;
1315
1329
  --wds-list-item-action-label-font-line-height-small: 16px;
1316
1330
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -1321,6 +1335,7 @@
1321
1335
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1322
1336
  --wds-list-item-action-padding-vertical-small: 12px;
1323
1337
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1338
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
1324
1339
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
1325
1340
  --wds-list-item-action-subtitle-font-size-medium: 12px;
1326
1341
  --wds-list-item-gap-columns: 24px;
@@ -1338,6 +1353,7 @@
1338
1353
  --wds-list-item-padding-vertical-tiny: 12px;
1339
1354
  --wds-list-item-padding-vertical-x-tiny: 8px;
1340
1355
  --wds-list-item-padding-vertical-xx-tiny: 4px;
1356
+ --wds-list-item-section-fill: #ffffff;
1341
1357
  --wds-list-item-section-font-line-height: 16px;
1342
1358
  --wds-list-item-section-font-size: 12px;
1343
1359
  --wds-list-item-section-padding-horizontal: 16px;
@@ -1436,7 +1452,10 @@
1436
1452
  --wds-pagination-padding-horizontal: 2px;
1437
1453
  --wds-pagination-padding-vertical: 2px;
1438
1454
  --wds-palette-border: 1000px;
1439
- --wds-popover-border: 12px;
1455
+ --wds-popover-border-fill: rgba(38, 37, 36, 0.0000);
1456
+ --wds-popover-border-radius: 12px;
1457
+ --wds-popover-border-width: 0;
1458
+ --wds-popover-fill: #ffffff;
1440
1459
  --wds-popover-menu-paddings-horizontal: 4px;
1441
1460
  --wds-popover-menu-paddings-vertical: 4px;
1442
1461
  --wds-radio-border: #526cff;
@@ -1705,6 +1724,7 @@
1705
1724
  --wds-tag-border-radius-medium: 4px;
1706
1725
  --wds-tag-border-radius-small: 4px;
1707
1726
  --wds-tag-border-radius-tiny: 4px;
1727
+ --wds-tag-fill-standard: #eef0ff;
1708
1728
  --wds-tag-label-font-line-height-small: 12px;
1709
1729
  --wds-tag-label-font-size-small: 12px;
1710
1730
  --wds-tag-padding-horizontal-large: 16px;
package/wixel/foundation.st.css CHANGED
@@ -144,6 +144,7 @@
144
144
  @property st-global(--wds-shadow-200);
145
145
  @property st-global(--wds-shadow-300);
146
146
  @property st-global(--wds-shadow-400);
147
+ @property st-global(--wds-shadow-blur-35);
147
148
  @property st-global(--wds-shadow-blur-50);
148
149
  @property st-global(--wds-shadow-blur-100);
149
150
  @property st-global(--wds-shadow-blur-150);
@@ -347,6 +348,7 @@
347
348
  --wds-shadow-200: 0;
348
349
  --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
349
350
  --wds-shadow-400: 0;
351
+ --wds-shadow-blur-35: 3px;
350
352
  --wds-shadow-blur-50: 4px;
351
353
  --wds-shadow-blur-100: 4px;
352
354
  --wds-shadow-blur-150: 6px;
package/wixel/semantic.st.css CHANGED
@@ -409,6 +409,7 @@
409
409
  @property st-global(--wds-shadow-surface-overlay);
410
410
  @property st-global(--wds-shadow-surface-overlay-dark);
411
411
  @property st-global(--wds-shadow-surface-raised);
412
+ @property st-global(--wds-space-mobile-viewport-spacing);
412
413
  @property st-global(--wds-space-padding-horizontal-large);
413
414
  @property st-global(--wds-space-padding-horizontal-medium);
414
415
  @property st-global(--wds-space-padding-horizontal-small);
@@ -837,6 +838,7 @@
837
838
  --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
838
839
  --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
839
840
  --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
841
+ --wds-space-mobile-viewport-spacing: 32px;
840
842
  --wds-space-padding-horizontal-large: 24px;
841
843
  --wds-space-padding-horizontal-medium: 20px;
842
844
  --wds-space-padding-horizontal-small: 16px;