@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/all.css CHANGED
@@ -461,6 +461,7 @@
461
461
  --wds-counter-badge-font-size-tiny: 10px;
462
462
  --wds-composer-sidebar-end-max-width: 240px;
463
463
  --wds-composer-sidebar-bottom-width: 88px;
464
+ --wds-composer-sidebar-border-width: 0px;
464
465
  --wds-color-picker-width: 236px;
465
466
  --wds-clickable-card-standard-box-shadow-hover: none;
466
467
  --wds-carousel-gradient-width: 30px;
@@ -506,7 +507,6 @@
506
507
  --wds-calendar-padding-medium: 18px;
507
508
  --wds-button-border-ai-secondary-mask: none;
508
509
  --wds-breadcrumbs-height-medium: 26px;
509
- --wds-badge-outline-warning-light-border-color: #c78634;
510
510
  --wds-avatar-group-gap-condensed: -2px;
511
511
  --wds-avatar-group-divider-width: 1.5px;
512
512
  --wds-avatar-group-divider-radius: 1px;
@@ -1097,6 +1097,8 @@
1097
1097
  --wds-text-button-font-weight-normal: var(--wds-font-weight-semi-bold);
1098
1098
  --wds-testimonial-list-gap: var(--wds-space-600);
1099
1099
  --wds-tag-list-action-gap: var(--wds-space-300);
1100
+ --wds-tag-transparent-warning-label-color: var(--wds-color-yellow-0);
1101
+ --wds-tag-transparent-success-label-color: var(--wds-color-green-50);
1100
1102
  --wds-tag-size-tiny: var(--wds-space-500);
1101
1103
  --wds-tag-size-small: var(--wds-space-600);
1102
1104
  --wds-tag-size-medium: var(--wds-space-700);
@@ -1109,6 +1111,17 @@
1109
1111
  --wds-tag-padding-horizontal-small: var(--wds-space-300);
1110
1112
  --wds-tag-padding-horizontal-medium: var(--wds-space-300);
1111
1113
  --wds-tag-padding-horizontal-large: var(--wds-space-400);
1114
+ --wds-tag-outlined-warning-fill: var(--wds-color-yellow-500);
1115
+ --wds-tag-outlined-warning-border-color: var(--wds-color-yellow-200);
1116
+ --wds-tag-outlined-success-fill: var(--wds-color-green-500);
1117
+ --wds-tag-outlined-success-border-color: var(--wds-color-green-200);
1118
+ --wds-tag-outlined-standard-fill: var(--wds-color-blue-500);
1119
+ --wds-tag-outlined-standard-border-color: var(--wds-color-blue-250);
1120
+ --wds-tag-outlined-neutral-fill: var(--wds-color-white);
1121
+ --wds-tag-outlined-neutral-border-color: var(--wds-color-black-500);
1122
+ --wds-tag-outlined-error-fill: var(--wds-color-red-600);
1123
+ --wds-tag-outlined-error-border-color: var(--wds-color-red-200);
1124
+ --wds-tag-outlined-dark-fill: var(--wds-color-black-100-transparent-0);
1112
1125
  --wds-tag-border-radius-tiny: var(--wds-border-radius-200);
1113
1126
  --wds-tag-border-radius-small: var(--wds-border-radius-200);
1114
1127
  --wds-tag-border-radius-medium: var(--wds-border-radius-200);
@@ -1356,19 +1369,31 @@
1356
1369
  --wds-segmented-toggle-border-color-hover: var(--wds-color-black-100-transparent-0);
1357
1370
  --wds-segmented-toggle-border-color-disabled: var(--wds-color-black-100-transparent-0);
1358
1371
  --wds-segmented-toggle-border-color: var(--wds-color-black-100-transparent-0);
1359
- --wds-section-helper-vertical-padding-small: var(--wds-space-200);
1360
- --wds-section-helper-vertical-padding-medium: var(--wds-space-600);
1372
+ --wds-section-helper-vertical-padding-small: var(--wds-space-400);
1373
+ --wds-section-helper-vertical-padding-medium: var(--wds-space-400);
1361
1374
  --wds-section-helper-vertical-margin: var(--wds-space-150);
1362
1375
  --wds-section-helper-title-font-weight: var(--wds-font-weight-semi-bold);
1363
1376
  --wds-section-helper-prefix-offset-medium: var(--wds-space-400);
1364
1377
  --wds-section-helper-horizontal-padding-small: var(--wds-space-300);
1365
1378
  --wds-section-helper-horizontal-padding-medium: var(--wds-space-400);
1366
1379
  --wds-section-helper-horizontal-margin: var(--wds-space-150);
1380
+ --wds-section-helper-fill-warning: var(--wds-color-yellow-600);
1381
+ --wds-section-helper-fill-success: var(--wds-color-green-600);
1367
1382
  --wds-section-helper-fill-standard: var(--wds-color-blue-600);
1368
- --wds-section-helper-fill-preview: var(--wds-color-black-750);
1383
+ --wds-section-helper-fill-preview: var(--wds-color-black-700);
1384
+ --wds-section-helper-fill-danger: var(--wds-color-red-600);
1385
+ --wds-section-helper-content-gap-small: var(--wds-space-500);
1386
+ --wds-section-helper-content-gap-medium: var(--wds-space-500);
1369
1387
  --wds-section-helper-close-button-offset: var(--wds-space-0);
1370
- --wds-section-helper-border-radius: var(--wds-border-radius-300);
1371
- --wds-section-helper-border-preview: var(--wds-color-black-600);
1388
+ --wds-section-helper-close-button-inset-small: var(--wds-space-100);
1389
+ --wds-section-helper-close-button-inset-medium: var(--wds-space-100);
1390
+ --wds-section-helper-close-button-clearance-small: var(--wds-space-800);
1391
+ --wds-section-helper-close-button-clearance-medium: var(--wds-space-800);
1392
+ --wds-section-helper-border-success: var(--wds-color-green-200);
1393
+ --wds-section-helper-border-standard: var(--wds-color-blue-300);
1394
+ --wds-section-helper-border-radius: var(--wds-border-radius-600);
1395
+ --wds-section-helper-border-preview: var(--wds-color-black-550);
1396
+ --wds-section-helper-border-experimental-dark: var(--wds-color-black-300);
1372
1397
  --wds-section-helper-action-padding-small: var(--wds-space-200);
1373
1398
  --wds-section-helper-action-padding-medium: var(--wds-space-300);
1374
1399
  --wds-section-header-padding-vertical-small: var(--wds-space-200);
@@ -1679,9 +1704,9 @@
1679
1704
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1680
1705
  --wds-form-field-label-gap-small: var(--wds-space-200);
1681
1706
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
1682
- --wds-floating-helper-padding-vertical: var(--wds-space-700);
1683
- --wds-floating-helper-padding-horizontal: var(--wds-space-800);
1684
- --wds-floating-helper-main-action-padding-top: var(--wds-space-400);
1707
+ --wds-floating-helper-padding-vertical: var(--wds-space-600);
1708
+ --wds-floating-helper-padding-horizontal: var(--wds-space-600);
1709
+ --wds-floating-helper-main-action-padding-top: var(--wds-space-500);
1685
1710
  --wds-fill-button-border-width: var(--wds-border-width-200);
1686
1711
  --wds-field-set-label-gap-tiny: var(--wds-space-150);
1687
1712
  --wds-field-set-label-gap-small: var(--wds-space-200);
@@ -1721,14 +1746,19 @@
1721
1746
  --wds-counter-badge-size-medium: var(--wds-space-600);
1722
1747
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
1723
1748
  --wds-counter-badge-padding-horizontal-medium: var(--wds-space-200);
1749
+ --wds-counter-badge-outline-warning-label-color: var(--wds-color-yellow-0);
1750
+ --wds-counter-badge-outline-destructive-border-color: var(--wds-color-red-200);
1724
1751
  --wds-counter-badge-border-radius-small: var(--wds-border-radius-full);
1725
1752
  --wds-counter-badge-border-radius-medium: var(--wds-border-radius-full);
1726
- --wds-composer-sidebar-item-tooltip-padding-vertical-small: var(--wds-space-100);
1727
- --wds-composer-sidebar-item-tooltip-padding-vertical-medium: var(--wds-space-200);
1728
- --wds-composer-sidebar-item-tooltip-padding-vertical-large: var(--wds-space-200);
1729
- --wds-composer-sidebar-item-tooltip-padding-horizontal-small: var(--wds-space-200);
1730
- --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: var(--wds-space-200);
1731
- --wds-composer-sidebar-item-tooltip-padding-horizontal-large: var(--wds-space-200);
1753
+ --wds-composer-sidebar-tooltip-item-gap: var(--wds-space-200);
1754
+ --wds-composer-sidebar-tooltip-container-padding-vertical: var(--wds-space-0);
1755
+ --wds-composer-sidebar-item-border-radius: var(--wds-border-radius-400);
1756
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: var(--wds-space-0);
1757
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: var(--wds-space-0);
1758
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: var(--wds-space-0);
1759
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: var(--wds-space-300);
1760
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: var(--wds-space-300);
1761
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: var(--wds-space-300);
1732
1762
  --wds-composer-sidebar-item-end-padding-vertical-small: var(--wds-space-100);
1733
1763
  --wds-composer-sidebar-item-end-padding-vertical-medium: var(--wds-space-200);
1734
1764
  --wds-composer-sidebar-item-end-padding-vertical-large: var(--wds-space-200);
@@ -1741,6 +1771,14 @@
1741
1771
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: var(--wds-space-100);
1742
1772
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1743
1773
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1774
+ --wds-composer-header-padding-vertical-small: var(--wds-space-250);
1775
+ --wds-composer-header-height-small: var(--wds-space-750);
1776
+ --wds-composer-header-height-medium: var(--wds-space-750);
1777
+ --wds-composer-header-divider-margin: var(--wds-space-400);
1778
+ --wds-composer-header-border-fill: var(--wds-color-white-transparent-0);
1779
+ --wds-composer-header-back-button-icon-size-small: var(--wds-space-475);
1780
+ --wds-composer-header-back-button-icon-size-medium: var(--wds-space-475);
1781
+ --wds-composer-header-actions-gap: var(--wds-space-50);
1744
1782
  --wds-color-picker-padding-vertical: var(--wds-space-300);
1745
1783
  --wds-color-picker-padding-horizontal: var(--wds-space-400);
1746
1784
  --wds-code-snippet-border-radius-singleline: var(--wds-border-radius-500);
@@ -1939,9 +1977,12 @@
1939
1977
  --wds-breadcrumbs-font-size-small: var(--wds-font-size-200);
1940
1978
  --wds-breadcrumbs-divider-margin-horizontal: var(--wds-space-0);
1941
1979
  --wds-breadcrumbs-border-radius: var(--wds-border-radius-300);
1980
+ --wds-badge-transparent-warning-light-label-color: var(--wds-color-yellow-0);
1942
1981
  --wds-badge-transparent-warning-label-color: var(--wds-color-yellow-0);
1943
1982
  --wds-badge-transparent-urgent-label-color: var(--wds-color-orange-0);
1944
1983
  --wds-badge-transparent-success-label-color: var(--wds-color-green-50);
1984
+ --wds-badge-transparent-neutral-success-label-color: var(--wds-color-green-50);
1985
+ --wds-badge-transparent-neutral-label-color: var(--wds-color-black-300);
1945
1986
  --wds-badge-solid-warning-light-label-color: var(--wds-color-yellow-0);
1946
1987
  --wds-badge-solid-warning-light-fill: var(--wds-color-yellow-500);
1947
1988
  --wds-badge-solid-success-fill: var(--wds-color-green-300);
@@ -1950,7 +1991,6 @@
1950
1991
  --wds-badge-solid-neutral-standard-label-color: var(--wds-color-blue-50);
1951
1992
  --wds-badge-solid-neutral-standard-fill: var(--wds-color-blue-500);
1952
1993
  --wds-badge-solid-neutral-light-label-color: var(--wds-color-black-300);
1953
- --wds-badge-solid-neutral-light-fill: var(--wds-color-black-700);
1954
1994
  --wds-badge-solid-neutral-danger-label-color: var(--wds-color-red-50);
1955
1995
  --wds-badge-solid-neutral-danger-fill: var(--wds-color-red-600);
1956
1996
  --wds-badge-size-tiny: var(--wds-space-500);
@@ -1962,8 +2002,9 @@
1962
2002
  --wds-badge-padding-horizontal-tiny: var(--wds-space-150);
1963
2003
  --wds-badge-padding-horizontal-small: var(--wds-space-200);
1964
2004
  --wds-badge-padding-horizontal-medium: var(--wds-space-200);
2005
+ --wds-badge-outline-warning-light-border-color: var(--wds-color-yellow-0);
1965
2006
  --wds-badge-outline-warning-label-color: var(--wds-color-yellow-0);
1966
- --wds-badge-outline-warning-fill: var(--wds-color-yellow-600);
2007
+ --wds-badge-outline-warning-fill: var(--wds-color-yellow-500);
1967
2008
  --wds-badge-outline-warning-border-color: var(--wds-color-yellow-0);
1968
2009
  --wds-badge-outline-urgent-label-color: var(--wds-color-orange-0);
1969
2010
  --wds-badge-outline-urgent-fill: var(--wds-color-orange-600);
@@ -1974,16 +2015,15 @@
1974
2015
  --wds-badge-outline-standard-label-color: var(--wds-color-blue-50);
1975
2016
  --wds-badge-outline-standard-fill: var(--wds-color-blue-500);
1976
2017
  --wds-badge-outline-standard-border-color: var(--wds-color-blue-200);
2018
+ --wds-badge-outline-premium-label-color: var(--wds-color-blue-50);
2019
+ --wds-badge-outline-premium-border-color: var(--wds-color-blue-100);
1977
2020
  --wds-badge-outline-neutral-success-border-color: var(--wds-color-green-100);
1978
2021
  --wds-badge-outline-neutral-standard-border-color: var(--wds-color-blue-200);
1979
- --wds-badge-outline-neutral-light-border-color: var(--wds-color-black-300);
1980
2022
  --wds-badge-outline-neutral-danger-border-color: var(--wds-color-red-200);
1981
2023
  --wds-badge-outline-neutral-label-color: var(--wds-color-black-300);
1982
- --wds-badge-outline-neutral-border-color: var(--wds-color-black-300);
1983
2024
  --wds-badge-outline-destructive-label-color: var(--wds-color-red-50);
1984
2025
  --wds-badge-outline-destructive-fill: var(--wds-color-red-600);
1985
2026
  --wds-badge-outline-destructive-border-color: var(--wds-color-red-200);
1986
- --wds-badge-outline-dark-fill: var(--wds-color-black-600);
1987
2027
  --wds-badge-outline-dark-border-color: var(--wds-color-black-100);
1988
2028
  --wds-badge-border-radius-tiny: var(--wds-border-radius-300);
1989
2029
  --wds-badge-border-radius-small: var(--wds-border-radius-300);
@@ -2139,6 +2179,28 @@
2139
2179
  --wds-text-button-font-size-tiny: var(--wds-font-size-body-tiny);
2140
2180
  --wds-text-button-font-size-small: var(--wds-font-size-body-tiny);
2141
2181
  --wds-text-button-font-size-medium: var(--wds-font-size-body-small);
2182
+ --wds-tag-transparent-standard-label-color: var(--wds-color-text-standard-secondary);
2183
+ --wds-tag-transparent-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2184
+ --wds-tag-transparent-light-label-color: var(--wds-color-text-standard-primary-light);
2185
+ --wds-tag-transparent-error-label-color: var(--wds-color-text-destructive);
2186
+ --wds-tag-transparent-dark-label-color: var(--wds-color-text-standard-primary);
2187
+ --wds-tag-solid-warning-fill: var(--wds-color-fill-warning-secondary);
2188
+ --wds-tag-solid-success-fill: var(--wds-color-fill-success-secondary);
2189
+ --wds-tag-solid-standard-fill: var(--wds-color-fill-standard-secondary);
2190
+ --wds-tag-solid-neutral-fill: var(--wds-color-fill-dark-secondary);
2191
+ --wds-tag-solid-light-fill: var(--wds-color-fill-light-primary);
2192
+ --wds-tag-solid-error-fill: var(--wds-color-fill-destructive-secondary);
2193
+ --wds-tag-solid-dark-fill: var(--wds-color-fill-dark-primary);
2194
+ --wds-tag-outlined-warning-label-color: var(--wds-color-text-standard-secondary);
2195
+ --wds-tag-outlined-success-label-color: var(--wds-color-text-standard-secondary);
2196
+ --wds-tag-outlined-standard-label-color: var(--wds-color-text-standard-secondary);
2197
+ --wds-tag-outlined-neutral-label-color: var(--wds-color-text-standard-secondary);
2198
+ --wds-tag-outlined-light-label-color: var(--wds-color-text-standard-primary-light);
2199
+ --wds-tag-outlined-light-fill: var(--wds-color-fill-light-secondary);
2200
+ --wds-tag-outlined-light-border-color: var(--wds-color-fill-light-primary);
2201
+ --wds-tag-outlined-error-label-color: var(--wds-color-text-standard-secondary);
2202
+ --wds-tag-outlined-dark-label-color: var(--wds-color-text-standard-primary);
2203
+ --wds-tag-outlined-dark-border-color: var(--wds-color-fill-dark-primary);
2142
2204
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
2143
2205
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
2144
2206
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
@@ -2211,7 +2273,7 @@
2211
2273
  --wds-segmented-toggle-fill-hover: var(--wds-color-fill-light-secondary);
2212
2274
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-tertiary);
2213
2275
  --wds-segmented-toggle-border-hover: var(--wds-color-border-standard-secondary-hover);
2214
- --wds-section-helper-title-font-size: var(--wds-font-size-body-small);
2276
+ --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2215
2277
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
2216
2278
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2217
2279
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -2424,6 +2486,8 @@
2424
2486
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2425
2487
  --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2426
2488
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2489
+ --wds-composer-sidebar-fill: var(--wds-color-fill-surface-sunken);
2490
+ --wds-composer-header-fill: var(--wds-color-fill-surface-sunken);
2427
2491
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
2428
2492
  --wds-close-button-standard-filled-text-disabled: var(--wds-color-text-disabled);
2429
2493
  --wds-close-button-standard-filled-text: var(--wds-color-text-standard-primary);
@@ -2521,14 +2585,23 @@
2521
2585
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2522
2586
  --wds-breadcrumbs-text-line-height-small: var(--wds-font-line-height-200);
2523
2587
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2524
- --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-secondary);
2525
- --wds-badge-solid-urgent-label-color: var(--wds-color-text-standard-secondary);
2526
- --wds-badge-solid-success-label-color: var(--wds-color-text-standard-secondary);
2527
- --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2588
+ --wds-badge-transparent-neutral-standard-label-color: var(--wds-color-text-primary);
2589
+ --wds-badge-transparent-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2590
+ --wds-badge-transparent-neutral-danger-label-color: var(--wds-color-text-destructive);
2591
+ --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-primary);
2592
+ --wds-badge-solid-urgent-label-color: var(--wds-color-text-standard-primary);
2593
+ --wds-badge-solid-success-label-color: var(--wds-color-text-standard-primary);
2594
+ --wds-badge-outline-warning-light-label-color: var(--wds-color-text-standard-primary);
2528
2595
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary-hover);
2529
- --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2596
+ --wds-badge-outline-neutral-success-label-color: var(--wds-color-text-standard-primary);
2597
+ --wds-badge-outline-neutral-standard-label-color: var(--wds-color-text-standard-primary);
2598
+ --wds-badge-outline-neutral-light-label-color: var(--wds-color-text-standard-primary);
2599
+ --wds-badge-outline-neutral-light-border-color: var(--wds-color-border-dark-primary);
2600
+ --wds-badge-outline-neutral-danger-label-color: var(--wds-color-text-standard-primary);
2530
2601
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-secondary);
2602
+ --wds-badge-outline-neutral-border-color: var(--wds-color-border-dark-primary);
2531
2603
  --wds-badge-outline-dark-label-color: var(--wds-color-text-standard-secondary);
2604
+ --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
2532
2605
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
2533
2606
  --wds-avatar-group-counter-fill-hover: var(--wds-color-fill-dark-secondary-hover);
2534
2607
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary);
package/odeditor/all.scss CHANGED
@@ -254,6 +254,7 @@
254
254
  --wds-counter-badge-font-size-tiny: 10px;
255
255
  --wds-composer-sidebar-end-max-width: 240px;
256
256
  --wds-composer-sidebar-bottom-width: 88px;
257
+ --wds-composer-sidebar-border-width: 0px;
257
258
  --wds-color-yellow-600: #fef6ed;
258
259
  --wds-color-yellow-500: #fef3e5;
259
260
  --wds-color-yellow-400: #fdead2;
@@ -495,7 +496,6 @@
495
496
  --wds-border-radius-200: 4px;
496
497
  --wds-border-radius-100: 2px;
497
498
  --wds-border-radius-0: 0px;
498
- --wds-badge-outline-warning-light-border-color: #c78634;
499
499
  --wds-background-blur-450: 40px;
500
500
  --wds-background-blur-375: 30px;
501
501
  --wds-background-blur-350: 28px;
@@ -671,6 +671,8 @@
671
671
  --wds-text-button-font-weight-thin: var(--wds-font-weight-medium);
672
672
  --wds-text-button-font-weight-normal: var(--wds-font-weight-semi-bold);
673
673
  --wds-testimonial-list-gap: var(--wds-space-600);
674
+ --wds-tag-transparent-warning-label-color: var(--wds-color-yellow-0);
675
+ --wds-tag-transparent-success-label-color: var(--wds-color-green-50);
674
676
  --wds-tag-size-tiny: var(--wds-space-500);
675
677
  --wds-tag-size-small: var(--wds-space-600);
676
678
  --wds-tag-size-medium: var(--wds-space-700);
@@ -683,6 +685,17 @@
683
685
  --wds-tag-padding-horizontal-small: var(--wds-space-300);
684
686
  --wds-tag-padding-horizontal-medium: var(--wds-space-300);
685
687
  --wds-tag-padding-horizontal-large: var(--wds-space-400);
688
+ --wds-tag-outlined-warning-fill: var(--wds-color-yellow-500);
689
+ --wds-tag-outlined-warning-border-color: var(--wds-color-yellow-200);
690
+ --wds-tag-outlined-success-fill: var(--wds-color-green-500);
691
+ --wds-tag-outlined-success-border-color: var(--wds-color-green-200);
692
+ --wds-tag-outlined-standard-fill: var(--wds-color-blue-500);
693
+ --wds-tag-outlined-standard-border-color: var(--wds-color-blue-250);
694
+ --wds-tag-outlined-neutral-fill: var(--wds-color-white);
695
+ --wds-tag-outlined-neutral-border-color: var(--wds-color-black-500);
696
+ --wds-tag-outlined-error-fill: var(--wds-color-red-600);
697
+ --wds-tag-outlined-error-border-color: var(--wds-color-red-200);
698
+ --wds-tag-outlined-dark-fill: var(--wds-color-black-100-transparent-0);
686
699
  --wds-tag-list-action-gap: var(--wds-space-300);
687
700
  --wds-tag-border-radius-tiny: var(--wds-border-radius-200);
688
701
  --wds-tag-border-radius-small: var(--wds-border-radius-200);
@@ -1014,19 +1027,31 @@
1014
1027
  --wds-segmented-toggle-border-color-hover: var(--wds-color-black-100-transparent-0);
1015
1028
  --wds-segmented-toggle-border-color-disabled: var(--wds-color-black-100-transparent-0);
1016
1029
  --wds-segmented-toggle-border-color: var(--wds-color-black-100-transparent-0);
1017
- --wds-section-helper-vertical-padding-small: var(--wds-space-200);
1018
- --wds-section-helper-vertical-padding-medium: var(--wds-space-600);
1030
+ --wds-section-helper-vertical-padding-small: var(--wds-space-400);
1031
+ --wds-section-helper-vertical-padding-medium: var(--wds-space-400);
1019
1032
  --wds-section-helper-vertical-margin: var(--wds-space-150);
1020
1033
  --wds-section-helper-title-font-weight: var(--wds-font-weight-semi-bold);
1021
1034
  --wds-section-helper-prefix-offset-medium: var(--wds-space-400);
1022
1035
  --wds-section-helper-horizontal-padding-small: var(--wds-space-300);
1023
1036
  --wds-section-helper-horizontal-padding-medium: var(--wds-space-400);
1024
1037
  --wds-section-helper-horizontal-margin: var(--wds-space-150);
1038
+ --wds-section-helper-fill-warning: var(--wds-color-yellow-600);
1039
+ --wds-section-helper-fill-success: var(--wds-color-green-600);
1025
1040
  --wds-section-helper-fill-standard: var(--wds-color-blue-600);
1026
- --wds-section-helper-fill-preview: var(--wds-color-black-750);
1041
+ --wds-section-helper-fill-preview: var(--wds-color-black-700);
1042
+ --wds-section-helper-fill-danger: var(--wds-color-red-600);
1043
+ --wds-section-helper-content-gap-small: var(--wds-space-500);
1044
+ --wds-section-helper-content-gap-medium: var(--wds-space-500);
1027
1045
  --wds-section-helper-close-button-offset: var(--wds-space-0);
1028
- --wds-section-helper-border-radius: var(--wds-border-radius-300);
1029
- --wds-section-helper-border-preview: var(--wds-color-black-600);
1046
+ --wds-section-helper-close-button-inset-small: var(--wds-space-100);
1047
+ --wds-section-helper-close-button-inset-medium: var(--wds-space-100);
1048
+ --wds-section-helper-close-button-clearance-small: var(--wds-space-800);
1049
+ --wds-section-helper-close-button-clearance-medium: var(--wds-space-800);
1050
+ --wds-section-helper-border-success: var(--wds-color-green-200);
1051
+ --wds-section-helper-border-standard: var(--wds-color-blue-300);
1052
+ --wds-section-helper-border-radius: var(--wds-border-radius-600);
1053
+ --wds-section-helper-border-preview: var(--wds-color-black-550);
1054
+ --wds-section-helper-border-experimental-dark: var(--wds-color-black-300);
1030
1055
  --wds-section-helper-action-padding-small: var(--wds-space-200);
1031
1056
  --wds-section-helper-action-padding-medium: var(--wds-space-300);
1032
1057
  --wds-section-header-padding-vertical-small: var(--wds-space-200);
@@ -1378,9 +1403,9 @@
1378
1403
  --wds-font-letter-spacing-heading-6: var(--wds-font-letter-spacing-100);
1379
1404
  --wds-font-letter-spacing-heading-5: var(--wds-font-letter-spacing-100);
1380
1405
  --wds-font-letter-spacing-heading-4: var(--wds-font-letter-spacing-0);
1381
- --wds-floating-helper-padding-vertical: var(--wds-space-700);
1382
- --wds-floating-helper-padding-horizontal: var(--wds-space-800);
1383
- --wds-floating-helper-main-action-padding-top: var(--wds-space-400);
1406
+ --wds-floating-helper-padding-vertical: var(--wds-space-600);
1407
+ --wds-floating-helper-padding-horizontal: var(--wds-space-600);
1408
+ --wds-floating-helper-main-action-padding-top: var(--wds-space-500);
1384
1409
  --wds-fill-button-border-width: var(--wds-border-width-200);
1385
1410
  --wds-field-set-label-gap-tiny: var(--wds-space-150);
1386
1411
  --wds-field-set-label-gap-small: var(--wds-space-200);
@@ -1420,14 +1445,18 @@
1420
1445
  --wds-counter-badge-size-medium: var(--wds-space-600);
1421
1446
  --wds-counter-badge-padding-horizontal-small: var(--wds-space-150);
1422
1447
  --wds-counter-badge-padding-horizontal-medium: var(--wds-space-200);
1448
+ --wds-counter-badge-outline-warning-label-color: var(--wds-color-yellow-0);
1449
+ --wds-counter-badge-outline-destructive-border-color: var(--wds-color-red-200);
1423
1450
  --wds-counter-badge-border-radius-small: var(--wds-border-radius-full);
1424
1451
  --wds-counter-badge-border-radius-medium: var(--wds-border-radius-full);
1425
- --wds-composer-sidebar-item-tooltip-padding-vertical-small: var(--wds-space-100);
1426
- --wds-composer-sidebar-item-tooltip-padding-vertical-medium: var(--wds-space-200);
1427
- --wds-composer-sidebar-item-tooltip-padding-vertical-large: var(--wds-space-200);
1428
- --wds-composer-sidebar-item-tooltip-padding-horizontal-small: var(--wds-space-200);
1429
- --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: var(--wds-space-200);
1430
- --wds-composer-sidebar-item-tooltip-padding-horizontal-large: var(--wds-space-200);
1452
+ --wds-composer-sidebar-tooltip-item-gap: var(--wds-space-200);
1453
+ --wds-composer-sidebar-tooltip-container-padding-vertical: var(--wds-space-0);
1454
+ --wds-composer-sidebar-item-tooltip-padding-vertical-small: var(--wds-space-0);
1455
+ --wds-composer-sidebar-item-tooltip-padding-vertical-medium: var(--wds-space-0);
1456
+ --wds-composer-sidebar-item-tooltip-padding-vertical-large: var(--wds-space-0);
1457
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-small: var(--wds-space-300);
1458
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-medium: var(--wds-space-300);
1459
+ --wds-composer-sidebar-item-tooltip-padding-horizontal-large: var(--wds-space-300);
1431
1460
  --wds-composer-sidebar-item-end-padding-vertical-small: var(--wds-space-100);
1432
1461
  --wds-composer-sidebar-item-end-padding-vertical-medium: var(--wds-space-200);
1433
1462
  --wds-composer-sidebar-item-end-padding-vertical-large: var(--wds-space-200);
@@ -1440,6 +1469,15 @@
1440
1469
  --wds-composer-sidebar-item-bottom-padding-horizontal-small: var(--wds-space-100);
1441
1470
  --wds-composer-sidebar-item-bottom-padding-horizontal-medium: var(--wds-space-100);
1442
1471
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: var(--wds-space-100);
1472
+ --wds-composer-sidebar-item-border-radius: var(--wds-border-radius-400);
1473
+ --wds-composer-header-padding-vertical-small: var(--wds-space-250);
1474
+ --wds-composer-header-height-small: var(--wds-space-750);
1475
+ --wds-composer-header-height-medium: var(--wds-space-750);
1476
+ --wds-composer-header-divider-margin: var(--wds-space-400);
1477
+ --wds-composer-header-border-fill: var(--wds-color-white-transparent-0);
1478
+ --wds-composer-header-back-button-icon-size-small: var(--wds-space-475);
1479
+ --wds-composer-header-back-button-icon-size-medium: var(--wds-space-475);
1480
+ --wds-composer-header-actions-gap: var(--wds-space-50);
1443
1481
  --wds-color-text-warning: var(--wds-color-yellow-100);
1444
1482
  --wds-color-text-urgent: var(--wds-color-orange-100);
1445
1483
  --wds-color-text-success: var(--wds-color-green-100);
@@ -1937,9 +1975,12 @@
1937
1975
  --wds-border-radius-surface-modal-backdrop: var(--wds-border-radius-0);
1938
1976
  --wds-border-radius-surface-modal: var(--wds-border-radius-600);
1939
1977
  --wds-border-radius-surface-default: var(--wds-border-radius-600);
1978
+ --wds-badge-transparent-warning-light-label-color: var(--wds-color-yellow-0);
1940
1979
  --wds-badge-transparent-warning-label-color: var(--wds-color-yellow-0);
1941
1980
  --wds-badge-transparent-urgent-label-color: var(--wds-color-orange-0);
1942
1981
  --wds-badge-transparent-success-label-color: var(--wds-color-green-50);
1982
+ --wds-badge-transparent-neutral-success-label-color: var(--wds-color-green-50);
1983
+ --wds-badge-transparent-neutral-label-color: var(--wds-color-black-300);
1943
1984
  --wds-badge-solid-warning-light-label-color: var(--wds-color-yellow-0);
1944
1985
  --wds-badge-solid-warning-light-fill: var(--wds-color-yellow-500);
1945
1986
  --wds-badge-solid-success-fill: var(--wds-color-green-300);
@@ -1948,7 +1989,6 @@
1948
1989
  --wds-badge-solid-neutral-standard-label-color: var(--wds-color-blue-50);
1949
1990
  --wds-badge-solid-neutral-standard-fill: var(--wds-color-blue-500);
1950
1991
  --wds-badge-solid-neutral-light-label-color: var(--wds-color-black-300);
1951
- --wds-badge-solid-neutral-light-fill: var(--wds-color-black-700);
1952
1992
  --wds-badge-solid-neutral-danger-label-color: var(--wds-color-red-50);
1953
1993
  --wds-badge-solid-neutral-danger-fill: var(--wds-color-red-600);
1954
1994
  --wds-badge-size-tiny: var(--wds-space-500);
@@ -1960,8 +2000,9 @@
1960
2000
  --wds-badge-padding-horizontal-tiny: var(--wds-space-150);
1961
2001
  --wds-badge-padding-horizontal-small: var(--wds-space-200);
1962
2002
  --wds-badge-padding-horizontal-medium: var(--wds-space-200);
2003
+ --wds-badge-outline-warning-light-border-color: var(--wds-color-yellow-0);
1963
2004
  --wds-badge-outline-warning-label-color: var(--wds-color-yellow-0);
1964
- --wds-badge-outline-warning-fill: var(--wds-color-yellow-600);
2005
+ --wds-badge-outline-warning-fill: var(--wds-color-yellow-500);
1965
2006
  --wds-badge-outline-warning-border-color: var(--wds-color-yellow-0);
1966
2007
  --wds-badge-outline-urgent-label-color: var(--wds-color-orange-0);
1967
2008
  --wds-badge-outline-urgent-fill: var(--wds-color-orange-600);
@@ -1972,16 +2013,15 @@
1972
2013
  --wds-badge-outline-standard-label-color: var(--wds-color-blue-50);
1973
2014
  --wds-badge-outline-standard-fill: var(--wds-color-blue-500);
1974
2015
  --wds-badge-outline-standard-border-color: var(--wds-color-blue-200);
2016
+ --wds-badge-outline-premium-label-color: var(--wds-color-blue-50);
2017
+ --wds-badge-outline-premium-border-color: var(--wds-color-blue-100);
1975
2018
  --wds-badge-outline-neutral-success-border-color: var(--wds-color-green-100);
1976
2019
  --wds-badge-outline-neutral-standard-border-color: var(--wds-color-blue-200);
1977
- --wds-badge-outline-neutral-light-border-color: var(--wds-color-black-300);
1978
2020
  --wds-badge-outline-neutral-label-color: var(--wds-color-black-300);
1979
2021
  --wds-badge-outline-neutral-danger-border-color: var(--wds-color-red-200);
1980
- --wds-badge-outline-neutral-border-color: var(--wds-color-black-300);
1981
2022
  --wds-badge-outline-destructive-label-color: var(--wds-color-red-50);
1982
2023
  --wds-badge-outline-destructive-fill: var(--wds-color-red-600);
1983
2024
  --wds-badge-outline-destructive-border-color: var(--wds-color-red-200);
1984
- --wds-badge-outline-dark-fill: var(--wds-color-black-600);
1985
2025
  --wds-badge-outline-dark-border-color: var(--wds-color-black-100);
1986
2026
  --wds-badge-border-radius-tiny: var(--wds-border-radius-300);
1987
2027
  --wds-badge-border-radius-small: var(--wds-border-radius-300);
@@ -2121,6 +2161,28 @@
2121
2161
  --wds-text-button-font-size-tiny: var(--wds-font-size-body-tiny);
2122
2162
  --wds-text-button-font-size-small: var(--wds-font-size-body-tiny);
2123
2163
  --wds-text-button-font-size-medium: var(--wds-font-size-body-small);
2164
+ --wds-tag-transparent-standard-label-color: var(--wds-color-text-standard-secondary);
2165
+ --wds-tag-transparent-neutral-label-color: var(--wds-color-text-standard-secondary-light);
2166
+ --wds-tag-transparent-light-label-color: var(--wds-color-text-standard-primary-light);
2167
+ --wds-tag-transparent-error-label-color: var(--wds-color-text-destructive);
2168
+ --wds-tag-transparent-dark-label-color: var(--wds-color-text-standard-primary);
2169
+ --wds-tag-solid-warning-fill: var(--wds-color-fill-warning-secondary);
2170
+ --wds-tag-solid-success-fill: var(--wds-color-fill-success-secondary);
2171
+ --wds-tag-solid-standard-fill: var(--wds-color-fill-standard-secondary);
2172
+ --wds-tag-solid-neutral-fill: var(--wds-color-fill-dark-secondary);
2173
+ --wds-tag-solid-light-fill: var(--wds-color-fill-light-primary);
2174
+ --wds-tag-solid-error-fill: var(--wds-color-fill-destructive-secondary);
2175
+ --wds-tag-solid-dark-fill: var(--wds-color-fill-dark-primary);
2176
+ --wds-tag-outlined-warning-label-color: var(--wds-color-text-standard-secondary);
2177
+ --wds-tag-outlined-success-label-color: var(--wds-color-text-standard-secondary);
2178
+ --wds-tag-outlined-standard-label-color: var(--wds-color-text-standard-secondary);
2179
+ --wds-tag-outlined-neutral-label-color: var(--wds-color-text-standard-secondary);
2180
+ --wds-tag-outlined-light-label-color: var(--wds-color-text-standard-primary-light);
2181
+ --wds-tag-outlined-light-fill: var(--wds-color-fill-light-secondary);
2182
+ --wds-tag-outlined-light-border-color: var(--wds-color-fill-light-primary);
2183
+ --wds-tag-outlined-error-label-color: var(--wds-color-text-standard-secondary);
2184
+ --wds-tag-outlined-dark-label-color: var(--wds-color-text-standard-primary);
2185
+ --wds-tag-outlined-dark-border-color: var(--wds-color-fill-dark-primary);
2124
2186
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
2125
2187
  --wds-tabs-label-font-size-small-medium: var(--wds-font-size-body-small);
2126
2188
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
@@ -2199,7 +2261,7 @@
2199
2261
  --wds-segmented-toggle-fill-hover: var(--wds-color-fill-light-secondary);
2200
2262
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-tertiary);
2201
2263
  --wds-segmented-toggle-border-hover: var(--wds-color-border-standard-secondary-hover);
2202
- --wds-section-helper-title-font-size: var(--wds-font-size-body-small);
2264
+ --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2203
2265
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
2204
2266
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2205
2267
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -2422,6 +2484,8 @@
2422
2484
  --wds-custom-modal-footnote-text-font-size: var(--wds-font-size-body-tiny);
2423
2485
  --wds-custom-modal-close-button-fill: var(--wds-color-fill-dark-secondary);
2424
2486
  --wds-custom-modal-border-radius: var(--wds-border-radius-surface-modal);
2487
+ --wds-composer-sidebar-fill: var(--wds-color-fill-surface-sunken);
2488
+ --wds-composer-header-fill: var(--wds-color-fill-surface-sunken);
2425
2489
  --wds-color-fill-surface-overlay-blur: var(--wds-color-fill-surface-overlay);
2426
2490
  --wds-color-fill-surface-modal-backdrop: var(--wds-color-fill-transparent-primary);
2427
2491
  --wds-close-button-standard-filled-text-hover: var(--wds-color-text-standard-primary);
@@ -2521,14 +2585,23 @@
2521
2585
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2522
2586
  --wds-breadcrumbs-text-line-height-small: var(--wds-font-line-height-200);
2523
2587
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2524
- --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-secondary);
2525
- --wds-badge-solid-urgent-label-color: var(--wds-color-text-standard-secondary);
2526
- --wds-badge-solid-success-label-color: var(--wds-color-text-standard-secondary);
2527
- --wds-badge-outline-premium-label-color: var(--wds-color-text-premium);
2588
+ --wds-badge-transparent-neutral-standard-label-color: var(--wds-color-text-primary);
2589
+ --wds-badge-transparent-neutral-light-label-color: var(--wds-color-text-standard-secondary);
2590
+ --wds-badge-transparent-neutral-danger-label-color: var(--wds-color-text-destructive);
2591
+ --wds-badge-solid-warning-label-color: var(--wds-color-text-standard-primary);
2592
+ --wds-badge-solid-urgent-label-color: var(--wds-color-text-standard-primary);
2593
+ --wds-badge-solid-success-label-color: var(--wds-color-text-standard-primary);
2594
+ --wds-badge-outline-warning-light-label-color: var(--wds-color-text-standard-primary);
2528
2595
  --wds-badge-outline-premium-fill: var(--wds-color-fill-premium-tertiary-hover);
2529
- --wds-badge-outline-premium-border-color: var(--wds-color-border-premium-primary);
2596
+ --wds-badge-outline-neutral-success-label-color: var(--wds-color-text-standard-primary);
2597
+ --wds-badge-outline-neutral-standard-label-color: var(--wds-color-text-standard-primary);
2598
+ --wds-badge-outline-neutral-light-label-color: var(--wds-color-text-standard-primary);
2599
+ --wds-badge-outline-neutral-light-border-color: var(--wds-color-border-dark-primary);
2530
2600
  --wds-badge-outline-neutral-fill: var(--wds-color-fill-dark-secondary);
2601
+ --wds-badge-outline-neutral-danger-label-color: var(--wds-color-text-standard-primary);
2602
+ --wds-badge-outline-neutral-border-color: var(--wds-color-border-dark-primary);
2531
2603
  --wds-badge-outline-dark-label-color: var(--wds-color-text-standard-secondary);
2604
+ --wds-badge-outline-dark-fill: var(--wds-color-fill-dark-secondary);
2532
2605
  --wds-badge-label-font-size-small: var(--wds-font-size-body-tiny);
2533
2606
  --wds-avatar-text-fill: var(--wds-color-text-standard-primary);
2534
2607
  --wds-avatar-group-counter-fill-hover: var(--wds-color-fill-dark-secondary-hover);