@wix/design-system-tokens 1.219.3 → 1.220.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/all.css +33 -0
  3. package/all.scss +33 -0
  4. package/all.st.css +66 -0
  5. package/component.st.css +66 -0
  6. package/odeditor/all.css +27 -1
  7. package/odeditor/all.scss +27 -1
  8. package/odeditor/all.st.css +53 -1
  9. package/odeditor/component.st.css +53 -1
  10. package/odeditor-dark/all.css +26 -0
  11. package/odeditor-dark/all.scss +26 -0
  12. package/odeditor-dark/all.st.css +52 -0
  13. package/odeditor-dark/component.st.css +52 -0
  14. package/package.json +2 -2
  15. package/studio/all.css +33 -0
  16. package/studio/all.scss +33 -0
  17. package/studio/all.st.css +66 -0
  18. package/studio/component.st.css +66 -0
  19. package/wixel/all.css +33 -0
  20. package/wixel/all.scss +33 -0
  21. package/wixel/all.st.css +66 -0
  22. package/wixel/component.st.css +66 -0
package/studio/all.st.css CHANGED
@@ -67,6 +67,13 @@
67
67
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
68
68
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
69
69
  @property st-global(--wds-avatar-color-7-fill);
70
+ @property st-global(--wds-avatar-group-counter-background-blur);
71
+ @property st-global(--wds-avatar-group-counter-border-fill);
72
+ @property st-global(--wds-avatar-group-counter-border-width);
73
+ @property st-global(--wds-avatar-group-counter-fill);
74
+ @property st-global(--wds-avatar-group-counter-fill-gradient-1);
75
+ @property st-global(--wds-avatar-group-counter-fill-gradient-2);
76
+ @property st-global(--wds-avatar-group-counter-fill-hover);
70
77
  @property st-global(--wds-avatar-group-gap-condensed);
71
78
  @property st-global(--wds-avatar-group-gap-default);
72
79
  @property st-global(--wds-avatar-size-tiny);
@@ -1495,6 +1502,17 @@
1495
1502
  @property st-global(--wds-page-header-title-minimised-font-weight);
1496
1503
  @property st-global(--wds-page-header-title-minimised-letter-spacing);
1497
1504
  @property st-global(--wds-page-header-title-minimised-line-height);
1505
+ @property st-global(--wds-page-section-divider-display);
1506
+ @property st-global(--wds-page-section-gap);
1507
+ @property st-global(--wds-page-section-padding-bottom);
1508
+ @property st-global(--wds-page-section-padding-bottom-with-divider);
1509
+ @property st-global(--wds-page-section-padding-top);
1510
+ @property st-global(--wds-page-section-subtitle-font-size);
1511
+ @property st-global(--wds-page-section-subtitle-line-height);
1512
+ @property st-global(--wds-page-section-title-font-size);
1513
+ @property st-global(--wds-page-section-title-font-weight);
1514
+ @property st-global(--wds-page-section-title-letter-spacing);
1515
+ @property st-global(--wds-page-section-title-line-height);
1498
1516
  @property st-global(--wds-pagination-arrow-fill);
1499
1517
  @property st-global(--wds-pagination-fill);
1500
1518
  @property st-global(--wds-pagination-fill-active);
@@ -1549,6 +1567,7 @@
1549
1567
  @property st-global(--wds-scrollbar-fill);
1550
1568
  @property st-global(--wds-scrollbar-fill-active);
1551
1569
  @property st-global(--wds-scrollbar-fill-hover);
1570
+ @property st-global(--wds-scrollbar-width);
1552
1571
  @property st-global(--wds-search-border-radius-large);
1553
1572
  @property st-global(--wds-search-border-radius-medium);
1554
1573
  @property st-global(--wds-search-border-radius-small);
@@ -1667,6 +1686,9 @@
1667
1686
  @property st-global(--wds-selector-button-text-fill-pressed-dark);
1668
1687
  @property st-global(--wds-selector-button-text-fill-pressed-standard);
1669
1688
  @property st-global(--wds-selector-button-text-fill-standard);
1689
+ @property st-global(--wds-selector-list-item-fill-active);
1690
+ @property st-global(--wds-selector-list-item-fill-focus);
1691
+ @property st-global(--wds-selector-list-item-fill-hover);
1670
1692
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1671
1693
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1672
1694
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1881,6 +1903,8 @@
1881
1903
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1882
1904
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1883
1905
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1906
+ @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1907
+ @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1884
1908
  @property st-global(--wds-skeleton-border-radius-circle);
1885
1909
  @property st-global(--wds-skeleton-border-radius-line);
1886
1910
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1992,14 +2016,23 @@
1992
2016
  @property st-global(--wds-table-list-item-controls-gap-medium);
1993
2017
  @property st-global(--wds-table-list-item-controls-padding-medium);
1994
2018
  @property st-global(--wds-table-list-item-drag-handle-color);
2019
+ @property st-global(--wds-table-list-item-drag-handle-color-hover);
1995
2020
  @property st-global(--wds-table-list-item-fill);
1996
2021
  @property st-global(--wds-table-list-item-fill-active);
1997
2022
  @property st-global(--wds-table-list-item-fill-highlight);
1998
2023
  @property st-global(--wds-table-list-item-fill-hover);
2024
+ @property st-global(--wds-table-list-item-fill-hover-draggable);
1999
2025
  @property st-global(--wds-table-list-item-gap);
2000
2026
  @property st-global(--wds-table-list-item-indentation-level-2);
2001
2027
  @property st-global(--wds-table-list-item-indentation-level-3);
2002
2028
  @property st-global(--wds-table-list-item-paddings);
2029
+ @property st-global(--wds-table-toolbar-button-gap);
2030
+ @property st-global(--wds-table-toolbar-divider-gap);
2031
+ @property st-global(--wds-table-toolbar-divider-gap-group-start);
2032
+ @property st-global(--wds-table-toolbar-icon-button-gap);
2033
+ @property st-global(--wds-table-toolbar-item-gap);
2034
+ @property st-global(--wds-table-toolbar-padding-block-end);
2035
+ @property st-global(--wds-table-toolbar-padding-block-start);
2003
2036
  @property st-global(--wds-table-toolbar-padding-horizontal);
2004
2037
  @property st-global(--wds-tabs-border-radius);
2005
2038
  @property st-global(--wds-tabs-container-padding-horizontal);
@@ -2393,6 +2426,13 @@
2393
2426
  --wds-announcement-modal-top-controls-padding-end: 8px;
2394
2427
  --wds-announcement-modal-top-controls-padding-top: 16px;
2395
2428
  --wds-avatar-color-7-fill: #ACAFC4;
2429
+ --wds-avatar-group-counter-background-blur: 0px;
2430
+ --wds-avatar-group-counter-border-fill: #e5e5e5;
2431
+ --wds-avatar-group-counter-border-width: 2px;
2432
+ --wds-avatar-group-counter-fill: #ffffff;
2433
+ --wds-avatar-group-counter-fill-gradient-1: rgba(19, 23, 32, 0);
2434
+ --wds-avatar-group-counter-fill-gradient-2: rgba(19, 23, 32, 0);
2435
+ --wds-avatar-group-counter-fill-hover: #ffffff;
2396
2436
  --wds-avatar-group-gap-condensed: -2px;
2397
2437
  --wds-avatar-group-gap-default: 4px;
2398
2438
  --wds-avatar-size-tiny: 18px;
@@ -3821,6 +3861,17 @@
3821
3861
  --wds-page-header-title-minimised-font-weight: 500;
3822
3862
  --wds-page-header-title-minimised-letter-spacing: 0px;
3823
3863
  --wds-page-header-title-minimised-line-height: 30px;
3864
+ --wds-page-section-divider-display: block;
3865
+ --wds-page-section-gap: 0px;
3866
+ --wds-page-section-padding-bottom: 8px;
3867
+ --wds-page-section-padding-bottom-with-divider: 0px;
3868
+ --wds-page-section-padding-top: 16px;
3869
+ --wds-page-section-subtitle-font-size: 16px;
3870
+ --wds-page-section-subtitle-line-height: 24px;
3871
+ --wds-page-section-title-font-size: 18px;
3872
+ --wds-page-section-title-font-weight: 700;
3873
+ --wds-page-section-title-letter-spacing: 0px;
3874
+ --wds-page-section-title-line-height: 24px;
3824
3875
  --wds-pagination-arrow-fill: #116dff;
3825
3876
  --wds-pagination-fill: #ffffff;
3826
3877
  --wds-pagination-fill-active: #116dff;
@@ -3875,6 +3926,7 @@
3875
3926
  --wds-scrollbar-fill: #cfd1dc;
3876
3927
  --wds-scrollbar-fill-active: #868aa5;
3877
3928
  --wds-scrollbar-fill-hover: #868aa5;
3929
+ --wds-scrollbar-width: 6px;
3878
3930
  --wds-search-border-radius-large: 4px;
3879
3931
  --wds-search-border-radius-medium: 4px;
3880
3932
  --wds-search-border-radius-small: 4px;
@@ -3993,6 +4045,9 @@
3993
4045
  --wds-selector-button-text-fill-pressed-dark: #116dff;
3994
4046
  --wds-selector-button-text-fill-pressed-standard: #116dff;
3995
4047
  --wds-selector-button-text-fill-standard: #116dff;
4048
+ --wds-selector-list-item-fill-active: #dce9ff;
4049
+ --wds-selector-list-item-fill-focus: #ebf2ff;
4050
+ --wds-selector-list-item-fill-hover: #f7f8f8;
3996
4051
  --wds-selector-list-item-padding-horizontal-medium: 24px;
3997
4052
  --wds-selector-list-item-padding-horizontal-small: 16px;
3998
4053
  --wds-selector-list-item-padding-vertical-medium: 8px;
@@ -4207,6 +4262,8 @@
4207
4262
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
4208
4263
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
4209
4264
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
4265
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(19, 23, 32, 0.6600);
4266
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
4210
4267
  --wds-skeleton-border-radius-circle: 1000px;
4211
4268
  --wds-skeleton-border-radius-line: 4px;
4212
4269
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -4318,14 +4375,23 @@
4318
4375
  --wds-table-list-item-controls-gap-medium: 8px;
4319
4376
  --wds-table-list-item-controls-padding-medium: 12px;
4320
4377
  --wds-table-list-item-drag-handle-color: #116dff;
4378
+ --wds-table-list-item-drag-handle-color-hover: #116dff;
4321
4379
  --wds-table-list-item-fill: #ffffff;
4322
4380
  --wds-table-list-item-fill-active: #dce9ff;
4323
4381
  --wds-table-list-item-fill-highlight: #f8faff;
4324
4382
  --wds-table-list-item-fill-hover: #f7f8f8;
4383
+ --wds-table-list-item-fill-hover-draggable: #ebf2ff;
4325
4384
  --wds-table-list-item-gap: 24px;
4326
4385
  --wds-table-list-item-indentation-level-2: 12px;
4327
4386
  --wds-table-list-item-indentation-level-3: 28px;
4328
4387
  --wds-table-list-item-paddings: 0px;
4388
+ --wds-table-toolbar-button-gap: 6px;
4389
+ --wds-table-toolbar-divider-gap: 12px;
4390
+ --wds-table-toolbar-divider-gap-group-start: 24px;
4391
+ --wds-table-toolbar-icon-button-gap: 6px;
4392
+ --wds-table-toolbar-item-gap: 12px;
4393
+ --wds-table-toolbar-padding-block-end: 15px;
4394
+ --wds-table-toolbar-padding-block-start: 15px;
4329
4395
  --wds-table-toolbar-padding-horizontal: 24px;
4330
4396
  --wds-tabs-border-radius: 0px;
4331
4397
  --wds-tabs-container-padding-horizontal: 0px;
package/studio/component.st.css CHANGED
@@ -67,6 +67,13 @@
67
67
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
68
68
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
69
69
  @property st-global(--wds-avatar-color-7-fill);
70
+ @property st-global(--wds-avatar-group-counter-background-blur);
71
+ @property st-global(--wds-avatar-group-counter-border-fill);
72
+ @property st-global(--wds-avatar-group-counter-border-width);
73
+ @property st-global(--wds-avatar-group-counter-fill);
74
+ @property st-global(--wds-avatar-group-counter-fill-gradient-1);
75
+ @property st-global(--wds-avatar-group-counter-fill-gradient-2);
76
+ @property st-global(--wds-avatar-group-counter-fill-hover);
70
77
  @property st-global(--wds-avatar-group-gap-condensed);
71
78
  @property st-global(--wds-avatar-group-gap-default);
72
79
  @property st-global(--wds-avatar-size-tiny);
@@ -906,6 +913,17 @@
906
913
  @property st-global(--wds-page-header-title-minimised-font-weight);
907
914
  @property st-global(--wds-page-header-title-minimised-letter-spacing);
908
915
  @property st-global(--wds-page-header-title-minimised-line-height);
916
+ @property st-global(--wds-page-section-divider-display);
917
+ @property st-global(--wds-page-section-gap);
918
+ @property st-global(--wds-page-section-padding-bottom);
919
+ @property st-global(--wds-page-section-padding-bottom-with-divider);
920
+ @property st-global(--wds-page-section-padding-top);
921
+ @property st-global(--wds-page-section-subtitle-font-size);
922
+ @property st-global(--wds-page-section-subtitle-line-height);
923
+ @property st-global(--wds-page-section-title-font-size);
924
+ @property st-global(--wds-page-section-title-font-weight);
925
+ @property st-global(--wds-page-section-title-letter-spacing);
926
+ @property st-global(--wds-page-section-title-line-height);
909
927
  @property st-global(--wds-pagination-arrow-fill);
910
928
  @property st-global(--wds-pagination-fill);
911
929
  @property st-global(--wds-pagination-fill-active);
@@ -960,6 +978,7 @@
960
978
  @property st-global(--wds-scrollbar-fill);
961
979
  @property st-global(--wds-scrollbar-fill-active);
962
980
  @property st-global(--wds-scrollbar-fill-hover);
981
+ @property st-global(--wds-scrollbar-width);
963
982
  @property st-global(--wds-search-border-radius-large);
964
983
  @property st-global(--wds-search-border-radius-medium);
965
984
  @property st-global(--wds-search-border-radius-small);
@@ -1078,6 +1097,9 @@
1078
1097
  @property st-global(--wds-selector-button-text-fill-pressed-dark);
1079
1098
  @property st-global(--wds-selector-button-text-fill-pressed-standard);
1080
1099
  @property st-global(--wds-selector-button-text-fill-standard);
1100
+ @property st-global(--wds-selector-list-item-fill-active);
1101
+ @property st-global(--wds-selector-list-item-fill-focus);
1102
+ @property st-global(--wds-selector-list-item-fill-hover);
1081
1103
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1082
1104
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1083
1105
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1183,6 +1205,8 @@
1183
1205
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1184
1206
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1185
1207
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1208
+ @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1209
+ @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1186
1210
  @property st-global(--wds-skeleton-border-radius-circle);
1187
1211
  @property st-global(--wds-skeleton-border-radius-line);
1188
1212
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1250,14 +1274,23 @@
1250
1274
  @property st-global(--wds-table-list-item-controls-gap-medium);
1251
1275
  @property st-global(--wds-table-list-item-controls-padding-medium);
1252
1276
  @property st-global(--wds-table-list-item-drag-handle-color);
1277
+ @property st-global(--wds-table-list-item-drag-handle-color-hover);
1253
1278
  @property st-global(--wds-table-list-item-fill);
1254
1279
  @property st-global(--wds-table-list-item-fill-active);
1255
1280
  @property st-global(--wds-table-list-item-fill-highlight);
1256
1281
  @property st-global(--wds-table-list-item-fill-hover);
1282
+ @property st-global(--wds-table-list-item-fill-hover-draggable);
1257
1283
  @property st-global(--wds-table-list-item-gap);
1258
1284
  @property st-global(--wds-table-list-item-indentation-level-2);
1259
1285
  @property st-global(--wds-table-list-item-indentation-level-3);
1260
1286
  @property st-global(--wds-table-list-item-paddings);
1287
+ @property st-global(--wds-table-toolbar-button-gap);
1288
+ @property st-global(--wds-table-toolbar-divider-gap);
1289
+ @property st-global(--wds-table-toolbar-divider-gap-group-start);
1290
+ @property st-global(--wds-table-toolbar-icon-button-gap);
1291
+ @property st-global(--wds-table-toolbar-item-gap);
1292
+ @property st-global(--wds-table-toolbar-padding-block-end);
1293
+ @property st-global(--wds-table-toolbar-padding-block-start);
1261
1294
  @property st-global(--wds-table-toolbar-padding-horizontal);
1262
1295
  @property st-global(--wds-tabs-border-radius);
1263
1296
  @property st-global(--wds-tabs-container-padding-horizontal);
@@ -1649,6 +1682,13 @@
1649
1682
  --wds-announcement-modal-top-controls-padding-end: 8px;
1650
1683
  --wds-announcement-modal-top-controls-padding-top: 16px;
1651
1684
  --wds-avatar-color-7-fill: #ACAFC4;
1685
+ --wds-avatar-group-counter-background-blur: 0px;
1686
+ --wds-avatar-group-counter-border-fill: #e5e5e5;
1687
+ --wds-avatar-group-counter-border-width: 2px;
1688
+ --wds-avatar-group-counter-fill: #ffffff;
1689
+ --wds-avatar-group-counter-fill-gradient-1: rgba(19, 23, 32, 0);
1690
+ --wds-avatar-group-counter-fill-gradient-2: rgba(19, 23, 32, 0);
1691
+ --wds-avatar-group-counter-fill-hover: #ffffff;
1652
1692
  --wds-avatar-group-gap-condensed: -2px;
1653
1693
  --wds-avatar-group-gap-default: 4px;
1654
1694
  --wds-avatar-size-tiny: 18px;
@@ -2488,6 +2528,17 @@
2488
2528
  --wds-page-header-title-minimised-font-weight: 500;
2489
2529
  --wds-page-header-title-minimised-letter-spacing: 0px;
2490
2530
  --wds-page-header-title-minimised-line-height: 30px;
2531
+ --wds-page-section-divider-display: block;
2532
+ --wds-page-section-gap: 0px;
2533
+ --wds-page-section-padding-bottom: 8px;
2534
+ --wds-page-section-padding-bottom-with-divider: 0px;
2535
+ --wds-page-section-padding-top: 16px;
2536
+ --wds-page-section-subtitle-font-size: 16px;
2537
+ --wds-page-section-subtitle-line-height: 24px;
2538
+ --wds-page-section-title-font-size: 18px;
2539
+ --wds-page-section-title-font-weight: 700;
2540
+ --wds-page-section-title-letter-spacing: 0px;
2541
+ --wds-page-section-title-line-height: 24px;
2491
2542
  --wds-pagination-arrow-fill: #116dff;
2492
2543
  --wds-pagination-fill: #ffffff;
2493
2544
  --wds-pagination-fill-active: #116dff;
@@ -2542,6 +2593,7 @@
2542
2593
  --wds-scrollbar-fill: #cfd1dc;
2543
2594
  --wds-scrollbar-fill-active: #868aa5;
2544
2595
  --wds-scrollbar-fill-hover: #868aa5;
2596
+ --wds-scrollbar-width: 6px;
2545
2597
  --wds-search-border-radius-large: 4px;
2546
2598
  --wds-search-border-radius-medium: 4px;
2547
2599
  --wds-search-border-radius-small: 4px;
@@ -2660,6 +2712,9 @@
2660
2712
  --wds-selector-button-text-fill-pressed-dark: #116dff;
2661
2713
  --wds-selector-button-text-fill-pressed-standard: #116dff;
2662
2714
  --wds-selector-button-text-fill-standard: #116dff;
2715
+ --wds-selector-list-item-fill-active: #dce9ff;
2716
+ --wds-selector-list-item-fill-focus: #ebf2ff;
2717
+ --wds-selector-list-item-fill-hover: #f7f8f8;
2663
2718
  --wds-selector-list-item-padding-horizontal-medium: 24px;
2664
2719
  --wds-selector-list-item-padding-horizontal-small: 16px;
2665
2720
  --wds-selector-list-item-padding-vertical-medium: 8px;
@@ -2765,6 +2820,8 @@
2765
2820
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
2766
2821
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
2767
2822
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
2823
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(19, 23, 32, 0.6600);
2824
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
2768
2825
  --wds-skeleton-border-radius-circle: 1000px;
2769
2826
  --wds-skeleton-border-radius-line: 4px;
2770
2827
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -2832,14 +2889,23 @@
2832
2889
  --wds-table-list-item-controls-gap-medium: 8px;
2833
2890
  --wds-table-list-item-controls-padding-medium: 12px;
2834
2891
  --wds-table-list-item-drag-handle-color: #116dff;
2892
+ --wds-table-list-item-drag-handle-color-hover: #116dff;
2835
2893
  --wds-table-list-item-fill: #ffffff;
2836
2894
  --wds-table-list-item-fill-active: #dce9ff;
2837
2895
  --wds-table-list-item-fill-highlight: #f8faff;
2838
2896
  --wds-table-list-item-fill-hover: #f7f8f8;
2897
+ --wds-table-list-item-fill-hover-draggable: #ebf2ff;
2839
2898
  --wds-table-list-item-gap: 24px;
2840
2899
  --wds-table-list-item-indentation-level-2: 12px;
2841
2900
  --wds-table-list-item-indentation-level-3: 28px;
2842
2901
  --wds-table-list-item-paddings: 0px;
2902
+ --wds-table-toolbar-button-gap: 6px;
2903
+ --wds-table-toolbar-divider-gap: 12px;
2904
+ --wds-table-toolbar-divider-gap-group-start: 24px;
2905
+ --wds-table-toolbar-icon-button-gap: 6px;
2906
+ --wds-table-toolbar-item-gap: 12px;
2907
+ --wds-table-toolbar-padding-block-end: 15px;
2908
+ --wds-table-toolbar-padding-block-start: 15px;
2843
2909
  --wds-table-toolbar-padding-horizontal: 24px;
2844
2910
  --wds-tabs-border-radius: 0px;
2845
2911
  --wds-tabs-container-padding-horizontal: 0px;
package/wixel/all.css CHANGED
@@ -314,6 +314,13 @@
314
314
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
315
315
  --wds-thumbnail-border-width-default: 0px;
316
316
  --wds-tabs-selection-height: 1px;
317
+ --wds-table-toolbar-padding-block-end: 15px;
318
+ --wds-table-toolbar-padding-block-start: 15px;
319
+ --wds-table-toolbar-divider-gap-group-start: 24px;
320
+ --wds-table-toolbar-divider-gap: 12px;
321
+ --wds-table-toolbar-icon-button-gap: 6px;
322
+ --wds-table-toolbar-button-gap: 6px;
323
+ --wds-table-toolbar-item-gap: 12px;
317
324
  --wds-status-toast-width: 600px;
318
325
  --wds-statistics-widget-trend-space-top: 5px;
319
326
  --wds-statistics-widget-description-info-gap: 6px;
@@ -324,6 +331,8 @@
324
331
  --wds-slider-slider-knob-size: 6px;
325
332
  --wds-slider-slider-knob-border-width-hover: 12px;
326
333
  --wds-slider-slider-knob-border-width: 5px;
334
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
335
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(0, 6, 36, 0.6600);
327
336
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
328
337
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
329
338
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
@@ -343,7 +352,9 @@
343
352
  --wds-side-panel-floating-max-height: 1980px;
344
353
  --wds-side-panel-control-layout-divider-border-width: false;
345
354
  --wds-section-helper-prefix-offset-margin: 4px;
355
+ --wds-scrollbar-width: 6px;
346
356
  --wds-radio-dot-size: 6px;
357
+ --wds-page-section-divider-display: block;
347
358
  --wds-page-header-title-minimised-line-height: 30px;
348
359
  --wds-page-header-breadcrumbs-offset-small: 0px;
349
360
  --wds-page-header-breadcrumbs-offset-medium: 0px;
@@ -411,6 +422,7 @@
411
422
  --wds-breadcrumbs-height-medium: 30px;
412
423
  --wds-breadcrumbs-height-large: 36px;
413
424
  --wds-avatar-group-gap-condensed: -2px;
425
+ --wds-avatar-group-counter-background-blur: 0px;
414
426
  --wds-avatar-size-tiny: 18px;
415
427
  --wds-announcement-modal-help-button-fill: transparent;
416
428
  --wds-announcement-modal-footnote-content-alignment: center;
@@ -982,6 +994,7 @@
982
994
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
983
995
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
984
996
  --wds-table-list-item-gap: var(--wds-space-600);
997
+ --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
985
998
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
986
999
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
987
1000
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
@@ -1101,6 +1114,7 @@
1101
1114
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
1102
1115
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
1103
1116
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
1117
+ --wds-selector-list-item-fill-focus: var(--wds-color-blue-500);
1104
1118
  --wds-selector-button-size-small: var(--wds-space-700);
1105
1119
  --wds-selector-button-size-medium: var(--wds-space-800);
1106
1120
  --wds-selector-button-size-large: var(--wds-space-900);
@@ -1203,6 +1217,10 @@
1203
1217
  --wds-pagination-padding-vertical: var(--wds-space-50);
1204
1218
  --wds-pagination-padding-horizontal: var(--wds-space-50);
1205
1219
  --wds-pagination-gap: var(--wds-space-100);
1220
+ --wds-page-section-padding-top: var(--wds-space-400);
1221
+ --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
1222
+ --wds-page-section-padding-bottom: var(--wds-space-200);
1223
+ --wds-page-section-gap: var(--wds-space-0);
1206
1224
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1207
1225
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1208
1226
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1568,6 +1586,8 @@
1568
1586
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1569
1587
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1570
1588
  --wds-avatar-group-gap-default: var(--wds-space-100);
1589
+ --wds-avatar-group-counter-border-width: var(--wds-border-width-200);
1590
+ --wds-avatar-group-counter-border-fill: var(--wds-color-fill-dark-secondary-disabled);
1571
1591
  --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1572
1592
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-400);
1573
1593
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
@@ -1740,6 +1760,7 @@
1740
1760
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1741
1761
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1742
1762
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1763
+ --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1743
1764
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1744
1765
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1745
1766
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
@@ -1760,6 +1781,8 @@
1760
1781
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1761
1782
  --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
1762
1783
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1784
+ --wds-selector-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1785
+ --wds-selector-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1763
1786
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1764
1787
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1765
1788
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
@@ -1816,6 +1839,10 @@
1816
1839
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1817
1840
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1818
1841
  --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1842
+ --wds-page-section-title-letter-spacing: var(--wds-font-letter-spacing-heading-4);
1843
+ --wds-page-section-title-font-weight: var(--wds-font-weight-heading-4);
1844
+ --wds-page-section-title-font-size: var(--wds-font-size-heading-4);
1845
+ --wds-page-section-subtitle-font-size: var(--wds-font-size-body-medium);
1819
1846
  --wds-page-header-title-minimised-font-size: var(--wds-font-size-body-small);
1820
1847
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1821
1848
  --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
@@ -2160,6 +2187,10 @@
2160
2187
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2161
2188
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2162
2189
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2190
+ --wds-avatar-group-counter-fill-hover: var(--wds-color-fill-light-primary);
2191
+ --wds-avatar-group-counter-fill-gradient-2: var(--wds-color-fill-transparent-tertiary);
2192
+ --wds-avatar-group-counter-fill-gradient-1: var(--wds-color-fill-transparent-tertiary);
2193
+ --wds-avatar-group-counter-fill: var(--wds-color-fill-light-primary);
2163
2194
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2164
2195
  --wds-announcement-modal-title-font-weight: var(--wds-font-weight-heading-1);
2165
2196
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
@@ -2210,6 +2241,8 @@
2210
2241
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
2211
2242
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2212
2243
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2244
+ --wds-page-section-title-line-height: var(--wds-font-line-height-heading-4);
2245
+ --wds-page-section-subtitle-line-height: var(--wds-font-line-height-body-medium);
2213
2246
  --wds-page-header-title-line-height: var(--wds-font-line-height-heading-1);
2214
2247
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2215
2248
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-4);
package/wixel/all.scss CHANGED
@@ -12,6 +12,13 @@
12
12
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
13
13
  --wds-thumbnail-border-width-default: 0px;
14
14
  --wds-tabs-selection-height: 1px;
15
+ --wds-table-toolbar-padding-block-start: 15px;
16
+ --wds-table-toolbar-padding-block-end: 15px;
17
+ --wds-table-toolbar-item-gap: 12px;
18
+ --wds-table-toolbar-icon-button-gap: 6px;
19
+ --wds-table-toolbar-divider-gap-group-start: 24px;
20
+ --wds-table-toolbar-divider-gap: 12px;
21
+ --wds-table-toolbar-button-gap: 6px;
15
22
  --wds-status-toast-width: 600px;
16
23
  --wds-statistics-widget-trend-space-top: 5px;
17
24
  --wds-statistics-widget-description-info-gap: 6px;
@@ -52,6 +59,8 @@
52
59
  --wds-slider-slider-knob-size: 6px;
53
60
  --wds-slider-slider-knob-border-width-hover: 12px;
54
61
  --wds-slider-slider-knob-border-width: 5px;
62
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
63
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(0, 6, 36, 0.6600);
55
64
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
56
65
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
57
66
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
@@ -99,7 +108,9 @@
99
108
  --wds-shadow-200: 0px;
100
109
  --wds-shadow-100: 0px;
101
110
  --wds-section-helper-prefix-offset-margin: 4px;
111
+ --wds-scrollbar-width: 6px;
102
112
  --wds-radio-dot-size: 6px;
113
+ --wds-page-section-divider-display: block;
103
114
  --wds-page-header-title-minimised-line-height: 30px;
104
115
  --wds-page-header-breadcrumbs-offset-small: 0px;
105
116
  --wds-page-header-breadcrumbs-offset-medium: 0px;
@@ -412,6 +423,7 @@
412
423
  --wds-background-blur-0: 0px;
413
424
  --wds-avatar-size-tiny: 18px;
414
425
  --wds-avatar-group-gap-condensed: -2px;
426
+ --wds-avatar-group-counter-background-blur: 0px;
415
427
  --wds-announcement-modal-help-button-fill: transparent;
416
428
  --wds-announcement-modal-footnote-content-alignment: center;
417
429
  --wds-announcement-modal-close-button-fill: transparent;
@@ -588,6 +600,7 @@
588
600
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
589
601
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
590
602
  --wds-table-list-item-gap: var(--wds-space-600);
603
+ --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
591
604
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
592
605
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
593
606
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
@@ -781,6 +794,7 @@
781
794
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
782
795
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
783
796
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
797
+ --wds-selector-list-item-fill-focus: var(--wds-color-blue-500);
784
798
  --wds-selector-button-size-small: var(--wds-space-700);
785
799
  --wds-selector-button-size-medium: var(--wds-space-800);
786
800
  --wds-selector-button-size-large: var(--wds-space-900);
@@ -883,6 +897,10 @@
883
897
  --wds-pagination-padding-vertical: var(--wds-space-50);
884
898
  --wds-pagination-padding-horizontal: var(--wds-space-50);
885
899
  --wds-pagination-gap: var(--wds-space-100);
900
+ --wds-page-section-padding-top: var(--wds-space-400);
901
+ --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
902
+ --wds-page-section-padding-bottom: var(--wds-space-200);
903
+ --wds-page-section-gap: var(--wds-space-0);
886
904
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
887
905
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
888
906
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1568,6 +1586,8 @@
1568
1586
  --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1569
1587
  --wds-background-blur-modal: var(--wds-background-blur-0);
1570
1588
  --wds-avatar-group-gap-default: var(--wds-space-100);
1589
+ --wds-avatar-group-counter-border-width: var(--wds-border-width-200);
1590
+ --wds-avatar-group-counter-border-fill: var(--wds-color-fill-dark-secondary-disabled);
1571
1591
  --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1572
1592
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-400);
1573
1593
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
@@ -1725,6 +1745,7 @@
1725
1745
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1726
1746
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1727
1747
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1748
+ --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1728
1749
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1729
1750
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1730
1751
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
@@ -1749,6 +1770,8 @@
1749
1770
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1750
1771
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1751
1772
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1773
+ --wds-selector-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1774
+ --wds-selector-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1752
1775
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1753
1776
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-text-primary);
1754
1777
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
@@ -1805,6 +1828,10 @@
1805
1828
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1806
1829
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1807
1830
  --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1831
+ --wds-page-section-title-letter-spacing: var(--wds-font-letter-spacing-heading-4);
1832
+ --wds-page-section-title-font-weight: var(--wds-font-weight-heading-4);
1833
+ --wds-page-section-title-font-size: var(--wds-font-size-heading-4);
1834
+ --wds-page-section-subtitle-font-size: var(--wds-font-size-body-medium);
1808
1835
  --wds-page-header-title-minimised-font-size: var(--wds-font-size-body-small);
1809
1836
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1810
1837
  --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
@@ -2161,6 +2188,10 @@
2161
2188
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2162
2189
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2163
2190
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2191
+ --wds-avatar-group-counter-fill-hover: var(--wds-color-fill-light-primary);
2192
+ --wds-avatar-group-counter-fill-gradient-2: var(--wds-color-fill-transparent-tertiary);
2193
+ --wds-avatar-group-counter-fill-gradient-1: var(--wds-color-fill-transparent-tertiary);
2194
+ --wds-avatar-group-counter-fill: var(--wds-color-fill-light-primary);
2164
2195
  --wds-announcement-modal-title-font-weight: var(--wds-font-weight-heading-1);
2165
2196
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2166
2197
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
@@ -2210,6 +2241,8 @@
2210
2241
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
2211
2242
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2212
2243
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2244
+ --wds-page-section-title-line-height: var(--wds-font-line-height-heading-4);
2245
+ --wds-page-section-subtitle-line-height: var(--wds-font-line-height-body-medium);
2213
2246
  --wds-page-header-title-line-height: var(--wds-font-line-height-heading-1);
2214
2247
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2215
2248
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-4);