@wix/design-system-tokens 1.206.0 → 1.208.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 (25) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/all.css +4 -0
  3. package/all.scss +4 -0
  4. package/all.st.css +8 -0
  5. package/component.st.css +8 -0
  6. package/odeditor/all.css +8 -0
  7. package/odeditor/all.scss +8 -0
  8. package/odeditor/all.st.css +16 -0
  9. package/odeditor/component.st.css +8 -0
  10. package/odeditor/semantic.st.css +8 -0
  11. package/odeditor-dark/all.css +11 -3
  12. package/odeditor-dark/all.scss +11 -3
  13. package/odeditor-dark/all.st.css +19 -3
  14. package/odeditor-dark/component.st.css +11 -3
  15. package/odeditor-dark/semantic.st.css +8 -0
  16. package/package.json +2 -2
  17. package/studio/all.css +8 -0
  18. package/studio/all.scss +8 -0
  19. package/studio/all.st.css +16 -0
  20. package/studio/component.st.css +8 -0
  21. package/studio/semantic.st.css +8 -0
  22. package/wixel/all.css +4 -0
  23. package/wixel/all.scss +4 -0
  24. package/wixel/all.st.css +8 -0
  25. package/wixel/component.st.css +8 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## 1.208.0 - 2026-07-02
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(SegmentedToggle): made label the correct size as figma [16449](https://github.com/wix-private/wix-design-systems/pull/16449)
6
+
7
+ ### Features
8
+
9
+ - feat(EmptyState): title uses Heading H2 across all skins (BM reimagined) [16459](https://github.com/wix-private/wix-design-systems/pull/16459)
10
+ - feat(Tooltip): odeditor-dark border + raw-black background tokens [16460](https://github.com/wix-private/wix-design-systems/pull/16460)
11
+ - feat(tokens): add illustration color opacity tokens [16450](https://github.com/wix-private/wix-design-systems/pull/16450)
12
+
1
13
  ## 1.204.0 - 2026-06-18
2
14
 
3
15
  ### Bug Fixes
package/all.css CHANGED
@@ -842,8 +842,10 @@
842
842
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
843
843
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
844
844
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
845
+ --wds-tooltip-border-width: var(--wds-border-width-none);
845
846
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
846
847
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
848
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
847
849
  --wds-toggle-switch-padding: var(--wds-space-25);
848
850
  --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
849
851
  --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
@@ -1286,6 +1288,7 @@
1286
1288
  --wds-field-set-gap-medium: var(--wds-space-200);
1287
1289
  --wds-field-set-gap-large: var(--wds-space-300);
1288
1290
  --wds-feature-list-gap: var(--wds-space-500);
1291
+ --wds-empty-state-title-gap: var(--wds-space-200);
1289
1292
  --wds-empty-state-section-content-paddings: var(--wds-space-250);
1290
1293
  --wds-empty-state-page-content-paddings: var(--wds-space-300);
1291
1294
  --wds-empty-state-border-radius: var(--wds-border-radius-400);
@@ -1899,6 +1902,7 @@
1899
1902
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1900
1903
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1901
1904
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1905
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1902
1906
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1903
1907
  --wds-dropdown-icon-fill: var(--wds-color-text-primary);
1904
1908
  --wds-drag-handle-fill: var(--wds-color-text-primary);
package/all.scss CHANGED
@@ -402,8 +402,10 @@
402
402
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
403
403
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
404
404
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
405
+ --wds-tooltip-border-width: var(--wds-border-width-none);
405
406
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
406
407
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
408
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
407
409
  --wds-toggle-switch-padding: var(--wds-space-25);
408
410
  --wds-toggle-button-shadow-y-tertiary-inverted: var(--wds-shadow-y-0);
409
411
  --wds-toggle-button-shadow-y-tertiary: var(--wds-shadow-y-0);
@@ -976,6 +978,7 @@
976
978
  --wds-field-set-gap-medium: var(--wds-space-200);
977
979
  --wds-field-set-gap-large: var(--wds-space-300);
978
980
  --wds-feature-list-gap: var(--wds-space-500);
981
+ --wds-empty-state-title-gap: var(--wds-space-200);
979
982
  --wds-empty-state-section-content-paddings: var(--wds-space-250);
980
983
  --wds-empty-state-page-content-paddings: var(--wds-space-300);
981
984
  --wds-empty-state-border-radius: var(--wds-border-radius-400);
@@ -1898,6 +1901,7 @@
1898
1901
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1899
1902
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1900
1903
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1904
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1901
1905
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1902
1906
  --wds-dropdown-icon-fill: var(--wds-color-text-primary);
1903
1907
  --wds-drag-handle-fill: var(--wds-color-text-primary);
package/all.st.css CHANGED
@@ -905,6 +905,8 @@
905
905
  @property st-global(--wds-empty-state-border-radius);
906
906
  @property st-global(--wds-empty-state-page-content-paddings);
907
907
  @property st-global(--wds-empty-state-section-content-paddings);
908
+ @property st-global(--wds-empty-state-subtitle-fill);
909
+ @property st-global(--wds-empty-state-title-gap);
908
910
  @property st-global(--wds-feature-list-gap);
909
911
  @property st-global(--wds-field-set-gap-large);
910
912
  @property st-global(--wds-field-set-gap-medium);
@@ -2051,9 +2053,11 @@
2051
2053
  @property st-global(--wds-toggle-switch-width-medium);
2052
2054
  @property st-global(--wds-toggle-switch-width-small);
2053
2055
  @property st-global(--wds-tooltip-background-fill);
2056
+ @property st-global(--wds-tooltip-border-fill);
2054
2057
  @property st-global(--wds-tooltip-border-radius);
2055
2058
  @property st-global(--wds-tooltip-border-radius-medium);
2056
2059
  @property st-global(--wds-tooltip-border-radius-small);
2060
+ @property st-global(--wds-tooltip-border-width);
2057
2061
  @property st-global(--wds-tooltip-label-font-line-height-medium);
2058
2062
  @property st-global(--wds-tooltip-label-font-line-height-small);
2059
2063
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -3054,6 +3058,8 @@
3054
3058
  --wds-empty-state-border-radius: 8px;
3055
3059
  --wds-empty-state-page-content-paddings: 18px;
3056
3060
  --wds-empty-state-section-content-paddings: 15px;
3061
+ --wds-empty-state-subtitle-fill: #868aa5;
3062
+ --wds-empty-state-title-gap: 12px;
3057
3063
  --wds-feature-list-gap: 30px;
3058
3064
  --wds-field-set-gap-large: 18px;
3059
3065
  --wds-field-set-gap-medium: 12px;
@@ -4200,9 +4206,11 @@
4200
4206
  --wds-toggle-switch-width-medium: 34px;
4201
4207
  --wds-toggle-switch-width-small: 28px;
4202
4208
  --wds-tooltip-background-fill: #000624;
4209
+ --wds-tooltip-border-fill: rgba(0, 6, 36, 0);
4203
4210
  --wds-tooltip-border-radius: 8px;
4204
4211
  --wds-tooltip-border-radius-medium: 8px;
4205
4212
  --wds-tooltip-border-radius-small: 8px;
4213
+ --wds-tooltip-border-width: 0px;
4206
4214
  --wds-tooltip-label-font-line-height-medium: 18px;
4207
4215
  --wds-tooltip-label-font-line-height-small: 18px;
4208
4216
  --wds-tooltip-label-font-size-medium: 14px;
package/component.st.css CHANGED
@@ -394,6 +394,8 @@
394
394
  @property st-global(--wds-empty-state-border-radius);
395
395
  @property st-global(--wds-empty-state-page-content-paddings);
396
396
  @property st-global(--wds-empty-state-section-content-paddings);
397
+ @property st-global(--wds-empty-state-subtitle-fill);
398
+ @property st-global(--wds-empty-state-title-gap);
397
399
  @property st-global(--wds-feature-list-gap);
398
400
  @property st-global(--wds-field-set-gap-large);
399
401
  @property st-global(--wds-field-set-gap-medium);
@@ -1318,9 +1320,11 @@
1318
1320
  @property st-global(--wds-toggle-switch-width-medium);
1319
1321
  @property st-global(--wds-toggle-switch-width-small);
1320
1322
  @property st-global(--wds-tooltip-background-fill);
1323
+ @property st-global(--wds-tooltip-border-fill);
1321
1324
  @property st-global(--wds-tooltip-border-radius);
1322
1325
  @property st-global(--wds-tooltip-border-radius-medium);
1323
1326
  @property st-global(--wds-tooltip-border-radius-small);
1327
+ @property st-global(--wds-tooltip-border-width);
1324
1328
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1325
1329
  @property st-global(--wds-tooltip-label-font-line-height-small);
1326
1330
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1808,6 +1812,8 @@
1808
1812
  --wds-empty-state-border-radius: 8px;
1809
1813
  --wds-empty-state-page-content-paddings: 18px;
1810
1814
  --wds-empty-state-section-content-paddings: 15px;
1815
+ --wds-empty-state-subtitle-fill: #868aa5;
1816
+ --wds-empty-state-title-gap: 12px;
1811
1817
  --wds-feature-list-gap: 30px;
1812
1818
  --wds-field-set-gap-large: 18px;
1813
1819
  --wds-field-set-gap-medium: 12px;
@@ -2732,9 +2738,11 @@
2732
2738
  --wds-toggle-switch-width-medium: 34px;
2733
2739
  --wds-toggle-switch-width-small: 28px;
2734
2740
  --wds-tooltip-background-fill: #000624;
2741
+ --wds-tooltip-border-fill: rgba(0, 6, 36, 0);
2735
2742
  --wds-tooltip-border-radius: 8px;
2736
2743
  --wds-tooltip-border-radius-medium: 8px;
2737
2744
  --wds-tooltip-border-radius-small: 8px;
2745
+ --wds-tooltip-border-width: 0px;
2738
2746
  --wds-tooltip-label-font-line-height-medium: 18px;
2739
2747
  --wds-tooltip-label-font-line-height-small: 18px;
2740
2748
  --wds-tooltip-label-font-size-medium: 14px;
package/odeditor/all.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-opacity-100: #F8F6F600;
3
+ --wds-illustration-color-opacity-75: #F8F6F600;
4
+ --wds-illustration-color-opacity-50: #F8F6F600;
5
+ --wds-illustration-color-opacity-25: #F8F6F600;
2
6
  --wds-illustration-color-background: #F8F6F6;
3
7
  --wds-illustration-color-7: #002294;
4
8
  --wds-illustration-color-6: #002294;
@@ -845,7 +849,9 @@
845
849
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
846
850
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-200);
847
851
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-medium);
852
+ --wds-tooltip-border-width: var(--wds-border-width-none);
848
853
  --wds-tooltip-border-radius: var(--wds-border-radius-300);
854
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
849
855
  --wds-toggle-switch-padding: var(--wds-space-25);
850
856
  --wds-toggle-switch-fill-standard: var(--wds-color-black-400);
851
857
  --wds-toggle-switch-border-urgent-disabled: var(--wds-color-black-100-transparent-0);
@@ -1350,6 +1356,7 @@
1350
1356
  --wds-field-set-gap-medium: var(--wds-space-300);
1351
1357
  --wds-field-set-gap-large: var(--wds-space-400);
1352
1358
  --wds-feature-list-gap: var(--wds-space-600);
1359
+ --wds-empty-state-title-gap: var(--wds-space-200);
1353
1360
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1354
1361
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1355
1362
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1909,6 +1916,7 @@
1909
1916
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1910
1917
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1911
1918
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1919
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1912
1920
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1913
1921
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1914
1922
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
package/odeditor/all.scss CHANGED
@@ -142,6 +142,10 @@
142
142
  --wds-input-shadow-focus-warning: transparent;
143
143
  --wds-input-shadow-focus-standard: transparent;
144
144
  --wds-input-shadow-focus-destructive: transparent;
145
+ --wds-illustration-color-opacity-100: #F8F6F600;
146
+ --wds-illustration-color-opacity-75: #F8F6F600;
147
+ --wds-illustration-color-opacity-50: #F8F6F600;
148
+ --wds-illustration-color-opacity-25: #F8F6F600;
145
149
  --wds-illustration-color-background: #F8F6F6;
146
150
  --wds-illustration-color-7: #002294;
147
151
  --wds-illustration-color-6: #002294;
@@ -423,7 +427,9 @@
423
427
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
424
428
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-200);
425
429
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-medium);
430
+ --wds-tooltip-border-width: var(--wds-border-width-none);
426
431
  --wds-tooltip-border-radius: var(--wds-border-radius-300);
432
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
427
433
  --wds-toggle-switch-padding: var(--wds-space-25);
428
434
  --wds-toggle-switch-fill-standard: var(--wds-color-black-400);
429
435
  --wds-toggle-switch-border-urgent-disabled: var(--wds-color-black-100-transparent-0);
@@ -1051,6 +1057,7 @@
1051
1057
  --wds-field-set-gap-medium: var(--wds-space-300);
1052
1058
  --wds-field-set-gap-large: var(--wds-space-400);
1053
1059
  --wds-feature-list-gap: var(--wds-space-600);
1060
+ --wds-empty-state-title-gap: var(--wds-space-200);
1054
1061
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1055
1062
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1056
1063
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1907,6 +1914,7 @@
1907
1914
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1908
1915
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1909
1916
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1917
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1910
1918
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1911
1919
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1912
1920
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
package/odeditor/all.st.css CHANGED
@@ -884,6 +884,8 @@
884
884
  @property st-global(--wds-empty-state-border-radius);
885
885
  @property st-global(--wds-empty-state-page-content-paddings);
886
886
  @property st-global(--wds-empty-state-section-content-paddings);
887
+ @property st-global(--wds-empty-state-subtitle-fill);
888
+ @property st-global(--wds-empty-state-title-gap);
887
889
  @property st-global(--wds-feature-list-gap);
888
890
  @property st-global(--wds-field-set-gap-large);
889
891
  @property st-global(--wds-field-set-gap-medium);
@@ -1088,6 +1090,10 @@
1088
1090
  @property st-global(--wds-illustration-color-6);
1089
1091
  @property st-global(--wds-illustration-color-7);
1090
1092
  @property st-global(--wds-illustration-color-background);
1093
+ @property st-global(--wds-illustration-color-opacity-25);
1094
+ @property st-global(--wds-illustration-color-opacity-50);
1095
+ @property st-global(--wds-illustration-color-opacity-75);
1096
+ @property st-global(--wds-illustration-color-opacity-100);
1091
1097
  @property st-global(--wds-image-border-radius-default);
1092
1098
  @property st-global(--wds-image-border-radius-none);
1093
1099
  @property st-global(--wds-info-icon-fill);
@@ -2016,7 +2022,9 @@
2016
2022
  @property st-global(--wds-toggle-switch-width-medium);
2017
2023
  @property st-global(--wds-toggle-switch-width-small);
2018
2024
  @property st-global(--wds-tooltip-background-fill);
2025
+ @property st-global(--wds-tooltip-border-fill);
2019
2026
  @property st-global(--wds-tooltip-border-radius);
2027
+ @property st-global(--wds-tooltip-border-width);
2020
2028
  @property st-global(--wds-tooltip-label-font-line-height-medium);
2021
2029
  @property st-global(--wds-tooltip-label-font-line-height-small);
2022
2030
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -2986,6 +2994,8 @@
2986
2994
  --wds-empty-state-border-radius: 4px;
2987
2995
  --wds-empty-state-page-content-paddings: 24px;
2988
2996
  --wds-empty-state-section-content-paddings: 24px;
2997
+ --wds-empty-state-subtitle-fill: #767574;
2998
+ --wds-empty-state-title-gap: 8px;
2989
2999
  --wds-feature-list-gap: 24px;
2990
3000
  --wds-field-set-gap-large: 16px;
2991
3001
  --wds-field-set-gap-medium: 12px;
@@ -3190,6 +3200,10 @@
3190
3200
  --wds-illustration-color-6: #002294;
3191
3201
  --wds-illustration-color-7: #002294;
3192
3202
  --wds-illustration-color-background: #F8F6F6;
3203
+ --wds-illustration-color-opacity-25: #F8F6F600;
3204
+ --wds-illustration-color-opacity-50: #F8F6F600;
3205
+ --wds-illustration-color-opacity-75: #F8F6F600;
3206
+ --wds-illustration-color-opacity-100: #F8F6F600;
3193
3207
  --wds-image-border-radius-default: 8px;
3194
3208
  --wds-image-border-radius-none: 0px;
3195
3209
  --wds-info-icon-fill: #767574;
@@ -4118,7 +4132,9 @@
4118
4132
  --wds-toggle-switch-width-medium: 26px;
4119
4133
  --wds-toggle-switch-width-small: 24px;
4120
4134
  --wds-tooltip-background-fill: #151414;
4135
+ --wds-tooltip-border-fill: rgba(19, 23, 32, 0);
4121
4136
  --wds-tooltip-border-radius: 6px;
4137
+ --wds-tooltip-border-width: 0px;
4122
4138
  --wds-tooltip-label-font-line-height-medium: 18px;
4123
4139
  --wds-tooltip-label-font-line-height-small: 12px;
4124
4140
  --wds-tooltip-label-font-size-medium: 12px;
package/odeditor/component.st.css CHANGED
@@ -377,6 +377,8 @@
377
377
  @property st-global(--wds-empty-state-border-radius);
378
378
  @property st-global(--wds-empty-state-page-content-paddings);
379
379
  @property st-global(--wds-empty-state-section-content-paddings);
380
+ @property st-global(--wds-empty-state-subtitle-fill);
381
+ @property st-global(--wds-empty-state-title-gap);
380
382
  @property st-global(--wds-feature-list-gap);
381
383
  @property st-global(--wds-field-set-gap-large);
382
384
  @property st-global(--wds-field-set-gap-medium);
@@ -1276,7 +1278,9 @@
1276
1278
  @property st-global(--wds-toggle-switch-width-medium);
1277
1279
  @property st-global(--wds-toggle-switch-width-small);
1278
1280
  @property st-global(--wds-tooltip-background-fill);
1281
+ @property st-global(--wds-tooltip-border-fill);
1279
1282
  @property st-global(--wds-tooltip-border-radius);
1283
+ @property st-global(--wds-tooltip-border-width);
1280
1284
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1281
1285
  @property st-global(--wds-tooltip-label-font-line-height-small);
1282
1286
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1737,6 +1741,8 @@
1737
1741
  --wds-empty-state-border-radius: 4px;
1738
1742
  --wds-empty-state-page-content-paddings: 24px;
1739
1743
  --wds-empty-state-section-content-paddings: 24px;
1744
+ --wds-empty-state-subtitle-fill: #767574;
1745
+ --wds-empty-state-title-gap: 8px;
1740
1746
  --wds-feature-list-gap: 24px;
1741
1747
  --wds-field-set-gap-large: 16px;
1742
1748
  --wds-field-set-gap-medium: 12px;
@@ -2636,7 +2642,9 @@
2636
2642
  --wds-toggle-switch-width-medium: 26px;
2637
2643
  --wds-toggle-switch-width-small: 24px;
2638
2644
  --wds-tooltip-background-fill: #151414;
2645
+ --wds-tooltip-border-fill: rgba(19, 23, 32, 0);
2639
2646
  --wds-tooltip-border-radius: 6px;
2647
+ --wds-tooltip-border-width: 0px;
2640
2648
  --wds-tooltip-label-font-line-height-medium: 18px;
2641
2649
  --wds-tooltip-label-font-line-height-small: 12px;
2642
2650
  --wds-tooltip-label-font-size-medium: 12px;
package/odeditor/semantic.st.css CHANGED
@@ -407,6 +407,10 @@
407
407
  @property st-global(--wds-illustration-color-6);
408
408
  @property st-global(--wds-illustration-color-7);
409
409
  @property st-global(--wds-illustration-color-background);
410
+ @property st-global(--wds-illustration-color-opacity-25);
411
+ @property st-global(--wds-illustration-color-opacity-50);
412
+ @property st-global(--wds-illustration-color-opacity-75);
413
+ @property st-global(--wds-illustration-color-opacity-100);
410
414
  @property st-global(--wds-inner-shadow-blur-input);
411
415
  @property st-global(--wds-inner-shadow-blur-primary);
412
416
  @property st-global(--wds-inner-shadow-blur-secondary);
@@ -910,6 +914,10 @@
910
914
  --wds-illustration-color-6: #002294;
911
915
  --wds-illustration-color-7: #002294;
912
916
  --wds-illustration-color-background: #F8F6F6;
917
+ --wds-illustration-color-opacity-25: #F8F6F600;
918
+ --wds-illustration-color-opacity-50: #F8F6F600;
919
+ --wds-illustration-color-opacity-75: #F8F6F600;
920
+ --wds-illustration-color-opacity-100: #F8F6F600;
913
921
  --wds-inner-shadow-blur-input: 3px;
914
922
  --wds-inner-shadow-blur-primary: 2px;
915
923
  --wds-inner-shadow-blur-secondary: 2px;
package/odeditor-dark/all.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-opacity-100: #F8F6F6FF;
3
+ --wds-illustration-color-opacity-75: #F8F6F6BF;
4
+ --wds-illustration-color-opacity-50: #F8F6F680;
5
+ --wds-illustration-color-opacity-25: #F8F6F640;
2
6
  --wds-illustration-color-background: #2D2D2E;
3
7
  --wds-illustration-color-7: #B8C4FF;
4
8
  --wds-illustration-color-6: #EAEFFF;
@@ -306,6 +310,7 @@
306
310
  --wds-background-blur-0: 0px;
307
311
  --wds-variable-input-padding-vertical-tiny: 2px;
308
312
  --wds-variable-input-padding-vertical-small: 5px;
313
+ --wds-tooltip-background-fill: #000000;
309
314
  --wds-toggle-switch-width-small: 24px;
310
315
  --wds-toggle-switch-width-medium: 26px;
311
316
  --wds-toggle-switch-width-large: 40px;
@@ -857,7 +862,9 @@
857
862
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
858
863
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-200);
859
864
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-medium);
865
+ --wds-tooltip-border-width: var(--wds-border-width-100);
860
866
  --wds-tooltip-border-radius: var(--wds-border-radius-300);
867
+ --wds-tooltip-border-fill: var(--wds-color-black-750);
861
868
  --wds-toggle-switch-padding: var(--wds-space-25);
862
869
  --wds-toggle-switch-fill-standard: var(--wds-color-black-400);
863
870
  --wds-toggle-switch-border-urgent-disabled: var(--wds-color-black-100-transparent-0);
@@ -1115,6 +1122,7 @@
1115
1122
  --wds-segmented-toggle-padding-horizontal-medium: var(--wds-space-400);
1116
1123
  --wds-segmented-toggle-padding-container: var(--wds-space-100);
1117
1124
  --wds-segmented-toggle-label-font-weight: var(--wds-font-weight-semi-bold);
1125
+ --wds-segmented-toggle-label-font-size-small: var(--wds-font-size-200);
1118
1126
  --wds-segmented-toggle-inner-shadow-fill-secondary: var(--wds-color-white);
1119
1127
  --wds-segmented-toggle-inner-shadow-fill-primary: var(--wds-color-white);
1120
1128
  --wds-segmented-toggle-icononly-padding-vertical-small: var(--wds-space-100);
@@ -1370,6 +1378,7 @@
1370
1378
  --wds-field-set-gap-medium: var(--wds-space-300);
1371
1379
  --wds-field-set-gap-large: var(--wds-space-400);
1372
1380
  --wds-feature-list-gap: var(--wds-space-600);
1381
+ --wds-empty-state-title-gap: var(--wds-space-200);
1373
1382
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1374
1383
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1375
1384
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1644,9 +1653,8 @@
1644
1653
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
1645
1654
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
1646
1655
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-standard-secondary);
1647
- --wds-tooltip-text-fill: var(--wds-color-text-standard-primary-light);
1656
+ --wds-tooltip-text-fill: var(--wds-color-text-standard-primary);
1648
1657
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-tiny);
1649
- --wds-tooltip-background-fill: var(--wds-color-fill-surface-overlay-dark);
1650
1658
  --wds-toggle-switch-fill-urgent-hover: var(--wds-color-fill-dark-primary-hover);
1651
1659
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-primary-disabled);
1652
1660
  --wds-toggle-switch-fill-urgent-active-hover: var(--wds-color-fill-urgent-primary-hover);
@@ -1747,7 +1755,6 @@
1747
1755
  --wds-segmented-toggle-value-fill-disabled: var(--wds-color-text-disabled);
1748
1756
  --wds-segmented-toggle-value-fill-default: var(--wds-color-text-standard-primary);
1749
1757
  --wds-segmented-toggle-value-fill: var(--wds-color-text-standard-primary);
1750
- --wds-segmented-toggle-label-font-size-small: var(--wds-font-size-body-small);
1751
1758
  --wds-segmented-toggle-label-font-size-medium: var(--wds-font-size-body-medium);
1752
1759
  --wds-segmented-toggle-label-font-line-height-medium: var(--wds-font-line-height-400);
1753
1760
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-fill-standard-tertiary-disabled);
@@ -1922,6 +1929,7 @@
1922
1929
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1923
1930
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1924
1931
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1932
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1925
1933
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1926
1934
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1927
1935
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
package/odeditor-dark/all.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @mixin tokens {
2
2
  --wds-variable-input-padding-vertical-tiny: 2px;
3
3
  --wds-variable-input-padding-vertical-small: 5px;
4
+ --wds-tooltip-background-fill: #000000;
4
5
  --wds-toggle-switch-width-small: 24px;
5
6
  --wds-toggle-switch-width-medium: 26px;
6
7
  --wds-toggle-switch-width-large: 40px;
@@ -154,6 +155,10 @@
154
155
  --wds-input-shadow-focus-warning: transparent;
155
156
  --wds-input-shadow-focus-standard: transparent;
156
157
  --wds-input-shadow-focus-destructive: transparent;
158
+ --wds-illustration-color-opacity-100: #F8F6F6FF;
159
+ --wds-illustration-color-opacity-75: #F8F6F6BF;
160
+ --wds-illustration-color-opacity-50: #F8F6F680;
161
+ --wds-illustration-color-opacity-25: #F8F6F640;
157
162
  --wds-illustration-color-background: #2D2D2E;
158
163
  --wds-illustration-color-7: #B8C4FF;
159
164
  --wds-illustration-color-6: #EAEFFF;
@@ -436,7 +441,9 @@
436
441
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
437
442
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-200);
438
443
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-medium);
444
+ --wds-tooltip-border-width: var(--wds-border-width-100);
439
445
  --wds-tooltip-border-radius: var(--wds-border-radius-300);
446
+ --wds-tooltip-border-fill: var(--wds-color-black-750);
440
447
  --wds-toggle-switch-padding: var(--wds-space-25);
441
448
  --wds-toggle-switch-fill-standard: var(--wds-color-black-400);
442
449
  --wds-toggle-switch-border-urgent-disabled: var(--wds-color-black-100-transparent-0);
@@ -775,6 +782,7 @@
775
782
  --wds-segmented-toggle-padding-horizontal-medium: var(--wds-space-400);
776
783
  --wds-segmented-toggle-padding-container: var(--wds-space-100);
777
784
  --wds-segmented-toggle-label-font-weight: var(--wds-font-weight-semi-bold);
785
+ --wds-segmented-toggle-label-font-size-small: var(--wds-font-size-200);
778
786
  --wds-segmented-toggle-inner-shadow-fill-secondary: var(--wds-color-white);
779
787
  --wds-segmented-toggle-inner-shadow-fill-primary: var(--wds-color-white);
780
788
  --wds-segmented-toggle-icononly-padding-vertical-small: var(--wds-space-100);
@@ -1070,6 +1078,7 @@
1070
1078
  --wds-field-set-gap-medium: var(--wds-space-300);
1071
1079
  --wds-field-set-gap-large: var(--wds-space-400);
1072
1080
  --wds-feature-list-gap: var(--wds-space-600);
1081
+ --wds-empty-state-title-gap: var(--wds-space-200);
1073
1082
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1074
1083
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1075
1084
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1629,9 +1638,8 @@
1629
1638
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
1630
1639
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
1631
1640
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-standard-secondary);
1632
- --wds-tooltip-text-fill: var(--wds-color-text-standard-primary-light);
1641
+ --wds-tooltip-text-fill: var(--wds-color-text-standard-primary);
1633
1642
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-tiny);
1634
- --wds-tooltip-background-fill: var(--wds-color-fill-surface-overlay-dark);
1635
1643
  --wds-toggle-switch-fill-urgent-hover: var(--wds-color-fill-dark-primary-hover);
1636
1644
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-primary-disabled);
1637
1645
  --wds-toggle-switch-fill-urgent-active-hover: var(--wds-color-fill-urgent-primary-hover);
@@ -1737,7 +1745,6 @@
1737
1745
  --wds-segmented-toggle-value-fill-disabled: var(--wds-color-text-disabled);
1738
1746
  --wds-segmented-toggle-value-fill-default: var(--wds-color-text-standard-primary);
1739
1747
  --wds-segmented-toggle-value-fill: var(--wds-color-text-standard-primary);
1740
- --wds-segmented-toggle-label-font-size-small: var(--wds-font-size-body-small);
1741
1748
  --wds-segmented-toggle-label-font-size-medium: var(--wds-font-size-body-medium);
1742
1749
  --wds-segmented-toggle-label-font-line-height-medium: var(--wds-font-line-height-400);
1743
1750
  --wds-segmented-toggle-fill-selected-disabled: var(--wds-color-fill-standard-tertiary-disabled);
@@ -1922,6 +1929,7 @@
1922
1929
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1923
1930
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1924
1931
  --wds-field-set-label-fill: var(--wds-color-text-standard-secondary);
1932
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1925
1933
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1926
1934
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1927
1935
  --wds-drag-handle-fill: var(--wds-color-text-standard-primary);
package/odeditor-dark/all.st.css CHANGED
@@ -888,6 +888,8 @@
888
888
  @property st-global(--wds-empty-state-border-radius);
889
889
  @property st-global(--wds-empty-state-page-content-paddings);
890
890
  @property st-global(--wds-empty-state-section-content-paddings);
891
+ @property st-global(--wds-empty-state-subtitle-fill);
892
+ @property st-global(--wds-empty-state-title-gap);
891
893
  @property st-global(--wds-feature-list-gap);
892
894
  @property st-global(--wds-field-set-gap-large);
893
895
  @property st-global(--wds-field-set-gap-medium);
@@ -1092,6 +1094,10 @@
1092
1094
  @property st-global(--wds-illustration-color-6);
1093
1095
  @property st-global(--wds-illustration-color-7);
1094
1096
  @property st-global(--wds-illustration-color-background);
1097
+ @property st-global(--wds-illustration-color-opacity-25);
1098
+ @property st-global(--wds-illustration-color-opacity-50);
1099
+ @property st-global(--wds-illustration-color-opacity-75);
1100
+ @property st-global(--wds-illustration-color-opacity-100);
1095
1101
  @property st-global(--wds-image-border-radius-default);
1096
1102
  @property st-global(--wds-image-border-radius-none);
1097
1103
  @property st-global(--wds-info-icon-fill);
@@ -2025,7 +2031,9 @@
2025
2031
  @property st-global(--wds-toggle-switch-width-medium);
2026
2032
  @property st-global(--wds-toggle-switch-width-small);
2027
2033
  @property st-global(--wds-tooltip-background-fill);
2034
+ @property st-global(--wds-tooltip-border-fill);
2028
2035
  @property st-global(--wds-tooltip-border-radius);
2036
+ @property st-global(--wds-tooltip-border-width);
2029
2037
  @property st-global(--wds-tooltip-label-font-line-height-medium);
2030
2038
  @property st-global(--wds-tooltip-label-font-line-height-small);
2031
2039
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -2999,6 +3007,8 @@
2999
3007
  --wds-empty-state-border-radius: 4px;
3000
3008
  --wds-empty-state-page-content-paddings: 24px;
3001
3009
  --wds-empty-state-section-content-paddings: 24px;
3010
+ --wds-empty-state-subtitle-fill: #A09E9D;
3011
+ --wds-empty-state-title-gap: 8px;
3002
3012
  --wds-feature-list-gap: 24px;
3003
3013
  --wds-field-set-gap-large: 16px;
3004
3014
  --wds-field-set-gap-medium: 12px;
@@ -3203,6 +3213,10 @@
3203
3213
  --wds-illustration-color-6: #EAEFFF;
3204
3214
  --wds-illustration-color-7: #B8C4FF;
3205
3215
  --wds-illustration-color-background: #2D2D2E;
3216
+ --wds-illustration-color-opacity-25: #F8F6F640;
3217
+ --wds-illustration-color-opacity-50: #F8F6F680;
3218
+ --wds-illustration-color-opacity-75: #F8F6F6BF;
3219
+ --wds-illustration-color-opacity-100: #F8F6F6FF;
3206
3220
  --wds-image-border-radius-default: 8px;
3207
3221
  --wds-image-border-radius-none: 0px;
3208
3222
  --wds-info-icon-fill: #A09E9D;
@@ -3546,7 +3560,7 @@
3546
3560
  --wds-segmented-toggle-label-font-line-height-medium: 24px;
3547
3561
  --wds-segmented-toggle-label-font-line-height-small: 18px;
3548
3562
  --wds-segmented-toggle-label-font-size-medium: 16px;
3549
- --wds-segmented-toggle-label-font-size-small: 14px;
3563
+ --wds-segmented-toggle-label-font-size-small: 12px;
3550
3564
  --wds-segmented-toggle-label-font-weight: 600;
3551
3565
  --wds-segmented-toggle-padding-container: 4px;
3552
3566
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
@@ -4135,8 +4149,10 @@
4135
4149
  --wds-toggle-switch-width-large: 40px;
4136
4150
  --wds-toggle-switch-width-medium: 26px;
4137
4151
  --wds-toggle-switch-width-small: 24px;
4138
- --wds-tooltip-background-fill: #FFFFFF;
4152
+ --wds-tooltip-background-fill: #000000;
4153
+ --wds-tooltip-border-fill: #2D2D2E;
4139
4154
  --wds-tooltip-border-radius: 6px;
4155
+ --wds-tooltip-border-width: 1px;
4140
4156
  --wds-tooltip-label-font-line-height-medium: 18px;
4141
4157
  --wds-tooltip-label-font-line-height-small: 12px;
4142
4158
  --wds-tooltip-label-font-size-medium: 12px;
@@ -4146,7 +4162,7 @@
4146
4162
  --wds-tooltip-padding-vertical-medium: 6px;
4147
4163
  --wds-tooltip-padding-vertical-small: 6px;
4148
4164
  --wds-tooltip-shadow: rgba(255, 255, 255, 0);
4149
- --wds-tooltip-text-fill: #212122;
4165
+ --wds-tooltip-text-fill: #FFFFFF;
4150
4166
  --wds-top-banner-fill: #d7b7fb;
4151
4167
  --wds-variable-input-padding-vertical-small: 5px;
4152
4168
  --wds-variable-input-padding-vertical-tiny: 2px;
package/odeditor-dark/component.st.css CHANGED
@@ -380,6 +380,8 @@
380
380
  @property st-global(--wds-empty-state-border-radius);
381
381
  @property st-global(--wds-empty-state-page-content-paddings);
382
382
  @property st-global(--wds-empty-state-section-content-paddings);
383
+ @property st-global(--wds-empty-state-subtitle-fill);
384
+ @property st-global(--wds-empty-state-title-gap);
383
385
  @property st-global(--wds-feature-list-gap);
384
386
  @property st-global(--wds-field-set-gap-large);
385
387
  @property st-global(--wds-field-set-gap-medium);
@@ -1284,7 +1286,9 @@
1284
1286
  @property st-global(--wds-toggle-switch-width-medium);
1285
1287
  @property st-global(--wds-toggle-switch-width-small);
1286
1288
  @property st-global(--wds-tooltip-background-fill);
1289
+ @property st-global(--wds-tooltip-border-fill);
1287
1290
  @property st-global(--wds-tooltip-border-radius);
1291
+ @property st-global(--wds-tooltip-border-width);
1288
1292
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1289
1293
  @property st-global(--wds-tooltip-label-font-line-height-small);
1290
1294
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1748,6 +1752,8 @@
1748
1752
  --wds-empty-state-border-radius: 4px;
1749
1753
  --wds-empty-state-page-content-paddings: 24px;
1750
1754
  --wds-empty-state-section-content-paddings: 24px;
1755
+ --wds-empty-state-subtitle-fill: #A09E9D;
1756
+ --wds-empty-state-title-gap: 8px;
1751
1757
  --wds-feature-list-gap: 24px;
1752
1758
  --wds-field-set-gap-large: 16px;
1753
1759
  --wds-field-set-gap-medium: 12px;
@@ -2217,7 +2223,7 @@
2217
2223
  --wds-segmented-toggle-label-font-line-height-medium: 24px;
2218
2224
  --wds-segmented-toggle-label-font-line-height-small: 18px;
2219
2225
  --wds-segmented-toggle-label-font-size-medium: 16px;
2220
- --wds-segmented-toggle-label-font-size-small: 14px;
2226
+ --wds-segmented-toggle-label-font-size-small: 12px;
2221
2227
  --wds-segmented-toggle-label-font-weight: 600;
2222
2228
  --wds-segmented-toggle-padding-container: 4px;
2223
2229
  --wds-segmented-toggle-padding-horizontal-medium: 16px;
@@ -2651,8 +2657,10 @@
2651
2657
  --wds-toggle-switch-width-large: 40px;
2652
2658
  --wds-toggle-switch-width-medium: 26px;
2653
2659
  --wds-toggle-switch-width-small: 24px;
2654
- --wds-tooltip-background-fill: #FFFFFF;
2660
+ --wds-tooltip-background-fill: #000000;
2661
+ --wds-tooltip-border-fill: #2D2D2E;
2655
2662
  --wds-tooltip-border-radius: 6px;
2663
+ --wds-tooltip-border-width: 1px;
2656
2664
  --wds-tooltip-label-font-line-height-medium: 18px;
2657
2665
  --wds-tooltip-label-font-line-height-small: 12px;
2658
2666
  --wds-tooltip-label-font-size-medium: 12px;
@@ -2662,7 +2670,7 @@
2662
2670
  --wds-tooltip-padding-vertical-medium: 6px;
2663
2671
  --wds-tooltip-padding-vertical-small: 6px;
2664
2672
  --wds-tooltip-shadow: rgba(255, 255, 255, 0);
2665
- --wds-tooltip-text-fill: #212122;
2673
+ --wds-tooltip-text-fill: #FFFFFF;
2666
2674
  --wds-top-banner-fill: #d7b7fb;
2667
2675
  --wds-variable-input-padding-vertical-small: 5px;
2668
2676
  --wds-variable-input-padding-vertical-tiny: 2px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -407,6 +407,10 @@
407
407
  @property st-global(--wds-illustration-color-6);
408
408
  @property st-global(--wds-illustration-color-7);
409
409
  @property st-global(--wds-illustration-color-background);
410
+ @property st-global(--wds-illustration-color-opacity-25);
411
+ @property st-global(--wds-illustration-color-opacity-50);
412
+ @property st-global(--wds-illustration-color-opacity-75);
413
+ @property st-global(--wds-illustration-color-opacity-100);
410
414
  @property st-global(--wds-inner-shadow-blur-input);
411
415
  @property st-global(--wds-inner-shadow-blur-primary);
412
416
  @property st-global(--wds-inner-shadow-blur-secondary);
@@ -910,6 +914,10 @@
910
914
  --wds-illustration-color-6: #EAEFFF;
911
915
  --wds-illustration-color-7: #B8C4FF;
912
916
  --wds-illustration-color-background: #2D2D2E;
917
+ --wds-illustration-color-opacity-25: #F8F6F640;
918
+ --wds-illustration-color-opacity-50: #F8F6F680;
919
+ --wds-illustration-color-opacity-75: #F8F6F6BF;
920
+ --wds-illustration-color-opacity-100: #F8F6F6FF;
913
921
  --wds-inner-shadow-blur-input: 3px;
914
922
  --wds-inner-shadow-blur-primary: 2px;
915
923
  --wds-inner-shadow-blur-secondary: 2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.206.0",
3
+ "version": "1.208.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -32,5 +32,5 @@
32
32
  "author": "augustinasv@wix.com",
33
33
  "description": "Design system tokens",
34
34
  "packageManager": "yarn@3.5.0",
35
- "falconPackageHash": "3bbd4e57c7a8200fdf75a3c4676ff6b171ca2cc9e7d0bf3b3a6ef9dd"
35
+ "falconPackageHash": "ce138218f38c047279995352ffa849edfb9de52838da9f22dd4b0974"
36
36
  }
package/studio/all.css CHANGED
@@ -1,4 +1,8 @@
1
1
  :root, .wds-tokens {
2
+ --wds-illustration-color-opacity-100: #F8F6F100;
3
+ --wds-illustration-color-opacity-75: #F8F6F700;
4
+ --wds-illustration-color-opacity-50: #F8F6F500;
5
+ --wds-illustration-color-opacity-25: #F8F6F200;
2
6
  --wds-illustration-color-background: #F8F6F6;
3
7
  --wds-illustration-color-7: #002297;
4
8
  --wds-illustration-color-6: #002296;
@@ -845,8 +849,10 @@
845
849
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
846
850
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-300);
847
851
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
852
+ --wds-tooltip-border-width: var(--wds-border-width-none);
848
853
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
849
854
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
855
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
850
856
  --wds-toggle-switch-padding: var(--wds-space-50);
851
857
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-secondary-disabled);
852
858
  --wds-toggle-switch-fill-success-disabled: var(--wds-color-fill-success-secondary-disabled);
@@ -1339,6 +1345,7 @@
1339
1345
  --wds-field-set-gap-medium: var(--wds-space-300);
1340
1346
  --wds-field-set-gap-large: var(--wds-space-400);
1341
1347
  --wds-feature-list-gap: var(--wds-space-600);
1348
+ --wds-empty-state-title-gap: var(--wds-space-200);
1342
1349
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1343
1350
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1344
1351
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1915,6 +1922,7 @@
1915
1922
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1916
1923
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1917
1924
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1925
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1918
1926
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1919
1927
  --wds-drag-handle-fill: var(--wds-color-text-primary);
1920
1928
  --wds-dock-foreground-fill-hover: var(--wds-color-fill-standard-secondary-active);
package/studio/all.scss CHANGED
@@ -122,6 +122,10 @@
122
122
  --wds-input-shadow-focus-warning: transparent;
123
123
  --wds-input-shadow-focus-standard: transparent;
124
124
  --wds-input-shadow-focus-destructive: transparent;
125
+ --wds-illustration-color-opacity-100: #F8F6F100;
126
+ --wds-illustration-color-opacity-75: #F8F6F700;
127
+ --wds-illustration-color-opacity-50: #F8F6F500;
128
+ --wds-illustration-color-opacity-25: #F8F6F200;
125
129
  --wds-illustration-color-background: #F8F6F6;
126
130
  --wds-illustration-color-7: #002297;
127
131
  --wds-illustration-color-6: #002296;
@@ -435,8 +439,10 @@
435
439
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
436
440
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-300);
437
441
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
442
+ --wds-tooltip-border-width: var(--wds-border-width-none);
438
443
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
439
444
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
445
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
440
446
  --wds-toggle-switch-padding: var(--wds-space-50);
441
447
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-secondary-disabled);
442
448
  --wds-toggle-switch-fill-success-disabled: var(--wds-color-fill-success-secondary-disabled);
@@ -1061,6 +1067,7 @@
1061
1067
  --wds-field-set-gap-medium: var(--wds-space-300);
1062
1068
  --wds-field-set-gap-large: var(--wds-space-400);
1063
1069
  --wds-feature-list-gap: var(--wds-space-600);
1070
+ --wds-empty-state-title-gap: var(--wds-space-200);
1064
1071
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1065
1072
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1066
1073
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1914,6 +1921,7 @@
1914
1921
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
1915
1922
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-tiny);
1916
1923
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1924
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1917
1925
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1918
1926
  --wds-drag-handle-fill: var(--wds-color-text-primary);
1919
1927
  --wds-dock-foreground-fill-hover: var(--wds-color-fill-standard-secondary-active);
package/studio/all.st.css CHANGED
@@ -897,6 +897,8 @@
897
897
  @property st-global(--wds-empty-state-border-radius);
898
898
  @property st-global(--wds-empty-state-page-content-paddings);
899
899
  @property st-global(--wds-empty-state-section-content-paddings);
900
+ @property st-global(--wds-empty-state-subtitle-fill);
901
+ @property st-global(--wds-empty-state-title-gap);
900
902
  @property st-global(--wds-feature-list-gap);
901
903
  @property st-global(--wds-field-set-gap-large);
902
904
  @property st-global(--wds-field-set-gap-medium);
@@ -1107,6 +1109,10 @@
1107
1109
  @property st-global(--wds-illustration-color-6);
1108
1110
  @property st-global(--wds-illustration-color-7);
1109
1111
  @property st-global(--wds-illustration-color-background);
1112
+ @property st-global(--wds-illustration-color-opacity-25);
1113
+ @property st-global(--wds-illustration-color-opacity-50);
1114
+ @property st-global(--wds-illustration-color-opacity-75);
1115
+ @property st-global(--wds-illustration-color-opacity-100);
1110
1116
  @property st-global(--wds-image-border-radius-default);
1111
1117
  @property st-global(--wds-image-border-radius-none);
1112
1118
  @property st-global(--wds-info-icon-fill);
@@ -2044,9 +2050,11 @@
2044
2050
  @property st-global(--wds-toggle-switch-width-medium);
2045
2051
  @property st-global(--wds-toggle-switch-width-small);
2046
2052
  @property st-global(--wds-tooltip-background-fill);
2053
+ @property st-global(--wds-tooltip-border-fill);
2047
2054
  @property st-global(--wds-tooltip-border-radius);
2048
2055
  @property st-global(--wds-tooltip-border-radius-medium);
2049
2056
  @property st-global(--wds-tooltip-border-radius-small);
2057
+ @property st-global(--wds-tooltip-border-width);
2050
2058
  @property st-global(--wds-tooltip-label-font-line-height-medium);
2051
2059
  @property st-global(--wds-tooltip-label-font-line-height-small);
2052
2060
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -3039,6 +3047,8 @@
3039
3047
  --wds-empty-state-border-radius: 4px;
3040
3048
  --wds-empty-state-page-content-paddings: 24px;
3041
3049
  --wds-empty-state-section-content-paddings: 24px;
3050
+ --wds-empty-state-subtitle-fill: #acafc4;
3051
+ --wds-empty-state-title-gap: 8px;
3042
3052
  --wds-feature-list-gap: 24px;
3043
3053
  --wds-field-set-gap-large: 16px;
3044
3054
  --wds-field-set-gap-medium: 12px;
@@ -3249,6 +3259,10 @@
3249
3259
  --wds-illustration-color-6: #002296;
3250
3260
  --wds-illustration-color-7: #002297;
3251
3261
  --wds-illustration-color-background: #F8F6F6;
3262
+ --wds-illustration-color-opacity-25: #F8F6F200;
3263
+ --wds-illustration-color-opacity-50: #F8F6F500;
3264
+ --wds-illustration-color-opacity-75: #F8F6F700;
3265
+ --wds-illustration-color-opacity-100: #F8F6F100;
3252
3266
  --wds-image-border-radius-default: 4px;
3253
3267
  --wds-image-border-radius-none: 0px;
3254
3268
  --wds-info-icon-fill: #868aa5;
@@ -4186,9 +4200,11 @@
4186
4200
  --wds-toggle-switch-width-medium: 28px;
4187
4201
  --wds-toggle-switch-width-small: 24px;
4188
4202
  --wds-tooltip-background-fill: #ffffff;
4203
+ --wds-tooltip-border-fill: rgba(19, 23, 32, 0);
4189
4204
  --wds-tooltip-border-radius: 4px;
4190
4205
  --wds-tooltip-border-radius-medium: 8px;
4191
4206
  --wds-tooltip-border-radius-small: 8px;
4207
+ --wds-tooltip-border-width: 0px;
4192
4208
  --wds-tooltip-label-font-line-height-medium: 20px;
4193
4209
  --wds-tooltip-label-font-line-height-small: 16px;
4194
4210
  --wds-tooltip-label-font-size-medium: 14px;
package/studio/component.st.css CHANGED
@@ -390,6 +390,8 @@
390
390
  @property st-global(--wds-empty-state-border-radius);
391
391
  @property st-global(--wds-empty-state-page-content-paddings);
392
392
  @property st-global(--wds-empty-state-section-content-paddings);
393
+ @property st-global(--wds-empty-state-subtitle-fill);
394
+ @property st-global(--wds-empty-state-title-gap);
393
395
  @property st-global(--wds-feature-list-gap);
394
396
  @property st-global(--wds-field-set-gap-large);
395
397
  @property st-global(--wds-field-set-gap-medium);
@@ -1307,9 +1309,11 @@
1307
1309
  @property st-global(--wds-toggle-switch-width-medium);
1308
1310
  @property st-global(--wds-toggle-switch-width-small);
1309
1311
  @property st-global(--wds-tooltip-background-fill);
1312
+ @property st-global(--wds-tooltip-border-fill);
1310
1313
  @property st-global(--wds-tooltip-border-radius);
1311
1314
  @property st-global(--wds-tooltip-border-radius-medium);
1312
1315
  @property st-global(--wds-tooltip-border-radius-small);
1316
+ @property st-global(--wds-tooltip-border-width);
1313
1317
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1314
1318
  @property st-global(--wds-tooltip-label-font-line-height-small);
1315
1319
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1793,6 +1797,8 @@
1793
1797
  --wds-empty-state-border-radius: 4px;
1794
1798
  --wds-empty-state-page-content-paddings: 24px;
1795
1799
  --wds-empty-state-section-content-paddings: 24px;
1800
+ --wds-empty-state-subtitle-fill: #acafc4;
1801
+ --wds-empty-state-title-gap: 8px;
1796
1802
  --wds-feature-list-gap: 24px;
1797
1803
  --wds-field-set-gap-large: 16px;
1798
1804
  --wds-field-set-gap-medium: 12px;
@@ -2710,9 +2716,11 @@
2710
2716
  --wds-toggle-switch-width-medium: 28px;
2711
2717
  --wds-toggle-switch-width-small: 24px;
2712
2718
  --wds-tooltip-background-fill: #ffffff;
2719
+ --wds-tooltip-border-fill: rgba(19, 23, 32, 0);
2713
2720
  --wds-tooltip-border-radius: 4px;
2714
2721
  --wds-tooltip-border-radius-medium: 8px;
2715
2722
  --wds-tooltip-border-radius-small: 8px;
2723
+ --wds-tooltip-border-width: 0px;
2716
2724
  --wds-tooltip-label-font-line-height-medium: 20px;
2717
2725
  --wds-tooltip-label-font-line-height-small: 16px;
2718
2726
  --wds-tooltip-label-font-size-medium: 14px;
package/studio/semantic.st.css CHANGED
@@ -407,6 +407,10 @@
407
407
  @property st-global(--wds-illustration-color-6);
408
408
  @property st-global(--wds-illustration-color-7);
409
409
  @property st-global(--wds-illustration-color-background);
410
+ @property st-global(--wds-illustration-color-opacity-25);
411
+ @property st-global(--wds-illustration-color-opacity-50);
412
+ @property st-global(--wds-illustration-color-opacity-75);
413
+ @property st-global(--wds-illustration-color-opacity-100);
410
414
  @property st-global(--wds-inner-shadow-blur-input);
411
415
  @property st-global(--wds-inner-shadow-blur-primary);
412
416
  @property st-global(--wds-inner-shadow-blur-secondary);
@@ -910,6 +914,10 @@
910
914
  --wds-illustration-color-6: #002296;
911
915
  --wds-illustration-color-7: #002297;
912
916
  --wds-illustration-color-background: #F8F6F6;
917
+ --wds-illustration-color-opacity-25: #F8F6F200;
918
+ --wds-illustration-color-opacity-50: #F8F6F500;
919
+ --wds-illustration-color-opacity-75: #F8F6F700;
920
+ --wds-illustration-color-opacity-100: #F8F6F100;
913
921
  --wds-inner-shadow-blur-input: 0px;
914
922
  --wds-inner-shadow-blur-primary: 0px;
915
923
  --wds-inner-shadow-blur-secondary: 0px;
package/wixel/all.css CHANGED
@@ -812,8 +812,10 @@
812
812
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
813
813
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
814
814
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
815
+ --wds-tooltip-border-width: var(--wds-border-width-none);
815
816
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
816
817
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
818
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
817
819
  --wds-toggle-switch-shadow: 0 2px 1px var(--wds-color-black-100-transparent-0), 0 0 3px var(--wds-color-black-100-transparent-30);
818
820
  --wds-toggle-switch-padding: var(--wds-space-25);
819
821
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-primary-disabled);
@@ -1281,6 +1283,7 @@
1281
1283
  --wds-field-set-gap-medium: var(--wds-space-300);
1282
1284
  --wds-field-set-gap-large: var(--wds-space-400);
1283
1285
  --wds-feature-list-gap: var(--wds-space-600);
1286
+ --wds-empty-state-title-gap: var(--wds-space-200);
1284
1287
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1285
1288
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1286
1289
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1864,6 +1867,7 @@
1864
1867
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1865
1868
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1866
1869
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1870
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1867
1871
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1868
1872
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1869
1873
  --wds-drag-handle-fill: var(--wds-color-text-primary);
package/wixel/all.scss CHANGED
@@ -418,8 +418,10 @@
418
418
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
419
419
  --wds-tooltip-padding-horizontal-medium: var(--wds-space-400);
420
420
  --wds-tooltip-label-font-weight-medium: var(--wds-font-weight-regular);
421
+ --wds-tooltip-border-width: var(--wds-border-width-none);
421
422
  --wds-tooltip-border-radius-small: var(--wds-border-radius-400);
422
423
  --wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
424
+ --wds-tooltip-border-fill: var(--wds-color-black-100-transparent-0);
423
425
  --wds-toggle-switch-shadow: 0 2px 1px var(--wds-color-black-100-transparent-0), 0 0 3px var(--wds-color-black-100-transparent-30);
424
426
  --wds-toggle-switch-padding: var(--wds-space-25);
425
427
  --wds-toggle-switch-fill-urgent-disabled: var(--wds-color-fill-urgent-primary-disabled);
@@ -1004,6 +1006,7 @@
1004
1006
  --wds-field-set-gap-medium: var(--wds-space-300);
1005
1007
  --wds-field-set-gap-large: var(--wds-space-400);
1006
1008
  --wds-feature-list-gap: var(--wds-space-600);
1009
+ --wds-empty-state-title-gap: var(--wds-space-200);
1007
1010
  --wds-empty-state-section-content-paddings: var(--wds-space-600);
1008
1011
  --wds-empty-state-page-content-paddings: var(--wds-space-600);
1009
1012
  --wds-empty-state-border-radius: var(--wds-border-radius-200);
@@ -1863,6 +1866,7 @@
1863
1866
  --wds-field-set-label-font-size-tiny: var(--wds-font-size-body-tiny);
1864
1867
  --wds-field-set-label-font-size-small: var(--wds-font-size-body-small);
1865
1868
  --wds-field-set-label-fill: var(--wds-color-text-standard-primary);
1869
+ --wds-empty-state-subtitle-fill: var(--wds-color-text-standard-secondary-light);
1866
1870
  --wds-dropdown-icon-fill-disabled: var(--wds-color-text-disabled);
1867
1871
  --wds-dropdown-icon-fill: var(--wds-color-text-standard-secondary);
1868
1872
  --wds-drag-handle-fill: var(--wds-color-text-primary);
package/wixel/all.st.css CHANGED
@@ -877,6 +877,8 @@
877
877
  @property st-global(--wds-empty-state-border-radius);
878
878
  @property st-global(--wds-empty-state-page-content-paddings);
879
879
  @property st-global(--wds-empty-state-section-content-paddings);
880
+ @property st-global(--wds-empty-state-subtitle-fill);
881
+ @property st-global(--wds-empty-state-title-gap);
880
882
  @property st-global(--wds-feature-list-gap);
881
883
  @property st-global(--wds-field-set-gap-large);
882
884
  @property st-global(--wds-field-set-gap-medium);
@@ -1984,9 +1986,11 @@
1984
1986
  @property st-global(--wds-toggle-switch-width-medium);
1985
1987
  @property st-global(--wds-toggle-switch-width-small);
1986
1988
  @property st-global(--wds-tooltip-background-fill);
1989
+ @property st-global(--wds-tooltip-border-fill);
1987
1990
  @property st-global(--wds-tooltip-border-radius);
1988
1991
  @property st-global(--wds-tooltip-border-radius-medium);
1989
1992
  @property st-global(--wds-tooltip-border-radius-small);
1993
+ @property st-global(--wds-tooltip-border-width);
1990
1994
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1991
1995
  @property st-global(--wds-tooltip-label-font-line-height-small);
1992
1996
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -2959,6 +2963,8 @@
2959
2963
  --wds-empty-state-border-radius: 4px;
2960
2964
  --wds-empty-state-page-content-paddings: 24px;
2961
2965
  --wds-empty-state-section-content-paddings: 24px;
2966
+ --wds-empty-state-subtitle-fill: #acafc4;
2967
+ --wds-empty-state-title-gap: 8px;
2962
2968
  --wds-feature-list-gap: 24px;
2963
2969
  --wds-field-set-gap-large: 16px;
2964
2970
  --wds-field-set-gap-medium: 12px;
@@ -4066,9 +4072,11 @@
4066
4072
  --wds-toggle-switch-width-medium: 32px;
4067
4073
  --wds-toggle-switch-width-small: 24px;
4068
4074
  --wds-tooltip-background-fill: #000624;
4075
+ --wds-tooltip-border-fill: rgba(38, 37, 36, 0.0000);
4069
4076
  --wds-tooltip-border-radius: 12px;
4070
4077
  --wds-tooltip-border-radius-medium: 8px;
4071
4078
  --wds-tooltip-border-radius-small: 8px;
4079
+ --wds-tooltip-border-width: 0px;
4072
4080
  --wds-tooltip-label-font-line-height-medium: 20px;
4073
4081
  --wds-tooltip-label-font-line-height-small: 16px;
4074
4082
  --wds-tooltip-label-font-size-medium: 14px;
package/wixel/component.st.css CHANGED
@@ -373,6 +373,8 @@
373
373
  @property st-global(--wds-empty-state-border-radius);
374
374
  @property st-global(--wds-empty-state-page-content-paddings);
375
375
  @property st-global(--wds-empty-state-section-content-paddings);
376
+ @property st-global(--wds-empty-state-subtitle-fill);
377
+ @property st-global(--wds-empty-state-title-gap);
376
378
  @property st-global(--wds-feature-list-gap);
377
379
  @property st-global(--wds-field-set-gap-large);
378
380
  @property st-global(--wds-field-set-gap-medium);
@@ -1273,9 +1275,11 @@
1273
1275
  @property st-global(--wds-toggle-switch-width-medium);
1274
1276
  @property st-global(--wds-toggle-switch-width-small);
1275
1277
  @property st-global(--wds-tooltip-background-fill);
1278
+ @property st-global(--wds-tooltip-border-fill);
1276
1279
  @property st-global(--wds-tooltip-border-radius);
1277
1280
  @property st-global(--wds-tooltip-border-radius-medium);
1278
1281
  @property st-global(--wds-tooltip-border-radius-small);
1282
+ @property st-global(--wds-tooltip-border-width);
1279
1283
  @property st-global(--wds-tooltip-label-font-line-height-medium);
1280
1284
  @property st-global(--wds-tooltip-label-font-line-height-small);
1281
1285
  @property st-global(--wds-tooltip-label-font-size-medium);
@@ -1742,6 +1746,8 @@
1742
1746
  --wds-empty-state-border-radius: 4px;
1743
1747
  --wds-empty-state-page-content-paddings: 24px;
1744
1748
  --wds-empty-state-section-content-paddings: 24px;
1749
+ --wds-empty-state-subtitle-fill: #acafc4;
1750
+ --wds-empty-state-title-gap: 8px;
1745
1751
  --wds-feature-list-gap: 24px;
1746
1752
  --wds-field-set-gap-large: 16px;
1747
1753
  --wds-field-set-gap-medium: 12px;
@@ -2642,9 +2648,11 @@
2642
2648
  --wds-toggle-switch-width-medium: 32px;
2643
2649
  --wds-toggle-switch-width-small: 24px;
2644
2650
  --wds-tooltip-background-fill: #000624;
2651
+ --wds-tooltip-border-fill: rgba(38, 37, 36, 0.0000);
2645
2652
  --wds-tooltip-border-radius: 12px;
2646
2653
  --wds-tooltip-border-radius-medium: 8px;
2647
2654
  --wds-tooltip-border-radius-small: 8px;
2655
+ --wds-tooltip-border-width: 0px;
2648
2656
  --wds-tooltip-label-font-line-height-medium: 20px;
2649
2657
  --wds-tooltip-label-font-line-height-small: 16px;
2650
2658
  --wds-tooltip-label-font-size-medium: 14px;