@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/odeditor-dark/all.st.css CHANGED
@@ -1481,6 +1481,17 @@
1481
1481
  @property st-global(--wds-page-header-title-minimised-font-weight);
1482
1482
  @property st-global(--wds-page-header-title-minimised-letter-spacing);
1483
1483
  @property st-global(--wds-page-header-title-minimised-line-height);
1484
+ @property st-global(--wds-page-section-divider-display);
1485
+ @property st-global(--wds-page-section-gap);
1486
+ @property st-global(--wds-page-section-padding-bottom);
1487
+ @property st-global(--wds-page-section-padding-bottom-with-divider);
1488
+ @property st-global(--wds-page-section-padding-top);
1489
+ @property st-global(--wds-page-section-subtitle-font-size);
1490
+ @property st-global(--wds-page-section-subtitle-line-height);
1491
+ @property st-global(--wds-page-section-title-font-size);
1492
+ @property st-global(--wds-page-section-title-font-weight);
1493
+ @property st-global(--wds-page-section-title-letter-spacing);
1494
+ @property st-global(--wds-page-section-title-line-height);
1484
1495
  @property st-global(--wds-pagination-arrow-fill);
1485
1496
  @property st-global(--wds-pagination-fill);
1486
1497
  @property st-global(--wds-pagination-fill-active);
@@ -1535,6 +1546,7 @@
1535
1546
  @property st-global(--wds-scrollbar-fill);
1536
1547
  @property st-global(--wds-scrollbar-fill-active);
1537
1548
  @property st-global(--wds-scrollbar-fill-hover);
1549
+ @property st-global(--wds-scrollbar-width);
1538
1550
  @property st-global(--wds-search-border-radius-large);
1539
1551
  @property st-global(--wds-search-border-radius-medium);
1540
1552
  @property st-global(--wds-search-border-radius-small);
@@ -1653,6 +1665,9 @@
1653
1665
  @property st-global(--wds-selector-button-text-fill-pressed-dark);
1654
1666
  @property st-global(--wds-selector-button-text-fill-pressed-standard);
1655
1667
  @property st-global(--wds-selector-button-text-fill-standard);
1668
+ @property st-global(--wds-selector-list-item-fill-active);
1669
+ @property st-global(--wds-selector-list-item-fill-focus);
1670
+ @property st-global(--wds-selector-list-item-fill-hover);
1656
1671
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1657
1672
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1658
1673
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1869,6 +1884,8 @@
1869
1884
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1870
1885
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1871
1886
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1887
+ @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1888
+ @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1872
1889
  @property st-global(--wds-skeleton-border-radius-circle);
1873
1890
  @property st-global(--wds-skeleton-border-radius-line);
1874
1891
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1992,14 +2009,23 @@
1992
2009
  @property st-global(--wds-table-list-item-controls-gap-medium);
1993
2010
  @property st-global(--wds-table-list-item-controls-padding-medium);
1994
2011
  @property st-global(--wds-table-list-item-drag-handle-color);
2012
+ @property st-global(--wds-table-list-item-drag-handle-color-hover);
1995
2013
  @property st-global(--wds-table-list-item-fill);
1996
2014
  @property st-global(--wds-table-list-item-fill-active);
1997
2015
  @property st-global(--wds-table-list-item-fill-highlight);
1998
2016
  @property st-global(--wds-table-list-item-fill-hover);
2017
+ @property st-global(--wds-table-list-item-fill-hover-draggable);
1999
2018
  @property st-global(--wds-table-list-item-gap);
2000
2019
  @property st-global(--wds-table-list-item-indentation-level-2);
2001
2020
  @property st-global(--wds-table-list-item-indentation-level-3);
2002
2021
  @property st-global(--wds-table-list-item-paddings);
2022
+ @property st-global(--wds-table-toolbar-button-gap);
2023
+ @property st-global(--wds-table-toolbar-divider-gap);
2024
+ @property st-global(--wds-table-toolbar-divider-gap-group-start);
2025
+ @property st-global(--wds-table-toolbar-icon-button-gap);
2026
+ @property st-global(--wds-table-toolbar-item-gap);
2027
+ @property st-global(--wds-table-toolbar-padding-block-end);
2028
+ @property st-global(--wds-table-toolbar-padding-block-start);
2003
2029
  @property st-global(--wds-table-toolbar-padding-horizontal);
2004
2030
  @property st-global(--wds-tabs-border-radius);
2005
2031
  @property st-global(--wds-tabs-container-padding-horizontal);
@@ -3801,6 +3827,17 @@
3801
3827
  --wds-page-header-title-minimised-font-weight: 500;
3802
3828
  --wds-page-header-title-minimised-letter-spacing: 0px;
3803
3829
  --wds-page-header-title-minimised-line-height: 18px;
3830
+ --wds-page-section-divider-display: block;
3831
+ --wds-page-section-gap: 0px;
3832
+ --wds-page-section-padding-bottom: 8px;
3833
+ --wds-page-section-padding-bottom-with-divider: 0px;
3834
+ --wds-page-section-padding-top: 16px;
3835
+ --wds-page-section-subtitle-font-size: 16px;
3836
+ --wds-page-section-subtitle-line-height: 24px;
3837
+ --wds-page-section-title-font-size: 16px;
3838
+ --wds-page-section-title-font-weight: 600;
3839
+ --wds-page-section-title-letter-spacing: 0px;
3840
+ --wds-page-section-title-line-height: 18px;
3804
3841
  --wds-pagination-arrow-fill: #82B0FF;
3805
3842
  --wds-pagination-fill: #212122;
3806
3843
  --wds-pagination-fill-active: #82B0FF;
@@ -3855,6 +3892,7 @@
3855
3892
  --wds-scrollbar-fill: #666565;
3856
3893
  --wds-scrollbar-fill-active: #A09E9D;
3857
3894
  --wds-scrollbar-fill-hover: #A09E9D;
3895
+ --wds-scrollbar-width: 4px;
3858
3896
  --wds-search-border-radius-large: 1000px;
3859
3897
  --wds-search-border-radius-medium: 1000px;
3860
3898
  --wds-search-border-radius-small: 1000px;
@@ -3973,6 +4011,9 @@
3973
4011
  --wds-selector-button-text-fill-pressed-dark: #82B0FF;
3974
4012
  --wds-selector-button-text-fill-pressed-standard: #82B0FF;
3975
4013
  --wds-selector-button-text-fill-standard: #82B0FF;
4014
+ --wds-selector-list-item-fill-active: #454544;
4015
+ --wds-selector-list-item-fill-focus: #3A3A3B;
4016
+ --wds-selector-list-item-fill-hover: #3A3A3B;
3976
4017
  --wds-selector-list-item-padding-horizontal-medium: 24px;
3977
4018
  --wds-selector-list-item-padding-horizontal-small: 16px;
3978
4019
  --wds-selector-list-item-padding-vertical-medium: 8px;
@@ -4189,6 +4230,8 @@
4189
4230
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
4190
4231
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
4191
4232
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
4233
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(255, 255, 255, 0.6600);
4234
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
4192
4235
  --wds-skeleton-border-radius-circle: 1000px;
4193
4236
  --wds-skeleton-border-radius-line: 4px;
4194
4237
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -4312,14 +4355,23 @@
4312
4355
  --wds-table-list-item-controls-gap-medium: 8px;
4313
4356
  --wds-table-list-item-controls-padding-medium: 12px;
4314
4357
  --wds-table-list-item-drag-handle-color: #FFFFFF;
4358
+ --wds-table-list-item-drag-handle-color-hover: #FFFFFF;
4315
4359
  --wds-table-list-item-fill: rgba(255, 255, 255, 0);
4316
4360
  --wds-table-list-item-fill-active: #2D2D2E;
4317
4361
  --wds-table-list-item-fill-highlight: #2D2D2E;
4318
4362
  --wds-table-list-item-fill-hover: #3A3A3B;
4363
+ --wds-table-list-item-fill-hover-draggable: #3A3A3B;
4319
4364
  --wds-table-list-item-gap: 16px;
4320
4365
  --wds-table-list-item-indentation-level-2: 12px;
4321
4366
  --wds-table-list-item-indentation-level-3: 28px;
4322
4367
  --wds-table-list-item-paddings: 0px;
4368
+ --wds-table-toolbar-button-gap: 8px;
4369
+ --wds-table-toolbar-divider-gap: 16px;
4370
+ --wds-table-toolbar-divider-gap-group-start: 16px;
4371
+ --wds-table-toolbar-icon-button-gap: 2px;
4372
+ --wds-table-toolbar-item-gap: 8px;
4373
+ --wds-table-toolbar-padding-block-end: 16px;
4374
+ --wds-table-toolbar-padding-block-start: 24px;
4323
4375
  --wds-table-toolbar-padding-horizontal: 24px;
4324
4376
  --wds-tabs-border-radius: 6px;
4325
4377
  --wds-tabs-container-padding-horizontal: 16px;
package/odeditor-dark/component.st.css CHANGED
@@ -890,6 +890,17 @@
890
890
  @property st-global(--wds-page-header-title-minimised-font-weight);
891
891
  @property st-global(--wds-page-header-title-minimised-letter-spacing);
892
892
  @property st-global(--wds-page-header-title-minimised-line-height);
893
+ @property st-global(--wds-page-section-divider-display);
894
+ @property st-global(--wds-page-section-gap);
895
+ @property st-global(--wds-page-section-padding-bottom);
896
+ @property st-global(--wds-page-section-padding-bottom-with-divider);
897
+ @property st-global(--wds-page-section-padding-top);
898
+ @property st-global(--wds-page-section-subtitle-font-size);
899
+ @property st-global(--wds-page-section-subtitle-line-height);
900
+ @property st-global(--wds-page-section-title-font-size);
901
+ @property st-global(--wds-page-section-title-font-weight);
902
+ @property st-global(--wds-page-section-title-letter-spacing);
903
+ @property st-global(--wds-page-section-title-line-height);
893
904
  @property st-global(--wds-pagination-arrow-fill);
894
905
  @property st-global(--wds-pagination-fill);
895
906
  @property st-global(--wds-pagination-fill-active);
@@ -944,6 +955,7 @@
944
955
  @property st-global(--wds-scrollbar-fill);
945
956
  @property st-global(--wds-scrollbar-fill-active);
946
957
  @property st-global(--wds-scrollbar-fill-hover);
958
+ @property st-global(--wds-scrollbar-width);
947
959
  @property st-global(--wds-search-border-radius-large);
948
960
  @property st-global(--wds-search-border-radius-medium);
949
961
  @property st-global(--wds-search-border-radius-small);
@@ -1062,6 +1074,9 @@
1062
1074
  @property st-global(--wds-selector-button-text-fill-pressed-dark);
1063
1075
  @property st-global(--wds-selector-button-text-fill-pressed-standard);
1064
1076
  @property st-global(--wds-selector-button-text-fill-standard);
1077
+ @property st-global(--wds-selector-list-item-fill-active);
1078
+ @property st-global(--wds-selector-list-item-fill-focus);
1079
+ @property st-global(--wds-selector-list-item-fill-hover);
1065
1080
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1066
1081
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1067
1082
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1169,6 +1184,8 @@
1169
1184
  @property st-global(--wds-sidebar-scrollbar-fill-dark-active);
1170
1185
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1171
1186
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1187
+ @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1188
+ @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1172
1189
  @property st-global(--wds-skeleton-border-radius-circle);
1173
1190
  @property st-global(--wds-skeleton-border-radius-line);
1174
1191
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1246,14 +1263,23 @@
1246
1263
  @property st-global(--wds-table-list-item-controls-gap-medium);
1247
1264
  @property st-global(--wds-table-list-item-controls-padding-medium);
1248
1265
  @property st-global(--wds-table-list-item-drag-handle-color);
1266
+ @property st-global(--wds-table-list-item-drag-handle-color-hover);
1249
1267
  @property st-global(--wds-table-list-item-fill);
1250
1268
  @property st-global(--wds-table-list-item-fill-active);
1251
1269
  @property st-global(--wds-table-list-item-fill-highlight);
1252
1270
  @property st-global(--wds-table-list-item-fill-hover);
1271
+ @property st-global(--wds-table-list-item-fill-hover-draggable);
1253
1272
  @property st-global(--wds-table-list-item-gap);
1254
1273
  @property st-global(--wds-table-list-item-indentation-level-2);
1255
1274
  @property st-global(--wds-table-list-item-indentation-level-3);
1256
1275
  @property st-global(--wds-table-list-item-paddings);
1276
+ @property st-global(--wds-table-toolbar-button-gap);
1277
+ @property st-global(--wds-table-toolbar-divider-gap);
1278
+ @property st-global(--wds-table-toolbar-divider-gap-group-start);
1279
+ @property st-global(--wds-table-toolbar-icon-button-gap);
1280
+ @property st-global(--wds-table-toolbar-item-gap);
1281
+ @property st-global(--wds-table-toolbar-padding-block-end);
1282
+ @property st-global(--wds-table-toolbar-padding-block-start);
1257
1283
  @property st-global(--wds-table-toolbar-padding-horizontal);
1258
1284
  @property st-global(--wds-tabs-border-radius);
1259
1285
  @property st-global(--wds-tabs-container-padding-horizontal);
@@ -2462,6 +2488,17 @@
2462
2488
  --wds-page-header-title-minimised-font-weight: 500;
2463
2489
  --wds-page-header-title-minimised-letter-spacing: 0px;
2464
2490
  --wds-page-header-title-minimised-line-height: 18px;
2491
+ --wds-page-section-divider-display: block;
2492
+ --wds-page-section-gap: 0px;
2493
+ --wds-page-section-padding-bottom: 8px;
2494
+ --wds-page-section-padding-bottom-with-divider: 0px;
2495
+ --wds-page-section-padding-top: 16px;
2496
+ --wds-page-section-subtitle-font-size: 16px;
2497
+ --wds-page-section-subtitle-line-height: 24px;
2498
+ --wds-page-section-title-font-size: 16px;
2499
+ --wds-page-section-title-font-weight: 600;
2500
+ --wds-page-section-title-letter-spacing: 0px;
2501
+ --wds-page-section-title-line-height: 18px;
2465
2502
  --wds-pagination-arrow-fill: #82B0FF;
2466
2503
  --wds-pagination-fill: #212122;
2467
2504
  --wds-pagination-fill-active: #82B0FF;
@@ -2516,6 +2553,7 @@
2516
2553
  --wds-scrollbar-fill: #666565;
2517
2554
  --wds-scrollbar-fill-active: #A09E9D;
2518
2555
  --wds-scrollbar-fill-hover: #A09E9D;
2556
+ --wds-scrollbar-width: 4px;
2519
2557
  --wds-search-border-radius-large: 1000px;
2520
2558
  --wds-search-border-radius-medium: 1000px;
2521
2559
  --wds-search-border-radius-small: 1000px;
@@ -2634,6 +2672,9 @@
2634
2672
  --wds-selector-button-text-fill-pressed-dark: #82B0FF;
2635
2673
  --wds-selector-button-text-fill-pressed-standard: #82B0FF;
2636
2674
  --wds-selector-button-text-fill-standard: #82B0FF;
2675
+ --wds-selector-list-item-fill-active: #454544;
2676
+ --wds-selector-list-item-fill-focus: #3A3A3B;
2677
+ --wds-selector-list-item-fill-hover: #3A3A3B;
2637
2678
  --wds-selector-list-item-padding-horizontal-medium: 24px;
2638
2679
  --wds-selector-list-item-padding-horizontal-small: 16px;
2639
2680
  --wds-selector-list-item-padding-vertical-medium: 8px;
@@ -2741,6 +2782,8 @@
2741
2782
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
2742
2783
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
2743
2784
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
2785
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(255, 255, 255, 0.6600);
2786
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
2744
2787
  --wds-skeleton-border-radius-circle: 1000px;
2745
2788
  --wds-skeleton-border-radius-line: 4px;
2746
2789
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -2818,14 +2861,23 @@
2818
2861
  --wds-table-list-item-controls-gap-medium: 8px;
2819
2862
  --wds-table-list-item-controls-padding-medium: 12px;
2820
2863
  --wds-table-list-item-drag-handle-color: #FFFFFF;
2864
+ --wds-table-list-item-drag-handle-color-hover: #FFFFFF;
2821
2865
  --wds-table-list-item-fill: rgba(255, 255, 255, 0);
2822
2866
  --wds-table-list-item-fill-active: #2D2D2E;
2823
2867
  --wds-table-list-item-fill-highlight: #2D2D2E;
2824
2868
  --wds-table-list-item-fill-hover: #3A3A3B;
2869
+ --wds-table-list-item-fill-hover-draggable: #3A3A3B;
2825
2870
  --wds-table-list-item-gap: 16px;
2826
2871
  --wds-table-list-item-indentation-level-2: 12px;
2827
2872
  --wds-table-list-item-indentation-level-3: 28px;
2828
2873
  --wds-table-list-item-paddings: 0px;
2874
+ --wds-table-toolbar-button-gap: 8px;
2875
+ --wds-table-toolbar-divider-gap: 16px;
2876
+ --wds-table-toolbar-divider-gap-group-start: 16px;
2877
+ --wds-table-toolbar-icon-button-gap: 2px;
2878
+ --wds-table-toolbar-item-gap: 8px;
2879
+ --wds-table-toolbar-padding-block-end: 16px;
2880
+ --wds-table-toolbar-padding-block-start: 24px;
2829
2881
  --wds-table-toolbar-padding-horizontal: 24px;
2830
2882
  --wds-tabs-border-radius: 6px;
2831
2883
  --wds-tabs-container-padding-horizontal: 16px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.219.3",
3
+ "version": "1.220.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "58840d2005eec2030c5ea774995395f04d4fdc9ca2160b3a1b844da8"
39
+ "falconPackageHash": "65ba9148bd1aa07c235c421e85241495e29bf3c32b4927a1023cc129"
40
40
  }
package/studio/all.css CHANGED
@@ -327,6 +327,13 @@
327
327
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
328
328
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
329
329
  --wds-tabs-selection-height: 3px;
330
+ --wds-table-toolbar-padding-block-end: 15px;
331
+ --wds-table-toolbar-padding-block-start: 15px;
332
+ --wds-table-toolbar-divider-gap-group-start: 24px;
333
+ --wds-table-toolbar-divider-gap: 12px;
334
+ --wds-table-toolbar-icon-button-gap: 6px;
335
+ --wds-table-toolbar-button-gap: 6px;
336
+ --wds-table-toolbar-item-gap: 12px;
330
337
  --wds-swatches-swatch-active-border-radius-small: 5px;
331
338
  --wds-swatches-swatch-active-border-radius-medium: 7px;
332
339
  --wds-status-toast-width: 600px;
@@ -341,6 +348,8 @@
341
348
  --wds-slider-slider-knob-shadow: false;
342
349
  --wds-slider-slider-knob-border-width-hover: 12px;
343
350
  --wds-slider-slider-knob-border-width: 4px;
351
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
352
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(19, 23, 32, 0.6600);
344
353
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
345
354
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
346
355
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
@@ -360,7 +369,9 @@
360
369
  --wds-side-panel-control-layout-divider-border-width: 0px;
361
370
  --wds-section-helper-prefix-offset-margin: 4px;
362
371
  --wds-search-expandable-padding-large: 5px;
372
+ --wds-scrollbar-width: 6px;
363
373
  --wds-radio-dot-size: 4px;
374
+ --wds-page-section-divider-display: block;
364
375
  --wds-page-header-title-minimised-line-height: 30px;
365
376
  --wds-page-header-breadcrumbs-offset-small: -4px;
366
377
  --wds-page-header-breadcrumbs-offset-medium: -8px;
@@ -428,6 +439,7 @@
428
439
  --wds-breadcrumbs-height-medium: 30px;
429
440
  --wds-breadcrumbs-height-large: 36px;
430
441
  --wds-avatar-group-gap-condensed: -2px;
442
+ --wds-avatar-group-counter-background-blur: 0px;
431
443
  --wds-avatar-size-tiny: 18px;
432
444
  --wds-announcement-modal-help-button-fill: transparent;
433
445
  --wds-announcement-modal-footnote-content-alignment: center;
@@ -1024,6 +1036,7 @@
1024
1036
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
1025
1037
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
1026
1038
  --wds-table-list-item-gap: var(--wds-space-600);
1039
+ --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
1027
1040
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
1028
1041
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
1029
1042
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
@@ -1140,6 +1153,7 @@
1140
1153
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
1141
1154
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
1142
1155
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
1156
+ --wds-selector-list-item-fill-focus: var(--wds-color-blue-500);
1143
1157
  --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
1144
1158
  --wds-selector-button-size-small: var(--wds-space-700);
1145
1159
  --wds-selector-button-size-medium: var(--wds-space-800);
@@ -1246,6 +1260,10 @@
1246
1260
  --wds-pagination-padding-vertical: var(--wds-space-50);
1247
1261
  --wds-pagination-padding-horizontal: var(--wds-space-50);
1248
1262
  --wds-pagination-gap: var(--wds-space-100);
1263
+ --wds-page-section-padding-top: var(--wds-space-400);
1264
+ --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
1265
+ --wds-page-section-padding-bottom: var(--wds-space-200);
1266
+ --wds-page-section-gap: var(--wds-space-0);
1249
1267
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1250
1268
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1251
1269
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1635,6 +1653,8 @@
1635
1653
  --wds-badge-border-radius-small: var(--wds-border-radius-100);
1636
1654
  --wds-badge-border-radius-medium: var(--wds-border-radius-100);
1637
1655
  --wds-avatar-group-gap-default: var(--wds-space-100);
1656
+ --wds-avatar-group-counter-border-width: var(--wds-border-width-200);
1657
+ --wds-avatar-group-counter-border-fill: var(--wds-color-fill-dark-secondary-disabled);
1638
1658
  --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1639
1659
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-400);
1640
1660
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
@@ -1809,6 +1829,7 @@
1809
1829
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1810
1830
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1811
1831
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1832
+ --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1812
1833
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1813
1834
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1814
1835
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
@@ -1830,6 +1851,8 @@
1830
1851
  --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
1831
1852
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1832
1853
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
1854
+ --wds-selector-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1855
+ --wds-selector-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1833
1856
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1834
1857
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-fill-standard-primary-active);
1835
1858
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
@@ -1890,6 +1913,10 @@
1890
1913
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1891
1914
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1892
1915
  --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1916
+ --wds-page-section-title-letter-spacing: var(--wds-font-letter-spacing-heading-4);
1917
+ --wds-page-section-title-font-weight: var(--wds-font-weight-heading-4);
1918
+ --wds-page-section-title-font-size: var(--wds-font-size-heading-4);
1919
+ --wds-page-section-subtitle-font-size: var(--wds-font-size-body-medium);
1893
1920
  --wds-page-header-title-minimised-font-size: var(--wds-font-size-body-small);
1894
1921
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1895
1922
  --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
@@ -2234,6 +2261,10 @@
2234
2261
  --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-tertiary);
2235
2262
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2236
2263
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2264
+ --wds-avatar-group-counter-fill-hover: var(--wds-color-fill-light-primary);
2265
+ --wds-avatar-group-counter-fill-gradient-2: var(--wds-color-fill-transparent-tertiary);
2266
+ --wds-avatar-group-counter-fill-gradient-1: var(--wds-color-fill-transparent-tertiary);
2267
+ --wds-avatar-group-counter-fill: var(--wds-color-fill-light-primary);
2237
2268
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2238
2269
  --wds-announcement-modal-title-font-weight: var(--wds-font-weight-heading-1);
2239
2270
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
@@ -2281,6 +2312,8 @@
2281
2312
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2282
2313
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2283
2314
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2315
+ --wds-page-section-title-line-height: var(--wds-font-line-height-heading-4);
2316
+ --wds-page-section-subtitle-line-height: var(--wds-font-line-height-body-medium);
2284
2317
  --wds-page-header-title-line-height: var(--wds-font-line-height-heading-1);
2285
2318
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2286
2319
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-4);
package/studio/all.scss CHANGED
@@ -12,6 +12,13 @@
12
12
  --wds-toggle-button-shadow-spread-tertiary: -0.75px;
13
13
  --wds-toggle-button-shadow-spread-secondary: -1.5px;
14
14
  --wds-tabs-selection-height: 3px;
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-swatches-swatch-active-border-radius-small: 5px;
16
23
  --wds-swatches-swatch-active-border-radius-medium: 7px;
17
24
  --wds-status-toast-width: 600px;
@@ -56,6 +63,8 @@
56
63
  --wds-slider-slider-knob-shadow: false;
57
64
  --wds-slider-slider-knob-border-width-hover: 12px;
58
65
  --wds-slider-slider-knob-border-width: 4px;
66
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
67
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(19, 23, 32, 0.6600);
59
68
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
60
69
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
61
70
  --wds-sidebar-scrollbar-fill-dark-active: #b8b9bc;
@@ -103,7 +112,9 @@
103
112
  --wds-shadow-blur-0: 0px;
104
113
  --wds-section-helper-prefix-offset-margin: 4px;
105
114
  --wds-search-expandable-padding-large: 5px;
115
+ --wds-scrollbar-width: 6px;
106
116
  --wds-radio-dot-size: 4px;
117
+ --wds-page-section-divider-display: block;
107
118
  --wds-page-header-title-minimised-line-height: 30px;
108
119
  --wds-page-header-breadcrumbs-offset-small: -4px;
109
120
  --wds-page-header-breadcrumbs-offset-medium: -8px;
@@ -429,6 +440,7 @@
429
440
  --wds-background-blur-0: 0px;
430
441
  --wds-avatar-size-tiny: 18px;
431
442
  --wds-avatar-group-gap-condensed: -2px;
443
+ --wds-avatar-group-counter-background-blur: 0px;
432
444
  --wds-announcement-modal-help-button-fill: transparent;
433
445
  --wds-announcement-modal-footnote-content-alignment: center;
434
446
  --wds-announcement-modal-close-button-fill: transparent;
@@ -614,6 +626,7 @@
614
626
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
615
627
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
616
628
  --wds-table-list-item-gap: var(--wds-space-600);
629
+ --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
617
630
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
618
631
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
619
632
  --wds-table-list-item-controls-gap-medium: var(--wds-space-200);
@@ -819,6 +832,7 @@
819
832
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
820
833
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
821
834
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
835
+ --wds-selector-list-item-fill-focus: var(--wds-color-blue-500);
822
836
  --wds-selector-button-text-fill-disabled: var(--wds-color-text-disabled);
823
837
  --wds-selector-button-size-small: var(--wds-space-700);
824
838
  --wds-selector-button-size-medium: var(--wds-space-800);
@@ -925,6 +939,10 @@
925
939
  --wds-pagination-padding-vertical: var(--wds-space-50);
926
940
  --wds-pagination-padding-horizontal: var(--wds-space-50);
927
941
  --wds-pagination-gap: var(--wds-space-100);
942
+ --wds-page-section-padding-top: var(--wds-space-400);
943
+ --wds-page-section-padding-bottom-with-divider: var(--wds-space-0);
944
+ --wds-page-section-padding-bottom: var(--wds-space-200);
945
+ --wds-page-section-gap: var(--wds-space-0);
928
946
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
929
947
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
930
948
  --wds-page-header-title-actions-gap: var(--wds-space-0);
@@ -1635,6 +1653,8 @@
1635
1653
  --wds-background-blur-surface-overlay: var(--wds-background-blur-0);
1636
1654
  --wds-background-blur-modal: var(--wds-background-blur-0);
1637
1655
  --wds-avatar-group-gap-default: var(--wds-space-100);
1656
+ --wds-avatar-group-counter-border-width: var(--wds-border-width-200);
1657
+ --wds-avatar-group-counter-border-fill: var(--wds-color-fill-dark-secondary-disabled);
1638
1658
  --wds-avatar-color-7-fill: var(--wds-color-fill-accent-12);
1639
1659
  --wds-announcement-modal-top-controls-padding-top: var(--wds-space-400);
1640
1660
  --wds-announcement-modal-top-controls-padding-end: var(--wds-space-200);
@@ -1793,6 +1813,7 @@
1793
1813
  --wds-table-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1794
1814
  --wds-table-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1795
1815
  --wds-table-list-item-fill: var(--wds-color-fill-standard-tertiary);
1816
+ --wds-table-list-item-drag-handle-color-hover: var(--wds-color-fill-standard-primary);
1796
1817
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-primary);
1797
1818
  --wds-table-list-item-border-color: var(--wds-color-border-standard-secondary);
1798
1819
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
@@ -1819,6 +1840,8 @@
1819
1840
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1820
1841
  --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1821
1842
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1843
+ --wds-selector-list-item-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1844
+ --wds-selector-list-item-fill-active: var(--wds-color-fill-standard-tertiary-active);
1822
1845
  --wds-selector-button-text-fill-standard: var(--wds-color-text-primary);
1823
1846
  --wds-selector-button-text-fill-pressed-standard: var(--wds-color-fill-standard-primary-active);
1824
1847
  --wds-selector-button-text-fill-pressed-dark: var(--wds-color-text-primary);
@@ -1879,6 +1902,10 @@
1879
1902
  --wds-pagination-fill-active: var(--wds-color-fill-standard-primary);
1880
1903
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1881
1904
  --wds-pagination-arrow-fill: var(--wds-color-text-primary);
1905
+ --wds-page-section-title-letter-spacing: var(--wds-font-letter-spacing-heading-4);
1906
+ --wds-page-section-title-font-weight: var(--wds-font-weight-heading-4);
1907
+ --wds-page-section-title-font-size: var(--wds-font-size-heading-4);
1908
+ --wds-page-section-subtitle-font-size: var(--wds-font-size-body-medium);
1882
1909
  --wds-page-header-title-minimised-font-size: var(--wds-font-size-body-small);
1883
1910
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1884
1911
  --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
@@ -2235,6 +2262,10 @@
2235
2262
  --wds-badge-outline-dark-border-color: var(--wds-color-border-dark-primary);
2236
2263
  --wds-badge-label-font-size-small: var(--wds-font-size-body-small);
2237
2264
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary-light);
2265
+ --wds-avatar-group-counter-fill-hover: var(--wds-color-fill-light-primary);
2266
+ --wds-avatar-group-counter-fill-gradient-2: var(--wds-color-fill-transparent-tertiary);
2267
+ --wds-avatar-group-counter-fill-gradient-1: var(--wds-color-fill-transparent-tertiary);
2268
+ --wds-avatar-group-counter-fill: var(--wds-color-fill-light-primary);
2238
2269
  --wds-announcement-modal-title-font-weight: var(--wds-font-weight-heading-1);
2239
2270
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2240
2271
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-small);
@@ -2281,6 +2312,8 @@
2281
2312
  --wds-segmented-toggle-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2282
2313
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2283
2314
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2315
+ --wds-page-section-title-line-height: var(--wds-font-line-height-heading-4);
2316
+ --wds-page-section-subtitle-line-height: var(--wds-font-line-height-body-medium);
2284
2317
  --wds-page-header-title-line-height: var(--wds-font-line-height-heading-1);
2285
2318
  --wds-page-header-subtitle-line-height: var(--wds-font-line-height-body-medium);
2286
2319
  --wds-message-modal-title-font-line-height: var(--wds-font-line-height-heading-4);