@wix/design-system-tokens 1.219.0 → 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.
@@ -12,6 +12,7 @@
12
12
  @property st-global(--wds-accordion-inner-content-shadow);
13
13
  @property st-global(--wds-accordion-inner-content-shadow-last);
14
14
  @property st-global(--wds-accordion-padding-horizontal-large);
15
+ @property st-global(--wds-accordion-padding-horizontal-medium);
15
16
  @property st-global(--wds-accordion-title-fill);
16
17
  @property st-global(--wds-accordion-title-fill-hover);
17
18
  @property st-global(--wds-accordion-title-font-line-height-medium);
@@ -129,6 +130,9 @@
129
130
  @property st-global(--wds-badge-size-medium);
130
131
  @property st-global(--wds-badge-size-small);
131
132
  @property st-global(--wds-badge-size-tiny);
133
+ @property st-global(--wds-badge-solid-neutral-danger-label-color);
134
+ @property st-global(--wds-badge-solid-neutral-success-label-color);
135
+ @property st-global(--wds-badge-solid-warning-light-label-color);
132
136
  @property st-global(--wds-border-radius-0);
133
137
  @property st-global(--wds-border-radius-100);
134
138
  @property st-global(--wds-border-radius-200);
@@ -175,6 +179,7 @@
175
179
  @property st-global(--wds-breakpoint-medium);
176
180
  @property st-global(--wds-breakpoint-small);
177
181
  @property st-global(--wds-breakpoint-x-large);
182
+ @property st-global(--wds-button-border-ai-secondary-mask);
178
183
  @property st-global(--wds-button-border-dark-secondary);
179
184
  @property st-global(--wds-button-border-dark-secondary-active);
180
185
  @property st-global(--wds-button-border-dark-secondary-disabled);
@@ -199,6 +204,7 @@
199
204
  @property st-global(--wds-button-fill-ai-primary);
200
205
  @property st-global(--wds-button-fill-ai-primary-active);
201
206
  @property st-global(--wds-button-fill-ai-primary-hover);
207
+ @property st-global(--wds-button-fill-ai-secondary);
202
208
  @property st-global(--wds-button-fill-dark-primary-disabled);
203
209
  @property st-global(--wds-button-fill-dark-secondary);
204
210
  @property st-global(--wds-button-fill-dark-secondary-active);
@@ -933,6 +939,7 @@
933
939
  @property st-global(--wds-dropdown-list-paddings);
934
940
  @property st-global(--wds-editable-title-marker-fill);
935
941
  @property st-global(--wds-editable-title-marker-fill-active);
942
+ @property st-global(--wds-editable-title-marker-gap);
936
943
  @property st-global(--wds-editable-title-marker-line-style);
937
944
  @property st-global(--wds-editable-title-placeholder-fill);
938
945
  @property st-global(--wds-empty-state-border-radius);
@@ -1333,8 +1340,10 @@
1333
1340
  @property st-global(--wds-list-item-select-subtitle-disabled);
1334
1341
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
1335
1342
  @property st-global(--wds-list-item-select-subtitle-font-size-medium);
1343
+ @property st-global(--wds-list-item-select-subtitle-font-weight-medium);
1336
1344
  @property st-global(--wds-list-item-select-suffix);
1337
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);
1338
1347
  @property st-global(--wds-list-item-select-suffix-pressed);
1339
1348
  @property st-global(--wds-list-item-select-title);
1340
1349
  @property st-global(--wds-list-item-select-title-disabled);
@@ -1399,6 +1408,7 @@
1399
1408
  @property st-global(--wds-message-modal-close-button-icon-size);
1400
1409
  @property st-global(--wds-message-modal-close-button-size);
1401
1410
  @property st-global(--wds-message-modal-content-gap);
1411
+ @property st-global(--wds-message-modal-help-button-icon-size);
1402
1412
  @property st-global(--wds-message-modal-help-button-size);
1403
1413
  @property st-global(--wds-message-modal-illustration-content-gap);
1404
1414
  @property st-global(--wds-message-modal-illustration-margin-start);
@@ -1407,6 +1417,7 @@
1407
1417
  @property st-global(--wds-message-modal-padding-vertical);
1408
1418
  @property st-global(--wds-message-modal-text-font-line-height);
1409
1419
  @property st-global(--wds-message-modal-text-font-size);
1420
+ @property st-global(--wds-message-modal-text-font-weight);
1410
1421
  @property st-global(--wds-message-modal-title-font-family);
1411
1422
  @property st-global(--wds-message-modal-title-font-line-height);
1412
1423
  @property st-global(--wds-message-modal-title-font-size);
@@ -1438,12 +1449,21 @@
1438
1449
  @property st-global(--wds-padding-vertical-small);
1439
1450
  @property st-global(--wds-padding-vertical-tiny);
1440
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);
1454
+ @property st-global(--wds-page-header-breadcrumbs-offset-large);
1455
+ @property st-global(--wds-page-header-breadcrumbs-offset-medium);
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);
1441
1459
  @property st-global(--wds-page-header-padding-horizontal);
1442
1460
  @property st-global(--wds-page-header-padding-horizontal-small);
1443
1461
  @property st-global(--wds-page-header-padding-vertical);
1444
1462
  @property st-global(--wds-page-header-padding-vertical-small);
1445
1463
  @property st-global(--wds-page-header-subtitle-font-size);
1464
+ @property st-global(--wds-page-header-subtitle-gap);
1446
1465
  @property st-global(--wds-page-header-subtitle-line-height);
1466
+ @property st-global(--wds-page-header-subtitle-padding-start);
1447
1467
  @property st-global(--wds-page-header-title-actions-gap);
1448
1468
  @property st-global(--wds-page-header-title-font-size);
1449
1469
  @property st-global(--wds-page-header-title-font-weight);
@@ -1595,6 +1615,7 @@
1595
1615
  @property st-global(--wds-select-area-fill-hover);
1596
1616
  @property st-global(--wds-select-area-padding-horizontal);
1597
1617
  @property st-global(--wds-select-area-padding-vertical);
1618
+ @property st-global(--wds-selectable-accordion-fill);
1598
1619
  @property st-global(--wds-selector-button-border-color);
1599
1620
  @property st-global(--wds-selector-button-border-color-disabled);
1600
1621
  @property st-global(--wds-selector-button-border-color-hover);
@@ -2204,6 +2225,7 @@
2204
2225
  @property st-global(--wds-tooltip-text-fill);
2205
2226
  @property st-global(--wds-top-banner-border-color);
2206
2227
  @property st-global(--wds-top-banner-border-radius);
2228
+ @property st-global(--wds-top-banner-content-color);
2207
2229
  @property st-global(--wds-top-banner-content-gap);
2208
2230
  @property st-global(--wds-top-banner-dismiss-gap);
2209
2231
  @property st-global(--wds-top-banner-fill);
@@ -2296,7 +2318,8 @@
2296
2318
  --wds-accordion-inner-content-padding-top-flat: 0px;
2297
2319
  --wds-accordion-inner-content-shadow: 0;
2298
2320
  --wds-accordion-inner-content-shadow-last: 0 0 0;
2299
- --wds-accordion-padding-horizontal-large: 24px;
2321
+ --wds-accordion-padding-horizontal-large: 16px;
2322
+ --wds-accordion-padding-horizontal-medium: 12px;
2300
2323
  --wds-accordion-title-fill: #FFFFFF;
2301
2324
  --wds-accordion-title-fill-hover: #FFFFFF;
2302
2325
  --wds-accordion-title-font-line-height-medium: 24px;
@@ -2337,7 +2360,7 @@
2337
2360
  --wds-announcement-modal-close-button-size: 24px;
2338
2361
  --wds-announcement-modal-content-gap: 12px;
2339
2362
  --wds-announcement-modal-footnote-content-alignment: start;
2340
- --wds-announcement-modal-help-button-fill: #3A3A3B;
2363
+ --wds-announcement-modal-help-button-fill: transparent;
2341
2364
  --wds-announcement-modal-help-button-icon-size: 18px;
2342
2365
  --wds-announcement-modal-help-button-size: 24px;
2343
2366
  --wds-announcement-modal-padding-horizontal: 96px;
@@ -2414,6 +2437,9 @@
2414
2437
  --wds-badge-size-medium: 28px;
2415
2438
  --wds-badge-size-small: 24px;
2416
2439
  --wds-badge-size-tiny: 20px;
2440
+ --wds-badge-solid-neutral-danger-label-color: #FFFFFF;
2441
+ --wds-badge-solid-neutral-success-label-color: #FFFFFF;
2442
+ --wds-badge-solid-warning-light-label-color: #FFFFFF;
2417
2443
  --wds-border-radius-0: 0px;
2418
2444
  --wds-border-radius-100: 2px;
2419
2445
  --wds-border-radius-200: 4px;
@@ -2460,6 +2486,7 @@
2460
2486
  --wds-breakpoint-medium: 768px;
2461
2487
  --wds-breakpoint-small: 490px;
2462
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);
2463
2490
  --wds-button-border-dark-secondary: #A09E9D;
2464
2491
  --wds-button-border-dark-secondary-active: #666565;
2465
2492
  --wds-button-border-dark-secondary-disabled: #3A3A3B;
@@ -2484,6 +2511,7 @@
2484
2511
  --wds-button-fill-ai-primary: #3C67FF;
2485
2512
  --wds-button-fill-ai-primary-active: #82B0FF;
2486
2513
  --wds-button-fill-ai-primary-hover: #6F94D4;
2514
+ --wds-button-fill-ai-secondary: rgba(0, 0, 0, 0);
2487
2515
  --wds-button-fill-dark-primary-disabled: #3A3A3B;
2488
2516
  --wds-button-fill-dark-secondary: rgba(0, 0, 0, 0);
2489
2517
  --wds-button-fill-dark-secondary-active: #666565;
@@ -3005,7 +3033,7 @@
3005
3033
  --wds-color-fill-surface-modal-backdrop: rgba(0, 0, 0, .2);
3006
3034
  --wds-color-fill-surface-neutral: #2D2D2E;
3007
3035
  --wds-color-fill-surface-overlay: #212122;
3008
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.96);
3036
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.98);
3009
3037
  --wds-color-fill-surface-overlay-dark: #FFFFFF;
3010
3038
  --wds-color-fill-surface-premium: #111214;
3011
3039
  --wds-color-fill-surface-raised: #212122;
@@ -3218,6 +3246,7 @@
3218
3246
  --wds-dropdown-list-paddings: 8px;
3219
3247
  --wds-editable-title-marker-fill: #A09E9D;
3220
3248
  --wds-editable-title-marker-fill-active: #82B0FF;
3249
+ --wds-editable-title-marker-gap: 4px;
3221
3250
  --wds-editable-title-marker-line-style: dashed;
3222
3251
  --wds-editable-title-placeholder-fill: #666565;
3223
3252
  --wds-empty-state-border-radius: 4px;
@@ -3432,7 +3461,7 @@
3432
3461
  --wds-illustration-color-3: #B8C4FF;
3433
3462
  --wds-illustration-color-4: #D5DFFF;
3434
3463
  --wds-illustration-color-5: #EAEFFF;
3435
- --wds-illustration-color-6: #EAEFFF;
3464
+ --wds-illustration-color-6: #002294;
3436
3465
  --wds-illustration-color-7: #B8C4FF;
3437
3466
  --wds-illustration-color-background: #2D2D2E;
3438
3467
  --wds-illustration-color-opacity-25: #F8F6F640;
@@ -3602,13 +3631,13 @@
3602
3631
  --wds-list-item-select-label-font-size-small: 12px;
3603
3632
  --wds-list-item-select-label-font-weight-active: 500;
3604
3633
  --wds-list-item-select-label-font-weight-medium: 500;
3605
- --wds-list-item-select-min-height-medium: 52px;
3634
+ --wds-list-item-select-min-height-medium: auto;
3606
3635
  --wds-list-item-select-padding-horizontal-medium: 12px;
3607
3636
  --wds-list-item-select-padding-horizontal-small: 12px;
3608
3637
  --wds-list-item-select-padding-left-medium: 12px;
3609
3638
  --wds-list-item-select-padding-left-small: 12px;
3610
- --wds-list-item-select-padding-right-medium: 16px;
3611
- --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;
3612
3641
  --wds-list-item-select-padding-vertical-medium: 8px;
3613
3642
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
3614
3643
  --wds-list-item-select-padding-vertical-small: 8px;
@@ -3618,8 +3647,10 @@
3618
3647
  --wds-list-item-select-subtitle-disabled: #878685;
3619
3648
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
3620
3649
  --wds-list-item-select-subtitle-font-size-medium: 12px;
3650
+ --wds-list-item-select-subtitle-font-weight-medium: 400;
3621
3651
  --wds-list-item-select-suffix: #FFFFFF;
3622
3652
  --wds-list-item-select-suffix-active-font-weight: 500;
3653
+ --wds-list-item-select-suffix-font-line-height-small: 16px;
3623
3654
  --wds-list-item-select-suffix-pressed: #B1CCFF;
3624
3655
  --wds-list-item-select-title: #FFFFFF;
3625
3656
  --wds-list-item-select-title-disabled: #878685;
@@ -3684,7 +3715,8 @@
3684
3715
  --wds-message-modal-close-button-icon-size: 8px;
3685
3716
  --wds-message-modal-close-button-size: 24px;
3686
3717
  --wds-message-modal-content-gap: 12px;
3687
- --wds-message-modal-help-button-size: 28px;
3718
+ --wds-message-modal-help-button-icon-size: 18px;
3719
+ --wds-message-modal-help-button-size: 24px;
3688
3720
  --wds-message-modal-illustration-content-gap: 16px;
3689
3721
  --wds-message-modal-illustration-margin-start: 24px;
3690
3722
  --wds-message-modal-illustration-margin-top: 24px;
@@ -3692,6 +3724,7 @@
3692
3724
  --wds-message-modal-padding-vertical: 24px;
3693
3725
  --wds-message-modal-text-font-line-height: 18px;
3694
3726
  --wds-message-modal-text-font-size: 14px;
3727
+ --wds-message-modal-text-font-weight: 400;
3695
3728
  --wds-message-modal-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
3696
3729
  --wds-message-modal-title-font-line-height: 32px;
3697
3730
  --wds-message-modal-title-font-size: 24px;
@@ -3723,12 +3756,21 @@
3723
3756
  --wds-padding-vertical-small: 24px;
3724
3757
  --wds-padding-vertical-tiny: 20px;
3725
3758
  --wds-page-header-back-button-gap: 8px;
3759
+ --wds-page-header-breadcrumbs-color: #A8A6A5;
3760
+ --wds-page-header-breadcrumbs-font-size: 12px;
3761
+ --wds-page-header-breadcrumbs-offset-large: 0px;
3762
+ --wds-page-header-breadcrumbs-offset-medium: 0px;
3763
+ --wds-page-header-breadcrumbs-offset-small: 0px;
3764
+ --wds-page-header-breadcrumbs-selected-font-weight: 500;
3765
+ --wds-page-header-divider-color: transparent;
3726
3766
  --wds-page-header-padding-horizontal: 48px;
3727
3767
  --wds-page-header-padding-horizontal-small: 24px;
3728
3768
  --wds-page-header-padding-vertical: 24px;
3729
3769
  --wds-page-header-padding-vertical-small: 18px;
3730
3770
  --wds-page-header-subtitle-font-size: 16px;
3771
+ --wds-page-header-subtitle-gap: 4px;
3731
3772
  --wds-page-header-subtitle-line-height: 24px;
3773
+ --wds-page-header-subtitle-padding-start: 4px;
3732
3774
  --wds-page-header-title-actions-gap: 0px;
3733
3775
  --wds-page-header-title-font-size: 32px;
3734
3776
  --wds-page-header-title-font-weight: 400;
@@ -3745,10 +3787,10 @@
3745
3787
  --wds-pagination-padding-horizontal: 2px;
3746
3788
  --wds-pagination-padding-vertical: 2px;
3747
3789
  --wds-palette-border: 4px;
3748
- --wds-popover-border-fill: #3A3A3B;
3790
+ --wds-popover-border-fill: #2D2D2E;
3749
3791
  --wds-popover-border-radius: 12px;
3750
3792
  --wds-popover-border-width: 1px;
3751
- --wds-popover-fill: rgba(33, 33, 34, 0.96);
3793
+ --wds-popover-fill: rgba(33, 33, 34, 0.98);
3752
3794
  --wds-popover-menu-border-radius: 12px;
3753
3795
  --wds-popover-menu-paddings-horizontal: 8px;
3754
3796
  --wds-popover-menu-paddings-vertical: 8px;
@@ -3799,9 +3841,9 @@
3799
3841
  --wds-search-expandable-padding-medium: 7px;
3800
3842
  --wds-search-expandable-padding-small: 6px;
3801
3843
  --wds-section-header-border-light: #5B78A9;
3802
- --wds-section-header-fill-light: #212122;
3803
- --wds-section-header-fill-neutral: #212122;
3804
- --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);
3805
3847
  --wds-section-header-font-weight: 600;
3806
3848
  --wds-section-header-label-fill-neutral: #A09E9D;
3807
3849
  --wds-section-header-label-font-size-medium: 14px;
@@ -3880,6 +3922,7 @@
3880
3922
  --wds-select-area-fill-hover: #3A3A3B;
3881
3923
  --wds-select-area-padding-horizontal: 16px;
3882
3924
  --wds-select-area-padding-vertical: 12px;
3925
+ --wds-selectable-accordion-fill: rgba(0, 0, 0, 0);
3883
3926
  --wds-selector-button-border-color: rgba(255, 255, 255, 0);
3884
3927
  --wds-selector-button-border-color-disabled: rgba(255, 255, 255, 0);
3885
3928
  --wds-selector-button-border-color-hover: #5B78A9;
@@ -4489,6 +4532,7 @@
4489
4532
  --wds-tooltip-text-fill: #FFFFFF;
4490
4533
  --wds-top-banner-border-color: rgba(0, 0, 0, 0);
4491
4534
  --wds-top-banner-border-radius: 0px;
4535
+ --wds-top-banner-content-color: #212122;
4492
4536
  --wds-top-banner-content-gap: 8px;
4493
4537
  --wds-top-banner-dismiss-gap: 8px;
4494
4538
  --wds-top-banner-fill: #d7b7fb;
@@ -4516,27 +4560,27 @@
4516
4560
  --wds-vertical-tabs-icon-padding-vertical-medium: 8px;
4517
4561
  --wds-vertical-tabs-icon-padding-vertical-small: 8px;
4518
4562
  --wds-vertical-tabs-item-active-title-text-disabled: #878685;
4519
- --wds-vertical-tabs-item-fill-light: #212122;
4563
+ --wds-vertical-tabs-item-fill-light: rgba(0, 0, 0, 0);
4520
4564
  --wds-vertical-tabs-item-fill-light-active: #2D2D2E;
4521
4565
  --wds-vertical-tabs-item-fill-light-disabled: #212122;
4522
4566
  --wds-vertical-tabs-item-fill-light-hover: #3A3A3B;
4523
- --wds-vertical-tabs-item-fill-light-premium: #212122;
4567
+ --wds-vertical-tabs-item-fill-light-premium: rgba(0, 0, 0, 0);
4524
4568
  --wds-vertical-tabs-item-fill-light-premium-active: #2D354E;
4525
4569
  --wds-vertical-tabs-item-fill-light-premium-disabled: #212122;
4526
4570
  --wds-vertical-tabs-item-fill-light-premium-hover: #212328;
4527
- --wds-vertical-tabs-item-fill-neutral: #2D2D2E;
4571
+ --wds-vertical-tabs-item-fill-neutral: rgba(0, 0, 0, 0);
4528
4572
  --wds-vertical-tabs-item-fill-neutral-active: #2D2D2E;
4529
4573
  --wds-vertical-tabs-item-fill-neutral-disabled: #2D2D2E;
4530
4574
  --wds-vertical-tabs-item-fill-neutral-hover: #454544;
4531
- --wds-vertical-tabs-item-fill-neutral-premium: #2D2D2E;
4575
+ --wds-vertical-tabs-item-fill-neutral-premium: rgba(0, 0, 0, 0);
4532
4576
  --wds-vertical-tabs-item-fill-neutral-premium-active: #2D354E;
4533
4577
  --wds-vertical-tabs-item-fill-neutral-premium-disabled: #2D2D2E;
4534
4578
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #212328;
4535
- --wds-vertical-tabs-item-fill-standard: #212122;
4579
+ --wds-vertical-tabs-item-fill-standard: rgba(0, 0, 0, 0);
4536
4580
  --wds-vertical-tabs-item-fill-standard-active: #2D2D2E;
4537
4581
  --wds-vertical-tabs-item-fill-standard-disabled: #212122;
4538
4582
  --wds-vertical-tabs-item-fill-standard-hover: #3A3A3B;
4539
- --wds-vertical-tabs-item-fill-standard-premium: #212122;
4583
+ --wds-vertical-tabs-item-fill-standard-premium: rgba(0, 0, 0, 0);
4540
4584
  --wds-vertical-tabs-item-fill-standard-premium-active: #2D354E;
4541
4585
  --wds-vertical-tabs-item-fill-standard-premium-disabled: #212328;
4542
4586
  --wds-vertical-tabs-item-fill-standard-premium-hover: #212328;
@@ -12,6 +12,7 @@
12
12
  @property st-global(--wds-accordion-inner-content-shadow);
13
13
  @property st-global(--wds-accordion-inner-content-shadow-last);
14
14
  @property st-global(--wds-accordion-padding-horizontal-large);
15
+ @property st-global(--wds-accordion-padding-horizontal-medium);
15
16
  @property st-global(--wds-accordion-title-fill);
16
17
  @property st-global(--wds-accordion-title-fill-hover);
17
18
  @property st-global(--wds-accordion-title-font-line-height-medium);
@@ -115,6 +116,9 @@
115
116
  @property st-global(--wds-badge-size-medium);
116
117
  @property st-global(--wds-badge-size-small);
117
118
  @property st-global(--wds-badge-size-tiny);
119
+ @property st-global(--wds-badge-solid-neutral-danger-label-color);
120
+ @property st-global(--wds-badge-solid-neutral-success-label-color);
121
+ @property st-global(--wds-badge-solid-warning-light-label-color);
118
122
  @property st-global(--wds-breadcrumbs-border-radius);
119
123
  @property st-global(--wds-breadcrumbs-divider-margin-horizontal);
120
124
  @property st-global(--wds-breadcrumbs-font-size-small);
@@ -134,6 +138,7 @@
134
138
  @property st-global(--wds-breadcrumbs-text-line-height-small);
135
139
  @property st-global(--wds-breadcrumbs-text-weight-default);
136
140
  @property st-global(--wds-breadcrumbs-text-weight-selected);
141
+ @property st-global(--wds-button-border-ai-secondary-mask);
137
142
  @property st-global(--wds-button-border-dark-secondary);
138
143
  @property st-global(--wds-button-border-dark-secondary-active);
139
144
  @property st-global(--wds-button-border-dark-secondary-disabled);
@@ -158,6 +163,7 @@
158
163
  @property st-global(--wds-button-fill-ai-primary);
159
164
  @property st-global(--wds-button-fill-ai-primary-active);
160
165
  @property st-global(--wds-button-fill-ai-primary-hover);
166
+ @property st-global(--wds-button-fill-ai-secondary);
161
167
  @property st-global(--wds-button-fill-dark-primary-disabled);
162
168
  @property st-global(--wds-button-fill-dark-secondary);
163
169
  @property st-global(--wds-button-fill-dark-secondary-active);
@@ -424,6 +430,7 @@
424
430
  @property st-global(--wds-dropdown-list-paddings);
425
431
  @property st-global(--wds-editable-title-marker-fill);
426
432
  @property st-global(--wds-editable-title-marker-fill-active);
433
+ @property st-global(--wds-editable-title-marker-gap);
427
434
  @property st-global(--wds-editable-title-marker-line-style);
428
435
  @property st-global(--wds-editable-title-placeholder-fill);
429
436
  @property st-global(--wds-empty-state-border-radius);
@@ -742,8 +749,10 @@
742
749
  @property st-global(--wds-list-item-select-subtitle-disabled);
743
750
  @property st-global(--wds-list-item-select-subtitle-font-line-height-medium);
744
751
  @property st-global(--wds-list-item-select-subtitle-font-size-medium);
752
+ @property st-global(--wds-list-item-select-subtitle-font-weight-medium);
745
753
  @property st-global(--wds-list-item-select-suffix);
746
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);
747
756
  @property st-global(--wds-list-item-select-suffix-pressed);
748
757
  @property st-global(--wds-list-item-select-title);
749
758
  @property st-global(--wds-list-item-select-title-disabled);
@@ -808,6 +817,7 @@
808
817
  @property st-global(--wds-message-modal-close-button-icon-size);
809
818
  @property st-global(--wds-message-modal-close-button-size);
810
819
  @property st-global(--wds-message-modal-content-gap);
820
+ @property st-global(--wds-message-modal-help-button-icon-size);
811
821
  @property st-global(--wds-message-modal-help-button-size);
812
822
  @property st-global(--wds-message-modal-illustration-content-gap);
813
823
  @property st-global(--wds-message-modal-illustration-margin-start);
@@ -816,6 +826,7 @@
816
826
  @property st-global(--wds-message-modal-padding-vertical);
817
827
  @property st-global(--wds-message-modal-text-font-line-height);
818
828
  @property st-global(--wds-message-modal-text-font-size);
829
+ @property st-global(--wds-message-modal-text-font-weight);
819
830
  @property st-global(--wds-message-modal-title-font-family);
820
831
  @property st-global(--wds-message-modal-title-font-line-height);
821
832
  @property st-global(--wds-message-modal-title-font-size);
@@ -847,12 +858,21 @@
847
858
  @property st-global(--wds-padding-vertical-small);
848
859
  @property st-global(--wds-padding-vertical-tiny);
849
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);
863
+ @property st-global(--wds-page-header-breadcrumbs-offset-large);
864
+ @property st-global(--wds-page-header-breadcrumbs-offset-medium);
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);
850
868
  @property st-global(--wds-page-header-padding-horizontal);
851
869
  @property st-global(--wds-page-header-padding-horizontal-small);
852
870
  @property st-global(--wds-page-header-padding-vertical);
853
871
  @property st-global(--wds-page-header-padding-vertical-small);
854
872
  @property st-global(--wds-page-header-subtitle-font-size);
873
+ @property st-global(--wds-page-header-subtitle-gap);
855
874
  @property st-global(--wds-page-header-subtitle-line-height);
875
+ @property st-global(--wds-page-header-subtitle-padding-start);
856
876
  @property st-global(--wds-page-header-title-actions-gap);
857
877
  @property st-global(--wds-page-header-title-font-size);
858
878
  @property st-global(--wds-page-header-title-font-weight);
@@ -1004,6 +1024,7 @@
1004
1024
  @property st-global(--wds-select-area-fill-hover);
1005
1025
  @property st-global(--wds-select-area-padding-horizontal);
1006
1026
  @property st-global(--wds-select-area-padding-vertical);
1027
+ @property st-global(--wds-selectable-accordion-fill);
1007
1028
  @property st-global(--wds-selector-button-border-color);
1008
1029
  @property st-global(--wds-selector-button-border-color-disabled);
1009
1030
  @property st-global(--wds-selector-button-border-color-hover);
@@ -1458,6 +1479,7 @@
1458
1479
  @property st-global(--wds-tooltip-text-fill);
1459
1480
  @property st-global(--wds-top-banner-border-color);
1460
1481
  @property st-global(--wds-top-banner-border-radius);
1482
+ @property st-global(--wds-top-banner-content-color);
1461
1483
  @property st-global(--wds-top-banner-content-gap);
1462
1484
  @property st-global(--wds-top-banner-dismiss-gap);
1463
1485
  @property st-global(--wds-top-banner-fill);
@@ -1548,7 +1570,8 @@
1548
1570
  --wds-accordion-inner-content-padding-top-flat: 0px;
1549
1571
  --wds-accordion-inner-content-shadow: 0;
1550
1572
  --wds-accordion-inner-content-shadow-last: 0 0 0;
1551
- --wds-accordion-padding-horizontal-large: 24px;
1573
+ --wds-accordion-padding-horizontal-large: 16px;
1574
+ --wds-accordion-padding-horizontal-medium: 12px;
1552
1575
  --wds-accordion-title-fill: #FFFFFF;
1553
1576
  --wds-accordion-title-fill-hover: #FFFFFF;
1554
1577
  --wds-accordion-title-font-line-height-medium: 24px;
@@ -1589,7 +1612,7 @@
1589
1612
  --wds-announcement-modal-close-button-size: 24px;
1590
1613
  --wds-announcement-modal-content-gap: 12px;
1591
1614
  --wds-announcement-modal-footnote-content-alignment: start;
1592
- --wds-announcement-modal-help-button-fill: #3A3A3B;
1615
+ --wds-announcement-modal-help-button-fill: transparent;
1593
1616
  --wds-announcement-modal-help-button-icon-size: 18px;
1594
1617
  --wds-announcement-modal-help-button-size: 24px;
1595
1618
  --wds-announcement-modal-padding-horizontal: 96px;
@@ -1652,6 +1675,9 @@
1652
1675
  --wds-badge-size-medium: 28px;
1653
1676
  --wds-badge-size-small: 24px;
1654
1677
  --wds-badge-size-tiny: 20px;
1678
+ --wds-badge-solid-neutral-danger-label-color: #FFFFFF;
1679
+ --wds-badge-solid-neutral-success-label-color: #FFFFFF;
1680
+ --wds-badge-solid-warning-light-label-color: #FFFFFF;
1655
1681
  --wds-breadcrumbs-border-radius: 6px;
1656
1682
  --wds-breadcrumbs-divider-margin-horizontal: 0px;
1657
1683
  --wds-breadcrumbs-font-size-small: 12px;
@@ -1671,6 +1697,7 @@
1671
1697
  --wds-breadcrumbs-text-line-height-small: 16px;
1672
1698
  --wds-breadcrumbs-text-weight-default: 400;
1673
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);
1674
1701
  --wds-button-border-dark-secondary: #A09E9D;
1675
1702
  --wds-button-border-dark-secondary-active: #666565;
1676
1703
  --wds-button-border-dark-secondary-disabled: #3A3A3B;
@@ -1695,6 +1722,7 @@
1695
1722
  --wds-button-fill-ai-primary: #3C67FF;
1696
1723
  --wds-button-fill-ai-primary-active: #82B0FF;
1697
1724
  --wds-button-fill-ai-primary-hover: #6F94D4;
1725
+ --wds-button-fill-ai-secondary: rgba(0, 0, 0, 0);
1698
1726
  --wds-button-fill-dark-primary-disabled: #3A3A3B;
1699
1727
  --wds-button-fill-dark-secondary: rgba(0, 0, 0, 0);
1700
1728
  --wds-button-fill-dark-secondary-active: #666565;
@@ -1961,6 +1989,7 @@
1961
1989
  --wds-dropdown-list-paddings: 8px;
1962
1990
  --wds-editable-title-marker-fill: #A09E9D;
1963
1991
  --wds-editable-title-marker-fill-active: #82B0FF;
1992
+ --wds-editable-title-marker-gap: 4px;
1964
1993
  --wds-editable-title-marker-line-style: dashed;
1965
1994
  --wds-editable-title-placeholder-fill: #666565;
1966
1995
  --wds-empty-state-border-radius: 4px;
@@ -2263,13 +2292,13 @@
2263
2292
  --wds-list-item-select-label-font-size-small: 12px;
2264
2293
  --wds-list-item-select-label-font-weight-active: 500;
2265
2294
  --wds-list-item-select-label-font-weight-medium: 500;
2266
- --wds-list-item-select-min-height-medium: 52px;
2295
+ --wds-list-item-select-min-height-medium: auto;
2267
2296
  --wds-list-item-select-padding-horizontal-medium: 12px;
2268
2297
  --wds-list-item-select-padding-horizontal-small: 12px;
2269
2298
  --wds-list-item-select-padding-left-medium: 12px;
2270
2299
  --wds-list-item-select-padding-left-small: 12px;
2271
- --wds-list-item-select-padding-right-medium: 16px;
2272
- --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;
2273
2302
  --wds-list-item-select-padding-vertical-medium: 8px;
2274
2303
  --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
2275
2304
  --wds-list-item-select-padding-vertical-small: 8px;
@@ -2279,8 +2308,10 @@
2279
2308
  --wds-list-item-select-subtitle-disabled: #878685;
2280
2309
  --wds-list-item-select-subtitle-font-line-height-medium: 16px;
2281
2310
  --wds-list-item-select-subtitle-font-size-medium: 12px;
2311
+ --wds-list-item-select-subtitle-font-weight-medium: 400;
2282
2312
  --wds-list-item-select-suffix: #FFFFFF;
2283
2313
  --wds-list-item-select-suffix-active-font-weight: 500;
2314
+ --wds-list-item-select-suffix-font-line-height-small: 16px;
2284
2315
  --wds-list-item-select-suffix-pressed: #B1CCFF;
2285
2316
  --wds-list-item-select-title: #FFFFFF;
2286
2317
  --wds-list-item-select-title-disabled: #878685;
@@ -2345,7 +2376,8 @@
2345
2376
  --wds-message-modal-close-button-icon-size: 8px;
2346
2377
  --wds-message-modal-close-button-size: 24px;
2347
2378
  --wds-message-modal-content-gap: 12px;
2348
- --wds-message-modal-help-button-size: 28px;
2379
+ --wds-message-modal-help-button-icon-size: 18px;
2380
+ --wds-message-modal-help-button-size: 24px;
2349
2381
  --wds-message-modal-illustration-content-gap: 16px;
2350
2382
  --wds-message-modal-illustration-margin-start: 24px;
2351
2383
  --wds-message-modal-illustration-margin-top: 24px;
@@ -2353,6 +2385,7 @@
2353
2385
  --wds-message-modal-padding-vertical: 24px;
2354
2386
  --wds-message-modal-text-font-line-height: 18px;
2355
2387
  --wds-message-modal-text-font-size: 14px;
2388
+ --wds-message-modal-text-font-weight: 400;
2356
2389
  --wds-message-modal-title-font-family: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
2357
2390
  --wds-message-modal-title-font-line-height: 32px;
2358
2391
  --wds-message-modal-title-font-size: 24px;
@@ -2384,12 +2417,21 @@
2384
2417
  --wds-padding-vertical-small: 24px;
2385
2418
  --wds-padding-vertical-tiny: 20px;
2386
2419
  --wds-page-header-back-button-gap: 8px;
2420
+ --wds-page-header-breadcrumbs-color: #A8A6A5;
2421
+ --wds-page-header-breadcrumbs-font-size: 12px;
2422
+ --wds-page-header-breadcrumbs-offset-large: 0px;
2423
+ --wds-page-header-breadcrumbs-offset-medium: 0px;
2424
+ --wds-page-header-breadcrumbs-offset-small: 0px;
2425
+ --wds-page-header-breadcrumbs-selected-font-weight: 500;
2426
+ --wds-page-header-divider-color: transparent;
2387
2427
  --wds-page-header-padding-horizontal: 48px;
2388
2428
  --wds-page-header-padding-horizontal-small: 24px;
2389
2429
  --wds-page-header-padding-vertical: 24px;
2390
2430
  --wds-page-header-padding-vertical-small: 18px;
2391
2431
  --wds-page-header-subtitle-font-size: 16px;
2432
+ --wds-page-header-subtitle-gap: 4px;
2392
2433
  --wds-page-header-subtitle-line-height: 24px;
2434
+ --wds-page-header-subtitle-padding-start: 4px;
2393
2435
  --wds-page-header-title-actions-gap: 0px;
2394
2436
  --wds-page-header-title-font-size: 32px;
2395
2437
  --wds-page-header-title-font-weight: 400;
@@ -2406,10 +2448,10 @@
2406
2448
  --wds-pagination-padding-horizontal: 2px;
2407
2449
  --wds-pagination-padding-vertical: 2px;
2408
2450
  --wds-palette-border: 4px;
2409
- --wds-popover-border-fill: #3A3A3B;
2451
+ --wds-popover-border-fill: #2D2D2E;
2410
2452
  --wds-popover-border-radius: 12px;
2411
2453
  --wds-popover-border-width: 1px;
2412
- --wds-popover-fill: rgba(33, 33, 34, 0.96);
2454
+ --wds-popover-fill: rgba(33, 33, 34, 0.98);
2413
2455
  --wds-popover-menu-border-radius: 12px;
2414
2456
  --wds-popover-menu-paddings-horizontal: 8px;
2415
2457
  --wds-popover-menu-paddings-vertical: 8px;
@@ -2460,9 +2502,9 @@
2460
2502
  --wds-search-expandable-padding-medium: 7px;
2461
2503
  --wds-search-expandable-padding-small: 6px;
2462
2504
  --wds-section-header-border-light: #5B78A9;
2463
- --wds-section-header-fill-light: #212122;
2464
- --wds-section-header-fill-neutral: #212122;
2465
- --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);
2466
2508
  --wds-section-header-font-weight: 600;
2467
2509
  --wds-section-header-label-fill-neutral: #A09E9D;
2468
2510
  --wds-section-header-label-font-size-medium: 14px;
@@ -2541,6 +2583,7 @@
2541
2583
  --wds-select-area-fill-hover: #3A3A3B;
2542
2584
  --wds-select-area-padding-horizontal: 16px;
2543
2585
  --wds-select-area-padding-vertical: 12px;
2586
+ --wds-selectable-accordion-fill: rgba(0, 0, 0, 0);
2544
2587
  --wds-selector-button-border-color: rgba(255, 255, 255, 0);
2545
2588
  --wds-selector-button-border-color-disabled: rgba(255, 255, 255, 0);
2546
2589
  --wds-selector-button-border-color-hover: #5B78A9;
@@ -2995,6 +3038,7 @@
2995
3038
  --wds-tooltip-text-fill: #FFFFFF;
2996
3039
  --wds-top-banner-border-color: rgba(0, 0, 0, 0);
2997
3040
  --wds-top-banner-border-radius: 0px;
3041
+ --wds-top-banner-content-color: #212122;
2998
3042
  --wds-top-banner-content-gap: 8px;
2999
3043
  --wds-top-banner-dismiss-gap: 8px;
3000
3044
  --wds-top-banner-fill: #d7b7fb;
@@ -3022,27 +3066,27 @@
3022
3066
  --wds-vertical-tabs-icon-padding-vertical-medium: 8px;
3023
3067
  --wds-vertical-tabs-icon-padding-vertical-small: 8px;
3024
3068
  --wds-vertical-tabs-item-active-title-text-disabled: #878685;
3025
- --wds-vertical-tabs-item-fill-light: #212122;
3069
+ --wds-vertical-tabs-item-fill-light: rgba(0, 0, 0, 0);
3026
3070
  --wds-vertical-tabs-item-fill-light-active: #2D2D2E;
3027
3071
  --wds-vertical-tabs-item-fill-light-disabled: #212122;
3028
3072
  --wds-vertical-tabs-item-fill-light-hover: #3A3A3B;
3029
- --wds-vertical-tabs-item-fill-light-premium: #212122;
3073
+ --wds-vertical-tabs-item-fill-light-premium: rgba(0, 0, 0, 0);
3030
3074
  --wds-vertical-tabs-item-fill-light-premium-active: #2D354E;
3031
3075
  --wds-vertical-tabs-item-fill-light-premium-disabled: #212122;
3032
3076
  --wds-vertical-tabs-item-fill-light-premium-hover: #212328;
3033
- --wds-vertical-tabs-item-fill-neutral: #2D2D2E;
3077
+ --wds-vertical-tabs-item-fill-neutral: rgba(0, 0, 0, 0);
3034
3078
  --wds-vertical-tabs-item-fill-neutral-active: #2D2D2E;
3035
3079
  --wds-vertical-tabs-item-fill-neutral-disabled: #2D2D2E;
3036
3080
  --wds-vertical-tabs-item-fill-neutral-hover: #454544;
3037
- --wds-vertical-tabs-item-fill-neutral-premium: #2D2D2E;
3081
+ --wds-vertical-tabs-item-fill-neutral-premium: rgba(0, 0, 0, 0);
3038
3082
  --wds-vertical-tabs-item-fill-neutral-premium-active: #2D354E;
3039
3083
  --wds-vertical-tabs-item-fill-neutral-premium-disabled: #2D2D2E;
3040
3084
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #212328;
3041
- --wds-vertical-tabs-item-fill-standard: #212122;
3085
+ --wds-vertical-tabs-item-fill-standard: rgba(0, 0, 0, 0);
3042
3086
  --wds-vertical-tabs-item-fill-standard-active: #2D2D2E;
3043
3087
  --wds-vertical-tabs-item-fill-standard-disabled: #212122;
3044
3088
  --wds-vertical-tabs-item-fill-standard-hover: #3A3A3B;
3045
- --wds-vertical-tabs-item-fill-standard-premium: #212122;
3089
+ --wds-vertical-tabs-item-fill-standard-premium: rgba(0, 0, 0, 0);
3046
3090
  --wds-vertical-tabs-item-fill-standard-premium-active: #2D354E;
3047
3091
  --wds-vertical-tabs-item-fill-standard-premium-disabled: #212328;
3048
3092
  --wds-vertical-tabs-item-fill-standard-premium-hover: #212328;
@@ -800,7 +800,7 @@
800
800
  --wds-color-fill-surface-modal-backdrop: rgba(0, 0, 0, .2);
801
801
  --wds-color-fill-surface-neutral: #2D2D2E;
802
802
  --wds-color-fill-surface-overlay: #212122;
803
- --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.96);
803
+ --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.98);
804
804
  --wds-color-fill-surface-overlay-dark: #FFFFFF;
805
805
  --wds-color-fill-surface-premium: #111214;
806
806
  --wds-color-fill-surface-raised: #212122;
@@ -913,7 +913,7 @@
913
913
  --wds-illustration-color-3: #B8C4FF;
914
914
  --wds-illustration-color-4: #D5DFFF;
915
915
  --wds-illustration-color-5: #EAEFFF;
916
- --wds-illustration-color-6: #EAEFFF;
916
+ --wds-illustration-color-6: #002294;
917
917
  --wds-illustration-color-7: #B8C4FF;
918
918
  --wds-illustration-color-background: #2D2D2E;
919
919
  --wds-illustration-color-opacity-25: #F8F6F640;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.219.0",
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": "08e6285c8311e46d3feefaea473b36eddd6b9e8102bcde9355fcd7b5"
39
+ "falconPackageHash": "3e9bb525c729de7baccf27e40ed4c21277166894939a2444b51d4963"
40
40
  }