@wix/design-system-tokens 1.161.1 → 1.162.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 (29) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/all.css +7 -0
  3. package/all.scss +7 -0
  4. package/all.st.css +14 -0
  5. package/component.st.css +8 -0
  6. package/foundation.st.css +6 -0
  7. package/odeditor/all.css +11 -6
  8. package/odeditor/all.scss +11 -6
  9. package/odeditor/all.st.css +23 -13
  10. package/odeditor/component.st.css +17 -9
  11. package/odeditor/foundation.st.css +2 -0
  12. package/odeditor/semantic.st.css +4 -4
  13. package/odeditor-dark/all.css +117 -112
  14. package/odeditor-dark/all.scss +117 -112
  15. package/odeditor-dark/all.st.css +1014 -1004
  16. package/odeditor-dark/component.st.css +585 -577
  17. package/odeditor-dark/foundation.st.css +104 -102
  18. package/odeditor-dark/semantic.st.css +325 -325
  19. package/package.json +2 -2
  20. package/studio/all.css +7 -0
  21. package/studio/all.scss +7 -0
  22. package/studio/all.st.css +14 -0
  23. package/studio/component.st.css +8 -0
  24. package/studio/foundation.st.css +6 -0
  25. package/wixel/all.css +5 -0
  26. package/wixel/all.scss +5 -0
  27. package/wixel/all.st.css +10 -0
  28. package/wixel/component.st.css +8 -0
  29. package/wixel/foundation.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,14 @@
1
+ ## 1.162.0 - 2026-01-23
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): add color-blue-350 foundation token [15851](https://github.com/wix-private/wix-design-systems/pull/15851)
6
+ - feat(HarmonyDark): updated transparent white to use 000 [15807](https://github.com/wix-private/wix-design-systems/pull/15807)
7
+
8
+ ### Bug Fixes
9
+
10
+ - fix(Loader): update loader-fill-default to standard-tertiary-readonly [15837](https://github.com/wix-private/wix-design-systems/pull/15837)
11
+
1
12
  ## 1.161.1 - 2026-01-14
2
13
 
3
14
  ### Features
package/all.css CHANGED
@@ -196,6 +196,7 @@
196
196
  --wds-color-blue-600: #f4f7ff;
197
197
  --wds-color-blue-500: #e7f0ff;
198
198
  --wds-color-blue-400: #d6e6fe;
199
+ --wds-color-blue-350: #D1DCFF;
199
200
  --wds-color-blue-300: #a8caff;
200
201
  --wds-color-blue-250: #80b1ff;
201
202
  --wds-color-blue-200: #5999ff;
@@ -212,6 +213,8 @@
212
213
  --wds-color-black-200-transparent-70: rgba(68, 72, 95, .7);
213
214
  --wds-color-black-200-transparent-60: rgba(68, 72, 95, .6);
214
215
  --wds-color-black-200-transparent-50: rgba(68, 72, 95, .5);
216
+ --wds-color-black-200-transparent-20: rgba(68, 72, 95, .2);
217
+ --wds-color-black-200-transparent-18: rgba(68, 72, 95, 0.18);
215
218
  --wds-color-black-200-transparent-0: rgba(68, 72, 95, 0);
216
219
  --wds-color-black-100-transparent-70: rgba(0, 6, 36, .7);
217
220
  --wds-color-black-100-transparent-50: rgba(0, 6, 36, .5);
@@ -932,6 +935,7 @@
932
935
  --wds-social-preview-content-padding-horizontal: var(--wds-space-200);
933
936
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-200);
934
937
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-200);
938
+ --wds-slider-track-color-disabled: var(--wds-color-black-500);
935
939
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
936
940
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
937
941
  --wds-slider-slider-mark-size: var(--wds-space-100);
@@ -1621,6 +1625,7 @@
1621
1625
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-200);
1622
1626
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
1623
1627
  --wds-section-helper-fill-preview: var(--wds-color-fill-surface-neutral);
1628
+ --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
1624
1629
  --wds-section-helper-border-preview: var(--wds-color-border-dark-primary);
1625
1630
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
1626
1631
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
@@ -1692,8 +1697,10 @@
1692
1697
  --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1693
1698
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-small);
1694
1699
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1700
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-secondary);
1695
1701
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-small);
1696
1702
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-medium);
1703
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-text-destructive);
1697
1704
  --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1698
1705
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1699
1706
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
package/all.scss CHANGED
@@ -255,6 +255,7 @@
255
255
  --wds-color-blue-600: #f4f7ff;
256
256
  --wds-color-blue-500: #e7f0ff;
257
257
  --wds-color-blue-400: #d6e6fe;
258
+ --wds-color-blue-350: #D1DCFF;
258
259
  --wds-color-blue-300: #a8caff;
259
260
  --wds-color-blue-250: #80b1ff;
260
261
  --wds-color-blue-200: #5999ff;
@@ -278,6 +279,8 @@
278
279
  --wds-color-black-200-transparent-70: rgba(68, 72, 95, .7);
279
280
  --wds-color-black-200-transparent-60: rgba(68, 72, 95, .6);
280
281
  --wds-color-black-200-transparent-50: rgba(68, 72, 95, .5);
282
+ --wds-color-black-200-transparent-20: rgba(68, 72, 95, .2);
283
+ --wds-color-black-200-transparent-18: rgba(68, 72, 95, 0.18);
281
284
  --wds-color-black-200-transparent-0: rgba(68, 72, 95, 0);
282
285
  --wds-color-black-200: #44485f;
283
286
  --wds-color-black-100-transparent-70: rgba(0, 6, 36, .7);
@@ -510,6 +513,7 @@
510
513
  --wds-social-preview-content-padding-horizontal: var(--wds-space-200);
511
514
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-200);
512
515
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-200);
516
+ --wds-slider-track-color-disabled: var(--wds-color-black-500);
513
517
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
514
518
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
515
519
  --wds-slider-slider-mark-size: var(--wds-space-100);
@@ -1611,6 +1615,7 @@
1611
1615
  --wds-section-helper-text-font-line-height: var(--wds-font-line-height-200);
1612
1616
  --wds-section-helper-fill-standard: var(--wds-color-fill-surface-standard);
1613
1617
  --wds-section-helper-fill-preview: var(--wds-color-fill-surface-neutral);
1618
+ --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
1614
1619
  --wds-section-helper-border-preview: var(--wds-color-border-dark-primary);
1615
1620
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-small);
1616
1621
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-medium);
@@ -1681,9 +1686,11 @@
1681
1686
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-placeholder);
1682
1687
  --wds-list-item-action-suffix-fill: var(--wds-color-text-placeholder);
1683
1688
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-small);
1689
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-secondary);
1684
1690
  --wds-list-item-action-subtitle-fill-active: var(--wds-color-text-placeholder);
1685
1691
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-small);
1686
1692
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-medium);
1693
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-text-destructive);
1687
1694
  --wds-list-item-action-label-fill-active: var(--wds-color-text-primary);
1688
1695
  --wds-list-item-action-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
1689
1696
  --wds-list-item-action-fill-active: var(--wds-color-fill-standard-tertiary-active);
package/all.st.css CHANGED
@@ -347,6 +347,8 @@
347
347
  @property st-global(--wds-color-black-100-transparent-70);
348
348
  @property st-global(--wds-color-black-200);
349
349
  @property st-global(--wds-color-black-200-transparent-0);
350
+ @property st-global(--wds-color-black-200-transparent-18);
351
+ @property st-global(--wds-color-black-200-transparent-20);
350
352
  @property st-global(--wds-color-black-200-transparent-50);
351
353
  @property st-global(--wds-color-black-200-transparent-60);
352
354
  @property st-global(--wds-color-black-200-transparent-70);
@@ -370,6 +372,7 @@
370
372
  @property st-global(--wds-color-blue-200);
371
373
  @property st-global(--wds-color-blue-250);
372
374
  @property st-global(--wds-color-blue-300);
375
+ @property st-global(--wds-color-blue-350);
373
376
  @property st-global(--wds-color-blue-400);
374
377
  @property st-global(--wds-color-blue-500);
375
378
  @property st-global(--wds-color-blue-600);
@@ -1155,6 +1158,7 @@
1155
1158
  @property st-global(--wds-list-item-action-fill-hover);
1156
1159
  @property st-global(--wds-list-item-action-gap);
1157
1160
  @property st-global(--wds-list-item-action-label-fill-active);
1161
+ @property st-global(--wds-list-item-action-label-fill-pressed-destructive);
1158
1162
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
1159
1163
  @property st-global(--wds-list-item-action-label-font-line-height-small);
1160
1164
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -1166,6 +1170,7 @@
1166
1170
  @property st-global(--wds-list-item-action-padding-vertical-small);
1167
1171
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
1168
1172
  @property st-global(--wds-list-item-action-subtitle-fill-active);
1173
+ @property st-global(--wds-list-item-action-subtitle-fill-pressed-destructive);
1169
1174
  @property st-global(--wds-list-item-action-subtitle-font-line-height);
1170
1175
  @property st-global(--wds-list-item-action-subtitle-font-size);
1171
1176
  @property st-global(--wds-list-item-action-suffix-fill);
@@ -1370,6 +1375,7 @@
1370
1375
  @property st-global(--wds-section-helper-border-preview);
1371
1376
  @property st-global(--wds-section-helper-border-radius);
1372
1377
  @property st-global(--wds-section-helper-close-button-offset);
1378
+ @property st-global(--wds-section-helper-fill-premium);
1373
1379
  @property st-global(--wds-section-helper-fill-preview);
1374
1380
  @property st-global(--wds-section-helper-fill-standard);
1375
1381
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
@@ -1678,6 +1684,7 @@
1678
1684
  @property st-global(--wds-slider-track-border-border-radius);
1679
1685
  @property st-global(--wds-slider-track-border-radius-transparent);
1680
1686
  @property st-global(--wds-slider-track-color);
1687
+ @property st-global(--wds-slider-track-color-disabled);
1681
1688
  @property st-global(--wds-slider-track-size);
1682
1689
  @property st-global(--wds-slider-track-size-transparent);
1683
1690
  @property st-global(--wds-social-post-preview-content-padding-horizontal);
@@ -2414,6 +2421,8 @@
2414
2421
  --wds-color-black-100-transparent-70: rgba(0, 6, 36, .7);
2415
2422
  --wds-color-black-200: #44485f;
2416
2423
  --wds-color-black-200-transparent-0: rgba(68, 72, 95, 0);
2424
+ --wds-color-black-200-transparent-18: rgba(68, 72, 95, 0.18);
2425
+ --wds-color-black-200-transparent-20: rgba(68, 72, 95, .2);
2417
2426
  --wds-color-black-200-transparent-50: rgba(68, 72, 95, .5);
2418
2427
  --wds-color-black-200-transparent-60: rgba(68, 72, 95, .6);
2419
2428
  --wds-color-black-200-transparent-70: rgba(68, 72, 95, .7);
@@ -2437,6 +2446,7 @@
2437
2446
  --wds-color-blue-200: #5999ff;
2438
2447
  --wds-color-blue-250: #80b1ff;
2439
2448
  --wds-color-blue-300: #a8caff;
2449
+ --wds-color-blue-350: #D1DCFF;
2440
2450
  --wds-color-blue-400: #d6e6fe;
2441
2451
  --wds-color-blue-500: #e7f0ff;
2442
2452
  --wds-color-blue-600: #f4f7ff;
@@ -3222,6 +3232,7 @@
3222
3232
  --wds-list-item-action-fill-hover: #e7f0ff;
3223
3233
  --wds-list-item-action-gap: 0px;
3224
3234
  --wds-list-item-action-label-fill-active: #116dff;
3235
+ --wds-list-item-action-label-fill-pressed-destructive: #e62214;
3225
3236
  --wds-list-item-action-label-font-line-height-medium: 24px;
3226
3237
  --wds-list-item-action-label-font-line-height-small: 18px;
3227
3238
  --wds-list-item-action-label-font-size-medium: 16px;
@@ -3233,6 +3244,7 @@
3233
3244
  --wds-list-item-action-padding-vertical-small: 6px;
3234
3245
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
3235
3246
  --wds-list-item-action-subtitle-fill-active: #868aa5;
3247
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #44485f;
3236
3248
  --wds-list-item-action-subtitle-font-line-height: 18px;
3237
3249
  --wds-list-item-action-subtitle-font-size: 14px;
3238
3250
  --wds-list-item-action-suffix-fill: #868aa5;
@@ -3437,6 +3449,7 @@
3437
3449
  --wds-section-helper-border-preview: #868aa5;
3438
3450
  --wds-section-helper-border-radius: 6px;
3439
3451
  --wds-section-helper-close-button-offset: 12px;
3452
+ --wds-section-helper-fill-premium: #f1e0f9;
3440
3453
  --wds-section-helper-fill-preview: #f6f7f9;
3441
3454
  --wds-section-helper-fill-standard: #e7f0ff;
3442
3455
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
@@ -3745,6 +3758,7 @@
3745
3758
  --wds-slider-track-border-border-radius: 1000px;
3746
3759
  --wds-slider-track-border-radius-transparent: 1000px;
3747
3760
  --wds-slider-track-color: #d6e6fe;
3761
+ --wds-slider-track-color-disabled: #acafc4;
3748
3762
  --wds-slider-track-size: 4px;
3749
3763
  --wds-slider-track-size-transparent: 8px;
3750
3764
  --wds-social-post-preview-content-padding-horizontal: 12px;
package/component.st.css CHANGED
@@ -594,6 +594,7 @@
594
594
  @property st-global(--wds-list-item-action-fill-hover);
595
595
  @property st-global(--wds-list-item-action-gap);
596
596
  @property st-global(--wds-list-item-action-label-fill-active);
597
+ @property st-global(--wds-list-item-action-label-fill-pressed-destructive);
597
598
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
598
599
  @property st-global(--wds-list-item-action-label-font-line-height-small);
599
600
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -605,6 +606,7 @@
605
606
  @property st-global(--wds-list-item-action-padding-vertical-small);
606
607
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
607
608
  @property st-global(--wds-list-item-action-subtitle-fill-active);
609
+ @property st-global(--wds-list-item-action-subtitle-fill-pressed-destructive);
608
610
  @property st-global(--wds-list-item-action-subtitle-font-line-height);
609
611
  @property st-global(--wds-list-item-action-subtitle-font-size);
610
612
  @property st-global(--wds-list-item-action-suffix-fill);
@@ -809,6 +811,7 @@
809
811
  @property st-global(--wds-section-helper-border-preview);
810
812
  @property st-global(--wds-section-helper-border-radius);
811
813
  @property st-global(--wds-section-helper-close-button-offset);
814
+ @property st-global(--wds-section-helper-fill-premium);
812
815
  @property st-global(--wds-section-helper-fill-preview);
813
816
  @property st-global(--wds-section-helper-fill-standard);
814
817
  @property st-global(--wds-section-helper-fullwidth-horizontal-padding-medium);
@@ -1009,6 +1012,7 @@
1009
1012
  @property st-global(--wds-slider-track-border-border-radius);
1010
1013
  @property st-global(--wds-slider-track-border-radius-transparent);
1011
1014
  @property st-global(--wds-slider-track-color);
1015
+ @property st-global(--wds-slider-track-color-disabled);
1012
1016
  @property st-global(--wds-slider-track-size);
1013
1017
  @property st-global(--wds-slider-track-size-transparent);
1014
1018
  @property st-global(--wds-social-post-preview-content-padding-horizontal);
@@ -1946,6 +1950,7 @@
1946
1950
  --wds-list-item-action-fill-hover: #e7f0ff;
1947
1951
  --wds-list-item-action-gap: 0px;
1948
1952
  --wds-list-item-action-label-fill-active: #116dff;
1953
+ --wds-list-item-action-label-fill-pressed-destructive: #e62214;
1949
1954
  --wds-list-item-action-label-font-line-height-medium: 24px;
1950
1955
  --wds-list-item-action-label-font-line-height-small: 18px;
1951
1956
  --wds-list-item-action-label-font-size-medium: 16px;
@@ -1957,6 +1962,7 @@
1957
1962
  --wds-list-item-action-padding-vertical-small: 6px;
1958
1963
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
1959
1964
  --wds-list-item-action-subtitle-fill-active: #868aa5;
1965
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #44485f;
1960
1966
  --wds-list-item-action-subtitle-font-line-height: 18px;
1961
1967
  --wds-list-item-action-subtitle-font-size: 14px;
1962
1968
  --wds-list-item-action-suffix-fill: #868aa5;
@@ -2161,6 +2167,7 @@
2161
2167
  --wds-section-helper-border-preview: #868aa5;
2162
2168
  --wds-section-helper-border-radius: 6px;
2163
2169
  --wds-section-helper-close-button-offset: 12px;
2170
+ --wds-section-helper-fill-premium: #f1e0f9;
2164
2171
  --wds-section-helper-fill-preview: #f6f7f9;
2165
2172
  --wds-section-helper-fill-standard: #e7f0ff;
2166
2173
  --wds-section-helper-fullwidth-horizontal-padding-medium: 24px;
@@ -2361,6 +2368,7 @@
2361
2368
  --wds-slider-track-border-border-radius: 1000px;
2362
2369
  --wds-slider-track-border-radius-transparent: 1000px;
2363
2370
  --wds-slider-track-color: #d6e6fe;
2371
+ --wds-slider-track-color-disabled: #acafc4;
2364
2372
  --wds-slider-track-size: 4px;
2365
2373
  --wds-slider-track-size-transparent: 8px;
2366
2374
  --wds-social-post-preview-content-padding-horizontal: 12px;
package/foundation.st.css CHANGED
@@ -38,6 +38,8 @@
38
38
  @property st-global(--wds-color-black-100-transparent-70);
39
39
  @property st-global(--wds-color-black-200);
40
40
  @property st-global(--wds-color-black-200-transparent-0);
41
+ @property st-global(--wds-color-black-200-transparent-18);
42
+ @property st-global(--wds-color-black-200-transparent-20);
41
43
  @property st-global(--wds-color-black-200-transparent-50);
42
44
  @property st-global(--wds-color-black-200-transparent-60);
43
45
  @property st-global(--wds-color-black-200-transparent-70);
@@ -61,6 +63,7 @@
61
63
  @property st-global(--wds-color-blue-200);
62
64
  @property st-global(--wds-color-blue-250);
63
65
  @property st-global(--wds-color-blue-300);
66
+ @property st-global(--wds-color-blue-350);
64
67
  @property st-global(--wds-color-blue-400);
65
68
  @property st-global(--wds-color-blue-500);
66
69
  @property st-global(--wds-color-blue-600);
@@ -266,6 +269,8 @@
266
269
  --wds-color-black-100-transparent-70: rgba(0, 6, 36, .7);
267
270
  --wds-color-black-200: #44485f;
268
271
  --wds-color-black-200-transparent-0: rgba(68, 72, 95, 0);
272
+ --wds-color-black-200-transparent-18: rgba(68, 72, 95, 0.18);
273
+ --wds-color-black-200-transparent-20: rgba(68, 72, 95, .2);
269
274
  --wds-color-black-200-transparent-50: rgba(68, 72, 95, .5);
270
275
  --wds-color-black-200-transparent-60: rgba(68, 72, 95, .6);
271
276
  --wds-color-black-200-transparent-70: rgba(68, 72, 95, .7);
@@ -289,6 +294,7 @@
289
294
  --wds-color-blue-200: #5999ff;
290
295
  --wds-color-blue-250: #80b1ff;
291
296
  --wds-color-blue-300: #a8caff;
297
+ --wds-color-blue-350: #D1DCFF;
292
298
  --wds-color-blue-400: #d6e6fe;
293
299
  --wds-color-blue-500: #e7f0ff;
294
300
  --wds-color-blue-600: #f4f7ff;
package/odeditor/all.css CHANGED
@@ -211,6 +211,7 @@
211
211
  --wds-color-blue-600: #f5f7ff;
212
212
  --wds-color-blue-500: #eaefff;
213
213
  --wds-color-blue-400: #d5dfff;
214
+ --wds-color-blue-350: #40506C;
214
215
  --wds-color-blue-300: #acbeff;
215
216
  --wds-color-blue-250: #7896ff;
216
217
  --wds-color-blue-200: #597dff;
@@ -426,7 +427,7 @@
426
427
  --wds-shadow-y-primary-toggle: var(--wds-shadow-y-0);
427
428
  --wds-shadow-y-primary-raised: var(--wds-shadow-y-25);
428
429
  --wds-shadow-y-primary-overlay-dark: var(--wds-shadow-y-0);
429
- --wds-shadow-y-primary-overlay: var(--wds-shadow-y-300);
430
+ --wds-shadow-y-primary-overlay: var(--wds-shadow-y-600);
430
431
  --wds-shadow-y-primary-modal: var(--wds-shadow-y-600);
431
432
  --wds-shadow-y-input: var(--wds-shadow-y-25);
432
433
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-25);
@@ -767,10 +768,10 @@
767
768
  --wds-color-border-destructive-primary-disabled: var(--wds-color-black-100-transparent-10);
768
769
  --wds-color-border-destructive-primary-active: var(--wds-color-red-100);
769
770
  --wds-color-border-destructive-primary: var(--wds-color-red-300);
770
- --wds-color-border-dark-secondary-hover: var(--wds-color-black-600);
771
+ --wds-color-border-dark-secondary-hover: var(--wds-color-black-550);
771
772
  --wds-color-border-dark-secondary-disabled: var(--wds-color-black-100-transparent-10);
772
- --wds-color-border-dark-secondary-active: var(--wds-color-black-600);
773
- --wds-color-border-dark-secondary: var(--wds-color-black-600);
773
+ --wds-color-border-dark-secondary-active: var(--wds-color-black-550);
774
+ --wds-color-border-dark-secondary: var(--wds-color-black-550);
774
775
  --wds-color-border-dark-primary-hover: var(--wds-color-black-300);
775
776
  --wds-color-border-dark-primary-disabled: var(--wds-color-black-100-transparent-10);
776
777
  --wds-color-border-dark-primary-active: var(--wds-color-black-200);
@@ -887,7 +888,7 @@
887
888
  --wds-toast-horizontal-padding: var(--wds-space-300);
888
889
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
889
890
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
890
- --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-10);
891
+ --wds-thumbnail-overlay-fill: var(--wds-color-white-transparent-0);
891
892
  --wds-thumbnail-illustration-fill-3: var(--wds-color-blue-500);
892
893
  --wds-thumbnail-illustration-fill-2: var(--wds-color-blue-100);
893
894
  --wds-thumbnail-illustration-fill-1: var(--wds-color-blue-250);
@@ -961,6 +962,7 @@
961
962
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
962
963
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
963
964
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-300);
965
+ --wds-slider-track-color-disabled: var(--wds-color-black-500);
964
966
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
965
967
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
966
968
  --wds-slider-slider-marks-label-font-size: var(--wds-font-size-200);
@@ -1674,6 +1676,7 @@
1674
1676
  --wds-segmented-toggle-border-hover: var(--wds-color-border-standard-secondary-hover);
1675
1677
  --wds-section-helper-title-font-size: var(--wds-font-size-body-small);
1676
1678
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
1679
+ --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
1677
1680
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
1678
1681
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-small);
1679
1682
  --wds-section-header-label-fill-neutral: var(--wds-color-text-placeholder);
@@ -1701,7 +1704,7 @@
1701
1704
  --wds-loader-fill-success: var(--wds-color-fill-standard-primary);
1702
1705
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1703
1706
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1704
- --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1707
+ --wds-loader-fill: var(--wds-color-fill-dark-secondary);
1705
1708
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1706
1709
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1707
1710
  --wds-list-item-select-suffix: var(--wds-color-text-standard-primary);
@@ -1731,8 +1734,10 @@
1731
1734
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1732
1735
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1733
1736
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
1737
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-secondary);
1734
1738
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1735
1739
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1740
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-text-destructive);
1736
1741
  --wds-list-item-action-label-fill-active: var(--wds-color-text-standard-primary);
1737
1742
  --wds-list-item-action-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1738
1743
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
package/odeditor/all.scss CHANGED
@@ -287,6 +287,7 @@
287
287
  --wds-color-blue-600: #f5f7ff;
288
288
  --wds-color-blue-500: #eaefff;
289
289
  --wds-color-blue-400: #d5dfff;
290
+ --wds-color-blue-350: #40506C;
290
291
  --wds-color-blue-300: #acbeff;
291
292
  --wds-color-blue-250: #7896ff;
292
293
  --wds-color-blue-200: #597dff;
@@ -468,7 +469,7 @@
468
469
  --wds-toast-horizontal-padding: var(--wds-space-300);
469
470
  --wds-thumbnail-title-padding-top: var(--wds-space-100);
470
471
  --wds-thumbnail-title-font-weight-tiny: var(--wds-font-weight-medium);
471
- --wds-thumbnail-overlay-fill: var(--wds-color-black-100-transparent-10);
472
+ --wds-thumbnail-overlay-fill: var(--wds-color-white-transparent-0);
472
473
  --wds-thumbnail-illustration-fill-3: var(--wds-color-blue-500);
473
474
  --wds-thumbnail-illustration-fill-2: var(--wds-color-blue-100);
474
475
  --wds-thumbnail-illustration-fill-1: var(--wds-color-blue-250);
@@ -556,6 +557,7 @@
556
557
  --wds-social-preview-content-padding-horizontal: var(--wds-space-300);
557
558
  --wds-social-post-preview-content-padding-vertical: var(--wds-space-300);
558
559
  --wds-social-post-preview-content-padding-horizontal: var(--wds-space-300);
560
+ --wds-slider-track-color-disabled: var(--wds-color-black-500);
559
561
  --wds-slider-track-border-radius-transparent: var(--wds-border-radius-full);
560
562
  --wds-slider-track-border-border-radius: var(--wds-border-radius-full);
561
563
  --wds-slider-slider-marks-label-font-size: var(--wds-font-size-200);
@@ -637,7 +639,7 @@
637
639
  --wds-shadow-y-primary-toggle: var(--wds-shadow-y-0);
638
640
  --wds-shadow-y-primary-raised: var(--wds-shadow-y-25);
639
641
  --wds-shadow-y-primary-overlay-dark: var(--wds-shadow-y-0);
640
- --wds-shadow-y-primary-overlay: var(--wds-shadow-y-300);
642
+ --wds-shadow-y-primary-overlay: var(--wds-shadow-y-600);
641
643
  --wds-shadow-y-primary-modal: var(--wds-shadow-y-600);
642
644
  --wds-shadow-y-input: var(--wds-shadow-y-25);
643
645
  --wds-shadow-x-secondary-raised: var(--wds-shadow-x-25);
@@ -1333,10 +1335,10 @@
1333
1335
  --wds-color-border-destructive-primary-disabled: var(--wds-color-black-100-transparent-10);
1334
1336
  --wds-color-border-destructive-primary-active: var(--wds-color-red-100);
1335
1337
  --wds-color-border-destructive-primary: var(--wds-color-red-300);
1336
- --wds-color-border-dark-secondary-hover: var(--wds-color-black-600);
1338
+ --wds-color-border-dark-secondary-hover: var(--wds-color-black-550);
1337
1339
  --wds-color-border-dark-secondary-disabled: var(--wds-color-black-100-transparent-10);
1338
- --wds-color-border-dark-secondary-active: var(--wds-color-black-600);
1339
- --wds-color-border-dark-secondary: var(--wds-color-black-600);
1340
+ --wds-color-border-dark-secondary-active: var(--wds-color-black-550);
1341
+ --wds-color-border-dark-secondary: var(--wds-color-black-550);
1340
1342
  --wds-color-border-dark-primary-hover: var(--wds-color-black-300);
1341
1343
  --wds-color-border-dark-primary-disabled: var(--wds-color-black-100-transparent-10);
1342
1344
  --wds-color-border-dark-primary-active: var(--wds-color-black-200);
@@ -1663,6 +1665,7 @@
1663
1665
  --wds-segmented-toggle-border-hover: var(--wds-color-border-standard-secondary-hover);
1664
1666
  --wds-section-helper-title-font-size: var(--wds-font-size-body-small);
1665
1667
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
1668
+ --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
1666
1669
  --wds-section-header-label-font-size-small: var(--wds-font-size-body-tiny);
1667
1670
  --wds-section-header-label-font-size-medium: var(--wds-font-size-body-small);
1668
1671
  --wds-section-header-label-fill-neutral: var(--wds-color-text-placeholder);
@@ -1690,7 +1693,7 @@
1690
1693
  --wds-loader-fill-success: var(--wds-color-fill-standard-primary);
1691
1694
  --wds-loader-fill-light: var(--wds-color-fill-light-primary);
1692
1695
  --wds-loader-fill-error: var(--wds-color-fill-destructive-primary);
1693
- --wds-loader-fill: var(--wds-color-fill-standard-secondary);
1696
+ --wds-loader-fill: var(--wds-color-fill-dark-secondary);
1694
1697
  --wds-list-item-select-title-disabled: var(--wds-color-text-disabled);
1695
1698
  --wds-list-item-select-title: var(--wds-color-text-standard-primary);
1696
1699
  --wds-list-item-select-suffix: var(--wds-color-text-standard-primary);
@@ -1720,8 +1723,10 @@
1720
1723
  --wds-list-item-action-suffix-fill-active: var(--wds-color-text-standard-primary);
1721
1724
  --wds-list-item-action-suffix-fill: var(--wds-color-text-standard-primary);
1722
1725
  --wds-list-item-action-subtitle-font-size: var(--wds-font-size-body-tiny);
1726
+ --wds-list-item-action-subtitle-fill-pressed-destructive: var(--wds-color-text-standard-secondary);
1723
1727
  --wds-list-item-action-label-font-size-small: var(--wds-font-size-body-tiny);
1724
1728
  --wds-list-item-action-label-font-size-medium: var(--wds-font-size-body-small);
1729
+ --wds-list-item-action-label-fill-pressed-destructive: var(--wds-color-text-destructive);
1725
1730
  --wds-list-item-action-label-fill-active: var(--wds-color-text-standard-primary);
1726
1731
  --wds-list-item-action-fill-hover: var(--wds-color-fill-dark-tertiary-hover);
1727
1732
  --wds-list-item-action-fill-active: var(--wds-color-fill-dark-tertiary-active);
package/odeditor/all.st.css CHANGED
@@ -366,6 +366,7 @@
366
366
  @property st-global(--wds-color-blue-200);
367
367
  @property st-global(--wds-color-blue-250);
368
368
  @property st-global(--wds-color-blue-300);
369
+ @property st-global(--wds-color-blue-350);
369
370
  @property st-global(--wds-color-blue-400);
370
371
  @property st-global(--wds-color-blue-500);
371
372
  @property st-global(--wds-color-blue-600);
@@ -1129,6 +1130,7 @@
1129
1130
  @property st-global(--wds-list-item-action-fill-hover);
1130
1131
  @property st-global(--wds-list-item-action-gap);
1131
1132
  @property st-global(--wds-list-item-action-label-fill-active);
1133
+ @property st-global(--wds-list-item-action-label-fill-pressed-destructive);
1132
1134
  @property st-global(--wds-list-item-action-label-font-line-height-medium);
1133
1135
  @property st-global(--wds-list-item-action-label-font-line-height-small);
1134
1136
  @property st-global(--wds-list-item-action-label-font-size-medium);
@@ -1139,6 +1141,7 @@
1139
1141
  @property st-global(--wds-list-item-action-padding-vertical-medium-screen-small);
1140
1142
  @property st-global(--wds-list-item-action-padding-vertical-small);
1141
1143
  @property st-global(--wds-list-item-action-padding-vertical-small-screen-small);
1144
+ @property st-global(--wds-list-item-action-subtitle-fill-pressed-destructive);
1142
1145
  @property st-global(--wds-list-item-action-subtitle-font-line-height);
1143
1146
  @property st-global(--wds-list-item-action-subtitle-font-size);
1144
1147
  @property st-global(--wds-list-item-action-suffix-fill);
@@ -1325,6 +1328,7 @@
1325
1328
  @property st-global(--wds-section-helper-border-preview);
1326
1329
  @property st-global(--wds-section-helper-border-radius);
1327
1330
  @property st-global(--wds-section-helper-close-button-offset);
1331
+ @property st-global(--wds-section-helper-fill-premium);
1328
1332
  @property st-global(--wds-section-helper-fill-preview);
1329
1333
  @property st-global(--wds-section-helper-fill-standard);
1330
1334
  @property st-global(--wds-section-helper-horizontal-margin);
@@ -1635,6 +1639,7 @@
1635
1639
  @property st-global(--wds-slider-track-border-border-radius);
1636
1640
  @property st-global(--wds-slider-track-border-radius-transparent);
1637
1641
  @property st-global(--wds-slider-track-color);
1642
+ @property st-global(--wds-slider-track-color-disabled);
1638
1643
  @property st-global(--wds-slider-track-size);
1639
1644
  @property st-global(--wds-slider-track-size-transparent);
1640
1645
  @property st-global(--wds-social-post-preview-content-padding-horizontal);
@@ -2061,7 +2066,7 @@
2061
2066
  --wds-angle-input-knob-disabled: #ffffff;
2062
2067
  --wds-angle-input-knob-fill: #ffffff;
2063
2068
  --wds-angle-input-knob-size: 6px;
2064
- --wds-angle-input-ring-border: #e8e7e7;
2069
+ --wds-angle-input-ring-border: #dedede;
2065
2070
  --wds-announcement-modal-actions-padding: 42px;
2066
2071
  --wds-announcement-modal-border-radius: 24px;
2067
2072
  --wds-announcement-modal-content-gap: 12px;
@@ -2388,6 +2393,7 @@
2388
2393
  --wds-color-blue-200: #597dff;
2389
2394
  --wds-color-blue-250: #7896ff;
2390
2395
  --wds-color-blue-300: #acbeff;
2396
+ --wds-color-blue-350: #40506C;
2391
2397
  --wds-color-blue-400: #d5dfff;
2392
2398
  --wds-color-blue-500: #eaefff;
2393
2399
  --wds-color-blue-600: #f5f7ff;
@@ -2399,10 +2405,10 @@
2399
2405
  --wds-color-border-dark-primary-active: #383838;
2400
2406
  --wds-color-border-dark-primary-disabled: rgba(19, 23, 32, .1);
2401
2407
  --wds-color-border-dark-primary-hover: #525150;
2402
- --wds-color-border-dark-secondary: #e8e7e7;
2403
- --wds-color-border-dark-secondary-active: #e8e7e7;
2408
+ --wds-color-border-dark-secondary: #dedede;
2409
+ --wds-color-border-dark-secondary-active: #dedede;
2404
2410
  --wds-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
2405
- --wds-color-border-dark-secondary-hover: #e8e7e7;
2411
+ --wds-color-border-dark-secondary-hover: #dedede;
2406
2412
  --wds-color-border-destructive-primary: #ed8f90;
2407
2413
  --wds-color-border-destructive-primary-active: #df3336;
2408
2414
  --wds-color-border-destructive-primary-disabled: rgba(19, 23, 32, .1);
@@ -2850,8 +2856,8 @@
2850
2856
  --wds-custom-modal-header-subtitle-font-size: 14px;
2851
2857
  --wds-date-picker-icon-fill: #383838;
2852
2858
  --wds-date-picker-icon-fill-disabled: #a8a6a5;
2853
- --wds-divider-fill-color-light-primary: #e8e7e7;
2854
- --wds-divider-fill-color-light-secondary: #e8e7e7;
2859
+ --wds-divider-fill-color-light-primary: #dedede;
2860
+ --wds-divider-fill-color-light-secondary: #dedede;
2855
2861
  --wds-dock-area-fill: #f8f6f6;
2856
2862
  --wds-dock-point-fill-active: #2f5dff;
2857
2863
  --wds-dock-point-fill-fill: #767574;
@@ -2951,9 +2957,9 @@
2951
2957
  --wds-form-field-label-line-height-small: 16px;
2952
2958
  --wds-form-field-label-line-height-tiny: 12px;
2953
2959
  --wds-icon-button-color-border-dark-secondary: #767574;
2954
- --wds-icon-button-color-border-dark-secondary-active: #e8e7e7;
2960
+ --wds-icon-button-color-border-dark-secondary-active: #dedede;
2955
2961
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
2956
- --wds-icon-button-color-border-dark-secondary-hover: #e8e7e7;
2962
+ --wds-icon-button-color-border-dark-secondary-hover: #dedede;
2957
2963
  --wds-icon-button-color-border-light-secondary: rgba(255, 255, 255, .5);
2958
2964
  --wds-icon-button-color-border-light-secondary-active: #ffffff;
2959
2965
  --wds-icon-button-color-border-light-secondary-disabled: #f0efef;
@@ -3151,6 +3157,7 @@
3151
3157
  --wds-list-item-action-fill-hover: #f8f6f6;
3152
3158
  --wds-list-item-action-gap: 2px;
3153
3159
  --wds-list-item-action-label-fill-active: #151414;
3160
+ --wds-list-item-action-label-fill-pressed-destructive: #df3336;
3154
3161
  --wds-list-item-action-label-font-line-height-medium: 24px;
3155
3162
  --wds-list-item-action-label-font-line-height-small: 18px;
3156
3163
  --wds-list-item-action-label-font-size-medium: 14px;
@@ -3161,6 +3168,7 @@
3161
3168
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
3162
3169
  --wds-list-item-action-padding-vertical-small: 8px;
3163
3170
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
3171
+ --wds-list-item-action-subtitle-fill-pressed-destructive: #383838;
3164
3172
  --wds-list-item-action-subtitle-font-line-height: 16px;
3165
3173
  --wds-list-item-action-subtitle-font-size: 12px;
3166
3174
  --wds-list-item-action-suffix-fill: #151414;
@@ -3228,7 +3236,7 @@
3228
3236
  --wds-list-item-select-suffix-pressed: #1c3fe5;
3229
3237
  --wds-list-item-select-title: #151414;
3230
3238
  --wds-list-item-select-title-disabled: #a8a6a5;
3231
- --wds-loader-fill: #d5dfff;
3239
+ --wds-loader-fill: #f0efef;
3232
3240
  --wds-loader-fill-error: #df3336;
3233
3241
  --wds-loader-fill-light: #ffffff;
3234
3242
  --wds-loader-fill-loading: #0f2ccf;
@@ -3347,6 +3355,7 @@
3347
3355
  --wds-section-helper-border-preview: #e8e7e7;
3348
3356
  --wds-section-helper-border-radius: 6px;
3349
3357
  --wds-section-helper-close-button-offset: 0px;
3358
+ --wds-section-helper-fill-premium: #f5f7ff;
3350
3359
  --wds-section-helper-fill-preview: #f8f6f6;
3351
3360
  --wds-section-helper-fill-standard: #f5f7ff;
3352
3361
  --wds-section-helper-horizontal-margin: 6px;
@@ -3535,7 +3544,7 @@
3535
3544
  --wds-shadow-y-600: 20px;
3536
3545
  --wds-shadow-y-input: 1px;
3537
3546
  --wds-shadow-y-primary-modal: 20px;
3538
- --wds-shadow-y-primary-overlay: 12px;
3547
+ --wds-shadow-y-primary-overlay: 20px;
3539
3548
  --wds-shadow-y-primary-overlay-dark: 0px;
3540
3549
  --wds-shadow-y-primary-raised: 1px;
3541
3550
  --wds-shadow-y-primary-toggle: 0px;
@@ -3657,6 +3666,7 @@
3657
3666
  --wds-slider-track-border-border-radius: 1000px;
3658
3667
  --wds-slider-track-border-radius-transparent: 1000px;
3659
3668
  --wds-slider-track-color: #e8e7e7;
3669
+ --wds-slider-track-color-disabled: #a8a6a5;
3660
3670
  --wds-slider-track-size: 2px;
3661
3671
  --wds-slider-track-size-transparent: 2px;
3662
3672
  --wds-social-post-preview-content-padding-horizontal: 12px;
@@ -3719,7 +3729,7 @@
3719
3729
  --wds-subtitle-font-size-medium: 12px;
3720
3730
  --wds-suffix-active-font-weight: 600;
3721
3731
  --wds-swatches-fill-border-disabled: rgba(19, 23, 32, .05);
3722
- --wds-swatches-fill-border-no-value: #e8e7e7;
3732
+ --wds-swatches-fill-border-no-value: #dedede;
3723
3733
  --wds-swatches-fill-border-no-value-dash: #ed8f90;
3724
3734
  --wds-swatches-fill-border-selected: #383838;
3725
3735
  --wds-swatches-fill-disabled: #f0efef;
@@ -3789,7 +3799,7 @@
3789
3799
  --wds-testimonial-list-gap: 24px;
3790
3800
  --wds-text-button-font-weight-normal: 600;
3791
3801
  --wds-text-button-font-weight-thin: 500;
3792
- --wds-thumbnail-border-color: #e8e7e7;
3802
+ --wds-thumbnail-border-color: #dedede;
3793
3803
  --wds-thumbnail-border-color-disabled: rgba(19, 23, 32, .1);
3794
3804
  --wds-thumbnail-border-color-hover: #acbeff;
3795
3805
  --wds-thumbnail-border-color-selected: #2f5dff;
@@ -3804,7 +3814,7 @@
3804
3814
  --wds-thumbnail-illustration-fill-1: #7896ff;
3805
3815
  --wds-thumbnail-illustration-fill-2: #2f5dff;
3806
3816
  --wds-thumbnail-illustration-fill-3: #eaefff;
3807
- --wds-thumbnail-overlay-fill: rgba(19, 23, 32, .1);
3817
+ --wds-thumbnail-overlay-fill: rgba(255, 255, 255, 0);
3808
3818
  --wds-thumbnail-subtitle-fill: #383838;
3809
3819
  --wds-thumbnail-subtitle-font-line-height-tiny: 16px;
3810
3820
  --wds-thumbnail-subtitle-font-size-tiny: 12px;