@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/wixel/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);
@@ -1462,6 +1469,17 @@
1462
1469
  @property st-global(--wds-page-header-title-minimised-font-weight);
1463
1470
  @property st-global(--wds-page-header-title-minimised-letter-spacing);
1464
1471
  @property st-global(--wds-page-header-title-minimised-line-height);
1472
+ @property st-global(--wds-page-section-divider-display);
1473
+ @property st-global(--wds-page-section-gap);
1474
+ @property st-global(--wds-page-section-padding-bottom);
1475
+ @property st-global(--wds-page-section-padding-bottom-with-divider);
1476
+ @property st-global(--wds-page-section-padding-top);
1477
+ @property st-global(--wds-page-section-subtitle-font-size);
1478
+ @property st-global(--wds-page-section-subtitle-line-height);
1479
+ @property st-global(--wds-page-section-title-font-size);
1480
+ @property st-global(--wds-page-section-title-font-weight);
1481
+ @property st-global(--wds-page-section-title-letter-spacing);
1482
+ @property st-global(--wds-page-section-title-line-height);
1465
1483
  @property st-global(--wds-pagination-arrow-fill);
1466
1484
  @property st-global(--wds-pagination-fill);
1467
1485
  @property st-global(--wds-pagination-fill-active);
@@ -1516,6 +1534,7 @@
1516
1534
  @property st-global(--wds-scrollbar-fill);
1517
1535
  @property st-global(--wds-scrollbar-fill-active);
1518
1536
  @property st-global(--wds-scrollbar-fill-hover);
1537
+ @property st-global(--wds-scrollbar-width);
1519
1538
  @property st-global(--wds-search-border-radius-large);
1520
1539
  @property st-global(--wds-search-border-radius-medium);
1521
1540
  @property st-global(--wds-search-border-radius-small);
@@ -1626,6 +1645,9 @@
1626
1645
  @property st-global(--wds-selector-button-text-fill-pressed-dark);
1627
1646
  @property st-global(--wds-selector-button-text-fill-pressed-standard);
1628
1647
  @property st-global(--wds-selector-button-text-fill-standard);
1648
+ @property st-global(--wds-selector-list-item-fill-active);
1649
+ @property st-global(--wds-selector-list-item-fill-focus);
1650
+ @property st-global(--wds-selector-list-item-fill-hover);
1629
1651
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1630
1652
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1631
1653
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1824,6 +1846,8 @@
1824
1846
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1825
1847
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1826
1848
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1849
+ @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1850
+ @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1827
1851
  @property st-global(--wds-skeleton-border-radius-circle);
1828
1852
  @property st-global(--wds-skeleton-border-radius-line);
1829
1853
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1934,14 +1958,23 @@
1934
1958
  @property st-global(--wds-table-list-item-controls-gap-medium);
1935
1959
  @property st-global(--wds-table-list-item-controls-padding-medium);
1936
1960
  @property st-global(--wds-table-list-item-drag-handle-color);
1961
+ @property st-global(--wds-table-list-item-drag-handle-color-hover);
1937
1962
  @property st-global(--wds-table-list-item-fill);
1938
1963
  @property st-global(--wds-table-list-item-fill-active);
1939
1964
  @property st-global(--wds-table-list-item-fill-highlight);
1940
1965
  @property st-global(--wds-table-list-item-fill-hover);
1966
+ @property st-global(--wds-table-list-item-fill-hover-draggable);
1941
1967
  @property st-global(--wds-table-list-item-gap);
1942
1968
  @property st-global(--wds-table-list-item-indentation-level-2);
1943
1969
  @property st-global(--wds-table-list-item-indentation-level-3);
1944
1970
  @property st-global(--wds-table-list-item-paddings);
1971
+ @property st-global(--wds-table-toolbar-button-gap);
1972
+ @property st-global(--wds-table-toolbar-divider-gap);
1973
+ @property st-global(--wds-table-toolbar-divider-gap-group-start);
1974
+ @property st-global(--wds-table-toolbar-icon-button-gap);
1975
+ @property st-global(--wds-table-toolbar-item-gap);
1976
+ @property st-global(--wds-table-toolbar-padding-block-end);
1977
+ @property st-global(--wds-table-toolbar-padding-block-start);
1945
1978
  @property st-global(--wds-table-toolbar-padding-horizontal);
1946
1979
  @property st-global(--wds-tabs-border-radius);
1947
1980
  @property st-global(--wds-tabs-container-padding-horizontal);
@@ -2329,6 +2362,13 @@
2329
2362
  --wds-announcement-modal-top-controls-padding-end: 8px;
2330
2363
  --wds-announcement-modal-top-controls-padding-top: 16px;
2331
2364
  --wds-avatar-color-7-fill: #acafc4;
2365
+ --wds-avatar-group-counter-background-blur: 0px;
2366
+ --wds-avatar-group-counter-border-fill: #e5e5e5;
2367
+ --wds-avatar-group-counter-border-width: 2px;
2368
+ --wds-avatar-group-counter-fill: #ffffff;
2369
+ --wds-avatar-group-counter-fill-gradient-1: rgba(38, 37, 36, 0.0000);
2370
+ --wds-avatar-group-counter-fill-gradient-2: rgba(38, 37, 36, 0.0000);
2371
+ --wds-avatar-group-counter-fill-hover: #ffffff;
2332
2372
  --wds-avatar-group-gap-condensed: -2px;
2333
2373
  --wds-avatar-group-gap-default: 4px;
2334
2374
  --wds-avatar-size-tiny: 18px;
@@ -3724,6 +3764,17 @@
3724
3764
  --wds-page-header-title-minimised-font-weight: 500;
3725
3765
  --wds-page-header-title-minimised-letter-spacing: 0px;
3726
3766
  --wds-page-header-title-minimised-line-height: 30px;
3767
+ --wds-page-section-divider-display: block;
3768
+ --wds-page-section-gap: 0px;
3769
+ --wds-page-section-padding-bottom: 8px;
3770
+ --wds-page-section-padding-bottom-with-divider: 0px;
3771
+ --wds-page-section-padding-top: 16px;
3772
+ --wds-page-section-subtitle-font-size: 16px;
3773
+ --wds-page-section-subtitle-line-height: 24px;
3774
+ --wds-page-section-title-font-size: 16px;
3775
+ --wds-page-section-title-font-weight: 700;
3776
+ --wds-page-section-title-letter-spacing: 0px;
3777
+ --wds-page-section-title-line-height: 24px;
3727
3778
  --wds-pagination-arrow-fill: #4a57ff;
3728
3779
  --wds-pagination-fill: #ffffff;
3729
3780
  --wds-pagination-fill-active: #4a57ff;
@@ -3778,6 +3829,7 @@
3778
3829
  --wds-scrollbar-fill: #dce2ff;
3779
3830
  --wds-scrollbar-fill-active: #7489ff;
3780
3831
  --wds-scrollbar-fill-hover: #bac4ff;
3832
+ --wds-scrollbar-width: 6px;
3781
3833
  --wds-search-border-radius-large: 8px;
3782
3834
  --wds-search-border-radius-medium: 8px;
3783
3835
  --wds-search-border-radius-small: 8px;
@@ -3888,6 +3940,9 @@
3888
3940
  --wds-selector-button-text-fill-pressed-dark: #4a57ff;
3889
3941
  --wds-selector-button-text-fill-pressed-standard: #4a57ff;
3890
3942
  --wds-selector-button-text-fill-standard: #4a57ff;
3943
+ --wds-selector-list-item-fill-active: #eef0ff;
3944
+ --wds-selector-list-item-fill-focus: #eef0ff;
3945
+ --wds-selector-list-item-fill-hover: #f4f6ff;
3891
3946
  --wds-selector-list-item-padding-horizontal-medium: 24px;
3892
3947
  --wds-selector-list-item-padding-horizontal-small: 16px;
3893
3948
  --wds-selector-list-item-padding-vertical-medium: 8px;
@@ -4086,6 +4141,8 @@
4086
4141
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
4087
4142
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
4088
4143
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
4144
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(0, 6, 36, 0.6600);
4145
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
4089
4146
  --wds-skeleton-border-radius-circle: 1000px;
4090
4147
  --wds-skeleton-border-radius-line: 4px;
4091
4148
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -4196,14 +4253,23 @@
4196
4253
  --wds-table-list-item-controls-gap-medium: 8px;
4197
4254
  --wds-table-list-item-controls-padding-medium: 12px;
4198
4255
  --wds-table-list-item-drag-handle-color: #4a57ff;
4256
+ --wds-table-list-item-drag-handle-color-hover: #4a57ff;
4199
4257
  --wds-table-list-item-fill: #ffffff;
4200
4258
  --wds-table-list-item-fill-active: #eef0ff;
4201
4259
  --wds-table-list-item-fill-highlight: #f4f6ff;
4202
4260
  --wds-table-list-item-fill-hover: #f4f6ff;
4261
+ --wds-table-list-item-fill-hover-draggable: #eef0ff;
4203
4262
  --wds-table-list-item-gap: 24px;
4204
4263
  --wds-table-list-item-indentation-level-2: 12px;
4205
4264
  --wds-table-list-item-indentation-level-3: 28px;
4206
4265
  --wds-table-list-item-paddings: 4px;
4266
+ --wds-table-toolbar-button-gap: 6px;
4267
+ --wds-table-toolbar-divider-gap: 12px;
4268
+ --wds-table-toolbar-divider-gap-group-start: 24px;
4269
+ --wds-table-toolbar-icon-button-gap: 6px;
4270
+ --wds-table-toolbar-item-gap: 12px;
4271
+ --wds-table-toolbar-padding-block-end: 15px;
4272
+ --wds-table-toolbar-padding-block-start: 15px;
4207
4273
  --wds-table-toolbar-padding-horizontal: 24px;
4208
4274
  --wds-tabs-border-radius: 0px;
4209
4275
  --wds-tabs-container-padding-horizontal: 0px;
package/wixel/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);
@@ -887,6 +894,17 @@
887
894
  @property st-global(--wds-page-header-title-minimised-font-weight);
888
895
  @property st-global(--wds-page-header-title-minimised-letter-spacing);
889
896
  @property st-global(--wds-page-header-title-minimised-line-height);
897
+ @property st-global(--wds-page-section-divider-display);
898
+ @property st-global(--wds-page-section-gap);
899
+ @property st-global(--wds-page-section-padding-bottom);
900
+ @property st-global(--wds-page-section-padding-bottom-with-divider);
901
+ @property st-global(--wds-page-section-padding-top);
902
+ @property st-global(--wds-page-section-subtitle-font-size);
903
+ @property st-global(--wds-page-section-subtitle-line-height);
904
+ @property st-global(--wds-page-section-title-font-size);
905
+ @property st-global(--wds-page-section-title-font-weight);
906
+ @property st-global(--wds-page-section-title-letter-spacing);
907
+ @property st-global(--wds-page-section-title-line-height);
890
908
  @property st-global(--wds-pagination-arrow-fill);
891
909
  @property st-global(--wds-pagination-fill);
892
910
  @property st-global(--wds-pagination-fill-active);
@@ -941,6 +959,7 @@
941
959
  @property st-global(--wds-scrollbar-fill);
942
960
  @property st-global(--wds-scrollbar-fill-active);
943
961
  @property st-global(--wds-scrollbar-fill-hover);
962
+ @property st-global(--wds-scrollbar-width);
944
963
  @property st-global(--wds-search-border-radius-large);
945
964
  @property st-global(--wds-search-border-radius-medium);
946
965
  @property st-global(--wds-search-border-radius-small);
@@ -1051,6 +1070,9 @@
1051
1070
  @property st-global(--wds-selector-button-text-fill-pressed-dark);
1052
1071
  @property st-global(--wds-selector-button-text-fill-pressed-standard);
1053
1072
  @property st-global(--wds-selector-button-text-fill-standard);
1073
+ @property st-global(--wds-selector-list-item-fill-active);
1074
+ @property st-global(--wds-selector-list-item-fill-focus);
1075
+ @property st-global(--wds-selector-list-item-fill-hover);
1054
1076
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1055
1077
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1056
1078
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1156,6 +1178,8 @@
1156
1178
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1157
1179
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1158
1180
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1181
+ @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1182
+ @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1159
1183
  @property st-global(--wds-skeleton-border-radius-circle);
1160
1184
  @property st-global(--wds-skeleton-border-radius-line);
1161
1185
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1222,14 +1246,23 @@
1222
1246
  @property st-global(--wds-table-list-item-controls-gap-medium);
1223
1247
  @property st-global(--wds-table-list-item-controls-padding-medium);
1224
1248
  @property st-global(--wds-table-list-item-drag-handle-color);
1249
+ @property st-global(--wds-table-list-item-drag-handle-color-hover);
1225
1250
  @property st-global(--wds-table-list-item-fill);
1226
1251
  @property st-global(--wds-table-list-item-fill-active);
1227
1252
  @property st-global(--wds-table-list-item-fill-highlight);
1228
1253
  @property st-global(--wds-table-list-item-fill-hover);
1254
+ @property st-global(--wds-table-list-item-fill-hover-draggable);
1229
1255
  @property st-global(--wds-table-list-item-gap);
1230
1256
  @property st-global(--wds-table-list-item-indentation-level-2);
1231
1257
  @property st-global(--wds-table-list-item-indentation-level-3);
1232
1258
  @property st-global(--wds-table-list-item-paddings);
1259
+ @property st-global(--wds-table-toolbar-button-gap);
1260
+ @property st-global(--wds-table-toolbar-divider-gap);
1261
+ @property st-global(--wds-table-toolbar-divider-gap-group-start);
1262
+ @property st-global(--wds-table-toolbar-icon-button-gap);
1263
+ @property st-global(--wds-table-toolbar-item-gap);
1264
+ @property st-global(--wds-table-toolbar-padding-block-end);
1265
+ @property st-global(--wds-table-toolbar-padding-block-start);
1233
1266
  @property st-global(--wds-table-toolbar-padding-horizontal);
1234
1267
  @property st-global(--wds-tabs-border-radius);
1235
1268
  @property st-global(--wds-tabs-container-padding-horizontal);
@@ -1615,6 +1648,13 @@
1615
1648
  --wds-announcement-modal-top-controls-padding-end: 8px;
1616
1649
  --wds-announcement-modal-top-controls-padding-top: 16px;
1617
1650
  --wds-avatar-color-7-fill: #acafc4;
1651
+ --wds-avatar-group-counter-background-blur: 0px;
1652
+ --wds-avatar-group-counter-border-fill: #e5e5e5;
1653
+ --wds-avatar-group-counter-border-width: 2px;
1654
+ --wds-avatar-group-counter-fill: #ffffff;
1655
+ --wds-avatar-group-counter-fill-gradient-1: rgba(38, 37, 36, 0.0000);
1656
+ --wds-avatar-group-counter-fill-gradient-2: rgba(38, 37, 36, 0.0000);
1657
+ --wds-avatar-group-counter-fill-hover: #ffffff;
1618
1658
  --wds-avatar-group-gap-condensed: -2px;
1619
1659
  --wds-avatar-group-gap-default: 4px;
1620
1660
  --wds-avatar-size-tiny: 18px;
@@ -2435,6 +2475,17 @@
2435
2475
  --wds-page-header-title-minimised-font-weight: 500;
2436
2476
  --wds-page-header-title-minimised-letter-spacing: 0px;
2437
2477
  --wds-page-header-title-minimised-line-height: 30px;
2478
+ --wds-page-section-divider-display: block;
2479
+ --wds-page-section-gap: 0px;
2480
+ --wds-page-section-padding-bottom: 8px;
2481
+ --wds-page-section-padding-bottom-with-divider: 0px;
2482
+ --wds-page-section-padding-top: 16px;
2483
+ --wds-page-section-subtitle-font-size: 16px;
2484
+ --wds-page-section-subtitle-line-height: 24px;
2485
+ --wds-page-section-title-font-size: 16px;
2486
+ --wds-page-section-title-font-weight: 700;
2487
+ --wds-page-section-title-letter-spacing: 0px;
2488
+ --wds-page-section-title-line-height: 24px;
2438
2489
  --wds-pagination-arrow-fill: #4a57ff;
2439
2490
  --wds-pagination-fill: #ffffff;
2440
2491
  --wds-pagination-fill-active: #4a57ff;
@@ -2489,6 +2540,7 @@
2489
2540
  --wds-scrollbar-fill: #dce2ff;
2490
2541
  --wds-scrollbar-fill-active: #7489ff;
2491
2542
  --wds-scrollbar-fill-hover: #bac4ff;
2543
+ --wds-scrollbar-width: 6px;
2492
2544
  --wds-search-border-radius-large: 8px;
2493
2545
  --wds-search-border-radius-medium: 8px;
2494
2546
  --wds-search-border-radius-small: 8px;
@@ -2599,6 +2651,9 @@
2599
2651
  --wds-selector-button-text-fill-pressed-dark: #4a57ff;
2600
2652
  --wds-selector-button-text-fill-pressed-standard: #4a57ff;
2601
2653
  --wds-selector-button-text-fill-standard: #4a57ff;
2654
+ --wds-selector-list-item-fill-active: #eef0ff;
2655
+ --wds-selector-list-item-fill-focus: #eef0ff;
2656
+ --wds-selector-list-item-fill-hover: #f4f6ff;
2602
2657
  --wds-selector-list-item-padding-horizontal-medium: 24px;
2603
2658
  --wds-selector-list-item-padding-horizontal-small: 16px;
2604
2659
  --wds-selector-list-item-padding-vertical-medium: 8px;
@@ -2704,6 +2759,8 @@
2704
2759
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
2705
2760
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
2706
2761
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
2762
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(0, 6, 36, 0.6600);
2763
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
2707
2764
  --wds-skeleton-border-radius-circle: 1000px;
2708
2765
  --wds-skeleton-border-radius-line: 4px;
2709
2766
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -2770,14 +2827,23 @@
2770
2827
  --wds-table-list-item-controls-gap-medium: 8px;
2771
2828
  --wds-table-list-item-controls-padding-medium: 12px;
2772
2829
  --wds-table-list-item-drag-handle-color: #4a57ff;
2830
+ --wds-table-list-item-drag-handle-color-hover: #4a57ff;
2773
2831
  --wds-table-list-item-fill: #ffffff;
2774
2832
  --wds-table-list-item-fill-active: #eef0ff;
2775
2833
  --wds-table-list-item-fill-highlight: #f4f6ff;
2776
2834
  --wds-table-list-item-fill-hover: #f4f6ff;
2835
+ --wds-table-list-item-fill-hover-draggable: #eef0ff;
2777
2836
  --wds-table-list-item-gap: 24px;
2778
2837
  --wds-table-list-item-indentation-level-2: 12px;
2779
2838
  --wds-table-list-item-indentation-level-3: 28px;
2780
2839
  --wds-table-list-item-paddings: 4px;
2840
+ --wds-table-toolbar-button-gap: 6px;
2841
+ --wds-table-toolbar-divider-gap: 12px;
2842
+ --wds-table-toolbar-divider-gap-group-start: 24px;
2843
+ --wds-table-toolbar-icon-button-gap: 6px;
2844
+ --wds-table-toolbar-item-gap: 12px;
2845
+ --wds-table-toolbar-padding-block-end: 15px;
2846
+ --wds-table-toolbar-padding-block-start: 15px;
2781
2847
  --wds-table-toolbar-padding-horizontal: 24px;
2782
2848
  --wds-tabs-border-radius: 0px;
2783
2849
  --wds-tabs-container-padding-horizontal: 0px;