@wix/design-system-tokens 1.219.1 → 1.219.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 (22) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/all.css +14 -2
  3. package/all.scss +14 -2
  4. package/all.st.css +26 -2
  5. package/component.st.css +26 -2
  6. package/odeditor/all.css +17 -5
  7. package/odeditor/all.scss +17 -5
  8. package/odeditor/all.st.css +29 -5
  9. package/odeditor/component.st.css +29 -5
  10. package/odeditor-dark/all.css +24 -12
  11. package/odeditor-dark/all.scss +24 -12
  12. package/odeditor-dark/all.st.css +36 -12
  13. package/odeditor-dark/component.st.css +36 -12
  14. package/package.json +2 -2
  15. package/studio/all.css +14 -2
  16. package/studio/all.scss +14 -2
  17. package/studio/all.st.css +26 -2
  18. package/studio/component.st.css +26 -2
  19. package/wixel/all.css +14 -2
  20. package/wixel/all.scss +14 -2
  21. package/wixel/all.st.css +26 -2
  22. package/wixel/component.st.css +26 -2
package/odeditor-dark/all.st.css CHANGED
@@ -179,6 +179,7 @@
179
179
  @property st-global(--wds-breakpoint-medium);
180
180
  @property st-global(--wds-breakpoint-small);
181
181
  @property st-global(--wds-breakpoint-x-large);
182
+ @property st-global(--wds-button-border-ai-secondary-mask);
182
183
  @property st-global(--wds-button-border-dark-secondary);
183
184
  @property st-global(--wds-button-border-dark-secondary-active);
184
185
  @property st-global(--wds-button-border-dark-secondary-disabled);
@@ -203,6 +204,7 @@
203
204
  @property st-global(--wds-button-fill-ai-primary);
204
205
  @property st-global(--wds-button-fill-ai-primary-active);
205
206
  @property st-global(--wds-button-fill-ai-primary-hover);
207
+ @property st-global(--wds-button-fill-ai-secondary);
206
208
  @property st-global(--wds-button-fill-dark-primary-disabled);
207
209
  @property st-global(--wds-button-fill-dark-secondary);
208
210
  @property st-global(--wds-button-fill-dark-secondary-active);
@@ -937,6 +939,7 @@
937
939
  @property st-global(--wds-dropdown-list-paddings);
938
940
  @property st-global(--wds-editable-title-marker-fill);
939
941
  @property st-global(--wds-editable-title-marker-fill-active);
942
+ @property st-global(--wds-editable-title-marker-gap);
940
943
  @property st-global(--wds-editable-title-marker-line-style);
941
944
  @property st-global(--wds-editable-title-placeholder-fill);
942
945
  @property st-global(--wds-empty-state-border-radius);
@@ -1337,8 +1340,10 @@
1337
1340
  @property st-global(--wds-list-item-select-subtitle-disabled);
1338
1341
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
1339
1342
  @property st-global(--wds-list-item-select-subtitle-font-size-medium);
1343
+ @property st-global(--wds-list-item-select-subtitle-font-weight-medium);
1340
1344
  @property st-global(--wds-list-item-select-suffix);
1341
1345
  @property st-global(--wds-list-item-select-suffix-active-font-weight);
1346
+ @property st-global(--wds-list-item-select-suffix-font-line-height-small);
1342
1347
  @property st-global(--wds-list-item-select-suffix-pressed);
1343
1348
  @property st-global(--wds-list-item-select-title);
1344
1349
  @property st-global(--wds-list-item-select-title-disabled);
@@ -1444,15 +1449,21 @@
1444
1449
  @property st-global(--wds-padding-vertical-small);
1445
1450
  @property st-global(--wds-padding-vertical-tiny);
1446
1451
  @property st-global(--wds-page-header-back-button-gap);
1452
+ @property st-global(--wds-page-header-breadcrumbs-color);
1453
+ @property st-global(--wds-page-header-breadcrumbs-font-size);
1447
1454
  @property st-global(--wds-page-header-breadcrumbs-offset-large);
1448
1455
  @property st-global(--wds-page-header-breadcrumbs-offset-medium);
1449
1456
  @property st-global(--wds-page-header-breadcrumbs-offset-small);
1457
+ @property st-global(--wds-page-header-breadcrumbs-selected-font-weight);
1458
+ @property st-global(--wds-page-header-divider-color);
1450
1459
  @property st-global(--wds-page-header-padding-horizontal);
1451
1460
  @property st-global(--wds-page-header-padding-horizontal-small);
1452
1461
  @property st-global(--wds-page-header-padding-vertical);
1453
1462
  @property st-global(--wds-page-header-padding-vertical-small);
1454
1463
  @property st-global(--wds-page-header-subtitle-font-size);
1464
+ @property st-global(--wds-page-header-subtitle-gap);
1455
1465
  @property st-global(--wds-page-header-subtitle-line-height);
1466
+ @property st-global(--wds-page-header-subtitle-padding-start);
1456
1467
  @property st-global(--wds-page-header-title-actions-gap);
1457
1468
  @property st-global(--wds-page-header-title-font-size);
1458
1469
  @property st-global(--wds-page-header-title-font-weight);
@@ -1604,6 +1615,7 @@
1604
1615
  @property st-global(--wds-select-area-fill-hover);
1605
1616
  @property st-global(--wds-select-area-padding-horizontal);
1606
1617
  @property st-global(--wds-select-area-padding-vertical);
1618
+ @property st-global(--wds-selectable-accordion-fill);
1607
1619
  @property st-global(--wds-selector-button-border-color);
1608
1620
  @property st-global(--wds-selector-button-border-color-disabled);
1609
1621
  @property st-global(--wds-selector-button-border-color-hover);
@@ -2474,6 +2486,7 @@
2474
2486
  --wds-breakpoint-medium: 768px;
2475
2487
  --wds-breakpoint-small: 490px;
2476
2488
  --wds-breakpoint-x-large: 1572px;
2489
+ --wds-button-border-ai-secondary-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
2477
2490
  --wds-button-border-dark-secondary: #A09E9D;
2478
2491
  --wds-button-border-dark-secondary-active: #666565;
2479
2492
  --wds-button-border-dark-secondary-disabled: #3A3A3B;
@@ -2498,6 +2511,7 @@
2498
2511
  --wds-button-fill-ai-primary: #3C67FF;
2499
2512
  --wds-button-fill-ai-primary-active: #82B0FF;
2500
2513
  --wds-button-fill-ai-primary-hover: #6F94D4;
2514
+ --wds-button-fill-ai-secondary: rgba(0, 0, 0, 0);
2501
2515
  --wds-button-fill-dark-primary-disabled: #3A3A3B;
2502
2516
  --wds-button-fill-dark-secondary: rgba(0, 0, 0, 0);
2503
2517
  --wds-button-fill-dark-secondary-active: #666565;
@@ -3232,6 +3246,7 @@
3232
3246
  --wds-dropdown-list-paddings: 8px;
3233
3247
  --wds-editable-title-marker-fill: #A09E9D;
3234
3248
  --wds-editable-title-marker-fill-active: #82B0FF;
3249
+ --wds-editable-title-marker-gap: 4px;
3235
3250
  --wds-editable-title-marker-line-style: dashed;
3236
3251
  --wds-editable-title-placeholder-fill: #666565;
3237
3252
  --wds-empty-state-border-radius: 4px;
@@ -3616,13 +3631,13 @@
3616
3631
  --wds-list-item-select-label-font-size-small: 12px;
3617
3632
  --wds-list-item-select-label-font-weight-active: 500;
3618
3633
  --wds-list-item-select-label-font-weight-medium: 500;
3619
- --wds-list-item-select-min-height-medium: 52px;
3634
+ --wds-list-item-select-min-height-medium: auto;
3620
3635
  --wds-list-item-select-padding-horizontal-medium: 12px;
3621
3636
  --wds-list-item-select-padding-horizontal-small: 12px;
3622
3637
  --wds-list-item-select-padding-left-medium: 12px;
3623
3638
  --wds-list-item-select-padding-left-small: 12px;
3624
- --wds-list-item-select-padding-right-medium: 16px;
3625
- --wds-list-item-select-padding-right-small: 16px;
3639
+ --wds-list-item-select-padding-right-medium: 12px;
3640
+ --wds-list-item-select-padding-right-small: 12px;
3626
3641
  --wds-list-item-select-padding-vertical-medium: 8px;
3627
3642
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
3628
3643
  --wds-list-item-select-padding-vertical-small: 8px;
@@ -3632,8 +3647,10 @@
3632
3647
  --wds-list-item-select-subtitle-disabled: #878685;
3633
3648
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
3634
3649
  --wds-list-item-select-subtitle-font-size-medium: 12px;
3650
+ --wds-list-item-select-subtitle-font-weight-medium: 400;
3635
3651
  --wds-list-item-select-suffix: #FFFFFF;
3636
3652
  --wds-list-item-select-suffix-active-font-weight: 500;
3653
+ --wds-list-item-select-suffix-font-line-height-small: 16px;
3637
3654
  --wds-list-item-select-suffix-pressed: #B1CCFF;
3638
3655
  --wds-list-item-select-title: #FFFFFF;
3639
3656
  --wds-list-item-select-title-disabled: #878685;
@@ -3739,15 +3756,21 @@
3739
3756
  --wds-padding-vertical-small: 24px;
3740
3757
  --wds-padding-vertical-tiny: 20px;
3741
3758
  --wds-page-header-back-button-gap: 8px;
3759
+ --wds-page-header-breadcrumbs-color: #A8A6A5;
3760
+ --wds-page-header-breadcrumbs-font-size: 12px;
3742
3761
  --wds-page-header-breadcrumbs-offset-large: 0px;
3743
3762
  --wds-page-header-breadcrumbs-offset-medium: 0px;
3744
3763
  --wds-page-header-breadcrumbs-offset-small: 0px;
3764
+ --wds-page-header-breadcrumbs-selected-font-weight: 500;
3765
+ --wds-page-header-divider-color: transparent;
3745
3766
  --wds-page-header-padding-horizontal: 48px;
3746
3767
  --wds-page-header-padding-horizontal-small: 24px;
3747
3768
  --wds-page-header-padding-vertical: 24px;
3748
3769
  --wds-page-header-padding-vertical-small: 18px;
3749
3770
  --wds-page-header-subtitle-font-size: 16px;
3771
+ --wds-page-header-subtitle-gap: 4px;
3750
3772
  --wds-page-header-subtitle-line-height: 24px;
3773
+ --wds-page-header-subtitle-padding-start: 4px;
3751
3774
  --wds-page-header-title-actions-gap: 0px;
3752
3775
  --wds-page-header-title-font-size: 32px;
3753
3776
  --wds-page-header-title-font-weight: 400;
@@ -3818,9 +3841,9 @@
3818
3841
  --wds-search-expandable-padding-medium: 7px;
3819
3842
  --wds-search-expandable-padding-small: 6px;
3820
3843
  --wds-section-header-border-light: #5B78A9;
3821
- --wds-section-header-fill-light: #212122;
3822
- --wds-section-header-fill-neutral: #212122;
3823
- --wds-section-header-fill-standard: #212122;
3844
+ --wds-section-header-fill-light: rgba(0, 0, 0, 0);
3845
+ --wds-section-header-fill-neutral: rgba(0, 0, 0, 0);
3846
+ --wds-section-header-fill-standard: rgba(0, 0, 0, 0);
3824
3847
  --wds-section-header-font-weight: 600;
3825
3848
  --wds-section-header-label-fill-neutral: #A09E9D;
3826
3849
  --wds-section-header-label-font-size-medium: 14px;
@@ -3899,6 +3922,7 @@
3899
3922
  --wds-select-area-fill-hover: #3A3A3B;
3900
3923
  --wds-select-area-padding-horizontal: 16px;
3901
3924
  --wds-select-area-padding-vertical: 12px;
3925
+ --wds-selectable-accordion-fill: rgba(0, 0, 0, 0);
3902
3926
  --wds-selector-button-border-color: rgba(255, 255, 255, 0);
3903
3927
  --wds-selector-button-border-color-disabled: rgba(255, 255, 255, 0);
3904
3928
  --wds-selector-button-border-color-hover: #5B78A9;
@@ -4536,27 +4560,27 @@
4536
4560
  --wds-vertical-tabs-icon-padding-vertical-medium: 8px;
4537
4561
  --wds-vertical-tabs-icon-padding-vertical-small: 8px;
4538
4562
  --wds-vertical-tabs-item-active-title-text-disabled: #878685;
4539
- --wds-vertical-tabs-item-fill-light: #212122;
4563
+ --wds-vertical-tabs-item-fill-light: rgba(0, 0, 0, 0);
4540
4564
  --wds-vertical-tabs-item-fill-light-active: #2D2D2E;
4541
4565
  --wds-vertical-tabs-item-fill-light-disabled: #212122;
4542
4566
  --wds-vertical-tabs-item-fill-light-hover: #3A3A3B;
4543
- --wds-vertical-tabs-item-fill-light-premium: #212122;
4567
+ --wds-vertical-tabs-item-fill-light-premium: rgba(0, 0, 0, 0);
4544
4568
  --wds-vertical-tabs-item-fill-light-premium-active: #2D354E;
4545
4569
  --wds-vertical-tabs-item-fill-light-premium-disabled: #212122;
4546
4570
  --wds-vertical-tabs-item-fill-light-premium-hover: #212328;
4547
- --wds-vertical-tabs-item-fill-neutral: #2D2D2E;
4571
+ --wds-vertical-tabs-item-fill-neutral: rgba(0, 0, 0, 0);
4548
4572
  --wds-vertical-tabs-item-fill-neutral-active: #2D2D2E;
4549
4573
  --wds-vertical-tabs-item-fill-neutral-disabled: #2D2D2E;
4550
4574
  --wds-vertical-tabs-item-fill-neutral-hover: #454544;
4551
- --wds-vertical-tabs-item-fill-neutral-premium: #2D2D2E;
4575
+ --wds-vertical-tabs-item-fill-neutral-premium: rgba(0, 0, 0, 0);
4552
4576
  --wds-vertical-tabs-item-fill-neutral-premium-active: #2D354E;
4553
4577
  --wds-vertical-tabs-item-fill-neutral-premium-disabled: #2D2D2E;
4554
4578
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #212328;
4555
- --wds-vertical-tabs-item-fill-standard: #212122;
4579
+ --wds-vertical-tabs-item-fill-standard: rgba(0, 0, 0, 0);
4556
4580
  --wds-vertical-tabs-item-fill-standard-active: #2D2D2E;
4557
4581
  --wds-vertical-tabs-item-fill-standard-disabled: #212122;
4558
4582
  --wds-vertical-tabs-item-fill-standard-hover: #3A3A3B;
4559
- --wds-vertical-tabs-item-fill-standard-premium: #212122;
4583
+ --wds-vertical-tabs-item-fill-standard-premium: rgba(0, 0, 0, 0);
4560
4584
  --wds-vertical-tabs-item-fill-standard-premium-active: #2D354E;
4561
4585
  --wds-vertical-tabs-item-fill-standard-premium-disabled: #212328;
4562
4586
  --wds-vertical-tabs-item-fill-standard-premium-hover: #212328;
package/odeditor-dark/component.st.css CHANGED
@@ -138,6 +138,7 @@
138
138
  @property st-global(--wds-breadcrumbs-text-line-height-small);
139
139
  @property st-global(--wds-breadcrumbs-text-weight-default);
140
140
  @property st-global(--wds-breadcrumbs-text-weight-selected);
141
+ @property st-global(--wds-button-border-ai-secondary-mask);
141
142
  @property st-global(--wds-button-border-dark-secondary);
142
143
  @property st-global(--wds-button-border-dark-secondary-active);
143
144
  @property st-global(--wds-button-border-dark-secondary-disabled);
@@ -162,6 +163,7 @@
162
163
  @property st-global(--wds-button-fill-ai-primary);
163
164
  @property st-global(--wds-button-fill-ai-primary-active);
164
165
  @property st-global(--wds-button-fill-ai-primary-hover);
166
+ @property st-global(--wds-button-fill-ai-secondary);
165
167
  @property st-global(--wds-button-fill-dark-primary-disabled);
166
168
  @property st-global(--wds-button-fill-dark-secondary);
167
169
  @property st-global(--wds-button-fill-dark-secondary-active);
@@ -428,6 +430,7 @@
428
430
  @property st-global(--wds-dropdown-list-paddings);
429
431
  @property st-global(--wds-editable-title-marker-fill);
430
432
  @property st-global(--wds-editable-title-marker-fill-active);
433
+ @property st-global(--wds-editable-title-marker-gap);
431
434
  @property st-global(--wds-editable-title-marker-line-style);
432
435
  @property st-global(--wds-editable-title-placeholder-fill);
433
436
  @property st-global(--wds-empty-state-border-radius);
@@ -746,8 +749,10 @@
746
749
  @property st-global(--wds-list-item-select-subtitle-disabled);
747
750
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
748
751
  @property st-global(--wds-list-item-select-subtitle-font-size-medium);
752
+ @property st-global(--wds-list-item-select-subtitle-font-weight-medium);
749
753
  @property st-global(--wds-list-item-select-suffix);
750
754
  @property st-global(--wds-list-item-select-suffix-active-font-weight);
755
+ @property st-global(--wds-list-item-select-suffix-font-line-height-small);
751
756
  @property st-global(--wds-list-item-select-suffix-pressed);
752
757
  @property st-global(--wds-list-item-select-title);
753
758
  @property st-global(--wds-list-item-select-title-disabled);
@@ -853,15 +858,21 @@
853
858
  @property st-global(--wds-padding-vertical-small);
854
859
  @property st-global(--wds-padding-vertical-tiny);
855
860
  @property st-global(--wds-page-header-back-button-gap);
861
+ @property st-global(--wds-page-header-breadcrumbs-color);
862
+ @property st-global(--wds-page-header-breadcrumbs-font-size);
856
863
  @property st-global(--wds-page-header-breadcrumbs-offset-large);
857
864
  @property st-global(--wds-page-header-breadcrumbs-offset-medium);
858
865
  @property st-global(--wds-page-header-breadcrumbs-offset-small);
866
+ @property st-global(--wds-page-header-breadcrumbs-selected-font-weight);
867
+ @property st-global(--wds-page-header-divider-color);
859
868
  @property st-global(--wds-page-header-padding-horizontal);
860
869
  @property st-global(--wds-page-header-padding-horizontal-small);
861
870
  @property st-global(--wds-page-header-padding-vertical);
862
871
  @property st-global(--wds-page-header-padding-vertical-small);
863
872
  @property st-global(--wds-page-header-subtitle-font-size);
873
+ @property st-global(--wds-page-header-subtitle-gap);
864
874
  @property st-global(--wds-page-header-subtitle-line-height);
875
+ @property st-global(--wds-page-header-subtitle-padding-start);
865
876
  @property st-global(--wds-page-header-title-actions-gap);
866
877
  @property st-global(--wds-page-header-title-font-size);
867
878
  @property st-global(--wds-page-header-title-font-weight);
@@ -1013,6 +1024,7 @@
1013
1024
  @property st-global(--wds-select-area-fill-hover);
1014
1025
  @property st-global(--wds-select-area-padding-horizontal);
1015
1026
  @property st-global(--wds-select-area-padding-vertical);
1027
+ @property st-global(--wds-selectable-accordion-fill);
1016
1028
  @property st-global(--wds-selector-button-border-color);
1017
1029
  @property st-global(--wds-selector-button-border-color-disabled);
1018
1030
  @property st-global(--wds-selector-button-border-color-hover);
@@ -1685,6 +1697,7 @@
1685
1697
  --wds-breadcrumbs-text-line-height-small: 16px;
1686
1698
  --wds-breadcrumbs-text-weight-default: 400;
1687
1699
  --wds-breadcrumbs-text-weight-selected: 600;
1700
+ --wds-button-border-ai-secondary-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
1688
1701
  --wds-button-border-dark-secondary: #A09E9D;
1689
1702
  --wds-button-border-dark-secondary-active: #666565;
1690
1703
  --wds-button-border-dark-secondary-disabled: #3A3A3B;
@@ -1709,6 +1722,7 @@
1709
1722
  --wds-button-fill-ai-primary: #3C67FF;
1710
1723
  --wds-button-fill-ai-primary-active: #82B0FF;
1711
1724
  --wds-button-fill-ai-primary-hover: #6F94D4;
1725
+ --wds-button-fill-ai-secondary: rgba(0, 0, 0, 0);
1712
1726
  --wds-button-fill-dark-primary-disabled: #3A3A3B;
1713
1727
  --wds-button-fill-dark-secondary: rgba(0, 0, 0, 0);
1714
1728
  --wds-button-fill-dark-secondary-active: #666565;
@@ -1975,6 +1989,7 @@
1975
1989
  --wds-dropdown-list-paddings: 8px;
1976
1990
  --wds-editable-title-marker-fill: #A09E9D;
1977
1991
  --wds-editable-title-marker-fill-active: #82B0FF;
1992
+ --wds-editable-title-marker-gap: 4px;
1978
1993
  --wds-editable-title-marker-line-style: dashed;
1979
1994
  --wds-editable-title-placeholder-fill: #666565;
1980
1995
  --wds-empty-state-border-radius: 4px;
@@ -2277,13 +2292,13 @@
2277
2292
  --wds-list-item-select-label-font-size-small: 12px;
2278
2293
  --wds-list-item-select-label-font-weight-active: 500;
2279
2294
  --wds-list-item-select-label-font-weight-medium: 500;
2280
- --wds-list-item-select-min-height-medium: 52px;
2295
+ --wds-list-item-select-min-height-medium: auto;
2281
2296
  --wds-list-item-select-padding-horizontal-medium: 12px;
2282
2297
  --wds-list-item-select-padding-horizontal-small: 12px;
2283
2298
  --wds-list-item-select-padding-left-medium: 12px;
2284
2299
  --wds-list-item-select-padding-left-small: 12px;
2285
- --wds-list-item-select-padding-right-medium: 16px;
2286
- --wds-list-item-select-padding-right-small: 16px;
2300
+ --wds-list-item-select-padding-right-medium: 12px;
2301
+ --wds-list-item-select-padding-right-small: 12px;
2287
2302
  --wds-list-item-select-padding-vertical-medium: 8px;
2288
2303
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
2289
2304
  --wds-list-item-select-padding-vertical-small: 8px;
@@ -2293,8 +2308,10 @@
2293
2308
  --wds-list-item-select-subtitle-disabled: #878685;
2294
2309
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
2295
2310
  --wds-list-item-select-subtitle-font-size-medium: 12px;
2311
+ --wds-list-item-select-subtitle-font-weight-medium: 400;
2296
2312
  --wds-list-item-select-suffix: #FFFFFF;
2297
2313
  --wds-list-item-select-suffix-active-font-weight: 500;
2314
+ --wds-list-item-select-suffix-font-line-height-small: 16px;
2298
2315
  --wds-list-item-select-suffix-pressed: #B1CCFF;
2299
2316
  --wds-list-item-select-title: #FFFFFF;
2300
2317
  --wds-list-item-select-title-disabled: #878685;
@@ -2400,15 +2417,21 @@
2400
2417
  --wds-padding-vertical-small: 24px;
2401
2418
  --wds-padding-vertical-tiny: 20px;
2402
2419
  --wds-page-header-back-button-gap: 8px;
2420
+ --wds-page-header-breadcrumbs-color: #A8A6A5;
2421
+ --wds-page-header-breadcrumbs-font-size: 12px;
2403
2422
  --wds-page-header-breadcrumbs-offset-large: 0px;
2404
2423
  --wds-page-header-breadcrumbs-offset-medium: 0px;
2405
2424
  --wds-page-header-breadcrumbs-offset-small: 0px;
2425
+ --wds-page-header-breadcrumbs-selected-font-weight: 500;
2426
+ --wds-page-header-divider-color: transparent;
2406
2427
  --wds-page-header-padding-horizontal: 48px;
2407
2428
  --wds-page-header-padding-horizontal-small: 24px;
2408
2429
  --wds-page-header-padding-vertical: 24px;
2409
2430
  --wds-page-header-padding-vertical-small: 18px;
2410
2431
  --wds-page-header-subtitle-font-size: 16px;
2432
+ --wds-page-header-subtitle-gap: 4px;
2411
2433
  --wds-page-header-subtitle-line-height: 24px;
2434
+ --wds-page-header-subtitle-padding-start: 4px;
2412
2435
  --wds-page-header-title-actions-gap: 0px;
2413
2436
  --wds-page-header-title-font-size: 32px;
2414
2437
  --wds-page-header-title-font-weight: 400;
@@ -2479,9 +2502,9 @@
2479
2502
  --wds-search-expandable-padding-medium: 7px;
2480
2503
  --wds-search-expandable-padding-small: 6px;
2481
2504
  --wds-section-header-border-light: #5B78A9;
2482
- --wds-section-header-fill-light: #212122;
2483
- --wds-section-header-fill-neutral: #212122;
2484
- --wds-section-header-fill-standard: #212122;
2505
+ --wds-section-header-fill-light: rgba(0, 0, 0, 0);
2506
+ --wds-section-header-fill-neutral: rgba(0, 0, 0, 0);
2507
+ --wds-section-header-fill-standard: rgba(0, 0, 0, 0);
2485
2508
  --wds-section-header-font-weight: 600;
2486
2509
  --wds-section-header-label-fill-neutral: #A09E9D;
2487
2510
  --wds-section-header-label-font-size-medium: 14px;
@@ -2560,6 +2583,7 @@
2560
2583
  --wds-select-area-fill-hover: #3A3A3B;
2561
2584
  --wds-select-area-padding-horizontal: 16px;
2562
2585
  --wds-select-area-padding-vertical: 12px;
2586
+ --wds-selectable-accordion-fill: rgba(0, 0, 0, 0);
2563
2587
  --wds-selector-button-border-color: rgba(255, 255, 255, 0);
2564
2588
  --wds-selector-button-border-color-disabled: rgba(255, 255, 255, 0);
2565
2589
  --wds-selector-button-border-color-hover: #5B78A9;
@@ -3042,27 +3066,27 @@
3042
3066
  --wds-vertical-tabs-icon-padding-vertical-medium: 8px;
3043
3067
  --wds-vertical-tabs-icon-padding-vertical-small: 8px;
3044
3068
  --wds-vertical-tabs-item-active-title-text-disabled: #878685;
3045
- --wds-vertical-tabs-item-fill-light: #212122;
3069
+ --wds-vertical-tabs-item-fill-light: rgba(0, 0, 0, 0);
3046
3070
  --wds-vertical-tabs-item-fill-light-active: #2D2D2E;
3047
3071
  --wds-vertical-tabs-item-fill-light-disabled: #212122;
3048
3072
  --wds-vertical-tabs-item-fill-light-hover: #3A3A3B;
3049
- --wds-vertical-tabs-item-fill-light-premium: #212122;
3073
+ --wds-vertical-tabs-item-fill-light-premium: rgba(0, 0, 0, 0);
3050
3074
  --wds-vertical-tabs-item-fill-light-premium-active: #2D354E;
3051
3075
  --wds-vertical-tabs-item-fill-light-premium-disabled: #212122;
3052
3076
  --wds-vertical-tabs-item-fill-light-premium-hover: #212328;
3053
- --wds-vertical-tabs-item-fill-neutral: #2D2D2E;
3077
+ --wds-vertical-tabs-item-fill-neutral: rgba(0, 0, 0, 0);
3054
3078
  --wds-vertical-tabs-item-fill-neutral-active: #2D2D2E;
3055
3079
  --wds-vertical-tabs-item-fill-neutral-disabled: #2D2D2E;
3056
3080
  --wds-vertical-tabs-item-fill-neutral-hover: #454544;
3057
- --wds-vertical-tabs-item-fill-neutral-premium: #2D2D2E;
3081
+ --wds-vertical-tabs-item-fill-neutral-premium: rgba(0, 0, 0, 0);
3058
3082
  --wds-vertical-tabs-item-fill-neutral-premium-active: #2D354E;
3059
3083
  --wds-vertical-tabs-item-fill-neutral-premium-disabled: #2D2D2E;
3060
3084
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #212328;
3061
- --wds-vertical-tabs-item-fill-standard: #212122;
3085
+ --wds-vertical-tabs-item-fill-standard: rgba(0, 0, 0, 0);
3062
3086
  --wds-vertical-tabs-item-fill-standard-active: #2D2D2E;
3063
3087
  --wds-vertical-tabs-item-fill-standard-disabled: #212122;
3064
3088
  --wds-vertical-tabs-item-fill-standard-hover: #3A3A3B;
3065
- --wds-vertical-tabs-item-fill-standard-premium: #212122;
3089
+ --wds-vertical-tabs-item-fill-standard-premium: rgba(0, 0, 0, 0);
3066
3090
  --wds-vertical-tabs-item-fill-standard-premium-active: #2D354E;
3067
3091
  --wds-vertical-tabs-item-fill-standard-premium-disabled: #212328;
3068
3092
  --wds-vertical-tabs-item-fill-standard-premium-hover: #212328;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.219.1",
3
+ "version": "1.219.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": "1d953e53fbb2238203778a6509cbd23bf55c10d6ea1407400b4ead6c"
39
+ "falconPackageHash": "3e9bb525c729de7baccf27e40ed4c21277166894939a2444b51d4963"
40
40
  }
package/studio/all.css CHANGED
@@ -406,6 +406,7 @@
406
406
  --wds-google-preview-favicon-border-fill: #E6E6E6;
407
407
  --wds-google-preview-favicon-background-fill: #F1F3F4;
408
408
  --wds-editable-title-marker-line-style: dashed;
409
+ --wds-editable-title-marker-gap: 6px;
409
410
  --wds-custom-modal-close-button-fill: transparent;
410
411
  --wds-counter-badge-padding-horizontal-tiny: 4px;
411
412
  --wds-counter-badge-font-size-tiny: 10px;
@@ -421,6 +422,7 @@
421
422
  --wds-button-icon-offset-small: 12px;
422
423
  --wds-button-icon-offset-medium: 18px;
423
424
  --wds-button-icon-offset-large: 18px;
425
+ --wds-button-border-ai-secondary-mask: none;
424
426
  --wds-breadcrumbs-height-small: 24px;
425
427
  --wds-breadcrumbs-height-medium: 30px;
426
428
  --wds-breadcrumbs-height-large: 36px;
@@ -1243,10 +1245,13 @@
1243
1245
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
1244
1246
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
1245
1247
  --wds-page-header-title-actions-gap: var(--wds-space-0);
1248
+ --wds-page-header-subtitle-padding-start: var(--wds-space-0);
1249
+ --wds-page-header-subtitle-gap: var(--wds-space-0);
1246
1250
  --wds-page-header-padding-vertical-small: var(--wds-space-475);
1247
1251
  --wds-page-header-padding-vertical: var(--wds-space-600);
1248
1252
  --wds-page-header-padding-horizontal-small: var(--wds-space-600);
1249
1253
  --wds-page-header-padding-horizontal: var(--wds-space-1200);
1254
+ --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-bold);
1250
1255
  --wds-page-header-back-button-gap: var(--wds-space-200);
1251
1256
  --wds-notification-padding-vertical: var(--wds-space-200);
1252
1257
  --wds-notification-padding-horizontal: var(--wds-space-200);
@@ -1312,14 +1317,15 @@
1312
1317
  --wds-list-item-select-icon-padding-horizontal-medium: var(--wds-space-300);
1313
1318
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1314
1319
  --wds-list-item-select-suffix-active-font-weight: var(--wds-font-weight-regular);
1320
+ --wds-list-item-select-subtitle-font-weight-medium: var(--wds-font-weight-regular);
1315
1321
  --wds-list-item-select-subtitle-disabled: var(--wds-color-text-disabled);
1316
1322
  --wds-list-item-select-prefix-subtitle-margin: var(--wds-space-100);
1317
1323
  --wds-list-item-select-padding-vertical-small-screen-small: var(--wds-space-200);
1318
1324
  --wds-list-item-select-padding-vertical-small: var(--wds-space-150);
1319
1325
  --wds-list-item-select-padding-vertical-medium-screen-small: var(--wds-space-200);
1320
1326
  --wds-list-item-select-padding-vertical-medium: var(--wds-space-150);
1321
- --wds-list-item-select-padding-right-small: var(--wds-space-400);
1322
- --wds-list-item-select-padding-right-medium: var(--wds-space-400);
1327
+ --wds-list-item-select-padding-right-small: var(--wds-space-300);
1328
+ --wds-list-item-select-padding-right-medium: var(--wds-space-300);
1323
1329
  --wds-list-item-select-padding-left-small: var(--wds-space-300);
1324
1330
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
1325
1331
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
@@ -1834,6 +1840,7 @@
1834
1840
  --wds-selector-button-border-color-hover: var(--wds-color-border-standard-secondary-hover);
1835
1841
  --wds-selector-button-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
1836
1842
  --wds-selector-button-border-color: var(--wds-color-border-standard-secondary);
1843
+ --wds-selectable-accordion-fill: var(--wds-color-fill-standard-tertiary);
1837
1844
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-standard-primary);
1838
1845
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-standard-primary);
1839
1846
  --wds-segmented-toggle-value-fill-default: var(--wds-color-text-standard-primary);
@@ -1883,6 +1890,9 @@
1883
1890
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1884
1891
  --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
1885
1892
  --wds-page-header-subtitle-font-size: var(--wds-font-size-body-medium);
1893
+ --wds-page-header-divider-color: var(--wds-color-border-dark-secondary);
1894
+ --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-body-small);
1895
+ --wds-page-header-breadcrumbs-color: var(--wds-color-text-standard-primary);
1886
1896
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1887
1897
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1888
1898
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
@@ -2171,6 +2181,7 @@
2171
2181
  --wds-button-fill-dark-secondary-disabled: var(--wds-color-fill-dark-tertiary-disabled);
2172
2182
  --wds-button-fill-dark-secondary-active: var(--wds-color-fill-dark-primary-active);
2173
2183
  --wds-button-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2184
+ --wds-button-fill-ai-secondary: var(--wds-color-fill-standard-tertiary);
2174
2185
  --wds-button-fill-ai-primary-hover: var(--wds-color-fill-ai-primary-hover);
2175
2186
  --wds-button-fill-ai-primary-active: var(--wds-color-fill-ai-primary-active);
2176
2187
  --wds-button-fill-ai-primary: var(--wds-color-fill-ai-primary);
@@ -2276,6 +2287,7 @@
2276
2287
  --wds-marketing-layout-description-line-height-tiny: var(--wds-font-line-height-body-small);
2277
2288
  --wds-marketing-layout-description-line-height-small: var(--wds-font-line-height-body-small);
2278
2289
  --wds-marketing-layout-description-line-height-medium: var(--wds-font-line-height-body-medium);
2290
+ --wds-list-item-select-suffix-font-line-height-small: var(--wds-font-line-height-body-tiny);
2279
2291
  --wds-list-item-select-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2280
2292
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2281
2293
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-small);
package/studio/all.scss CHANGED
@@ -178,6 +178,7 @@
178
178
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
179
179
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
180
180
  --wds-editable-title-marker-line-style: dashed;
181
+ --wds-editable-title-marker-gap: 6px;
181
182
  --wds-custom-modal-close-button-fill: transparent;
182
183
  --wds-counter-badge-padding-horizontal-tiny: 4px;
183
184
  --wds-counter-badge-font-size-tiny: 10px;
@@ -394,6 +395,7 @@
394
395
  --wds-button-icon-offset-small: 12px;
395
396
  --wds-button-icon-offset-medium: 18px;
396
397
  --wds-button-icon-offset-large: 18px;
398
+ --wds-button-border-ai-secondary-mask: none;
397
399
  --wds-breakpoint-x-large: 1572px;
398
400
  --wds-breakpoint-small: 490px;
399
401
  --wds-breakpoint-medium: 768px;
@@ -922,10 +924,13 @@
922
924
  --wds-page-header-title-minimised-letter-spacing: var(--wds-font-letter-spacing-0);
923
925
  --wds-page-header-title-minimised-font-weight: var(--wds-font-weight-medium);
924
926
  --wds-page-header-title-actions-gap: var(--wds-space-0);
927
+ --wds-page-header-subtitle-padding-start: var(--wds-space-0);
928
+ --wds-page-header-subtitle-gap: var(--wds-space-0);
925
929
  --wds-page-header-padding-vertical-small: var(--wds-space-475);
926
930
  --wds-page-header-padding-vertical: var(--wds-space-600);
927
931
  --wds-page-header-padding-horizontal-small: var(--wds-space-600);
928
932
  --wds-page-header-padding-horizontal: var(--wds-space-1200);
933
+ --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-bold);
929
934
  --wds-page-header-back-button-gap: var(--wds-space-200);
930
935
  --wds-notification-padding-vertical: var(--wds-space-200);
931
936
  --wds-notification-padding-horizontal: var(--wds-space-200);
@@ -989,14 +994,15 @@
989
994
  --wds-loader-fill-loading: var(--wds-color-blue-0);
990
995
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
991
996
  --wds-list-item-select-suffix-active-font-weight: var(--wds-font-weight-regular);
997
+ --wds-list-item-select-subtitle-font-weight-medium: var(--wds-font-weight-regular);
992
998
  --wds-list-item-select-subtitle-disabled: var(--wds-color-text-disabled);
993
999
  --wds-list-item-select-prefix-subtitle-margin: var(--wds-space-100);
994
1000
  --wds-list-item-select-padding-vertical-small-screen-small: var(--wds-space-200);
995
1001
  --wds-list-item-select-padding-vertical-small: var(--wds-space-150);
996
1002
  --wds-list-item-select-padding-vertical-medium-screen-small: var(--wds-space-200);
997
1003
  --wds-list-item-select-padding-vertical-medium: var(--wds-space-150);
998
- --wds-list-item-select-padding-right-small: var(--wds-space-400);
999
- --wds-list-item-select-padding-right-medium: var(--wds-space-400);
1004
+ --wds-list-item-select-padding-right-small: var(--wds-space-300);
1005
+ --wds-list-item-select-padding-right-medium: var(--wds-space-300);
1000
1006
  --wds-list-item-select-padding-left-small: var(--wds-space-300);
1001
1007
  --wds-list-item-select-padding-left-medium: var(--wds-space-300);
1002
1008
  --wds-list-item-select-padding-horizontal-small: var(--wds-space-300);
@@ -1823,6 +1829,7 @@
1823
1829
  --wds-selector-button-border-color-hover: var(--wds-color-border-standard-secondary-hover);
1824
1830
  --wds-selector-button-border-color-disabled: var(--wds-color-border-standard-secondary-disabled);
1825
1831
  --wds-selector-button-border-color: var(--wds-color-border-standard-secondary);
1832
+ --wds-selectable-accordion-fill: var(--wds-color-fill-standard-tertiary);
1826
1833
  --wds-segmented-toggle-value-fill-selected: var(--wds-color-text-standard-primary);
1827
1834
  --wds-segmented-toggle-value-fill-hover: var(--wds-color-text-standard-primary);
1828
1835
  --wds-segmented-toggle-value-fill-default: var(--wds-color-text-standard-primary);
@@ -1872,6 +1879,9 @@
1872
1879
  --wds-page-header-title-font-weight: var(--wds-font-weight-heading-1);
1873
1880
  --wds-page-header-title-font-size: var(--wds-font-size-heading-1);
1874
1881
  --wds-page-header-subtitle-font-size: var(--wds-font-size-body-medium);
1882
+ --wds-page-header-divider-color: var(--wds-color-border-dark-secondary);
1883
+ --wds-page-header-breadcrumbs-font-size: var(--wds-font-size-body-small);
1884
+ --wds-page-header-breadcrumbs-color: var(--wds-color-text-standard-primary);
1875
1885
  --wds-number-input-icon-fill: var(--wds-color-text-standard-secondary);
1876
1886
  --wds-nestable-list-fill: var(--wds-color-fill-surface-default);
1877
1887
  --wds-multiselect-icon-fill: var(--wds-color-text-standard-secondary);
@@ -2171,6 +2181,7 @@
2171
2181
  --wds-button-fill-dark-secondary-disabled: var(--wds-color-fill-dark-tertiary-disabled);
2172
2182
  --wds-button-fill-dark-secondary-active: var(--wds-color-fill-dark-primary-active);
2173
2183
  --wds-button-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2184
+ --wds-button-fill-ai-secondary: var(--wds-color-fill-standard-tertiary);
2174
2185
  --wds-button-fill-ai-primary-hover: var(--wds-color-fill-ai-primary-hover);
2175
2186
  --wds-button-fill-ai-primary-active: var(--wds-color-fill-ai-primary-active);
2176
2187
  --wds-button-fill-ai-primary: var(--wds-color-fill-ai-primary);
@@ -2276,6 +2287,7 @@
2276
2287
  --wds-marketing-layout-description-line-height-tiny: var(--wds-font-line-height-body-small);
2277
2288
  --wds-marketing-layout-description-line-height-small: var(--wds-font-line-height-body-small);
2278
2289
  --wds-marketing-layout-description-line-height-medium: var(--wds-font-line-height-body-medium);
2290
+ --wds-list-item-select-suffix-font-line-height-small: var(--wds-font-line-height-body-tiny);
2279
2291
  --wds-list-item-select-subtitle-font-line-height-medium: var(--wds-font-line-height-body-tiny);
2280
2292
  --wds-list-item-select-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2281
2293
  --wds-list-item-select-label-font-line-height-medium: var(--wds-font-line-height-body-small);