@wix/design-system-tokens 1.219.2 → 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 +37 -0
  3. package/all.scss +37 -0
  4. package/all.st.css +74 -0
  5. package/component.st.css +74 -0
  6. package/odeditor/all.css +60 -30
  7. package/odeditor/all.scss +60 -30
  8. package/odeditor/all.st.css +90 -30
  9. package/odeditor/component.st.css +90 -30
  10. package/odeditor-dark/all.css +77 -38
  11. package/odeditor-dark/all.scss +77 -38
  12. package/odeditor-dark/all.st.css +116 -38
  13. package/odeditor-dark/component.st.css +116 -38
  14. package/package.json +2 -2
  15. package/studio/all.css +37 -0
  16. package/studio/all.scss +37 -0
  17. package/studio/all.st.css +74 -0
  18. package/studio/component.st.css +74 -0
  19. package/wixel/all.css +37 -0
  20. package/wixel/all.scss +37 -0
  21. package/wixel/all.st.css +74 -0
  22. package/wixel/component.st.css +74 -0
package/component.st.css CHANGED
@@ -68,6 +68,13 @@
68
68
  @property st-global(--wds-announcement-modal-top-controls-padding-end);
69
69
  @property st-global(--wds-announcement-modal-top-controls-padding-top);
70
70
  @property st-global(--wds-avatar-color-7-fill);
71
+ @property st-global(--wds-avatar-group-counter-background-blur);
72
+ @property st-global(--wds-avatar-group-counter-border-fill);
73
+ @property st-global(--wds-avatar-group-counter-border-width);
74
+ @property st-global(--wds-avatar-group-counter-fill);
75
+ @property st-global(--wds-avatar-group-counter-fill-gradient-1);
76
+ @property st-global(--wds-avatar-group-counter-fill-gradient-2);
77
+ @property st-global(--wds-avatar-group-counter-fill-hover);
71
78
  @property st-global(--wds-avatar-group-gap-condensed);
72
79
  @property st-global(--wds-avatar-group-gap-default);
73
80
  @property st-global(--wds-avatar-size-tiny);
@@ -918,6 +925,17 @@
918
925
  @property st-global(--wds-page-header-title-minimised-font-weight);
919
926
  @property st-global(--wds-page-header-title-minimised-letter-spacing);
920
927
  @property st-global(--wds-page-header-title-minimised-line-height);
928
+ @property st-global(--wds-page-section-divider-display);
929
+ @property st-global(--wds-page-section-gap);
930
+ @property st-global(--wds-page-section-padding-bottom);
931
+ @property st-global(--wds-page-section-padding-bottom-with-divider);
932
+ @property st-global(--wds-page-section-padding-top);
933
+ @property st-global(--wds-page-section-subtitle-font-size);
934
+ @property st-global(--wds-page-section-subtitle-line-height);
935
+ @property st-global(--wds-page-section-title-font-size);
936
+ @property st-global(--wds-page-section-title-font-weight);
937
+ @property st-global(--wds-page-section-title-letter-spacing);
938
+ @property st-global(--wds-page-section-title-line-height);
921
939
  @property st-global(--wds-pagination-arrow-fill);
922
940
  @property st-global(--wds-pagination-fill);
923
941
  @property st-global(--wds-pagination-fill-active);
@@ -972,6 +990,7 @@
972
990
  @property st-global(--wds-scrollbar-fill);
973
991
  @property st-global(--wds-scrollbar-fill-active);
974
992
  @property st-global(--wds-scrollbar-fill-hover);
993
+ @property st-global(--wds-scrollbar-width);
975
994
  @property st-global(--wds-search-border-radius-large);
976
995
  @property st-global(--wds-search-border-radius-medium);
977
996
  @property st-global(--wds-search-border-radius-small);
@@ -1091,6 +1110,9 @@
1091
1110
  @property st-global(--wds-selector-button-text-fill-pressed-dark);
1092
1111
  @property st-global(--wds-selector-button-text-fill-pressed-standard);
1093
1112
  @property st-global(--wds-selector-button-text-fill-standard);
1113
+ @property st-global(--wds-selector-list-item-fill-active);
1114
+ @property st-global(--wds-selector-list-item-fill-focus);
1115
+ @property st-global(--wds-selector-list-item-fill-hover);
1094
1116
  @property st-global(--wds-selector-list-item-padding-horizontal-medium);
1095
1117
  @property st-global(--wds-selector-list-item-padding-horizontal-small);
1096
1118
  @property st-global(--wds-selector-list-item-padding-vertical-medium);
@@ -1197,7 +1219,9 @@
1197
1219
  @property st-global(--wds-sidebar-scrollbar-fill-dark-default);
1198
1220
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1199
1221
  @property st-global(--wds-sidebar-scrollbar-fill-light-default);
1222
+ @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1200
1223
  @property st-global(--wds-sidebar-scrollbar-fill-neutral-default);
1224
+ @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1201
1225
  @property st-global(--wds-skeleton-border-radius-circle);
1202
1226
  @property st-global(--wds-skeleton-border-radius-line);
1203
1227
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1225,6 +1249,10 @@
1225
1249
  @property st-global(--wds-statistics-widget-description-font-line-height);
1226
1250
  @property st-global(--wds-statistics-widget-description-font-size);
1227
1251
  @property st-global(--wds-statistics-widget-description-info-gap);
1252
+ @property st-global(--wds-statistics-widget-padding-horizontal-large);
1253
+ @property st-global(--wds-statistics-widget-padding-horizontal-tiny);
1254
+ @property st-global(--wds-statistics-widget-padding-vertical-large);
1255
+ @property st-global(--wds-statistics-widget-padding-vertical-tiny);
1228
1256
  @property st-global(--wds-statistics-widget-trend-space-top);
1229
1257
  @property st-global(--wds-statistics-widget-value-font-family-tiny);
1230
1258
  @property st-global(--wds-statistics-widget-value-font-letter-spacing);
@@ -1266,14 +1294,23 @@
1266
1294
  @property st-global(--wds-table-list-item-controls-gap-medium);
1267
1295
  @property st-global(--wds-table-list-item-controls-padding-medium);
1268
1296
  @property st-global(--wds-table-list-item-drag-handle-color);
1297
+ @property st-global(--wds-table-list-item-drag-handle-color-hover);
1269
1298
  @property st-global(--wds-table-list-item-fill);
1270
1299
  @property st-global(--wds-table-list-item-fill-active);
1271
1300
  @property st-global(--wds-table-list-item-fill-highlight);
1272
1301
  @property st-global(--wds-table-list-item-fill-hover);
1302
+ @property st-global(--wds-table-list-item-fill-hover-draggable);
1273
1303
  @property st-global(--wds-table-list-item-gap);
1274
1304
  @property st-global(--wds-table-list-item-indentation-level-2);
1275
1305
  @property st-global(--wds-table-list-item-indentation-level-3);
1276
1306
  @property st-global(--wds-table-list-item-paddings);
1307
+ @property st-global(--wds-table-toolbar-button-gap);
1308
+ @property st-global(--wds-table-toolbar-divider-gap);
1309
+ @property st-global(--wds-table-toolbar-divider-gap-group-start);
1310
+ @property st-global(--wds-table-toolbar-icon-button-gap);
1311
+ @property st-global(--wds-table-toolbar-item-gap);
1312
+ @property st-global(--wds-table-toolbar-padding-block-end);
1313
+ @property st-global(--wds-table-toolbar-padding-block-start);
1277
1314
  @property st-global(--wds-table-toolbar-padding-horizontal);
1278
1315
  @property st-global(--wds-tabs-border-radius);
1279
1316
  @property st-global(--wds-tabs-container-padding-horizontal);
@@ -1667,6 +1704,13 @@
1667
1704
  --wds-announcement-modal-top-controls-padding-end: 12px;
1668
1705
  --wds-announcement-modal-top-controls-padding-top: 18px;
1669
1706
  --wds-avatar-color-7-fill: #ACAFC4;
1707
+ --wds-avatar-group-counter-background-blur: 0px;
1708
+ --wds-avatar-group-counter-border-fill: rgba(0, 6, 36, .1);
1709
+ --wds-avatar-group-counter-border-width: 2px;
1710
+ --wds-avatar-group-counter-fill: #ffffff;
1711
+ --wds-avatar-group-counter-fill-gradient-1: rgba(0, 6, 36, 0);
1712
+ --wds-avatar-group-counter-fill-gradient-2: rgba(0, 6, 36, 0);
1713
+ --wds-avatar-group-counter-fill-hover: #ffffff;
1670
1714
  --wds-avatar-group-gap-condensed: -3px;
1671
1715
  --wds-avatar-group-gap-default: 6px;
1672
1716
  --wds-avatar-size-tiny: 18px;
@@ -2517,6 +2561,17 @@
2517
2561
  --wds-page-header-title-minimised-font-weight: 500;
2518
2562
  --wds-page-header-title-minimised-letter-spacing: 0px;
2519
2563
  --wds-page-header-title-minimised-line-height: 30px;
2564
+ --wds-page-section-divider-display: block;
2565
+ --wds-page-section-gap: 0px;
2566
+ --wds-page-section-padding-bottom: 12px;
2567
+ --wds-page-section-padding-bottom-with-divider: 0px;
2568
+ --wds-page-section-padding-top: 24px;
2569
+ --wds-page-section-subtitle-font-size: 16px;
2570
+ --wds-page-section-subtitle-line-height: 24px;
2571
+ --wds-page-section-title-font-size: 18px;
2572
+ --wds-page-section-title-font-weight: 500;
2573
+ --wds-page-section-title-letter-spacing: 0px;
2574
+ --wds-page-section-title-line-height: 24px;
2520
2575
  --wds-pagination-arrow-fill: #116dff;
2521
2576
  --wds-pagination-fill: #ffffff;
2522
2577
  --wds-pagination-fill-active: #116dff;
@@ -2571,6 +2626,7 @@
2571
2626
  --wds-scrollbar-fill: #a8caff;
2572
2627
  --wds-scrollbar-fill-active: #116dff;
2573
2628
  --wds-scrollbar-fill-hover: #5999ff;
2629
+ --wds-scrollbar-width: 6px;
2574
2630
  --wds-search-border-radius-large: 1000px;
2575
2631
  --wds-search-border-radius-medium: 1000px;
2576
2632
  --wds-search-border-radius-small: 1000px;
@@ -2690,6 +2746,9 @@
2690
2746
  --wds-selector-button-text-fill-pressed-dark: #116dff;
2691
2747
  --wds-selector-button-text-fill-pressed-standard: #116dff;
2692
2748
  --wds-selector-button-text-fill-standard: #116dff;
2749
+ --wds-selector-list-item-fill-active: #d6e6fe;
2750
+ --wds-selector-list-item-fill-focus: #e7f0ff;
2751
+ --wds-selector-list-item-fill-hover: #e7f0ff;
2693
2752
  --wds-selector-list-item-padding-horizontal-medium: 24px;
2694
2753
  --wds-selector-list-item-padding-horizontal-small: 18px;
2695
2754
  --wds-selector-list-item-padding-vertical-medium: 12px;
@@ -2796,7 +2855,9 @@
2796
2855
  --wds-sidebar-scrollbar-fill-dark-default: #717379;
2797
2856
  --wds-sidebar-scrollbar-fill-dark-hover: #9C9EA6;
2798
2857
  --wds-sidebar-scrollbar-fill-light-default: #A8CAFF;
2858
+ --wds-sidebar-scrollbar-fill-light-hover: rgba(0, 6, 36, 0.6600);
2799
2859
  --wds-sidebar-scrollbar-fill-neutral-default: #A8CAFF;
2860
+ --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
2800
2861
  --wds-skeleton-border-radius-circle: 1000px;
2801
2862
  --wds-skeleton-border-radius-line: 1000px;
2802
2863
  --wds-skeleton-border-radius-rectangle: 6px;
@@ -2824,6 +2885,10 @@
2824
2885
  --wds-statistics-widget-description-font-line-height: 18px;
2825
2886
  --wds-statistics-widget-description-font-size: 14px;
2826
2887
  --wds-statistics-widget-description-info-gap: 6px;
2888
+ --wds-statistics-widget-padding-horizontal-large: 24px;
2889
+ --wds-statistics-widget-padding-horizontal-tiny: 24px;
2890
+ --wds-statistics-widget-padding-vertical-large: 18px;
2891
+ --wds-statistics-widget-padding-vertical-tiny: 12px;
2827
2892
  --wds-statistics-widget-trend-space-top: 5px;
2828
2893
  --wds-statistics-widget-value-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2829
2894
  --wds-statistics-widget-value-font-letter-spacing: 0px;
@@ -2865,14 +2930,23 @@
2865
2930
  --wds-table-list-item-controls-gap-medium: 12px;
2866
2931
  --wds-table-list-item-controls-padding-medium: 18px;
2867
2932
  --wds-table-list-item-drag-handle-color: #116dff;
2933
+ --wds-table-list-item-drag-handle-color-hover: #116dff;
2868
2934
  --wds-table-list-item-fill: #ffffff;
2869
2935
  --wds-table-list-item-fill-active: #d6e6fe;
2870
2936
  --wds-table-list-item-fill-highlight: #f4f7ff;
2871
2937
  --wds-table-list-item-fill-hover: #e7f0ff;
2938
+ --wds-table-list-item-fill-hover-draggable: #e7f0ff;
2872
2939
  --wds-table-list-item-gap: 24px;
2873
2940
  --wds-table-list-item-indentation-level-2: 12px;
2874
2941
  --wds-table-list-item-indentation-level-3: 36px;
2875
2942
  --wds-table-list-item-paddings: 0px;
2943
+ --wds-table-toolbar-button-gap: 6px;
2944
+ --wds-table-toolbar-divider-gap: 12px;
2945
+ --wds-table-toolbar-divider-gap-group-start: 24px;
2946
+ --wds-table-toolbar-icon-button-gap: 6px;
2947
+ --wds-table-toolbar-item-gap: 12px;
2948
+ --wds-table-toolbar-padding-block-end: 15px;
2949
+ --wds-table-toolbar-padding-block-start: 15px;
2876
2950
  --wds-table-toolbar-padding-horizontal: 24px;
2877
2951
  --wds-tabs-border-radius: 0px;
2878
2952
  --wds-tabs-container-padding-horizontal: 0px;
package/odeditor/all.css CHANGED
@@ -336,6 +336,13 @@
336
336
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
337
337
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
338
338
  --wds-tabs-selection-height: 3px;
339
+ --wds-table-toolbar-padding-block-end: 16px;
340
+ --wds-table-toolbar-padding-block-start: 24px;
341
+ --wds-table-toolbar-divider-gap-group-start: 16px;
342
+ --wds-table-toolbar-divider-gap: 16px;
343
+ --wds-table-toolbar-icon-button-gap: 2px;
344
+ --wds-table-toolbar-button-gap: 8px;
345
+ --wds-table-toolbar-item-gap: 8px;
339
346
  --wds-swatches-swatch-size-tiny: 22px;
340
347
  --wds-status-toast-width: 600px;
341
348
  --wds-statistics-widget-value-font-letter-spacing: -0.5px;
@@ -370,7 +377,9 @@
370
377
  --wds-side-panel-floating-max-height: 576px;
371
378
  --wds-side-panel-control-layout-divider-border-width: false;
372
379
  --wds-section-helper-prefix-offset-margin: 0px;
380
+ --wds-scrollbar-width: 4px;
373
381
  --wds-radio-dot-size: 4px;
382
+ --wds-page-section-divider-display: none;
374
383
  --wds-page-header-divider-color: transparent;
375
384
  --wds-page-header-breadcrumbs-offset-small: 0px;
376
385
  --wds-page-header-breadcrumbs-offset-medium: 0px;
@@ -1058,6 +1067,10 @@
1058
1067
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
1059
1068
  --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-display);
1060
1069
  --wds-statistics-widget-trend-space-top: var(--wds-space-0);
1070
+ --wds-statistics-widget-padding-vertical-tiny: var(--wds-space-300);
1071
+ --wds-statistics-widget-padding-vertical-large: var(--wds-space-500);
1072
+ --wds-statistics-widget-padding-horizontal-tiny: var(--wds-space-300);
1073
+ --wds-statistics-widget-padding-horizontal-large: var(--wds-space-300);
1061
1074
  --wds-statistics-widget-description-info-gap: var(--wds-space-50);
1062
1075
  --wds-social-preview-content-padding-vertical: var(--wds-space-200);
1063
1076
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
@@ -1072,7 +1085,9 @@
1072
1085
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-200);
1073
1086
  --wds-skeleton-border-radius-line: var(--wds-border-radius-200);
1074
1087
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
1088
+ --wds-sidebar-scrollbar-fill-neutral-hover: var(--wds-color-black-500);
1075
1089
  --wds-sidebar-scrollbar-fill-neutral-default: var(--wds-color-black-550);
1090
+ --wds-sidebar-scrollbar-fill-light-hover: var(--wds-color-black-500);
1076
1091
  --wds-sidebar-scrollbar-fill-light-default: var(--wds-color-black-550);
1077
1092
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-white);
1078
1093
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
@@ -1144,6 +1159,9 @@
1144
1159
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
1145
1160
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
1146
1161
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
1162
+ --wds-selector-list-item-fill-hover: var(--wds-color-black-700);
1163
+ --wds-selector-list-item-fill-focus: var(--wds-color-black-700);
1164
+ --wds-selector-list-item-fill-active: var(--wds-color-black-600);
1147
1165
  --wds-selector-button-size-small: var(--wds-space-750);
1148
1166
  --wds-selector-button-size-medium: var(--wds-space-950);
1149
1167
  --wds-selector-button-size-large: var(--wds-space-1150);
@@ -1224,7 +1242,7 @@
1224
1242
  --wds-search-border-radius-large: var(--wds-border-radius-full);
1225
1243
  --wds-scrollbar-fill-hover: var(--wds-color-black-400);
1226
1244
  --wds-scrollbar-fill-active: var(--wds-color-black-400);
1227
- --wds-scrollbar-fill: var(--wds-color-black-550);
1245
+ --wds-scrollbar-fill: var(--wds-color-black-500);
1228
1246
  --wds-radio-group-item-padding-outlined-vertical-screen-small: var(--wds-space-300);
1229
1247
  --wds-radio-group-item-padding-outlined-vertical: var(--wds-space-300);
1230
1248
  --wds-radio-group-item-padding-outlined-horizontal-screen-small: var(--wds-space-400);
@@ -1256,6 +1274,12 @@
1256
1274
  --wds-pagination-padding-vertical: var(--wds-space-50);
1257
1275
  --wds-pagination-padding-horizontal: var(--wds-space-50);
1258
1276
  --wds-pagination-gap: var(--wds-space-100);
1277
+ --wds-page-section-title-letter-spacing: var(--wds-font-letter-spacing-heading-3);
1278
+ --wds-page-section-title-font-weight: var(--wds-font-weight-heading-3);
1279
+ --wds-page-section-padding-top: var(--wds-space-400);
1280
+ --wds-page-section-padding-bottom-with-divider: var(--wds-space-200);
1281
+ --wds-page-section-padding-bottom: var(--wds-space-100);
1282
+ --wds-page-section-gap: var(--wds-space-100);
1259
1283
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-heading-3);
1260
1284
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-heading-3);
1261
1285
  --wds-page-header-title-actions-gap: var(--wds-space-1000);
@@ -1312,42 +1336,46 @@
1312
1336
  --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
1313
1337
  --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-1200);
1314
1338
  --wds-marketing-page-paddings-horizontal-large: var(--wds-space-1500);
1315
- --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
1316
- --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1317
- --wds-marketing-layout-title-gap-medium: var(--wds-space-100);
1339
+ --wds-marketing-layout-title-line-height-tiny: var(--wds-space-500);
1340
+ --wds-marketing-layout-title-line-height-small: var(--wds-space-500);
1341
+ --wds-marketing-layout-title-line-height-medium: var(--wds-space-500);
1342
+ --wds-marketing-layout-title-gap-tiny: var(--wds-space-200);
1343
+ --wds-marketing-layout-title-gap-small: var(--wds-space-200);
1344
+ --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
1318
1345
  --wds-marketing-layout-title-font-weight-tiny: var(--wds-font-weight-heading-3);
1319
1346
  --wds-marketing-layout-title-font-weight-small: var(--wds-font-weight-heading-3);
1320
1347
  --wds-marketing-layout-title-font-weight-medium: var(--wds-font-weight-heading-3);
1321
- --wds-marketing-layout-padding-vertical-tiny: var(--wds-space-600);
1322
- --wds-marketing-layout-padding-vertical-small: var(--wds-space-600);
1323
- --wds-marketing-layout-padding-vertical-medium: var(--wds-space-600);
1324
- --wds-marketing-layout-padding-right-tiny: var(--wds-space-600);
1325
- --wds-marketing-layout-padding-right-small: var(--wds-space-600);
1326
- --wds-marketing-layout-padding-right-medium: var(--wds-space-600);
1327
- --wds-marketing-layout-padding-left-tiny: var(--wds-space-600);
1328
- --wds-marketing-layout-padding-left-small: var(--wds-space-600);
1329
- --wds-marketing-layout-padding-left-medium: var(--wds-space-600);
1330
- --wds-marketing-layout-image-padding-vertical-tiny: var(--wds-space-400);
1331
- --wds-marketing-layout-image-padding-vertical-small: var(--wds-space-400);
1332
- --wds-marketing-layout-image-padding-vertical-medium: var(--wds-space-400);
1333
- --wds-marketing-layout-image-padding-right-tiny: var(--wds-space-400);
1334
- --wds-marketing-layout-image-padding-right-small: var(--wds-space-400);
1335
- --wds-marketing-layout-image-padding-right-medium: var(--wds-space-400);
1336
- --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-400);
1337
- --wds-marketing-layout-image-padding-left-small: var(--wds-space-400);
1338
- --wds-marketing-layout-image-padding-left-medium: var(--wds-space-400);
1348
+ --wds-marketing-layout-padding-vertical-tiny: var(--wds-space-500);
1349
+ --wds-marketing-layout-padding-vertical-small: var(--wds-space-500);
1350
+ --wds-marketing-layout-padding-vertical-medium: var(--wds-space-500);
1351
+ --wds-marketing-layout-padding-right-tiny: var(--wds-space-500);
1352
+ --wds-marketing-layout-padding-right-small: var(--wds-space-500);
1353
+ --wds-marketing-layout-padding-right-medium: var(--wds-space-200);
1354
+ --wds-marketing-layout-padding-left-tiny: var(--wds-space-200);
1355
+ --wds-marketing-layout-padding-left-small: var(--wds-space-200);
1356
+ --wds-marketing-layout-padding-left-medium: var(--wds-space-500);
1357
+ --wds-marketing-layout-image-padding-vertical-tiny: var(--wds-space-300);
1358
+ --wds-marketing-layout-image-padding-vertical-small: var(--wds-space-300);
1359
+ --wds-marketing-layout-image-padding-vertical-medium: var(--wds-space-300);
1360
+ --wds-marketing-layout-image-padding-right-tiny: var(--wds-space-300);
1361
+ --wds-marketing-layout-image-padding-right-small: var(--wds-space-300);
1362
+ --wds-marketing-layout-image-padding-right-medium: var(--wds-space-300);
1363
+ --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-300);
1364
+ --wds-marketing-layout-image-padding-left-small: var(--wds-space-300);
1365
+ --wds-marketing-layout-image-padding-left-medium: var(--wds-space-300);
1339
1366
  --wds-marketing-layout-image-border-radius: var(--wds-border-radius-400);
1340
1367
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-medium);
1341
1368
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-medium);
1342
1369
  --wds-marketing-layout-description-font-weight-medium: var(--wds-font-weight-medium);
1370
+ --wds-marketing-layout-description-color: var(--wds-color-black-300);
1343
1371
  --wds-marketing-layout-border: var(--wds-border-radius-200);
1344
1372
  --wds-marketing-layout-badge-offset-tiny: var(--wds-space-0);
1345
1373
  --wds-marketing-layout-badge-offset-small: var(--wds-space-0);
1346
1374
  --wds-marketing-layout-badge-offset-medium: var(--wds-space-0);
1347
- --wds-marketing-layout-badge-gap: var(--wds-space-300);
1348
- --wds-marketing-layout-actions-gap-tiny: var(--wds-space-300);
1349
- --wds-marketing-layout-actions-gap-small: var(--wds-space-300);
1350
- --wds-marketing-layout-actions-gap-medium: var(--wds-space-300);
1375
+ --wds-marketing-layout-badge-gap: var(--wds-space-200);
1376
+ --wds-marketing-layout-actions-gap-tiny: var(--wds-space-600);
1377
+ --wds-marketing-layout-actions-gap-small: var(--wds-space-600);
1378
+ --wds-marketing-layout-actions-gap-medium: var(--wds-space-600);
1351
1379
  --wds-loader-fill-loading: var(--wds-color-blue-0);
1352
1380
  --wds-list-item-select-icon-padding-vertical-small: var(--wds-space-100);
1353
1381
  --wds-list-item-select-icon-padding-vertical-medium: var(--wds-space-100);
@@ -1849,9 +1877,11 @@
1849
1877
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1850
1878
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1851
1879
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1880
+ --wds-table-list-item-fill-hover-draggable: var(--wds-color-fill-dark-tertiary-hover);
1852
1881
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1853
1882
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1854
1883
  --wds-table-list-item-fill: var(--wds-color-fill-dark-tertiary);
1884
+ --wds-table-list-item-drag-handle-color-hover: var(--wds-color-text-standard-primary);
1855
1885
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
1856
1886
  --wds-swatches-fill-disabled: var(--wds-color-fill-dark-secondary);
1857
1887
  --wds-swatches-fill-border-selected: var(--wds-color-border-dark-primary-active);
@@ -1936,6 +1966,8 @@
1936
1966
  --wds-pagination-fill-active: var(--wds-color-text-standard-primary);
1937
1967
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1938
1968
  --wds-pagination-arrow-fill: var(--wds-color-text-standard-primary);
1969
+ --wds-page-section-title-font-size: var(--wds-font-size-heading-3);
1970
+ --wds-page-section-subtitle-font-size: var(--wds-font-size-body-tiny);
1939
1971
  --wds-page-header-title-minimised-font-size: var(--wds-font-size-heading-3);
1940
1972
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-2);
1941
1973
  --wds-page-header-title-font-size: var(--wds-font-size-heading-2);
@@ -1951,7 +1983,6 @@
1951
1983
  --wds-marketing-layout-description-font-size-tiny: var(--wds-font-size-body-tiny);
1952
1984
  --wds-marketing-layout-description-font-size-small: var(--wds-font-size-body-tiny);
1953
1985
  --wds-marketing-layout-description-font-size-medium: var(--wds-font-size-body-tiny);
1954
- --wds-marketing-layout-description-color: var(--wds-color-text-standard-secondary-light);
1955
1986
  --wds-loader-fill-success: var(--wds-color-fill-standard-primary);
1956
1987
  --wds-loader-fill-loading-with-error: var(--wds-color-fill-destructive-primary);
1957
1988
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
@@ -2271,12 +2302,11 @@
2271
2302
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
2272
2303
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2273
2304
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2305
+ --wds-page-section-title-line-height: var(--wds-font-line-height-heading-3);
2306
+ --wds-page-section-subtitle-line-height: var(--wds-font-line-height-body-tiny);
2274
2307
  --wds-page-header-title-minimised-line-height: var(--wds-font-line-height-heading-3);
2275
2308
  --wds-page-header-title-line-height: var(--wds-font-line-height-heading-2);
2276
2309
  --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-small);
2277
- --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-heading-3);
2278
- --wds-marketing-layout-title-line-height-small: var(--wds-font-line-height-heading-3);
2279
- --wds-marketing-layout-title-line-height-medium: var(--wds-font-line-height-heading-3);
2280
2310
  --wds-marketing-layout-description-line-height-tiny: var(--wds-font-line-height-body-tiny);
2281
2311
  --wds-marketing-layout-description-line-height-small: var(--wds-font-line-height-body-tiny);
2282
2312
  --wds-marketing-layout-description-line-height-medium: var(--wds-font-line-height-body-tiny);
package/odeditor/all.scss CHANGED
@@ -30,6 +30,13 @@
30
30
  --wds-toggle-button-inner-shadow-blur-secondary: 1px;
31
31
  --wds-toggle-button-inner-shadow-blur-primary: 1px;
32
32
  --wds-tabs-selection-height: 3px;
33
+ --wds-table-toolbar-padding-block-start: 24px;
34
+ --wds-table-toolbar-padding-block-end: 16px;
35
+ --wds-table-toolbar-item-gap: 8px;
36
+ --wds-table-toolbar-icon-button-gap: 2px;
37
+ --wds-table-toolbar-divider-gap-group-start: 16px;
38
+ --wds-table-toolbar-divider-gap: 16px;
39
+ --wds-table-toolbar-button-gap: 8px;
33
40
  --wds-swatches-swatch-size-tiny: 22px;
34
41
  --wds-status-toast-width: 600px;
35
42
  --wds-statistics-widget-value-font-letter-spacing: -0.5px;
@@ -130,7 +137,9 @@
130
137
  --wds-shadow-blur-25: 2px;
131
138
  --wds-shadow-blur-0: 0px;
132
139
  --wds-section-helper-prefix-offset-margin: 0px;
140
+ --wds-scrollbar-width: 4px;
133
141
  --wds-radio-dot-size: 4px;
142
+ --wds-page-section-divider-display: none;
134
143
  --wds-page-header-divider-color: transparent;
135
144
  --wds-page-header-breadcrumbs-offset-small: 0px;
136
145
  --wds-page-header-breadcrumbs-offset-medium: 0px;
@@ -637,6 +646,10 @@
637
646
  --wds-stepper-prefix-size-circle: var(--wds-space-700);
638
647
  --wds-statistics-widget-value-font-family-tiny: var(--wds-font-family-display);
639
648
  --wds-statistics-widget-trend-space-top: var(--wds-space-0);
649
+ --wds-statistics-widget-padding-vertical-tiny: var(--wds-space-300);
650
+ --wds-statistics-widget-padding-vertical-large: var(--wds-space-500);
651
+ --wds-statistics-widget-padding-horizontal-tiny: var(--wds-space-300);
652
+ --wds-statistics-widget-padding-horizontal-large: var(--wds-space-300);
640
653
  --wds-statistics-widget-description-info-gap: var(--wds-space-50);
641
654
  --wds-space-viewport-spacing: var(--wds-space-1200);
642
655
  --wds-space-padding-vertical-xx-tiny: var(--wds-space-100);
@@ -665,7 +678,9 @@
665
678
  --wds-skeleton-border-radius-rectangle: var(--wds-border-radius-200);
666
679
  --wds-skeleton-border-radius-line: var(--wds-border-radius-200);
667
680
  --wds-skeleton-border-radius-circle: var(--wds-border-radius-full);
681
+ --wds-sidebar-scrollbar-fill-neutral-hover: var(--wds-color-black-500);
668
682
  --wds-sidebar-scrollbar-fill-neutral-default: var(--wds-color-black-550);
683
+ --wds-sidebar-scrollbar-fill-light-hover: var(--wds-color-black-500);
669
684
  --wds-sidebar-scrollbar-fill-light-default: var(--wds-color-black-550);
670
685
  --wds-sidebar-navigation-arrow-fill-neutral: var(--wds-color-white);
671
686
  --wds-sidebar-minimize-tooltip-text-neutral-default: var(--wds-color-black-200);
@@ -806,6 +821,9 @@
806
821
  --wds-selector-list-item-padding-vertical-medium: var(--wds-space-200);
807
822
  --wds-selector-list-item-padding-horizontal-small: var(--wds-space-400);
808
823
  --wds-selector-list-item-padding-horizontal-medium: var(--wds-space-600);
824
+ --wds-selector-list-item-fill-hover: var(--wds-color-black-700);
825
+ --wds-selector-list-item-fill-focus: var(--wds-color-black-700);
826
+ --wds-selector-list-item-fill-active: var(--wds-color-black-600);
809
827
  --wds-selector-button-size-small: var(--wds-space-750);
810
828
  --wds-selector-button-size-medium: var(--wds-space-950);
811
829
  --wds-selector-button-size-large: var(--wds-space-1150);
@@ -886,7 +904,7 @@
886
904
  --wds-search-border-radius-large: var(--wds-border-radius-full);
887
905
  --wds-scrollbar-fill-hover: var(--wds-color-black-400);
888
906
  --wds-scrollbar-fill-active: var(--wds-color-black-400);
889
- --wds-scrollbar-fill: var(--wds-color-black-550);
907
+ --wds-scrollbar-fill: var(--wds-color-black-500);
890
908
  --wds-radio-size: var(--wds-space-350);
891
909
  --wds-radio-group-item-padding-outlined-vertical-screen-small: var(--wds-space-300);
892
910
  --wds-radio-group-item-padding-outlined-vertical: var(--wds-space-300);
@@ -918,6 +936,12 @@
918
936
  --wds-pagination-padding-vertical: var(--wds-space-50);
919
937
  --wds-pagination-padding-horizontal: var(--wds-space-50);
920
938
  --wds-pagination-gap: var(--wds-space-100);
939
+ --wds-page-section-title-letter-spacing: var(--wds-font-letter-spacing-heading-3);
940
+ --wds-page-section-title-font-weight: var(--wds-font-weight-heading-3);
941
+ --wds-page-section-padding-top: var(--wds-space-400);
942
+ --wds-page-section-padding-bottom-with-divider: var(--wds-space-200);
943
+ --wds-page-section-padding-bottom: var(--wds-space-100);
944
+ --wds-page-section-gap: var(--wds-space-100);
921
945
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-heading-3);
922
946
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-heading-3);
923
947
  --wds-page-header-title-actions-gap: var(--wds-space-1000);
@@ -974,42 +998,46 @@
974
998
  --wds-marketing-page-paddings-vertical-large: var(--wds-space-800);
975
999
  --wds-marketing-page-paddings-horizontal-medium: var(--wds-space-1200);
976
1000
  --wds-marketing-page-paddings-horizontal-large: var(--wds-space-1500);
977
- --wds-marketing-layout-title-gap-tiny: var(--wds-space-100);
978
- --wds-marketing-layout-title-gap-small: var(--wds-space-100);
979
- --wds-marketing-layout-title-gap-medium: var(--wds-space-100);
1001
+ --wds-marketing-layout-title-line-height-tiny: var(--wds-space-500);
1002
+ --wds-marketing-layout-title-line-height-small: var(--wds-space-500);
1003
+ --wds-marketing-layout-title-line-height-medium: var(--wds-space-500);
1004
+ --wds-marketing-layout-title-gap-tiny: var(--wds-space-200);
1005
+ --wds-marketing-layout-title-gap-small: var(--wds-space-200);
1006
+ --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
980
1007
  --wds-marketing-layout-title-font-weight-tiny: var(--wds-font-weight-heading-3);
981
1008
  --wds-marketing-layout-title-font-weight-small: var(--wds-font-weight-heading-3);
982
1009
  --wds-marketing-layout-title-font-weight-medium: var(--wds-font-weight-heading-3);
983
- --wds-marketing-layout-padding-vertical-tiny: var(--wds-space-600);
984
- --wds-marketing-layout-padding-vertical-small: var(--wds-space-600);
985
- --wds-marketing-layout-padding-vertical-medium: var(--wds-space-600);
986
- --wds-marketing-layout-padding-right-tiny: var(--wds-space-600);
987
- --wds-marketing-layout-padding-right-small: var(--wds-space-600);
988
- --wds-marketing-layout-padding-right-medium: var(--wds-space-600);
989
- --wds-marketing-layout-padding-left-tiny: var(--wds-space-600);
990
- --wds-marketing-layout-padding-left-small: var(--wds-space-600);
991
- --wds-marketing-layout-padding-left-medium: var(--wds-space-600);
992
- --wds-marketing-layout-image-padding-vertical-tiny: var(--wds-space-400);
993
- --wds-marketing-layout-image-padding-vertical-small: var(--wds-space-400);
994
- --wds-marketing-layout-image-padding-vertical-medium: var(--wds-space-400);
995
- --wds-marketing-layout-image-padding-right-tiny: var(--wds-space-400);
996
- --wds-marketing-layout-image-padding-right-small: var(--wds-space-400);
997
- --wds-marketing-layout-image-padding-right-medium: var(--wds-space-400);
998
- --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-400);
999
- --wds-marketing-layout-image-padding-left-small: var(--wds-space-400);
1000
- --wds-marketing-layout-image-padding-left-medium: var(--wds-space-400);
1010
+ --wds-marketing-layout-padding-vertical-tiny: var(--wds-space-500);
1011
+ --wds-marketing-layout-padding-vertical-small: var(--wds-space-500);
1012
+ --wds-marketing-layout-padding-vertical-medium: var(--wds-space-500);
1013
+ --wds-marketing-layout-padding-right-tiny: var(--wds-space-500);
1014
+ --wds-marketing-layout-padding-right-small: var(--wds-space-500);
1015
+ --wds-marketing-layout-padding-right-medium: var(--wds-space-200);
1016
+ --wds-marketing-layout-padding-left-tiny: var(--wds-space-200);
1017
+ --wds-marketing-layout-padding-left-small: var(--wds-space-200);
1018
+ --wds-marketing-layout-padding-left-medium: var(--wds-space-500);
1019
+ --wds-marketing-layout-image-padding-vertical-tiny: var(--wds-space-300);
1020
+ --wds-marketing-layout-image-padding-vertical-small: var(--wds-space-300);
1021
+ --wds-marketing-layout-image-padding-vertical-medium: var(--wds-space-300);
1022
+ --wds-marketing-layout-image-padding-right-tiny: var(--wds-space-300);
1023
+ --wds-marketing-layout-image-padding-right-small: var(--wds-space-300);
1024
+ --wds-marketing-layout-image-padding-right-medium: var(--wds-space-300);
1025
+ --wds-marketing-layout-image-padding-left-tiny: var(--wds-space-300);
1026
+ --wds-marketing-layout-image-padding-left-small: var(--wds-space-300);
1027
+ --wds-marketing-layout-image-padding-left-medium: var(--wds-space-300);
1001
1028
  --wds-marketing-layout-image-border-radius: var(--wds-border-radius-400);
1002
1029
  --wds-marketing-layout-description-font-weight-tiny: var(--wds-font-weight-medium);
1003
1030
  --wds-marketing-layout-description-font-weight-small: var(--wds-font-weight-medium);
1004
1031
  --wds-marketing-layout-description-font-weight-medium: var(--wds-font-weight-medium);
1032
+ --wds-marketing-layout-description-color: var(--wds-color-black-300);
1005
1033
  --wds-marketing-layout-border: var(--wds-border-radius-200);
1006
1034
  --wds-marketing-layout-badge-offset-tiny: var(--wds-space-0);
1007
1035
  --wds-marketing-layout-badge-offset-small: var(--wds-space-0);
1008
1036
  --wds-marketing-layout-badge-offset-medium: var(--wds-space-0);
1009
- --wds-marketing-layout-badge-gap: var(--wds-space-300);
1010
- --wds-marketing-layout-actions-gap-tiny: var(--wds-space-300);
1011
- --wds-marketing-layout-actions-gap-small: var(--wds-space-300);
1012
- --wds-marketing-layout-actions-gap-medium: var(--wds-space-300);
1037
+ --wds-marketing-layout-badge-gap: var(--wds-space-200);
1038
+ --wds-marketing-layout-actions-gap-tiny: var(--wds-space-600);
1039
+ --wds-marketing-layout-actions-gap-small: var(--wds-space-600);
1040
+ --wds-marketing-layout-actions-gap-medium: var(--wds-space-600);
1013
1041
  --wds-loader-fill-loading: var(--wds-color-blue-0);
1014
1042
  --wds-list-item-select-suffix-pressed: var(--wds-color-blue-50);
1015
1043
  --wds-list-item-select-suffix-active-font-weight: var(--wds-font-weight-medium);
@@ -1831,9 +1859,11 @@
1831
1859
  --wds-tabs-label-font-size-medium: var(--wds-font-size-body-small);
1832
1860
  --wds-tabs-label-fill-active: var(--wds-color-text-standard-primary);
1833
1861
  --wds-tabs-item-fill-hover: var(--wds-color-fill-dark-secondary);
1862
+ --wds-table-list-item-fill-hover-draggable: var(--wds-color-fill-dark-tertiary-hover);
1834
1863
  --wds-table-list-item-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1835
1864
  --wds-table-list-item-fill-active: var(--wds-color-fill-dark-tertiary-active);
1836
1865
  --wds-table-list-item-fill: var(--wds-color-fill-dark-tertiary);
1866
+ --wds-table-list-item-drag-handle-color-hover: var(--wds-color-text-standard-primary);
1837
1867
  --wds-table-list-item-drag-handle-color: var(--wds-color-text-standard-primary);
1838
1868
  --wds-swatches-fill-disabled: var(--wds-color-fill-dark-secondary);
1839
1869
  --wds-swatches-fill-border-selected: var(--wds-color-border-dark-primary-active);
@@ -1924,6 +1954,8 @@
1924
1954
  --wds-pagination-fill-active: var(--wds-color-text-standard-primary);
1925
1955
  --wds-pagination-fill: var(--wds-color-fill-standard-tertiary);
1926
1956
  --wds-pagination-arrow-fill: var(--wds-color-text-standard-primary);
1957
+ --wds-page-section-title-font-size: var(--wds-font-size-heading-3);
1958
+ --wds-page-section-subtitle-font-size: var(--wds-font-size-body-tiny);
1927
1959
  --wds-page-header-title-minimised-font-size: var(--wds-font-size-heading-3);
1928
1960
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-2);
1929
1961
  --wds-page-header-title-font-size: var(--wds-font-size-heading-2);
@@ -1939,7 +1971,6 @@
1939
1971
  --wds-marketing-layout-description-font-size-tiny: var(--wds-font-size-body-tiny);
1940
1972
  --wds-marketing-layout-description-font-size-small: var(--wds-font-size-body-tiny);
1941
1973
  --wds-marketing-layout-description-font-size-medium: var(--wds-font-size-body-tiny);
1942
- --wds-marketing-layout-description-color: var(--wds-color-text-standard-secondary-light);
1943
1974
  --wds-loader-fill-success: var(--wds-color-fill-standard-primary);
1944
1975
  --wds-loader-fill-loading-with-error: var(--wds-color-fill-destructive-primary);
1945
1976
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
@@ -2271,12 +2302,11 @@
2271
2302
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-body-tiny);
2272
2303
  --wds-radio-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2273
2304
  --wds-radio-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2305
+ --wds-page-section-title-line-height: var(--wds-font-line-height-heading-3);
2306
+ --wds-page-section-subtitle-line-height: var(--wds-font-line-height-body-tiny);
2274
2307
  --wds-page-header-title-minimised-line-height: var(--wds-font-line-height-heading-3);
2275
2308
  --wds-page-header-title-line-height: var(--wds-font-line-height-heading-2);
2276
2309
  --wds-message-modal-text-font-line-height: var(--wds-font-line-height-body-small);
2277
- --wds-marketing-layout-title-line-height-tiny: var(--wds-font-line-height-heading-3);
2278
- --wds-marketing-layout-title-line-height-small: var(--wds-font-line-height-heading-3);
2279
- --wds-marketing-layout-title-line-height-medium: var(--wds-font-line-height-heading-3);
2280
2310
  --wds-marketing-layout-description-line-height-tiny: var(--wds-font-line-height-body-tiny);
2281
2311
  --wds-marketing-layout-description-line-height-small: var(--wds-font-line-height-body-tiny);
2282
2312
  --wds-marketing-layout-description-line-height-medium: var(--wds-font-line-height-body-tiny);