@wix/design-system-tokens 1.223.0 → 1.224.2

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 (23) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/all.css +71 -0
  3. package/all.scss +71 -0
  4. package/all.st.css +142 -0
  5. package/component.st.css +142 -0
  6. package/odeditor/all.css +78 -7
  7. package/odeditor/all.scss +78 -7
  8. package/odeditor/all.st.css +149 -7
  9. package/odeditor/component.st.css +149 -7
  10. package/odeditor-dark/all.css +79 -8
  11. package/odeditor-dark/all.scss +79 -8
  12. package/odeditor-dark/all.st.css +150 -8
  13. package/odeditor-dark/component.st.css +149 -7
  14. package/odeditor-dark/semantic.st.css +1 -1
  15. package/package.json +2 -2
  16. package/studio/all.css +71 -0
  17. package/studio/all.scss +71 -0
  18. package/studio/all.st.css +142 -0
  19. package/studio/component.st.css +142 -0
  20. package/wixel/all.css +71 -0
  21. package/wixel/all.scss +71 -0
  22. package/wixel/all.st.css +142 -0
  23. package/wixel/component.st.css +142 -0
package/odeditor-dark/component.st.css CHANGED
@@ -266,6 +266,8 @@
266
266
  @property st-global(--wds-card-content-padding-medium-top);
267
267
  @property st-global(--wds-card-content-paddings-horizontal);
268
268
  @property st-global(--wds-card-content-paddings-vertical);
269
+ @property st-global(--wds-card-controls-padding-horizontal);
270
+ @property st-global(--wds-card-controls-padding-vertical);
269
271
  @property st-global(--wds-card-divider-opacity);
270
272
  @property st-global(--wds-card-gallery-item-action-button-border-radius);
271
273
  @property st-global(--wds-card-gallery-item-action-button-font-size);
@@ -331,8 +333,48 @@
331
333
  @property st-global(--wds-card-tab-padding-horizontal-small);
332
334
  @property st-global(--wds-card-tab-padding-vertical-medium);
333
335
  @property st-global(--wds-card-tab-padding-vertical-small);
336
+ @property st-global(--wds-carousel-controls-border);
337
+ @property st-global(--wds-carousel-controls-border-disabled);
338
+ @property st-global(--wds-carousel-controls-border-radius);
339
+ @property st-global(--wds-carousel-controls-bottom-offset-dots);
340
+ @property st-global(--wds-carousel-controls-bottom-offset-no-dots);
341
+ @property st-global(--wds-carousel-controls-bottom-shift);
342
+ @property st-global(--wds-carousel-controls-fill-active);
343
+ @property st-global(--wds-carousel-controls-fill-hover);
344
+ @property st-global(--wds-carousel-controls-gap-large);
345
+ @property st-global(--wds-carousel-controls-gap-medium);
346
+ @property st-global(--wds-carousel-controls-gap-small);
347
+ @property st-global(--wds-carousel-controls-gap-tiny);
348
+ @property st-global(--wds-carousel-controls-icon-fill);
349
+ @property st-global(--wds-carousel-controls-icon-fill-active);
350
+ @property st-global(--wds-carousel-controls-icon-fill-disabled);
351
+ @property st-global(--wds-carousel-controls-icon-fill-hover);
352
+ @property st-global(--wds-carousel-controls-offset-bottom);
353
+ @property st-global(--wds-carousel-controls-offset-bottom-gradient);
354
+ @property st-global(--wds-carousel-controls-offset-overlay);
355
+ @property st-global(--wds-carousel-controls-offset-sides);
356
+ @property st-global(--wds-carousel-controls-offset-sides-gradient);
334
357
  @property st-global(--wds-carousel-controls-shadow);
358
+ @property st-global(--wds-carousel-controls-shadow-active);
359
+ @property st-global(--wds-carousel-controls-shadow-default);
360
+ @property st-global(--wds-carousel-controls-shadow-disabled);
361
+ @property st-global(--wds-carousel-controls-shadow-hover);
362
+ @property st-global(--wds-carousel-controls-size-large);
363
+ @property st-global(--wds-carousel-controls-size-medium);
364
+ @property st-global(--wds-carousel-controls-size-small);
365
+ @property st-global(--wds-carousel-controls-size-tiny);
366
+ @property st-global(--wds-carousel-dots-border-radius);
367
+ @property st-global(--wds-carousel-dots-fill);
368
+ @property st-global(--wds-carousel-dots-fill-active);
369
+ @property st-global(--wds-carousel-dots-fill-hover);
370
+ @property st-global(--wds-carousel-dots-gap);
371
+ @property st-global(--wds-carousel-dots-gap-bottom);
372
+ @property st-global(--wds-carousel-dots-gap-bottom-shift);
373
+ @property st-global(--wds-carousel-dots-height);
335
374
  @property st-global(--wds-carousel-dots-width);
375
+ @property st-global(--wds-carousel-gradient-color);
376
+ @property st-global(--wds-carousel-gradient-opacity);
377
+ @property st-global(--wds-carousel-gradient-width);
336
378
  @property st-global(--wds-checkbox-border);
337
379
  @property st-global(--wds-checkbox-border-active);
338
380
  @property st-global(--wds-checkbox-border-active-disabled);
@@ -641,6 +683,7 @@
641
683
  @property st-global(--wds-input-background-fill-default);
642
684
  @property st-global(--wds-input-background-fill-disabled);
643
685
  @property st-global(--wds-input-background-fill-hover);
686
+ @property st-global(--wds-input-background-fill-on-stage);
644
687
  @property st-global(--wds-input-background-fill-readonly);
645
688
  @property st-global(--wds-input-border-color);
646
689
  @property st-global(--wds-input-border-color-disabled);
@@ -808,6 +851,7 @@
808
851
  @property st-global(--wds-loader-stroke-width-medium);
809
852
  @property st-global(--wds-loader-stroke-width-small);
810
853
  @property st-global(--wds-loader-stroke-width-tiny);
854
+ @property st-global(--wds-marketing-layout-actions-alignment-inverted);
811
855
  @property st-global(--wds-marketing-layout-actions-gap-medium);
812
856
  @property st-global(--wds-marketing-layout-actions-gap-small);
813
857
  @property st-global(--wds-marketing-layout-actions-gap-tiny);
@@ -829,7 +873,11 @@
829
873
  @property st-global(--wds-marketing-layout-description-line-height-medium);
830
874
  @property st-global(--wds-marketing-layout-description-line-height-small);
831
875
  @property st-global(--wds-marketing-layout-description-line-height-tiny);
876
+ @property st-global(--wds-marketing-layout-description-max-width);
877
+ @property st-global(--wds-marketing-layout-image-aspect-ratio);
832
878
  @property st-global(--wds-marketing-layout-image-border-radius);
879
+ @property st-global(--wds-marketing-layout-image-height);
880
+ @property st-global(--wds-marketing-layout-image-object-fit);
833
881
  @property st-global(--wds-marketing-layout-image-padding-left-medium);
834
882
  @property st-global(--wds-marketing-layout-image-padding-left-small);
835
883
  @property st-global(--wds-marketing-layout-image-padding-left-tiny);
@@ -839,6 +887,13 @@
839
887
  @property st-global(--wds-marketing-layout-image-padding-vertical-medium);
840
888
  @property st-global(--wds-marketing-layout-image-padding-vertical-small);
841
889
  @property st-global(--wds-marketing-layout-image-padding-vertical-tiny);
890
+ @property st-global(--wds-marketing-layout-image-width);
891
+ @property st-global(--wds-marketing-layout-image-wrapper-contain);
892
+ @property st-global(--wds-marketing-layout-image-wrapper-flex);
893
+ @property st-global(--wds-marketing-layout-image-wrapper-width);
894
+ @property st-global(--wds-marketing-layout-min-height-medium);
895
+ @property st-global(--wds-marketing-layout-min-height-small);
896
+ @property st-global(--wds-marketing-layout-min-height-tiny);
842
897
  @property st-global(--wds-marketing-layout-padding-left-medium);
843
898
  @property st-global(--wds-marketing-layout-padding-left-small);
844
899
  @property st-global(--wds-marketing-layout-padding-left-tiny);
@@ -848,6 +903,7 @@
848
903
  @property st-global(--wds-marketing-layout-padding-vertical-medium);
849
904
  @property st-global(--wds-marketing-layout-padding-vertical-small);
850
905
  @property st-global(--wds-marketing-layout-padding-vertical-tiny);
906
+ @property st-global(--wds-marketing-layout-title-font-family-tiny);
851
907
  @property st-global(--wds-marketing-layout-title-font-size-medium);
852
908
  @property st-global(--wds-marketing-layout-title-font-size-small);
853
909
  @property st-global(--wds-marketing-layout-title-font-size-tiny);
@@ -1200,6 +1256,8 @@
1200
1256
  @property st-global(--wds-side-panel-title-font-letter-spacing);
1201
1257
  @property st-global(--wds-side-panel-title-font-line-height);
1202
1258
  @property st-global(--wds-side-panel-title-font-size);
1259
+ @property st-global(--wds-sidebar-border-inner-fill);
1260
+ @property st-global(--wds-sidebar-border-outer-fill);
1203
1261
  @property st-global(--wds-sidebar-clear-button-fill);
1204
1262
  @property st-global(--wds-sidebar-divider-fill-dark-default);
1205
1263
  @property st-global(--wds-sidebar-divider-fill-light-default);
@@ -1207,6 +1265,10 @@
1207
1265
  @property st-global(--wds-sidebar-divider-padding-bottom);
1208
1266
  @property st-global(--wds-sidebar-divider-padding-inline);
1209
1267
  @property st-global(--wds-sidebar-divider-padding-top);
1268
+ @property st-global(--wds-sidebar-fill-dark);
1269
+ @property st-global(--wds-sidebar-fill-light);
1270
+ @property st-global(--wds-sidebar-fill-neutral);
1271
+ @property st-global(--wds-sidebar-footer-fade-height);
1210
1272
  @property st-global(--wds-sidebar-header-margin-bottom);
1211
1273
  @property st-global(--wds-sidebar-header-text-dark-default);
1212
1274
  @property st-global(--wds-sidebar-item-content-gap);
@@ -1289,6 +1351,7 @@
1289
1351
  @property st-global(--wds-sidebar-scrollbar-fill-dark-hover);
1290
1352
  @property st-global(--wds-sidebar-scrollbar-fill-light-hover);
1291
1353
  @property st-global(--wds-sidebar-scrollbar-fill-neutral-hover);
1354
+ @property st-global(--wds-sidebar-submenu-level-2-padding-bottom);
1292
1355
  @property st-global(--wds-skeleton-border-radius-circle);
1293
1356
  @property st-global(--wds-skeleton-border-radius-line);
1294
1357
  @property st-global(--wds-skeleton-border-radius-rectangle);
@@ -1354,12 +1417,15 @@
1354
1417
  @property st-global(--wds-swatches-swatch-size-medium);
1355
1418
  @property st-global(--wds-swatches-swatch-size-small);
1356
1419
  @property st-global(--wds-swatches-swatch-size-tiny);
1420
+ @property st-global(--wds-table-action-cell-backdrop-opacity);
1357
1421
  @property st-global(--wds-table-action-cell-primary-action-gap-medium);
1358
1422
  @property st-global(--wds-table-action-cell-primary-action-gap-small);
1359
1423
  @property st-global(--wds-table-action-cell-primary-action-gap-tiny);
1360
1424
  @property st-global(--wds-table-action-cell-secondary-action-gap-medium);
1361
1425
  @property st-global(--wds-table-action-cell-secondary-action-gap-small);
1362
1426
  @property st-global(--wds-table-action-cell-secondary-action-gap-tiny);
1427
+ @property st-global(--wds-table-cell-padding-inline);
1428
+ @property st-global(--wds-table-header-font-weight);
1363
1429
  @property st-global(--wds-table-list-header-checkbox-padding-left);
1364
1430
  @property st-global(--wds-table-list-header-checkbox-padding-right);
1365
1431
  @property st-global(--wds-table-list-header-divider-fill-bottom);
@@ -1382,10 +1448,15 @@
1382
1448
  @property st-global(--wds-table-list-item-fill-highlight);
1383
1449
  @property st-global(--wds-table-list-item-fill-hover);
1384
1450
  @property st-global(--wds-table-list-item-fill-hover-draggable);
1451
+ @property st-global(--wds-table-list-item-fill-overlay);
1385
1452
  @property st-global(--wds-table-list-item-gap);
1386
1453
  @property st-global(--wds-table-list-item-indentation-level-2);
1387
1454
  @property st-global(--wds-table-list-item-indentation-level-3);
1388
1455
  @property st-global(--wds-table-list-item-paddings);
1456
+ @property st-global(--wds-table-region-divider-fill);
1457
+ @property st-global(--wds-table-row-divider-fill);
1458
+ @property st-global(--wds-table-sub-toolbar-padding-block-end);
1459
+ @property st-global(--wds-table-sub-toolbar-padding-block-start);
1389
1460
  @property st-global(--wds-table-toolbar-button-gap);
1390
1461
  @property st-global(--wds-table-toolbar-divider-gap);
1391
1462
  @property st-global(--wds-table-toolbar-divider-gap-group-start);
@@ -1886,7 +1957,7 @@
1886
1957
  --wds-button-fill-dark-secondary-hover: #3A3A3B;
1887
1958
  --wds-button-fill-destructive-primary-disabled: #3A3A3B;
1888
1959
  --wds-button-fill-destructive-secondary: rgba(0, 0, 0, 0);
1889
- --wds-button-fill-destructive-secondary-active: #4D2324;
1960
+ --wds-button-fill-destructive-secondary-active: #A6464B;
1890
1961
  --wds-button-fill-destructive-secondary-disabled: #3A3A3B;
1891
1962
  --wds-button-fill-destructive-secondary-hover: #4D2324;
1892
1963
  --wds-button-fill-gradient-hover-primary: #B1CCFF;
@@ -1981,6 +2052,8 @@
1981
2052
  --wds-card-content-padding-medium-top: 4px;
1982
2053
  --wds-card-content-paddings-horizontal: 12px;
1983
2054
  --wds-card-content-paddings-vertical: 12px;
2055
+ --wds-card-controls-padding-horizontal: 24px;
2056
+ --wds-card-controls-padding-vertical: 16px;
1984
2057
  --wds-card-divider-opacity: 0;
1985
2058
  --wds-card-gallery-item-action-button-border-radius: 8px;
1986
2059
  --wds-card-gallery-item-action-button-font-size: 14px;
@@ -2046,8 +2119,48 @@
2046
2119
  --wds-card-tab-padding-horizontal-small: 20px;
2047
2120
  --wds-card-tab-padding-vertical-medium: 16px;
2048
2121
  --wds-card-tab-padding-vertical-small: 16px;
2122
+ --wds-carousel-controls-border: solid 1px var(--wds-icon-button-color-border-standard-secondary);
2123
+ --wds-carousel-controls-border-disabled: solid 1px var(--wds-icon-button-color-border-standard-secondary-disabled);
2124
+ --wds-carousel-controls-border-radius: 8px;
2125
+ --wds-carousel-controls-bottom-offset-dots: 10px;
2126
+ --wds-carousel-controls-bottom-offset-no-dots: 4px;
2127
+ --wds-carousel-controls-bottom-shift: 0;
2128
+ --wds-carousel-controls-fill-active: #2D354E;
2129
+ --wds-carousel-controls-fill-hover: #212328;
2130
+ --wds-carousel-controls-gap-large: 8px;
2131
+ --wds-carousel-controls-gap-medium: 8px;
2132
+ --wds-carousel-controls-gap-small: 12px;
2133
+ --wds-carousel-controls-gap-tiny: 16px;
2134
+ --wds-carousel-controls-icon-fill: #82B0FF;
2135
+ --wds-carousel-controls-icon-fill-active: #E0E7FF;
2136
+ --wds-carousel-controls-icon-fill-disabled: #878685;
2137
+ --wds-carousel-controls-icon-fill-hover: #E0E7FF;
2138
+ --wds-carousel-controls-offset-bottom: 0px;
2139
+ --wds-carousel-controls-offset-bottom-gradient: 12px;
2140
+ --wds-carousel-controls-offset-overlay: 12px;
2141
+ --wds-carousel-controls-offset-sides: 0px;
2142
+ --wds-carousel-controls-offset-sides-gradient: 12px;
2049
2143
  --wds-carousel-controls-shadow: 0 20px 30px rgba(0, 0, 0, .2), 0 0px 0px rgba(255, 255, 255, 0);
2144
+ --wds-carousel-controls-shadow-active: none;
2145
+ --wds-carousel-controls-shadow-default: none;
2146
+ --wds-carousel-controls-shadow-disabled: 0 20px 30px rgba(0, 0, 0, .2), 0 0px 0px rgba(255, 255, 255, 0);
2147
+ --wds-carousel-controls-shadow-hover: none;
2148
+ --wds-carousel-controls-size-large: 46px;
2149
+ --wds-carousel-controls-size-medium: 38px;
2150
+ --wds-carousel-controls-size-small: 30px;
2151
+ --wds-carousel-controls-size-tiny: 24px;
2152
+ --wds-carousel-dots-border-radius: 2px;
2153
+ --wds-carousel-dots-fill: #3F4D6E;
2154
+ --wds-carousel-dots-fill-active: #E0E7FF;
2155
+ --wds-carousel-dots-fill-hover: #6F94D4;
2156
+ --wds-carousel-dots-gap: 16px;
2157
+ --wds-carousel-dots-gap-bottom: 10px;
2158
+ --wds-carousel-dots-gap-bottom-shift: 0.5;
2159
+ --wds-carousel-dots-height: 4px;
2050
2160
  --wds-carousel-dots-width: 4px;
2161
+ --wds-carousel-gradient-color: #212122;
2162
+ --wds-carousel-gradient-opacity: 50%;
2163
+ --wds-carousel-gradient-width: 38px;
2051
2164
  --wds-checkbox-border: #D4D3D2;
2052
2165
  --wds-checkbox-border-active: #82B0FF;
2053
2166
  --wds-checkbox-border-active-disabled: rgba(255, 255, 255, 0);
@@ -2356,6 +2469,7 @@
2356
2469
  --wds-input-background-fill-default: #2D2D2E;
2357
2470
  --wds-input-background-fill-disabled: #2D2D2E;
2358
2471
  --wds-input-background-fill-hover: #2D2D2E;
2472
+ --wds-input-background-fill-on-stage: #3A3A3B;
2359
2473
  --wds-input-background-fill-readonly: #212122;
2360
2474
  --wds-input-border-color: rgba(255, 255, 255, 0);
2361
2475
  --wds-input-border-color-disabled: #3A3A3B;
@@ -2413,13 +2527,13 @@
2413
2527
  --wds-linear-progress-bar-value-gap: 4px;
2414
2528
  --wds-list-item-action-affix-margin: 4px;
2415
2529
  --wds-list-item-action-border-radius: 8px;
2416
- --wds-list-item-action-fill: rgba(0, 0, 0, 0);
2530
+ --wds-list-item-action-fill: #212122;
2417
2531
  --wds-list-item-action-fill-active: #2D2D2E;
2418
2532
  --wds-list-item-action-fill-hover: #3A3A3B;
2419
- --wds-list-item-action-fill-hover-destructive: #A6464B;
2533
+ --wds-list-item-action-fill-hover-destructive: #4D2324;
2420
2534
  --wds-list-item-action-gap: 2px;
2421
2535
  --wds-list-item-action-label-fill-active: #FFFFFF;
2422
- --wds-list-item-action-label-fill-hover-destructive: #F9D6D7;
2536
+ --wds-list-item-action-label-fill-hover-destructive: #FF7680;
2423
2537
  --wds-list-item-action-label-fill-hover-premium: #82B0FF;
2424
2538
  --wds-list-item-action-label-fill-hover-primary: #82B0FF;
2425
2539
  --wds-list-item-action-label-fill-pressed-destructive: #FEBEC0;
@@ -2437,8 +2551,8 @@
2437
2551
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
2438
2552
  --wds-list-item-action-padding-vertical-small: 8px;
2439
2553
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
2440
- --wds-list-item-action-subtitle-destructive: #F9D6D7;
2441
- --wds-list-item-action-subtitle-fill-pressed-destructive: #FFFFFF;
2554
+ --wds-list-item-action-subtitle-destructive: #A09E9D;
2555
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #D4D3D2;
2442
2556
  --wds-list-item-action-subtitle-font-line-height: 16px;
2443
2557
  --wds-list-item-action-subtitle-font-size: 12px;
2444
2558
  --wds-list-item-action-subtitle-offset: 0px;
@@ -2523,6 +2637,7 @@
2523
2637
  --wds-loader-stroke-width-medium: 2px;
2524
2638
  --wds-loader-stroke-width-small: 2px;
2525
2639
  --wds-loader-stroke-width-tiny: 2px;
2640
+ --wds-marketing-layout-actions-alignment-inverted: auto;
2526
2641
  --wds-marketing-layout-actions-gap-medium: 24px;
2527
2642
  --wds-marketing-layout-actions-gap-small: 24px;
2528
2643
  --wds-marketing-layout-actions-gap-tiny: 24px;
@@ -2544,7 +2659,11 @@
2544
2659
  --wds-marketing-layout-description-line-height-medium: 16px;
2545
2660
  --wds-marketing-layout-description-line-height-small: 16px;
2546
2661
  --wds-marketing-layout-description-line-height-tiny: 16px;
2662
+ --wds-marketing-layout-description-max-width: none;
2663
+ --wds-marketing-layout-image-aspect-ratio: auto;
2547
2664
  --wds-marketing-layout-image-border-radius: 8px;
2665
+ --wds-marketing-layout-image-height: auto;
2666
+ --wds-marketing-layout-image-object-fit: fill;
2548
2667
  --wds-marketing-layout-image-padding-left-medium: 12px;
2549
2668
  --wds-marketing-layout-image-padding-left-small: 12px;
2550
2669
  --wds-marketing-layout-image-padding-left-tiny: 12px;
@@ -2554,6 +2673,13 @@
2554
2673
  --wds-marketing-layout-image-padding-vertical-medium: 12px;
2555
2674
  --wds-marketing-layout-image-padding-vertical-small: 12px;
2556
2675
  --wds-marketing-layout-image-padding-vertical-tiny: 12px;
2676
+ --wds-marketing-layout-image-width: 100%;
2677
+ --wds-marketing-layout-image-wrapper-contain: none;
2678
+ --wds-marketing-layout-image-wrapper-flex: 0 1 auto;
2679
+ --wds-marketing-layout-image-wrapper-width: auto;
2680
+ --wds-marketing-layout-min-height-medium: auto;
2681
+ --wds-marketing-layout-min-height-small: auto;
2682
+ --wds-marketing-layout-min-height-tiny: auto;
2557
2683
  --wds-marketing-layout-padding-left-medium: 20px;
2558
2684
  --wds-marketing-layout-padding-left-small: 8px;
2559
2685
  --wds-marketing-layout-padding-left-tiny: 8px;
@@ -2563,6 +2689,7 @@
2563
2689
  --wds-marketing-layout-padding-vertical-medium: 20px;
2564
2690
  --wds-marketing-layout-padding-vertical-small: 20px;
2565
2691
  --wds-marketing-layout-padding-vertical-tiny: 20px;
2692
+ --wds-marketing-layout-title-font-family-tiny: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2566
2693
  --wds-marketing-layout-title-font-size-medium: 16px;
2567
2694
  --wds-marketing-layout-title-font-size-small: 16px;
2568
2695
  --wds-marketing-layout-title-font-size-tiny: 16px;
@@ -2915,6 +3042,8 @@
2915
3042
  --wds-side-panel-title-font-letter-spacing: -0.5px;
2916
3043
  --wds-side-panel-title-font-line-height: 18px;
2917
3044
  --wds-side-panel-title-font-size: 14px;
3045
+ --wds-sidebar-border-inner-fill: transparent;
3046
+ --wds-sidebar-border-outer-fill: #666565;
2918
3047
  --wds-sidebar-clear-button-fill: #5a5d63;
2919
3048
  --wds-sidebar-divider-fill-dark-default: #42454c;
2920
3049
  --wds-sidebar-divider-fill-light-default: #666565;
@@ -2922,6 +3051,10 @@
2922
3051
  --wds-sidebar-divider-padding-bottom: 12px;
2923
3052
  --wds-sidebar-divider-padding-inline: 8px;
2924
3053
  --wds-sidebar-divider-padding-top: 12px;
3054
+ --wds-sidebar-fill-dark: #131720;
3055
+ --wds-sidebar-fill-light: #212122;
3056
+ --wds-sidebar-fill-neutral: #3A3A3B;
3057
+ --wds-sidebar-footer-fade-height: 0px;
2925
3058
  --wds-sidebar-header-margin-bottom: 12px;
2926
3059
  --wds-sidebar-header-text-dark-default: #FFFFFF;
2927
3060
  --wds-sidebar-item-content-gap: 8px;
@@ -3004,6 +3137,7 @@
3004
3137
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
3005
3138
  --wds-sidebar-scrollbar-fill-light-hover: rgba(255, 255, 255, 0.6600);
3006
3139
  --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
3140
+ --wds-sidebar-submenu-level-2-padding-bottom: 6px;
3007
3141
  --wds-skeleton-border-radius-circle: 1000px;
3008
3142
  --wds-skeleton-border-radius-line: 4px;
3009
3143
  --wds-skeleton-border-radius-rectangle: 4px;
@@ -3069,17 +3203,20 @@
3069
3203
  --wds-swatches-swatch-size-medium: 36px;
3070
3204
  --wds-swatches-swatch-size-small: 28px;
3071
3205
  --wds-swatches-swatch-size-tiny: 22px;
3206
+ --wds-table-action-cell-backdrop-opacity: 1;
3072
3207
  --wds-table-action-cell-primary-action-gap-medium: 8px;
3073
3208
  --wds-table-action-cell-primary-action-gap-small: 8px;
3074
3209
  --wds-table-action-cell-primary-action-gap-tiny: 8px;
3075
3210
  --wds-table-action-cell-secondary-action-gap-medium: 4px;
3076
3211
  --wds-table-action-cell-secondary-action-gap-small: 4px;
3077
3212
  --wds-table-action-cell-secondary-action-gap-tiny: 4px;
3213
+ --wds-table-cell-padding-inline: 8px;
3214
+ --wds-table-header-font-weight: 500;
3078
3215
  --wds-table-list-header-checkbox-padding-left: 0px;
3079
3216
  --wds-table-list-header-checkbox-padding-right: 14px;
3080
3217
  --wds-table-list-header-divider-fill-bottom: #454544;
3081
3218
  --wds-table-list-header-divider-fill-top: rgba(255, 255, 255, 0);
3082
- --wds-table-list-header-fill: rgba(255, 255, 255, 0);
3219
+ --wds-table-list-header-fill: #212122;
3083
3220
  --wds-table-list-header-icon-fill: #FFFFFF;
3084
3221
  --wds-table-list-header-min-height: 48px;
3085
3222
  --wds-table-list-header-option-gap: 16px;
@@ -3097,10 +3234,15 @@
3097
3234
  --wds-table-list-item-fill-highlight: #2D2D2E;
3098
3235
  --wds-table-list-item-fill-hover: #3A3A3B;
3099
3236
  --wds-table-list-item-fill-hover-draggable: #3A3A3B;
3237
+ --wds-table-list-item-fill-overlay: #212122;
3100
3238
  --wds-table-list-item-gap: 16px;
3101
3239
  --wds-table-list-item-indentation-level-2: 12px;
3102
3240
  --wds-table-list-item-indentation-level-3: 28px;
3103
3241
  --wds-table-list-item-paddings: 0px;
3242
+ --wds-table-region-divider-fill: rgba(255, 255, 255, 0);
3243
+ --wds-table-row-divider-fill: rgba(255, 255, 255, 0);
3244
+ --wds-table-sub-toolbar-padding-block-end: 16px;
3245
+ --wds-table-sub-toolbar-padding-block-start: 8px;
3104
3246
  --wds-table-toolbar-button-gap: 8px;
3105
3247
  --wds-table-toolbar-divider-gap: 16px;
3106
3248
  --wds-table-toolbar-divider-gap-group-start: 16px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -661,7 +661,7 @@
661
661
  --wds-color-fill-destructive-secondary-disabled: rgba(255, 255, 255, .1);
662
662
  --wds-color-fill-destructive-secondary-hover: #A6464B;
663
663
  --wds-color-fill-destructive-tertiary: #212122;
664
- --wds-color-fill-destructive-tertiary-active: #4D2324;
664
+ --wds-color-fill-destructive-tertiary-active: #A6464B;
665
665
  --wds-color-fill-destructive-tertiary-disabled: #212122;
666
666
  --wds-color-fill-destructive-tertiary-hover: #4D2324;
667
667
  --wds-color-fill-light-primary: #212122;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.223.0",
3
+ "version": "1.224.2",
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": "cbff62d2cad2c9b7d475dda22aa2324680af370c08bda027fb11f221"
39
+ "falconPackageHash": "8db8cc78669bfe18aa1b9ac93d2e875e1a99aaa357373643e44d08f3"
40
40
  }
package/studio/all.css CHANGED
@@ -337,6 +337,10 @@
337
337
  --wds-table-toolbar-divider-gap-group-start: 24px;
338
338
  --wds-table-toolbar-divider-gap: 12px;
339
339
  --wds-table-toolbar-button-gap: 6px;
340
+ --wds-table-action-cell-backdrop-opacity: 0;
341
+ --wds-table-sub-toolbar-padding-block-start: 9px;
342
+ --wds-table-sub-toolbar-padding-block-end: 9px;
343
+ --wds-table-cell-padding-inline: 12px;
340
344
  --wds-swatches-swatch-active-border-radius-small: 5px;
341
345
  --wds-swatches-swatch-active-border-radius-medium: 7px;
342
346
  --wds-status-toast-width: 600px;
@@ -351,6 +355,7 @@
351
355
  --wds-slider-slider-knob-shadow: false;
352
356
  --wds-slider-slider-knob-border-width-hover: 12px;
353
357
  --wds-slider-slider-knob-border-width: 4px;
358
+ --wds-sidebar-submenu-level-2-padding-bottom: 6px;
354
359
  --wds-sidebar-scrollbar-fill-neutral-hover: #A8CAFF;
355
360
  --wds-sidebar-scrollbar-fill-light-hover: rgba(19, 23, 32, 0.6600);
356
361
  --wds-sidebar-scrollbar-fill-dark-hover: #9c9ea6;
@@ -370,9 +375,11 @@
370
375
  --wds-sidebar-item-level-1-fill-dark-hover: #2B2E36;
371
376
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
372
377
  --wds-sidebar-item-level-1-fill-dark-active: #42454C;
378
+ --wds-sidebar-footer-fade-height: 0px;
373
379
  --wds-sidebar-divider-padding-bottom: 9px;
374
380
  --wds-sidebar-divider-fill-dark-default: #42454C;
375
381
  --wds-sidebar-clear-button-fill: #5a5d63;
382
+ --wds-sidebar-border-inner-fill: transparent;
376
383
  --wds-side-panel-standard-shadow: none;
377
384
  --wds-side-panel-standard-overflow: visible;
378
385
  --wds-side-panel-floating-max-height: 576px;
@@ -404,7 +411,18 @@
404
411
  --wds-marketing-page-footer-grid-column: span 12;
405
412
  --wds-marketing-page-footer-divider-display: block;
406
413
  --wds-marketing-layout-title-font-size-tiny: 20px;
414
+ --wds-marketing-layout-min-height-tiny: auto;
415
+ --wds-marketing-layout-min-height-small: auto;
416
+ --wds-marketing-layout-min-height-medium: auto;
417
+ --wds-marketing-layout-image-wrapper-width: auto;
418
+ --wds-marketing-layout-image-wrapper-flex: 0 1 auto;
419
+ --wds-marketing-layout-image-wrapper-contain: none;
420
+ --wds-marketing-layout-image-width: 100%;
421
+ --wds-marketing-layout-image-object-fit: fill;
422
+ --wds-marketing-layout-image-height: auto;
407
423
  --wds-marketing-layout-image-border-radius: 0px;
424
+ --wds-marketing-layout-image-aspect-ratio: auto;
425
+ --wds-marketing-layout-description-max-width: none;
408
426
  --wds-marketing-layout-badge-top: 9px;
409
427
  --wds-marketing-layout-badge-side: -3px;
410
428
  --wds-marketing-layout-badge-position: absolute;
@@ -412,6 +430,7 @@
412
430
  --wds-marketing-layout-badge-offset-small: 12px;
413
431
  --wds-marketing-layout-badge-offset-medium: 12px;
414
432
  --wds-marketing-layout-badge-gap: 0px;
433
+ --wds-marketing-layout-actions-alignment-inverted: auto;
415
434
  --wds-loader-stroke-width-tiny: 3px;
416
435
  --wds-loader-stroke-width-small: 4px;
417
436
  --wds-loader-stroke-width-medium: 4px;
@@ -458,6 +477,23 @@
458
477
  --wds-color-picker-width: 236px;
459
478
  --wds-circular-progress-bar-label-font-line-height: 18px;
460
479
  --wds-circular-progress-bar-border-width: 4px;
480
+ --wds-carousel-gradient-opacity: 50%;
481
+ --wds-carousel-dots-height: 4px;
482
+ --wds-carousel-dots-gap-bottom-shift: 0.5;
483
+ --wds-carousel-dots-gap-bottom: 10px;
484
+ --wds-carousel-dots-border-radius: 2px;
485
+ --wds-carousel-controls-shadow-hover: none;
486
+ --wds-carousel-controls-shadow-default: none;
487
+ --wds-carousel-controls-shadow-active: none;
488
+ --wds-carousel-controls-offset-sides-gradient: 12px;
489
+ --wds-carousel-controls-offset-sides: 0px;
490
+ --wds-carousel-controls-offset-overlay: 12px;
491
+ --wds-carousel-controls-offset-bottom-gradient: 12px;
492
+ --wds-carousel-controls-offset-bottom: 0px;
493
+ --wds-carousel-controls-bottom-shift: 0;
494
+ --wds-carousel-controls-bottom-offset-dots: 10px;
495
+ --wds-carousel-controls-border-disabled: solid 1px var(--wds-icon-button-color-border-standard-secondary-disabled);
496
+ --wds-carousel-controls-border: solid 1px var(--wds-icon-button-color-border-standard-secondary);
461
497
  --wds-card-gallery-item-title-gap: 0px;
462
498
  --wds-card-gallery-item-shadow-hover-side: 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12);
463
499
  --wds-card-gallery-item-overlay-backdrop-filter: none;
@@ -1081,6 +1117,7 @@
1081
1117
  --wds-table-list-item-indentation-level-3: var(--wds-space-700);
1082
1118
  --wds-table-list-item-indentation-level-2: var(--wds-space-300);
1083
1119
  --wds-table-list-item-gap: var(--wds-space-600);
1120
+ --wds-table-list-item-fill-overlay: var(--wds-color-blue-600);
1084
1121
  --wds-table-list-item-fill-hover-draggable: var(--wds-color-blue-500);
1085
1122
  --wds-table-list-item-fill-highlight: var(--wds-color-blue-600);
1086
1123
  --wds-table-list-item-controls-padding-medium: var(--wds-space-300);
@@ -1094,6 +1131,7 @@
1094
1131
  --wds-table-list-header-checkbox-padding-right: var(--wds-space-300);
1095
1132
  --wds-table-list-header-checkbox-padding-left: var(--wds-space-150);
1096
1133
  --wds-table-toolbar-padding-horizontal: var(--wds-space-600);
1134
+ --wds-table-header-font-weight: var(--wds-font-weight-regular);
1097
1135
  --wds-swatches-swatch-size-tiny: var(--wds-space-600);
1098
1136
  --wds-swatches-swatch-size-small: var(--wds-space-700);
1099
1137
  --wds-swatches-swatch-size-medium: var(--wds-space-800);
@@ -1186,6 +1224,7 @@
1186
1224
  --wds-sidebar-item-level-1-fill-light-active: var(--wds-color-blue-300);
1187
1225
  --wds-sidebar-item-content-gap: var(--wds-space-200);
1188
1226
  --wds-sidebar-header-margin-bottom: var(--wds-space-300);
1227
+ --wds-sidebar-fill-dark: var(--wds-sidebar-item-level-1-fill-dark-default);
1189
1228
  --wds-sidebar-divider-padding-top: var(--wds-space-200);
1190
1229
  --wds-sidebar-divider-padding-inline: var(--wds-space-500);
1191
1230
  --wds-sidebar-divider-fill-neutral-default: var(--wds-color-black-550);
@@ -1391,6 +1430,7 @@
1391
1430
  --wds-marketing-layout-title-gap-small: var(--wds-space-100);
1392
1431
  --wds-marketing-layout-title-gap-medium: var(--wds-space-200);
1393
1432
  --wds-marketing-layout-title-font-weight-tiny: var(--wds-font-weight-bold);
1433
+ --wds-marketing-layout-title-font-family-tiny: var(--wds-font-family-default);
1394
1434
  --wds-marketing-layout-padding-vertical-tiny: var(--wds-space-500);
1395
1435
  --wds-marketing-layout-padding-vertical-small: var(--wds-space-600);
1396
1436
  --wds-marketing-layout-padding-vertical-medium: var(--wds-space-600);
@@ -1638,7 +1678,18 @@
1638
1678
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1639
1679
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
1640
1680
  --wds-checkbox-border-active-disabled: var(--wds-color-black-100-transparent-0);
1681
+ --wds-carousel-gradient-color: var(--wds-color-white);
1641
1682
  --wds-carousel-dots-width: var(--wds-space-300);
1683
+ --wds-carousel-dots-gap: var(--wds-space-400);
1684
+ --wds-carousel-dots-fill-hover: var(--wds-color-blue-200);
1685
+ --wds-carousel-dots-fill-active: var(--wds-color-blue-0);
1686
+ --wds-carousel-dots-fill: var(--wds-color-blue-300);
1687
+ --wds-carousel-controls-gap-tiny: var(--wds-space-400);
1688
+ --wds-carousel-controls-gap-small: var(--wds-space-300);
1689
+ --wds-carousel-controls-gap-medium: var(--wds-space-200);
1690
+ --wds-carousel-controls-gap-large: var(--wds-space-200);
1691
+ --wds-carousel-controls-bottom-offset-no-dots: var(--wds-carousel-dots-height);
1692
+ --wds-carousel-controls-border-radius: var(--wds-border-radius-200);
1642
1693
  --wds-card-gallery-item-title-font-weight-small: var(--wds-font-weight-medium);
1643
1694
  --wds-card-gallery-item-title-font-weight-medium: var(--wds-font-weight-medium);
1644
1695
  --wds-card-gallery-item-title-font-letter-spacing: var(--wds-font-letter-spacing-0);
@@ -1669,6 +1720,8 @@
1669
1720
  --wds-card-header-padding-vertical: var(--wds-space-400);
1670
1721
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1671
1722
  --wds-card-header-divider-width: var(--wds-border-width-none);
1723
+ --wds-card-controls-padding-vertical: var(--wds-space-400);
1724
+ --wds-card-controls-padding-horizontal: var(--wds-space-600);
1672
1725
  --wds-card-content-paddings-vertical: var(--wds-space-600);
1673
1726
  --wds-card-content-paddings-horizontal: var(--wds-space-600);
1674
1727
  --wds-card-content-padding-medium-top: var(--wds-space-600);
@@ -1928,6 +1981,8 @@
1928
1981
  --wds-table-list-header-fill: var(--wds-color-fill-surface-standard);
1929
1982
  --wds-table-list-header-divider-fill-top: var(--wds-color-border-standard-primary);
1930
1983
  --wds-table-list-header-divider-fill-bottom: var(--wds-color-border-standard-primary);
1984
+ --wds-table-row-divider-fill: var(--wds-color-border-dark-secondary);
1985
+ --wds-table-region-divider-fill: var(--wds-color-border-dark-secondary);
1931
1986
  --wds-swatches-fill-border-selected: var(--wds-color-border-standard-secondary-active);
1932
1987
  --wds-swatches-fill-border-no-value-dash: var(--wds-color-fill-destructive-primary);
1933
1988
  --wds-swatches-fill-border-no-value: var(--wds-color-border-standard-secondary);
@@ -1943,6 +1998,9 @@
1943
1998
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1944
1999
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1945
2000
  --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
2001
+ --wds-sidebar-fill-neutral: var(--wds-sidebar-item-level-1-fill-neutral-default);
2002
+ --wds-sidebar-fill-light: var(--wds-sidebar-item-level-1-fill-light-default);
2003
+ --wds-sidebar-border-outer-fill: var(--wds-sidebar-divider-fill-light-default);
1946
2004
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1947
2005
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1948
2006
  --wds-side-panel-subtitle-fill: var(--wds-color-text-standard-secondary);
@@ -2094,6 +2152,7 @@
2094
2152
  --wds-input-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
2095
2153
  --wds-input-border-color: var(--wds-color-border-standard-secondary);
2096
2154
  --wds-input-background-fill-readonly: var(--wds-color-fill-standard-tertiary-readonly);
2155
+ --wds-input-background-fill-on-stage: var(--wds-color-fill-dark-secondary);
2097
2156
  --wds-input-background-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2098
2157
  --wds-input-background-fill-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2099
2158
  --wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
@@ -2250,7 +2309,14 @@
2250
2309
  --wds-checkbox-border-disabled: var(--wds-color-border-dark-primary-disabled);
2251
2310
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
2252
2311
  --wds-checkbox-border: var(--wds-color-border-dark-primary);
2312
+ --wds-carousel-gradient-width: var(--wds-button-size-medium);
2313
+ --wds-carousel-controls-size-tiny: var(--wds-button-size-tiny);
2314
+ --wds-carousel-controls-size-small: var(--wds-button-size-small);
2315
+ --wds-carousel-controls-size-medium: var(--wds-button-size-medium);
2316
+ --wds-carousel-controls-size-large: var(--wds-button-size-large);
2317
+ --wds-carousel-controls-shadow-disabled: var(--wds-shadow-300);
2253
2318
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
2319
+ --wds-carousel-controls-icon-fill-disabled: var(--wds-icon-button-color-text-standard-secondary-disabled);
2254
2320
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
2255
2321
  --wds-card-gallery-item-title-font-heading-weight-medium: var(--wds-font-weight-heading-4);
2256
2322
  --wds-card-gallery-item-title-font-heading-letter-spacing-medium: var(--wds-font-letter-spacing-heading-4);
@@ -2455,6 +2521,11 @@
2455
2521
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2456
2522
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2457
2523
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2524
+ --wds-carousel-controls-icon-fill-hover: var(--wds-icon-button-color-text-standard-secondary-hover);
2525
+ --wds-carousel-controls-icon-fill-active: var(--wds-icon-button-color-text-standard-secondary-active);
2526
+ --wds-carousel-controls-icon-fill: var(--wds-icon-button-color-text-standard-secondary);
2527
+ --wds-carousel-controls-fill-hover: var(--wds-icon-button-color-fill-standard-secondary-hover);
2528
+ --wds-carousel-controls-fill-active: var(--wds-icon-button-color-fill-standard-secondary-active);
2458
2529
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2459
2530
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2460
2531
  --wds-card-gallery-item-subtitle-line-height-medium: var(--wds-font-line-height-body-small);