@wix/design-system-tokens 1.229.2 → 1.231.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/all.css +74 -1
  3. package/all.scss +74 -1
  4. package/all.st.css +148 -2
  5. package/component.st.css +148 -2
  6. package/odeditor/all.css +99 -26
  7. package/odeditor/all.scss +99 -26
  8. package/odeditor/all.st.css +173 -27
  9. package/odeditor/component.st.css +173 -27
  10. package/odeditor-dark/all.css +108 -35
  11. package/odeditor-dark/all.scss +108 -35
  12. package/odeditor-dark/all.st.css +176 -30
  13. package/odeditor-dark/component.st.css +176 -30
  14. package/package.json +2 -2
  15. package/studio/all.css +80 -7
  16. package/studio/all.scss +80 -7
  17. package/studio/all.st.css +154 -8
  18. package/studio/component.st.css +154 -8
  19. package/studio2-light/all.css +2703 -0
  20. package/studio2-light/all.scss +2703 -0
  21. package/studio2-light/all.st.css +5405 -0
  22. package/studio2-light/component.st.css +3901 -0
  23. package/studio2-light/foundation.st.css +487 -0
  24. package/studio2-light/semantic.st.css +1023 -0
  25. package/wixel/all.css +80 -7
  26. package/wixel/all.scss +80 -7
  27. package/wixel/all.st.css +154 -8
  28. package/wixel/component.st.css +154 -8
package/odeditor-dark/component.st.css CHANGED
@@ -103,11 +103,15 @@
103
103
  @property st-global(--wds-badge-outline-destructive-label-color);
104
104
  @property st-global(--wds-badge-outline-neutral-border-color);
105
105
  @property st-global(--wds-badge-outline-neutral-danger-border-color);
106
+ @property st-global(--wds-badge-outline-neutral-danger-label-color);
106
107
  @property st-global(--wds-badge-outline-neutral-fill);
107
108
  @property st-global(--wds-badge-outline-neutral-label-color);
108
109
  @property st-global(--wds-badge-outline-neutral-light-border-color);
110
+ @property st-global(--wds-badge-outline-neutral-light-label-color);
109
111
  @property st-global(--wds-badge-outline-neutral-standard-border-color);
112
+ @property st-global(--wds-badge-outline-neutral-standard-label-color);
110
113
  @property st-global(--wds-badge-outline-neutral-success-border-color);
114
+ @property st-global(--wds-badge-outline-neutral-success-label-color);
111
115
  @property st-global(--wds-badge-outline-premium-border-color);
112
116
  @property st-global(--wds-badge-outline-premium-fill);
113
117
  @property st-global(--wds-badge-outline-premium-label-color);
@@ -124,6 +128,7 @@
124
128
  @property st-global(--wds-badge-outline-warning-fill);
125
129
  @property st-global(--wds-badge-outline-warning-label-color);
126
130
  @property st-global(--wds-badge-outline-warning-light-border-color);
131
+ @property st-global(--wds-badge-outline-warning-light-label-color);
127
132
  @property st-global(--wds-badge-padding-horizontal-medium);
128
133
  @property st-global(--wds-badge-padding-horizontal-small);
129
134
  @property st-global(--wds-badge-padding-horizontal-tiny);
@@ -135,7 +140,6 @@
135
140
  @property st-global(--wds-badge-size-tiny);
136
141
  @property st-global(--wds-badge-solid-neutral-danger-fill);
137
142
  @property st-global(--wds-badge-solid-neutral-danger-label-color);
138
- @property st-global(--wds-badge-solid-neutral-light-fill);
139
143
  @property st-global(--wds-badge-solid-neutral-light-label-color);
140
144
  @property st-global(--wds-badge-solid-neutral-standard-fill);
141
145
  @property st-global(--wds-badge-solid-neutral-standard-label-color);
@@ -147,9 +151,15 @@
147
151
  @property st-global(--wds-badge-solid-warning-label-color);
148
152
  @property st-global(--wds-badge-solid-warning-light-fill);
149
153
  @property st-global(--wds-badge-solid-warning-light-label-color);
154
+ @property st-global(--wds-badge-transparent-neutral-danger-label-color);
155
+ @property st-global(--wds-badge-transparent-neutral-label-color);
156
+ @property st-global(--wds-badge-transparent-neutral-light-label-color);
157
+ @property st-global(--wds-badge-transparent-neutral-standard-label-color);
158
+ @property st-global(--wds-badge-transparent-neutral-success-label-color);
150
159
  @property st-global(--wds-badge-transparent-success-label-color);
151
160
  @property st-global(--wds-badge-transparent-urgent-label-color);
152
161
  @property st-global(--wds-badge-transparent-warning-label-color);
162
+ @property st-global(--wds-badge-transparent-warning-light-label-color);
153
163
  @property st-global(--wds-breadcrumbs-border-radius);
154
164
  @property st-global(--wds-breadcrumbs-divider-margin-horizontal);
155
165
  @property st-global(--wds-breadcrumbs-font-size-small);
@@ -503,8 +513,20 @@
503
513
  @property st-global(--wds-color-picker-padding-horizontal);
504
514
  @property st-global(--wds-color-picker-padding-vertical);
505
515
  @property st-global(--wds-color-picker-width);
516
+ @property st-global(--wds-composer-header-actions-gap);
517
+ @property st-global(--wds-composer-header-back-button-icon-size-medium);
518
+ @property st-global(--wds-composer-header-back-button-icon-size-small);
519
+ @property st-global(--wds-composer-header-border-fill);
520
+ @property st-global(--wds-composer-header-divider-margin);
521
+ @property st-global(--wds-composer-header-fill);
522
+ @property st-global(--wds-composer-header-height-medium);
523
+ @property st-global(--wds-composer-header-height-small);
524
+ @property st-global(--wds-composer-header-padding-vertical-small);
525
+ @property st-global(--wds-composer-sidebar-border-width);
506
526
  @property st-global(--wds-composer-sidebar-bottom-width);
507
527
  @property st-global(--wds-composer-sidebar-end-max-width);
528
+ @property st-global(--wds-composer-sidebar-fill);
529
+ @property st-global(--wds-composer-sidebar-item-border-radius);
508
530
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
509
531
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-medium);
510
532
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-small);
@@ -523,9 +545,13 @@
523
545
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-large);
524
546
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-medium);
525
547
  @property st-global(--wds-composer-sidebar-item-tooltip-padding-vertical-small);
548
+ @property st-global(--wds-composer-sidebar-tooltip-container-padding-vertical);
549
+ @property st-global(--wds-composer-sidebar-tooltip-item-gap);
526
550
  @property st-global(--wds-counter-badge-border-radius-medium);
527
551
  @property st-global(--wds-counter-badge-border-radius-small);
528
552
  @property st-global(--wds-counter-badge-font-size-tiny);
553
+ @property st-global(--wds-counter-badge-outline-destructive-border-color);
554
+ @property st-global(--wds-counter-badge-outline-warning-label-color);
529
555
  @property st-global(--wds-counter-badge-padding-horizontal-medium);
530
556
  @property st-global(--wds-counter-badge-padding-horizontal-small);
531
557
  @property st-global(--wds-counter-badge-padding-horizontal-tiny);
@@ -1188,12 +1214,24 @@
1188
1214
  @property st-global(--wds-section-header-padding-vertical-small);
1189
1215
  @property st-global(--wds-section-helper-action-padding-medium);
1190
1216
  @property st-global(--wds-section-helper-action-padding-small);
1217
+ @property st-global(--wds-section-helper-border-experimental-dark);
1191
1218
  @property st-global(--wds-section-helper-border-preview);
1192
1219
  @property st-global(--wds-section-helper-border-radius);
1220
+ @property st-global(--wds-section-helper-border-standard);
1221
+ @property st-global(--wds-section-helper-border-success);
1222
+ @property st-global(--wds-section-helper-close-button-clearance-medium);
1223
+ @property st-global(--wds-section-helper-close-button-clearance-small);
1224
+ @property st-global(--wds-section-helper-close-button-inset-medium);
1225
+ @property st-global(--wds-section-helper-close-button-inset-small);
1193
1226
  @property st-global(--wds-section-helper-close-button-offset);
1227
+ @property st-global(--wds-section-helper-content-gap-medium);
1228
+ @property st-global(--wds-section-helper-content-gap-small);
1229
+ @property st-global(--wds-section-helper-fill-danger);
1194
1230
  @property st-global(--wds-section-helper-fill-premium);
1195
1231
  @property st-global(--wds-section-helper-fill-preview);
1196
1232
  @property st-global(--wds-section-helper-fill-standard);
1233
+ @property st-global(--wds-section-helper-fill-success);
1234
+ @property st-global(--wds-section-helper-fill-warning);
1197
1235
  @property st-global(--wds-section-helper-horizontal-margin);
1198
1236
  @property st-global(--wds-section-helper-horizontal-padding-medium);
1199
1237
  @property st-global(--wds-section-helper-horizontal-padding-small);
@@ -1583,6 +1621,27 @@
1583
1621
  @property st-global(--wds-tag-label-font-line-height-small);
1584
1622
  @property st-global(--wds-tag-label-font-size-small);
1585
1623
  @property st-global(--wds-tag-list-action-gap);
1624
+ @property st-global(--wds-tag-outlined-dark-border-color);
1625
+ @property st-global(--wds-tag-outlined-dark-fill);
1626
+ @property st-global(--wds-tag-outlined-dark-label-color);
1627
+ @property st-global(--wds-tag-outlined-error-border-color);
1628
+ @property st-global(--wds-tag-outlined-error-fill);
1629
+ @property st-global(--wds-tag-outlined-error-label-color);
1630
+ @property st-global(--wds-tag-outlined-light-border-color);
1631
+ @property st-global(--wds-tag-outlined-light-fill);
1632
+ @property st-global(--wds-tag-outlined-light-label-color);
1633
+ @property st-global(--wds-tag-outlined-neutral-border-color);
1634
+ @property st-global(--wds-tag-outlined-neutral-fill);
1635
+ @property st-global(--wds-tag-outlined-neutral-label-color);
1636
+ @property st-global(--wds-tag-outlined-standard-border-color);
1637
+ @property st-global(--wds-tag-outlined-standard-fill);
1638
+ @property st-global(--wds-tag-outlined-standard-label-color);
1639
+ @property st-global(--wds-tag-outlined-success-border-color);
1640
+ @property st-global(--wds-tag-outlined-success-fill);
1641
+ @property st-global(--wds-tag-outlined-success-label-color);
1642
+ @property st-global(--wds-tag-outlined-warning-border-color);
1643
+ @property st-global(--wds-tag-outlined-warning-fill);
1644
+ @property st-global(--wds-tag-outlined-warning-label-color);
1586
1645
  @property st-global(--wds-tag-padding-horizontal-large);
1587
1646
  @property st-global(--wds-tag-padding-horizontal-medium);
1588
1647
  @property st-global(--wds-tag-padding-horizontal-small);
@@ -1595,6 +1654,20 @@
1595
1654
  @property st-global(--wds-tag-size-medium);
1596
1655
  @property st-global(--wds-tag-size-small);
1597
1656
  @property st-global(--wds-tag-size-tiny);
1657
+ @property st-global(--wds-tag-solid-dark-fill);
1658
+ @property st-global(--wds-tag-solid-error-fill);
1659
+ @property st-global(--wds-tag-solid-light-fill);
1660
+ @property st-global(--wds-tag-solid-neutral-fill);
1661
+ @property st-global(--wds-tag-solid-standard-fill);
1662
+ @property st-global(--wds-tag-solid-success-fill);
1663
+ @property st-global(--wds-tag-solid-warning-fill);
1664
+ @property st-global(--wds-tag-transparent-dark-label-color);
1665
+ @property st-global(--wds-tag-transparent-error-label-color);
1666
+ @property st-global(--wds-tag-transparent-light-label-color);
1667
+ @property st-global(--wds-tag-transparent-neutral-label-color);
1668
+ @property st-global(--wds-tag-transparent-standard-label-color);
1669
+ @property st-global(--wds-tag-transparent-success-label-color);
1670
+ @property st-global(--wds-tag-transparent-warning-label-color);
1598
1671
  @property st-global(--wds-testimonial-list-gap);
1599
1672
  @property st-global(--wds-text-button-font-line-height-medium);
1600
1673
  @property st-global(--wds-text-button-font-line-height-small);
@@ -1977,17 +2050,21 @@
1977
2050
  --wds-badge-outline-dark-border-color: #A09E9D;
1978
2051
  --wds-badge-outline-dark-fill: #3A3A3B;
1979
2052
  --wds-badge-outline-dark-label-color: #D4D3D2;
1980
- --wds-badge-outline-destructive-border-color: #A6464B;
2053
+ --wds-badge-outline-destructive-border-color: #D34D55;
1981
2054
  --wds-badge-outline-destructive-fill: #380D0E;
1982
2055
  --wds-badge-outline-destructive-label-color: #FEBEC0;
1983
- --wds-badge-outline-neutral-border-color: #878685;
1984
- --wds-badge-outline-neutral-danger-border-color: #A6464B;
2056
+ --wds-badge-outline-neutral-border-color: #A09E9D;
2057
+ --wds-badge-outline-neutral-danger-border-color: #D34D55;
2058
+ --wds-badge-outline-neutral-danger-label-color: #FFFFFF;
1985
2059
  --wds-badge-outline-neutral-fill: #3A3A3B;
1986
- --wds-badge-outline-neutral-label-color: #A09E9D;
1987
- --wds-badge-outline-neutral-light-border-color: #454544;
1988
- --wds-badge-outline-neutral-standard-border-color: #212328;
1989
- --wds-badge-outline-neutral-success-border-color: #396F5C;
1990
- --wds-badge-outline-premium-border-color: #3F4D6E;
2060
+ --wds-badge-outline-neutral-label-color: #D4D3D2;
2061
+ --wds-badge-outline-neutral-light-border-color: #878685;
2062
+ --wds-badge-outline-neutral-light-label-color: #FFFFFF;
2063
+ --wds-badge-outline-neutral-standard-border-color: #5B78A9;
2064
+ --wds-badge-outline-neutral-standard-label-color: #FFFFFF;
2065
+ --wds-badge-outline-neutral-success-border-color: #4B9476;
2066
+ --wds-badge-outline-neutral-success-label-color: #FFFFFF;
2067
+ --wds-badge-outline-premium-border-color: #5B78A9;
1991
2068
  --wds-badge-outline-premium-fill: #212328;
1992
2069
  --wds-badge-outline-premium-label-color: #82B0FF;
1993
2070
  --wds-badge-outline-standard-border-color: #5B78A9;
@@ -2001,8 +2078,9 @@
2001
2078
  --wds-badge-outline-urgent-label-color: #FBCFBB;
2002
2079
  --wds-badge-outline-warning-border-color: #C68B40;
2003
2080
  --wds-badge-outline-warning-fill: #6F502B;
2004
- --wds-badge-outline-warning-label-color: #FEF6ED;
2005
- --wds-badge-outline-warning-light-border-color: #946933;
2081
+ --wds-badge-outline-warning-label-color: #FEDB9A;
2082
+ --wds-badge-outline-warning-light-border-color: #C68B40;
2083
+ --wds-badge-outline-warning-light-label-color: #FFFFFF;
2006
2084
  --wds-badge-padding-horizontal-medium: 8px;
2007
2085
  --wds-badge-padding-horizontal-small: 8px;
2008
2086
  --wds-badge-padding-horizontal-tiny: 6px;
@@ -2012,23 +2090,28 @@
2012
2090
  --wds-badge-size-medium: 28px;
2013
2091
  --wds-badge-size-small: 24px;
2014
2092
  --wds-badge-size-tiny: 20px;
2015
- --wds-badge-solid-neutral-danger-fill: #A6464B;
2016
- --wds-badge-solid-neutral-danger-label-color: #FFFFFF;
2017
- --wds-badge-solid-neutral-light-fill: #3A3A3B;
2093
+ --wds-badge-solid-neutral-danger-fill: #380D0E;
2094
+ --wds-badge-solid-neutral-danger-label-color: #FEBEC0;
2018
2095
  --wds-badge-solid-neutral-light-label-color: #D4D3D2;
2019
- --wds-badge-solid-neutral-standard-fill: #2D354E;
2020
- --wds-badge-solid-neutral-standard-label-color: #D4D3D2;
2021
- --wds-badge-solid-neutral-success-fill: #396F5C;
2022
- --wds-badge-solid-neutral-success-label-color: #FFFFFF;
2096
+ --wds-badge-solid-neutral-standard-fill: #212328;
2097
+ --wds-badge-solid-neutral-standard-label-color: #B1CCFF;
2098
+ --wds-badge-solid-neutral-success-fill: #13241B;
2099
+ --wds-badge-solid-neutral-success-label-color: #A3E5C5;
2023
2100
  --wds-badge-solid-success-fill: #53DA98;
2024
2101
  --wds-badge-solid-success-label-color: #212122;
2025
2102
  --wds-badge-solid-urgent-label-color: #212122;
2026
2103
  --wds-badge-solid-warning-label-color: #212122;
2027
- --wds-badge-solid-warning-light-fill: #946933;
2028
- --wds-badge-solid-warning-light-label-color: #FFFFFF;
2104
+ --wds-badge-solid-warning-light-fill: #6F502B;
2105
+ --wds-badge-solid-warning-light-label-color: #FEDB9A;
2106
+ --wds-badge-transparent-neutral-danger-label-color: #A6464B;
2107
+ --wds-badge-transparent-neutral-label-color: #D4D3D2;
2108
+ --wds-badge-transparent-neutral-light-label-color: #3A3A3B;
2109
+ --wds-badge-transparent-neutral-standard-label-color: #2D354E;
2110
+ --wds-badge-transparent-neutral-success-label-color: #396F5C;
2029
2111
  --wds-badge-transparent-success-label-color: #53DA98;
2030
2112
  --wds-badge-transparent-urgent-label-color: #FF8044;
2031
2113
  --wds-badge-transparent-warning-label-color: #FFCB62;
2114
+ --wds-badge-transparent-warning-light-label-color: #946933;
2032
2115
  --wds-breadcrumbs-border-radius: 6px;
2033
2116
  --wds-breadcrumbs-divider-margin-horizontal: 0px;
2034
2117
  --wds-breadcrumbs-font-size-small: 12px;
@@ -2382,8 +2465,20 @@
2382
2465
  --wds-color-picker-padding-horizontal: 16px;
2383
2466
  --wds-color-picker-padding-vertical: 12px;
2384
2467
  --wds-color-picker-width: 236px;
2468
+ --wds-composer-header-actions-gap: 2px;
2469
+ --wds-composer-header-back-button-icon-size-medium: 18px;
2470
+ --wds-composer-header-back-button-icon-size-small: 18px;
2471
+ --wds-composer-header-border-fill: rgba(0, 0, 0, 0);
2472
+ --wds-composer-header-divider-margin: 16px;
2473
+ --wds-composer-header-fill: #212122;
2474
+ --wds-composer-header-height-medium: 30px;
2475
+ --wds-composer-header-height-small: 30px;
2476
+ --wds-composer-header-padding-vertical-small: 10px;
2477
+ --wds-composer-sidebar-border-width: 1px;
2385
2478
  --wds-composer-sidebar-bottom-width: 88px;
2386
2479
  --wds-composer-sidebar-end-max-width: 240px;
2480
+ --wds-composer-sidebar-fill: #212122;
2481
+ --wds-composer-sidebar-item-border-radius: 1000px;
2387
2482
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
2388
2483
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: 4px;
2389
2484
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: 4px;
@@ -2396,15 +2491,19 @@
2396
2491
  --wds-composer-sidebar-item-end-padding-vertical-large: 8px;
2397
2492
  --wds-composer-sidebar-item-end-padding-vertical-medium: 8px;
2398
2493
  --wds-composer-sidebar-item-end-padding-vertical-small: 4px;
2399
- --wds-composer-sidebar-item-tooltip-padding-horizontal-large: 8px;
2400
- --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: 8px;
2401
- --wds-composer-sidebar-item-tooltip-padding-horizontal-small: 8px;
2402
- --wds-composer-sidebar-item-tooltip-padding-vertical-large: 8px;
2403
- --wds-composer-sidebar-item-tooltip-padding-vertical-medium: 8px;
2404
- --wds-composer-sidebar-item-tooltip-padding-vertical-small: 4px;
2494
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: 12px;
2495
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: 12px;
2496
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: 12px;
2497
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: 0px;
2498
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: 0px;
2499
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: 0px;
2500
+ --wds-composer-sidebar-tooltip-container-padding-vertical: 0px;
2501
+ --wds-composer-sidebar-tooltip-item-gap: 8px;
2405
2502
  --wds-counter-badge-border-radius-medium: 1000px;
2406
2503
  --wds-counter-badge-border-radius-small: 1000px;
2407
2504
  --wds-counter-badge-font-size-tiny: 10px;
2505
+ --wds-counter-badge-outline-destructive-border-color: #A6464B;
2506
+ --wds-counter-badge-outline-warning-label-color: #FEF6ED;
2408
2507
  --wds-counter-badge-padding-horizontal-medium: 8px;
2409
2508
  --wds-counter-badge-padding-horizontal-small: 6px;
2410
2509
  --wds-counter-badge-padding-horizontal-tiny: 4px;
@@ -3067,12 +3166,24 @@
3067
3166
  --wds-section-header-padding-vertical-small: 8px;
3068
3167
  --wds-section-helper-action-padding-medium: 12px;
3069
3168
  --wds-section-helper-action-padding-small: 8px;
3169
+ --wds-section-helper-border-experimental-dark: #FFFFFF;
3070
3170
  --wds-section-helper-border-preview: #454544;
3071
- --wds-section-helper-border-radius: 6px;
3171
+ --wds-section-helper-border-radius: 12px;
3172
+ --wds-section-helper-border-standard: #5B78A9;
3173
+ --wds-section-helper-border-success: #4B9476;
3174
+ --wds-section-helper-close-button-clearance-medium: 32px;
3175
+ --wds-section-helper-close-button-clearance-small: 32px;
3176
+ --wds-section-helper-close-button-inset-medium: 4px;
3177
+ --wds-section-helper-close-button-inset-small: 4px;
3072
3178
  --wds-section-helper-close-button-offset: 0px;
3179
+ --wds-section-helper-content-gap-medium: 20px;
3180
+ --wds-section-helper-content-gap-small: 20px;
3181
+ --wds-section-helper-fill-danger: #4D2324;
3073
3182
  --wds-section-helper-fill-premium: #212328;
3074
3183
  --wds-section-helper-fill-preview: #2D2D2E;
3075
3184
  --wds-section-helper-fill-standard: #212328;
3185
+ --wds-section-helper-fill-success: #264B43;
3186
+ --wds-section-helper-fill-warning: #6F502B;
3076
3187
  --wds-section-helper-horizontal-margin: 6px;
3077
3188
  --wds-section-helper-horizontal-padding-medium: 16px;
3078
3189
  --wds-section-helper-horizontal-padding-small: 12px;
@@ -3080,11 +3191,11 @@
3080
3191
  --wds-section-helper-prefix-offset-medium: 16px;
3081
3192
  --wds-section-helper-text-font-line-height: 16px;
3082
3193
  --wds-section-helper-text-font-size: 12px;
3083
- --wds-section-helper-title-font-size: 14px;
3194
+ --wds-section-helper-title-font-size: 12px;
3084
3195
  --wds-section-helper-title-font-weight: 600;
3085
3196
  --wds-section-helper-vertical-margin: 6px;
3086
- --wds-section-helper-vertical-padding-medium: 24px;
3087
- --wds-section-helper-vertical-padding-small: 8px;
3197
+ --wds-section-helper-vertical-padding-medium: 16px;
3198
+ --wds-section-helper-vertical-padding-small: 16px;
3088
3199
  --wds-segmented-toggle-border-color: rgba(255, 255, 255, 0);
3089
3200
  --wds-segmented-toggle-border-color-disabled: rgba(255, 255, 255, 0);
3090
3201
  --wds-segmented-toggle-border-color-hover: rgba(255, 255, 255, 0);
@@ -3462,6 +3573,27 @@
3462
3573
  --wds-tag-label-font-line-height-small: 16px;
3463
3574
  --wds-tag-label-font-size-small: 12px;
3464
3575
  --wds-tag-list-action-gap: 12px;
3576
+ --wds-tag-outlined-dark-border-color: #A09E9D;
3577
+ --wds-tag-outlined-dark-fill: #212122;
3578
+ --wds-tag-outlined-dark-label-color: #FFFFFF;
3579
+ --wds-tag-outlined-error-border-color: #A6464B;
3580
+ --wds-tag-outlined-error-fill: #212122;
3581
+ --wds-tag-outlined-error-label-color: #D4D3D2;
3582
+ --wds-tag-outlined-light-border-color: rgba(0, 0, 0, .5);
3583
+ --wds-tag-outlined-light-fill: rgba(0, 0, 0, 0);
3584
+ --wds-tag-outlined-light-label-color: #212122;
3585
+ --wds-tag-outlined-neutral-border-color: #454544;
3586
+ --wds-tag-outlined-neutral-fill: #212122;
3587
+ --wds-tag-outlined-neutral-label-color: #D4D3D2;
3588
+ --wds-tag-outlined-standard-border-color: #212328;
3589
+ --wds-tag-outlined-standard-fill: #212122;
3590
+ --wds-tag-outlined-standard-label-color: #D4D3D2;
3591
+ --wds-tag-outlined-success-border-color: #396F5C;
3592
+ --wds-tag-outlined-success-fill: #212122;
3593
+ --wds-tag-outlined-success-label-color: #D4D3D2;
3594
+ --wds-tag-outlined-warning-border-color: #946933;
3595
+ --wds-tag-outlined-warning-fill: #212122;
3596
+ --wds-tag-outlined-warning-label-color: #D4D3D2;
3465
3597
  --wds-tag-padding-horizontal-large: 16px;
3466
3598
  --wds-tag-padding-horizontal-medium: 12px;
3467
3599
  --wds-tag-padding-horizontal-small: 12px;
@@ -3474,6 +3606,20 @@
3474
3606
  --wds-tag-size-medium: 28px;
3475
3607
  --wds-tag-size-small: 24px;
3476
3608
  --wds-tag-size-tiny: 20px;
3609
+ --wds-tag-solid-dark-fill: #FFFFFF;
3610
+ --wds-tag-solid-error-fill: #A6464B;
3611
+ --wds-tag-solid-light-fill: #212122;
3612
+ --wds-tag-solid-neutral-fill: #3A3A3B;
3613
+ --wds-tag-solid-standard-fill: #3A3A3B;
3614
+ --wds-tag-solid-success-fill: #396F5C;
3615
+ --wds-tag-solid-warning-fill: #946933;
3616
+ --wds-tag-transparent-dark-label-color: #FFFFFF;
3617
+ --wds-tag-transparent-error-label-color: #FF7680;
3618
+ --wds-tag-transparent-light-label-color: #212122;
3619
+ --wds-tag-transparent-neutral-label-color: #A09E9D;
3620
+ --wds-tag-transparent-standard-label-color: #D4D3D2;
3621
+ --wds-tag-transparent-success-label-color: #53DA98;
3622
+ --wds-tag-transparent-warning-label-color: #FFCB62;
3477
3623
  --wds-testimonial-list-gap: 24px;
3478
3624
  --wds-text-button-font-line-height-medium: 24px;
3479
3625
  --wds-text-button-font-line-height-small: 18px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.229.2",
3
+ "version": "1.231.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "74892de3052c97f726d595cabf937f1011f4b73a9711d4c4bf6d8f28"
39
+ "falconPackageHash": "330d002320fd6363ba3b61e7f485f9be5bae9e010cd4664051ab6a69"
40
40
  }
package/studio/all.css CHANGED
@@ -479,6 +479,8 @@
479
479
  --wds-counter-badge-font-size-tiny: 10px;
480
480
  --wds-composer-sidebar-end-max-width: 240px;
481
481
  --wds-composer-sidebar-bottom-width: 88px;
482
+ --wds-composer-sidebar-border-width: 1px;
483
+ --wds-composer-header-divider-margin: 20px;
482
484
  --wds-color-picker-width: 236px;
483
485
  --wds-circular-progress-bar-label-font-line-height: 18px;
484
486
  --wds-circular-progress-bar-border-width: 4px;
@@ -1353,6 +1355,12 @@
1353
1355
  --wds-section-helper-fullwidth-horizontal-padding-small: var(--wds-space-600);
1354
1356
  --wds-section-helper-fullwidth-horizontal-padding-medium: var(--wds-space-600);
1355
1357
  --wds-section-helper-fill-preview: var(--wds-color-black-700);
1358
+ --wds-section-helper-content-gap-small: var(--wds-space-200);
1359
+ --wds-section-helper-content-gap-medium: var(--wds-space-200);
1360
+ --wds-section-helper-close-button-inset-small: var(--wds-space-0);
1361
+ --wds-section-helper-close-button-inset-medium: var(--wds-space-100);
1362
+ --wds-section-helper-close-button-clearance-small: var(--wds-space-500);
1363
+ --wds-section-helper-close-button-clearance-medium: var(--wds-space-700);
1356
1364
  --wds-section-helper-border-radius: var(--wds-border-radius-200);
1357
1365
  --wds-section-helper-border-preview: var(--wds-color-black-550);
1358
1366
  --wds-section-helper-action-padding-small: var(--wds-space-200);
@@ -1665,12 +1673,14 @@
1665
1673
  --wds-counter-badge-padding-horizontal-medium: var(--wds-space-200);
1666
1674
  --wds-counter-badge-border-radius-small: var(--wds-border-radius-full);
1667
1675
  --wds-counter-badge-border-radius-medium: var(--wds-border-radius-full);
1668
- --wds-composer-sidebar-item-tooltip-padding-vertical-small: var(--wds-space-100);
1669
- --wds-composer-sidebar-item-tooltip-padding-vertical-medium: var(--wds-space-200);
1670
- --wds-composer-sidebar-item-tooltip-padding-vertical-large: var(--wds-space-200);
1671
- --wds-composer-sidebar-item-tooltip-padding-horizontal-small: var(--wds-space-200);
1672
- --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: var(--wds-space-200);
1673
- --wds-composer-sidebar-item-tooltip-padding-horizontal-large: var(--wds-space-200);
1676
+ --wds-composer-sidebar-tooltip-item-gap: var(--wds-space-0);
1677
+ --wds-composer-sidebar-tooltip-container-padding-vertical: var(--wds-space-150);
1678
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: var(--wds-space-150);
1679
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: var(--wds-space-300);
1680
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: var(--wds-space-300);
1681
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: var(--wds-space-300);
1682
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: var(--wds-space-300);
1683
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: var(--wds-space-300);
1674
1684
  --wds-composer-sidebar-item-end-padding-vertical-small: var(--wds-space-100);
1675
1685
  --wds-composer-sidebar-item-end-padding-vertical-medium: var(--wds-space-200);
1676
1686
  --wds-composer-sidebar-item-end-padding-vertical-large: var(--wds-space-200);
@@ -1683,6 +1693,13 @@
1683
1693
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: var(--wds-space-100);
1684
1694
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1685
1695
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1696
+ --wds-composer-sidebar-item-border-radius: var(--wds-border-radius-full);
1697
+ --wds-composer-header-padding-vertical-small: var(--wds-space-200);
1698
+ --wds-composer-header-height-small: var(--wds-space-750);
1699
+ --wds-composer-header-height-medium: var(--wds-space-900);
1700
+ --wds-composer-header-back-button-icon-size-small: var(--wds-space-475);
1701
+ --wds-composer-header-back-button-icon-size-medium: var(--wds-space-600);
1702
+ --wds-composer-header-actions-gap: var(--wds-space-200);
1686
1703
  --wds-color-picker-padding-vertical: var(--wds-space-300);
1687
1704
  --wds-color-picker-padding-horizontal: var(--wds-space-400);
1688
1705
  --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-100);
@@ -1830,6 +1847,11 @@
1830
1847
  --wds-breadcrumbs-on-dark-fill-hover: var(--wds-color-white-transparent-30);
1831
1848
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1832
1849
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-100);
1850
+ --wds-badge-transparent-warning-light-label-color: var(--wds-color-yellow-400);
1851
+ --wds-badge-transparent-neutral-success-label-color: var(--wds-color-green-400);
1852
+ --wds-badge-transparent-neutral-standard-label-color: var(--wds-color-blue-400);
1853
+ --wds-badge-transparent-neutral-light-label-color: var(--wds-color-black-700);
1854
+ --wds-badge-transparent-neutral-danger-label-color: var(--wds-color-red-400);
1833
1855
  --wds-badge-size-tiny: var(--wds-space-400);
1834
1856
  --wds-badge-size-small: var(--wds-space-500);
1835
1857
  --wds-badge-size-medium: var(--wds-space-600);
@@ -2014,6 +2036,41 @@
2014
2036
  --wds-text-button-font-size-tiny: var(--wds-font-size-body-tiny);
2015
2037
  --wds-text-button-font-size-small: var(--wds-font-size-body-small);
2016
2038
  --wds-text-button-font-size-medium: var(--wds-font-size-body-medium);
2039
+ --wds-tag-transparent-warning-label-color: var(--wds-color-text-warning);
2040
+ --wds-tag-transparent-success-label-color: var(--wds-color-text-success);
2041
+ --wds-tag-transparent-standard-label-color: var(--wds-color-text-standard-secondary);
2042
+ --wds-tag-transparent-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2043
+ --wds-tag-transparent-light-label-color: var(--wds-color-text-standard-primary-light);
2044
+ --wds-tag-transparent-error-label-color: var(--wds-color-text-destructive);
2045
+ --wds-tag-transparent-dark-label-color: var(--wds-color-text-standard-primary);
2046
+ --wds-tag-solid-warning-fill: var(--wds-color-fill-warning-secondary);
2047
+ --wds-tag-solid-success-fill: var(--wds-color-fill-success-secondary);
2048
+ --wds-tag-solid-standard-fill: var(--wds-color-fill-dark-secondary);
2049
+ --wds-tag-solid-neutral-fill: var(--wds-color-fill-dark-secondary);
2050
+ --wds-tag-solid-light-fill: var(--wds-color-fill-light-primary);
2051
+ --wds-tag-solid-error-fill: var(--wds-color-fill-destructive-secondary);
2052
+ --wds-tag-solid-dark-fill: var(--wds-color-fill-dark-primary);
2053
+ --wds-tag-outlined-warning-label-color: var(--wds-color-text-standard-secondary);
2054
+ --wds-tag-outlined-warning-fill: var(--wds-color-fill-warning-tertiary);
2055
+ --wds-tag-outlined-warning-border-color: var(--wds-color-border-warning-secondary);
2056
+ --wds-tag-outlined-success-label-color: var(--wds-color-text-standard-secondary);
2057
+ --wds-tag-outlined-success-fill: var(--wds-color-fill-success-tertiary);
2058
+ --wds-tag-outlined-success-border-color: var(--wds-color-border-success-secondary);
2059
+ --wds-tag-outlined-standard-label-color: var(--wds-color-text-standard-secondary);
2060
+ --wds-tag-outlined-standard-fill: var(--wds-color-fill-standard-tertiary);
2061
+ --wds-tag-outlined-standard-border-color: var(--wds-color-border-standard-secondary);
2062
+ --wds-tag-outlined-neutral-label-color: var(--wds-color-text-standard-secondary);
2063
+ --wds-tag-outlined-neutral-fill: var(--wds-color-fill-dark-tertiary);
2064
+ --wds-tag-outlined-neutral-border-color: var(--wds-color-border-dark-secondary);
2065
+ --wds-tag-outlined-light-label-color: var(--wds-color-text-standard-primary-light);
2066
+ --wds-tag-outlined-light-fill: var(--wds-color-fill-light-secondary);
2067
+ --wds-tag-outlined-light-border-color: var(--wds-color-border-light);
2068
+ --wds-tag-outlined-error-label-color: var(--wds-color-text-standard-secondary);
2069
+ --wds-tag-outlined-error-fill: var(--wds-color-fill-destructive-tertiary);
2070
+ --wds-tag-outlined-error-border-color: var(--wds-color-border-destructive-secondary);
2071
+ --wds-tag-outlined-dark-label-color: var(--wds-color-text-standard-primary);
2072
+ --wds-tag-outlined-dark-fill: var(--wds-color-fill-dark-tertiary);
2073
+ --wds-tag-outlined-dark-border-color: var(--wds-color-border-dark-primary);
2017
2074
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
2018
2075
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
2019
2076
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
@@ -2092,8 +2149,14 @@
2092
2149
  --wds-segmented-toggle-border-color: var(--wds-color-border-standard-secondary);
2093
2150
  --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2094
2151
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-100);
2152
+ --wds-section-helper-fill-warning: var(--wds-color-fill-surface-warning);
2153
+ --wds-section-helper-fill-success: var(--wds-color-fill-surface-success);
2095
2154
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
2096
2155
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2156
+ --wds-section-helper-fill-danger: var(--wds-color-fill-surface-destructive);
2157
+ --wds-section-helper-border-success: var(--wds-color-border-success-primary);
2158
+ --wds-section-helper-border-standard: var(--wds-color-border-standard-primary);
2159
+ --wds-section-helper-border-experimental-dark: var(--wds-color-fill-dark-primary);
2097
2160
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
2098
2161
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
2099
2162
  --wds-section-header-label-fill-neutral: var(--wds-color-text-standard-primary);
@@ -2335,6 +2398,11 @@
2335
2398
  --wds-divider-fill-color-light: var(--wds-color-border-dark-secondary);
2336
2399
  --wds-custom-modal-header-subtitle-font-size: var(--wds-font-size-body-small);
2337
2400
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2401
+ --wds-counter-badge-outline-warning-label-color: var(--wds-color-text-warning);
2402
+ --wds-counter-badge-outline-destructive-border-color: var(--wds-color-border-destructive-primary);
2403
+ --wds-composer-sidebar-fill: var(--wds-color-fill-standard-tertiary);
2404
+ --wds-composer-header-fill: var(--wds-color-fill-surface-default);
2405
+ --wds-composer-header-border-fill: var(--wds-color-border-dark-secondary);
2338
2406
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
2339
2407
  --wds-close-button-standard-filled-text: var(--wds-color-text-standard-primary);
2340
2408
  --wds-close-button-standard-filled-fill: var(--wds-color-fill-dark-tertiary);
@@ -2475,6 +2543,7 @@
2475
2543
  --wds-badge-transparent-warning-label-color: var(--wds-color-text-warning);
2476
2544
  --wds-badge-transparent-urgent-label-color: var(--wds-color-text-urgent);
2477
2545
  --wds-badge-transparent-success-label-color: var(--wds-color-text-success);
2546
+ --wds-badge-transparent-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2478
2547
  --wds-badge-solid-warning-light-label-color: var(--wds-color-text-standard-secondary);
2479
2548
  --wds-badge-solid-warning-light-fill: var(--wds-color-fill-warning-secondary);
2480
2549
  --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-primary-light);
@@ -2486,9 +2555,9 @@
2486
2555
  --wds-badge-solid-neutral-standard-label-color: var(--wds-color-text-standard-secondary);
2487
2556
  --wds-badge-solid-neutral-standard-fill: var(--wds-color-fill-standard-secondary);
2488
2557
  --wds-badge-solid-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2489
- --wds-badge-solid-neutral-light-fill: var(--wds-color-fill-dark-secondary);
2490
2558
  --wds-badge-solid-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2491
2559
  --wds-badge-solid-neutral-danger-fill: var(--wds-color-fill-destructive-secondary);
2560
+ --wds-badge-outline-warning-light-label-color: var(--wds-color-text-standard-secondary);
2492
2561
  --wds-badge-outline-warning-light-border-color: var(--wds-color-border-warning-secondary);
2493
2562
  --wds-badge-outline-warning-label-color: var(--wds-color-text-warning);
2494
2563
  --wds-badge-outline-warning-fill: var(--wds-color-fill-warning-tertiary);
@@ -2505,9 +2574,13 @@
2505
2574
  --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2506
2575
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary);
2507
2576
  --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2577
+ --wds-badge-outline-neutral-success-label-color: var(--wds-color-text-standard-secondary);
2508
2578
  --wds-badge-outline-neutral-success-border-color: var(--wds-color-border-success-secondary);
2579
+ --wds-badge-outline-neutral-standard-label-color: var(--wds-color-text-standard-secondary);
2509
2580
  --wds-badge-outline-neutral-standard-border-color: var(--wds-color-border-standard-secondary);
2581
+ --wds-badge-outline-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2510
2582
  --wds-badge-outline-neutral-light-border-color: var(--wds-color-border-dark-secondary);
2583
+ --wds-badge-outline-neutral-danger-label-color: var(--wds-color-text-standard-secondary);
2511
2584
  --wds-badge-outline-neutral-danger-border-color: var(--wds-color-border-destructive-secondary);
2512
2585
  --wds-badge-outline-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2513
2586
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-tertiary);