@wix/design-system-tokens 1.117.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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +10 -1
  3. package/all.st.css +20 -2
  4. package/component.st.css +20 -2
  5. package/package.json +2 -2
  6. package/studio/all.css +10 -1
  7. package/studio/all.st.css +20 -2
  8. package/studio/component.st.css +20 -2
  9. package/wixel/all.css +10 -1
  10. package/wixel/all.st.css +20 -2
  11. package/wixel/component.st.css +20 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
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
+
1
7
  ## 1.117.0 - 2025-07-01
2
8
 
3
9
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -949,7 +949,9 @@
949
949
  --wds-radio-border-radius: var(--wds-border-radius-full);
950
950
  --wds-popover-menu-paddings-vertical: var(--wds-space-200);
951
951
  --wds-popover-menu-paddings-horizontal: var(--wds-space-0);
952
- --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);
953
955
  --wds-palette-border: var(--wds-border-radius-300);
954
956
  --wds-pagination-padding-vertical: var(--wds-space-50);
955
957
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -1378,6 +1380,7 @@
1378
1380
  --wds-radio-border-active-disabled: var(--wds-color-border-standard-secondary-disabled);
1379
1381
  --wds-radio-border-active: var(--wds-color-border-standard-secondary-active);
1380
1382
  --wds-radio-border: var(--wds-color-border-standard-secondary-active);
1383
+ --wds-popover-fill: var(--wds-color-fill-surface-overlay);
1381
1384
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1382
1385
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1383
1386
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
@@ -1416,9 +1419,15 @@
1416
1419
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-primary-active);
1417
1420
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-primary);
1418
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);
1419
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);
1420
1425
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-small);
1421
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);
1422
1431
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1423
1432
  --wds-input-value-font-size-small: var(--wds-font-size-body-small);
1424
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);
@@ -2474,6 +2483,10 @@
2474
2483
  --wds-linear-progress-bar-border-radius: 1000px;
2475
2484
  --wds-list-item-action-affix-margin: 6px;
2476
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;
2477
2490
  --wds-list-item-action-label-font-line-height-medium: 24px;
2478
2491
  --wds-list-item-action-label-font-line-height-small: 18px;
2479
2492
  --wds-list-item-action-label-font-size-medium: 16px;
@@ -2484,6 +2497,7 @@
2484
2497
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
2485
2498
  --wds-list-item-action-padding-vertical-small: 6px;
2486
2499
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
2500
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
2487
2501
  --wds-list-item-action-subtitle-font-line-height-medium: 18px;
2488
2502
  --wds-list-item-action-subtitle-font-size-medium: 14px;
2489
2503
  --wds-list-item-gap-columns: 24px;
@@ -2501,6 +2515,7 @@
2501
2515
  --wds-list-item-padding-vertical-tiny: 12px;
2502
2516
  --wds-list-item-padding-vertical-x-tiny: 6px;
2503
2517
  --wds-list-item-padding-vertical-xx-tiny: 3px;
2518
+ --wds-list-item-section-fill: #ffffff;
2504
2519
  --wds-list-item-section-font-size: 14px;
2505
2520
  --wds-list-item-section-line-height: 18px;
2506
2521
  --wds-list-item-section-padding-horizontal: 24px;
@@ -2598,7 +2613,10 @@
2598
2613
  --wds-pagination-padding-horizontal: 3px;
2599
2614
  --wds-pagination-padding-vertical: 3px;
2600
2615
  --wds-palette-border: 6px;
2601
- --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;
2602
2620
  --wds-popover-menu-paddings-horizontal: 0;
2603
2621
  --wds-popover-menu-paddings-vertical: 12px;
2604
2622
  --wds-radio-border: #116dff;
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);
@@ -1310,6 +1319,10 @@
1310
1319
  --wds-linear-progress-bar-border-radius: 1000px;
1311
1320
  --wds-list-item-action-affix-margin: 6px;
1312
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;
1313
1326
  --wds-list-item-action-label-font-line-height-medium: 24px;
1314
1327
  --wds-list-item-action-label-font-line-height-small: 18px;
1315
1328
  --wds-list-item-action-label-font-size-medium: 16px;
@@ -1320,6 +1333,7 @@
1320
1333
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
1321
1334
  --wds-list-item-action-padding-vertical-small: 6px;
1322
1335
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
1336
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
1323
1337
  --wds-list-item-action-subtitle-font-line-height-medium: 18px;
1324
1338
  --wds-list-item-action-subtitle-font-size-medium: 14px;
1325
1339
  --wds-list-item-gap-columns: 24px;
@@ -1337,6 +1351,7 @@
1337
1351
  --wds-list-item-padding-vertical-tiny: 12px;
1338
1352
  --wds-list-item-padding-vertical-x-tiny: 6px;
1339
1353
  --wds-list-item-padding-vertical-xx-tiny: 3px;
1354
+ --wds-list-item-section-fill: #ffffff;
1340
1355
  --wds-list-item-section-font-size: 14px;
1341
1356
  --wds-list-item-section-line-height: 18px;
1342
1357
  --wds-list-item-section-padding-horizontal: 24px;
@@ -1434,7 +1449,10 @@
1434
1449
  --wds-pagination-padding-horizontal: 3px;
1435
1450
  --wds-pagination-padding-vertical: 3px;
1436
1451
  --wds-palette-border: 6px;
1437
- --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;
1438
1456
  --wds-popover-menu-paddings-horizontal: 0;
1439
1457
  --wds-popover-menu-paddings-vertical: 12px;
1440
1458
  --wds-radio-border: #116dff;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.117.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": "d70d9f5986535a274361bad2eec8ee14c1192b42868225246d144e9f"
36
+ "falconPackageHash": "4ca1a12955abae51114feb15555cc793cde7b98df56a02b5c333a171"
37
37
  }
package/studio/all.css CHANGED
@@ -967,7 +967,9 @@
967
967
  --wds-radio-border-active-disabled: var(--wds-color-black-100-transparent-0);
968
968
  --wds-popover-menu-paddings-vertical: var(--wds-space-200);
969
969
  --wds-popover-menu-paddings-horizontal: var(--wds-space-0);
970
- --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);
971
973
  --wds-palette-border: var(--wds-border-radius-200);
972
974
  --wds-pagination-padding-vertical: var(--wds-space-50);
973
975
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -1399,6 +1401,7 @@
1399
1401
  --wds-radio-border-disabled: var(--wds-color-border-dark-primary-disabled);
1400
1402
  --wds-radio-border-active: var(--wds-color-border-standard-secondary-active);
1401
1403
  --wds-radio-border: var(--wds-color-border-dark-primary);
1404
+ --wds-popover-fill: var(--wds-color-fill-surface-overlay);
1402
1405
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1403
1406
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1404
1407
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
@@ -1429,9 +1432,15 @@
1429
1432
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-secondary-active);
1430
1433
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-secondary);
1431
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);
1432
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);
1433
1438
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1434
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);
1435
1444
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1436
1445
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1437
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);
@@ -2466,6 +2475,10 @@
2466
2475
  --wds-linear-progress-bar-border-radius: 0;
2467
2476
  --wds-list-item-action-affix-margin: 4px;
2468
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;
2469
2482
  --wds-list-item-action-label-font-line-height-medium: 20px;
2470
2483
  --wds-list-item-action-label-font-line-height-small: 18px;
2471
2484
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -2476,6 +2489,7 @@
2476
2489
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
2477
2490
  --wds-list-item-action-padding-vertical-small: 6px;
2478
2491
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
2492
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
2479
2493
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
2480
2494
  --wds-list-item-action-subtitle-font-size-medium: 12px;
2481
2495
  --wds-list-item-gap-columns: 24px;
@@ -2493,6 +2507,7 @@
2493
2507
  --wds-list-item-padding-vertical-tiny: 12px;
2494
2508
  --wds-list-item-padding-vertical-x-tiny: 8px;
2495
2509
  --wds-list-item-padding-vertical-xx-tiny: 4px;
2510
+ --wds-list-item-section-fill: #ffffff;
2496
2511
  --wds-list-item-section-font-size: 12px;
2497
2512
  --wds-list-item-section-line-height: 16px;
2498
2513
  --wds-list-item-section-padding-horizontal: 16px;
@@ -2587,7 +2602,10 @@
2587
2602
  --wds-pagination-padding-horizontal: 2px;
2588
2603
  --wds-pagination-padding-vertical: 2px;
2589
2604
  --wds-palette-border: 4px;
2590
- --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;
2591
2609
  --wds-popover-menu-paddings-horizontal: 0;
2592
2610
  --wds-popover-menu-paddings-vertical: 8px;
2593
2611
  --wds-radio-border: #868aa5;
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);
@@ -1310,6 +1319,10 @@
1310
1319
  --wds-linear-progress-bar-border-radius: 0;
1311
1320
  --wds-list-item-action-affix-margin: 4px;
1312
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;
1313
1326
  --wds-list-item-action-label-font-line-height-medium: 20px;
1314
1327
  --wds-list-item-action-label-font-line-height-small: 18px;
1315
1328
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -1320,6 +1333,7 @@
1320
1333
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1321
1334
  --wds-list-item-action-padding-vertical-small: 6px;
1322
1335
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1336
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
1323
1337
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
1324
1338
  --wds-list-item-action-subtitle-font-size-medium: 12px;
1325
1339
  --wds-list-item-gap-columns: 24px;
@@ -1337,6 +1351,7 @@
1337
1351
  --wds-list-item-padding-vertical-tiny: 12px;
1338
1352
  --wds-list-item-padding-vertical-x-tiny: 8px;
1339
1353
  --wds-list-item-padding-vertical-xx-tiny: 4px;
1354
+ --wds-list-item-section-fill: #ffffff;
1340
1355
  --wds-list-item-section-font-size: 12px;
1341
1356
  --wds-list-item-section-line-height: 16px;
1342
1357
  --wds-list-item-section-padding-horizontal: 16px;
@@ -1431,7 +1446,10 @@
1431
1446
  --wds-pagination-padding-horizontal: 2px;
1432
1447
  --wds-pagination-padding-vertical: 2px;
1433
1448
  --wds-palette-border: 4px;
1434
- --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;
1435
1453
  --wds-popover-menu-paddings-horizontal: 0;
1436
1454
  --wds-popover-menu-paddings-vertical: 8px;
1437
1455
  --wds-radio-border: #868aa5;
package/wixel/all.css CHANGED
@@ -975,7 +975,9 @@
975
975
  --wds-radio-border-active-disabled: var(--wds-color-black-100-transparent-0);
976
976
  --wds-popover-menu-paddings-vertical: var(--wds-space-100);
977
977
  --wds-popover-menu-paddings-horizontal: var(--wds-space-100);
978
- --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);
979
981
  --wds-palette-border: var(--wds-border-radius-full);
980
982
  --wds-pagination-padding-vertical: var(--wds-space-50);
981
983
  --wds-pagination-padding-horizontal: var(--wds-space-50);
@@ -1408,6 +1410,7 @@
1408
1410
  --wds-radio-border-disabled: var(--wds-color-border-dark-primary-disabled);
1409
1411
  --wds-radio-border-active: var(--wds-color-fill-standard-primary);
1410
1412
  --wds-radio-border: var(--wds-color-border-standard-secondary-active);
1413
+ --wds-popover-fill: var(--wds-color-fill-surface-overlay);
1411
1414
  --wds-pagination-fill-hover: var(--wds-color-fill-standard-primary-hover);
1412
1415
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1413
1416
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
@@ -1444,9 +1447,15 @@
1444
1447
  --wds-list-item-select-active-fill-active: var(--wds-color-fill-standard-secondary-active);
1445
1448
  --wds-list-item-select-active-fill: var(--wds-color-fill-standard-secondary);
1446
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);
1447
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);
1448
1453
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1449
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);
1450
1459
  --wds-input-value-font-size-tiny: var(--wds-font-size-body-tiny);
1451
1460
  --wds-input-value-font-size-small: var(--wds-font-size-body-tiny);
1452
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);
@@ -2476,6 +2485,10 @@
2476
2485
  --wds-linear-progress-bar-border-radius: 0;
2477
2486
  --wds-list-item-action-affix-margin: 6px;
2478
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;
2479
2492
  --wds-list-item-action-label-font-line-height-medium: 20px;
2480
2493
  --wds-list-item-action-label-font-line-height-small: 16px;
2481
2494
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -2486,6 +2499,7 @@
2486
2499
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
2487
2500
  --wds-list-item-action-padding-vertical-small: 12px;
2488
2501
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
2502
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
2489
2503
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
2490
2504
  --wds-list-item-action-subtitle-font-size-medium: 12px;
2491
2505
  --wds-list-item-gap-columns: 24px;
@@ -2503,6 +2517,7 @@
2503
2517
  --wds-list-item-padding-vertical-tiny: 12px;
2504
2518
  --wds-list-item-padding-vertical-x-tiny: 8px;
2505
2519
  --wds-list-item-padding-vertical-xx-tiny: 4px;
2520
+ --wds-list-item-section-fill: #ffffff;
2506
2521
  --wds-list-item-section-font-line-height: 16px;
2507
2522
  --wds-list-item-section-font-size: 12px;
2508
2523
  --wds-list-item-section-padding-horizontal: 16px;
@@ -2601,7 +2616,10 @@
2601
2616
  --wds-pagination-padding-horizontal: 2px;
2602
2617
  --wds-pagination-padding-vertical: 2px;
2603
2618
  --wds-palette-border: 1000px;
2604
- --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;
2605
2623
  --wds-popover-menu-paddings-horizontal: 4px;
2606
2624
  --wds-popover-menu-paddings-vertical: 4px;
2607
2625
  --wds-radio-border: #526cff;
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);
@@ -1312,6 +1321,10 @@
1312
1321
  --wds-linear-progress-bar-border-radius: 0;
1313
1322
  --wds-list-item-action-affix-margin: 6px;
1314
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;
1315
1328
  --wds-list-item-action-label-font-line-height-medium: 20px;
1316
1329
  --wds-list-item-action-label-font-line-height-small: 16px;
1317
1330
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -1322,6 +1335,7 @@
1322
1335
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
1323
1336
  --wds-list-item-action-padding-vertical-small: 12px;
1324
1337
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
1338
+ --wds-list-item-action-subtitle-fill-active: #868aa5;
1325
1339
  --wds-list-item-action-subtitle-font-line-height-medium: 16px;
1326
1340
  --wds-list-item-action-subtitle-font-size-medium: 12px;
1327
1341
  --wds-list-item-gap-columns: 24px;
@@ -1339,6 +1353,7 @@
1339
1353
  --wds-list-item-padding-vertical-tiny: 12px;
1340
1354
  --wds-list-item-padding-vertical-x-tiny: 8px;
1341
1355
  --wds-list-item-padding-vertical-xx-tiny: 4px;
1356
+ --wds-list-item-section-fill: #ffffff;
1342
1357
  --wds-list-item-section-font-line-height: 16px;
1343
1358
  --wds-list-item-section-font-size: 12px;
1344
1359
  --wds-list-item-section-padding-horizontal: 16px;
@@ -1437,7 +1452,10 @@
1437
1452
  --wds-pagination-padding-horizontal: 2px;
1438
1453
  --wds-pagination-padding-vertical: 2px;
1439
1454
  --wds-palette-border: 1000px;
1440
- --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;
1441
1459
  --wds-popover-menu-paddings-horizontal: 4px;
1442
1460
  --wds-popover-menu-paddings-vertical: 4px;
1443
1461
  --wds-radio-border: #526cff;