@wix/design-system-tokens 1.235.1 → 1.236.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 +16 -0
  2. package/all.css +1 -0
  3. package/all.scss +1 -0
  4. package/all.st.css +2 -0
  5. package/odeditor/all.css +18 -17
  6. package/odeditor/all.scss +18 -17
  7. package/odeditor/all.st.css +19 -17
  8. package/odeditor/component.st.css +17 -17
  9. package/odeditor/semantic.st.css +2 -0
  10. package/odeditor-dark/all.css +9 -8
  11. package/odeditor-dark/all.scss +9 -8
  12. package/odeditor-dark/all.st.css +10 -8
  13. package/odeditor-dark/component.st.css +8 -8
  14. package/odeditor-dark/semantic.st.css +2 -0
  15. package/package.json +2 -2
  16. package/semantic.st.css +2 -0
  17. package/studio/all.css +1 -0
  18. package/studio/all.scss +1 -0
  19. package/studio/all.st.css +2 -0
  20. package/studio/semantic.st.css +2 -0
  21. package/studio2-light/all.css +8 -7
  22. package/studio2-light/all.scss +8 -7
  23. package/studio2-light/all.st.css +9 -7
  24. package/studio2-light/component.st.css +7 -7
  25. package/studio2-light/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## 1.236.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#17461](https://github.com/wix-private/wix-design-systems/pull/17461) [`3f0eefd`](https://github.com/wix-private/wix-design-systems/commit/3f0eefd138c7369cd27305c2fa240c97a130614f) - Add the semantic `--wds-color-fill-transparent-tint` colour token, `rgba(234, 239, 255, .2)` in every theme, for light tinted overlays.
6
+
7
+ - [#17460](https://github.com/wix-private/wix-design-systems/pull/17460) [`b2cef88`](https://github.com/wix-private/wix-design-systems/commit/b2cef882f311f1b53215bb197dddf884004bfdbf) - **Visual breaking change:** In Harmony (odeditor), `--wds-section-helper-title-font-size` changes from `12px` to `14px`, `--wds-section-helper-fill-success` from `#f1f5ed` to `#effae5`, `--wds-section-helper-action-padding-medium` from `12px` to `8px`, and `--wds-section-helper-close-button-clearance-small` and `--wds-section-helper-close-button-clearance-medium` from `32px` to `16px`. Other themes are unchanged.
8
+
9
+ ### Patch Changes
10
+
11
+ - [#17548](https://github.com/wix-private/wix-design-systems/pull/17548) [`78e9016`](https://github.com/wix-private/wix-design-systems/commit/78e9016131c633e37c5001cd7c35d1783838bc16) - VerticalTabs item rest and disabled fill tokens (light, neutral and standard skins, including premium) are transparent in Harmony (odeditor).
12
+
13
+ - [#17451](https://github.com/wix-private/wix-design-systems/pull/17451) [`a6784d3`](https://github.com/wix-private/wix-design-systems/commit/a6784d378f5ba25136e959db5863c4360198c0e3) - **Visual breaking change:** TopBanner shape, shadow, padding and gap tokens in Studio 2.0 (`odeditor-dark`) and Studio 2.0 Light (`studio2-light`) now follow Harmony (`odeditor`); colors are unchanged.
14
+
15
+ ## 1.235.2
16
+
1
17
  ## 1.235.1
2
18
 
3
19
  ### Patch Changes
package/all.css CHANGED
@@ -75,6 +75,7 @@
75
75
  --wds-font-family-display: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
76
76
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
77
77
  --wds-color-text-stage-section: #6f56f9;
78
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
78
79
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
79
80
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
80
81
  --wds-color-fill-stage-section-secondary: #d9d2ff;
package/all.scss CHANGED
@@ -316,6 +316,7 @@
316
316
  --wds-color-green-100: #25a55a;
317
317
  --wds-color-green-50: #229954;
318
318
  --wds-color-green-0: #1d8649;
319
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
319
320
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
320
321
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
321
322
  --wds-color-fill-stage-section-secondary: #d9d2ff;
package/all.st.css CHANGED
@@ -943,6 +943,7 @@
943
943
  @property st-global(--wds-color-fill-transparent-tertiary-active);
944
944
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
945
945
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
946
+ @property st-global(--wds-color-fill-transparent-tint);
946
947
  @property st-global(--wds-color-fill-urgent-primary);
947
948
  @property st-global(--wds-color-fill-urgent-primary-active);
948
949
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -3722,6 +3723,7 @@
3722
3723
  --wds-color-fill-transparent-tertiary-active: rgba(0, 6, 36, .5);
3723
3724
  --wds-color-fill-transparent-tertiary-disabled: rgba(0, 6, 36, 0);
3724
3725
  --wds-color-fill-transparent-tertiary-hover: rgba(0, 6, 36, .5);
3726
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
3725
3727
  --wds-color-fill-urgent-primary: #fe620f;
3726
3728
  --wds-color-fill-urgent-primary-active: #df4d00;
3727
3729
  --wds-color-fill-urgent-primary-disabled: rgba(0, 6, 36, .3);
package/odeditor/all.css CHANGED
@@ -99,6 +99,7 @@
99
99
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
100
100
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
101
101
  --wds-color-text-stage-section: #6f56f9;
102
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
102
103
  --wds-color-fill-surface-stage: #F7F7F7;
103
104
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
104
105
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
@@ -946,6 +947,18 @@
946
947
  --wds-vertical-tabs-item-padding-horizontal-small: var(--wds-space-300);
947
948
  --wds-vertical-tabs-item-label-font-weight-active: var(--wds-font-weight-semi-bold);
948
949
  --wds-vertical-tabs-item-label-font-weight: var(--wds-font-weight-medium);
950
+ --wds-vertical-tabs-item-fill-standard-premium-disabled: var(--wds-color-white-transparent-0);
951
+ --wds-vertical-tabs-item-fill-standard-premium: var(--wds-color-white-transparent-0);
952
+ --wds-vertical-tabs-item-fill-standard-disabled: var(--wds-color-white-transparent-0);
953
+ --wds-vertical-tabs-item-fill-standard: var(--wds-color-white-transparent-0);
954
+ --wds-vertical-tabs-item-fill-neutral-premium-disabled: var(--wds-color-white-transparent-0);
955
+ --wds-vertical-tabs-item-fill-neutral-premium: var(--wds-color-white-transparent-0);
956
+ --wds-vertical-tabs-item-fill-neutral-disabled: var(--wds-color-white-transparent-0);
957
+ --wds-vertical-tabs-item-fill-neutral: var(--wds-color-white-transparent-0);
958
+ --wds-vertical-tabs-item-fill-light-premium-disabled: var(--wds-color-white-transparent-0);
959
+ --wds-vertical-tabs-item-fill-light-premium: var(--wds-color-white-transparent-0);
960
+ --wds-vertical-tabs-item-fill-light-disabled: var(--wds-color-white-transparent-0);
961
+ --wds-vertical-tabs-item-fill-light: var(--wds-color-white-transparent-0);
949
962
  --wds-vertical-tabs-section-title-padding-top-tiny: var(--wds-space-100);
950
963
  --wds-vertical-tabs-section-title-padding-top-small: var(--wds-space-400);
951
964
  --wds-vertical-tabs-section-title-padding-top-medium: var(--wds-space-600);
@@ -1364,7 +1377,7 @@
1364
1377
  --wds-section-helper-horizontal-padding-medium: var(--wds-space-400);
1365
1378
  --wds-section-helper-horizontal-margin: var(--wds-space-150);
1366
1379
  --wds-section-helper-fill-warning: var(--wds-color-yellow-600);
1367
- --wds-section-helper-fill-success: var(--wds-color-green-600);
1380
+ --wds-section-helper-fill-success: var(--wds-color-green-500);
1368
1381
  --wds-section-helper-fill-standard: var(--wds-color-blue-600);
1369
1382
  --wds-section-helper-fill-preview: var(--wds-color-black-700);
1370
1383
  --wds-section-helper-fill-danger: var(--wds-color-red-600);
@@ -1373,15 +1386,15 @@
1373
1386
  --wds-section-helper-close-button-offset: var(--wds-space-0);
1374
1387
  --wds-section-helper-close-button-inset-small: var(--wds-space-100);
1375
1388
  --wds-section-helper-close-button-inset-medium: var(--wds-space-100);
1376
- --wds-section-helper-close-button-clearance-small: var(--wds-space-800);
1377
- --wds-section-helper-close-button-clearance-medium: var(--wds-space-800);
1389
+ --wds-section-helper-close-button-clearance-small: var(--wds-space-400);
1390
+ --wds-section-helper-close-button-clearance-medium: var(--wds-space-400);
1378
1391
  --wds-section-helper-border-success: var(--wds-color-green-200);
1379
1392
  --wds-section-helper-border-standard: var(--wds-color-blue-300);
1380
1393
  --wds-section-helper-border-radius: var(--wds-border-radius-600);
1381
1394
  --wds-section-helper-border-preview: var(--wds-color-black-550);
1382
1395
  --wds-section-helper-border-experimental-dark: var(--wds-color-black-300);
1383
1396
  --wds-section-helper-action-padding-small: var(--wds-space-200);
1384
- --wds-section-helper-action-padding-medium: var(--wds-space-300);
1397
+ --wds-section-helper-action-padding-medium: var(--wds-space-200);
1385
1398
  --wds-section-header-padding-vertical-small: var(--wds-space-200);
1386
1399
  --wds-section-header-padding-vertical-medium: var(--wds-space-300);
1387
1400
  --wds-section-header-font-weight: var(--wds-font-weight-semi-bold);
@@ -2112,29 +2125,17 @@
2112
2125
  --wds-vertical-tabs-item-label-text: var(--wds-color-text-standard-secondary);
2113
2126
  --wds-vertical-tabs-item-label-disabled: var(--wds-color-text-disabled);
2114
2127
  --wds-vertical-tabs-item-fill-standard-premium-hover: var(--wds-color-fill-standard-tertiary-hover);
2115
- --wds-vertical-tabs-item-fill-standard-premium-disabled: var(--wds-color-fill-standard-tertiary-hover);
2116
2128
  --wds-vertical-tabs-item-fill-standard-premium-active: var(--wds-color-fill-standard-tertiary-active);
2117
- --wds-vertical-tabs-item-fill-standard-premium: var(--wds-color-fill-standard-tertiary);
2118
2129
  --wds-vertical-tabs-item-fill-standard-hover: var(--wds-color-fill-dark-tertiary-hover);
2119
- --wds-vertical-tabs-item-fill-standard-disabled: var(--wds-color-fill-dark-tertiary-disabled);
2120
2130
  --wds-vertical-tabs-item-fill-standard-active: var(--wds-color-fill-dark-tertiary-active);
2121
- --wds-vertical-tabs-item-fill-standard: var(--wds-color-fill-standard-tertiary);
2122
2131
  --wds-vertical-tabs-item-fill-neutral-premium-hover: var(--wds-color-fill-premium-light-primary-hover);
2123
- --wds-vertical-tabs-item-fill-neutral-premium-disabled: var(--wds-color-fill-surface-neutral);
2124
2132
  --wds-vertical-tabs-item-fill-neutral-premium-active: var(--wds-color-fill-premium-tertiary-active);
2125
- --wds-vertical-tabs-item-fill-neutral-premium: var(--wds-color-fill-surface-neutral);
2126
2133
  --wds-vertical-tabs-item-fill-neutral-hover: var(--wds-color-fill-dark-secondary-hover);
2127
- --wds-vertical-tabs-item-fill-neutral-disabled: var(--wds-color-fill-surface-neutral);
2128
2134
  --wds-vertical-tabs-item-fill-neutral-active: var(--wds-color-fill-dark-tertiary-active);
2129
- --wds-vertical-tabs-item-fill-neutral: var(--wds-color-fill-surface-neutral);
2130
2135
  --wds-vertical-tabs-item-fill-light-premium-hover: var(--wds-color-fill-premium-tertiary-hover);
2131
- --wds-vertical-tabs-item-fill-light-premium-disabled: var(--wds-color-fill-premium-tertiary-disabled);
2132
2136
  --wds-vertical-tabs-item-fill-light-premium-active: var(--wds-color-fill-premium-tertiary-active);
2133
- --wds-vertical-tabs-item-fill-light-premium: var(--wds-color-fill-premium-tertiary);
2134
2137
  --wds-vertical-tabs-item-fill-light-hover: var(--wds-color-fill-dark-tertiary-hover);
2135
- --wds-vertical-tabs-item-fill-light-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2136
2138
  --wds-vertical-tabs-item-fill-light-active: var(--wds-color-fill-dark-tertiary-active);
2137
- --wds-vertical-tabs-item-fill-light: var(--wds-color-fill-standard-tertiary);
2138
2139
  --wds-vertical-tabs-item-active-title-text-disabled: var(--wds-color-text-disabled);
2139
2140
  --wds-vertical-tabs-section-text-font-size-small: var(--wds-font-size-body-tiny);
2140
2141
  --wds-vertical-tabs-icon-fill-hover: var(--wds-color-text-standard-secondary);
@@ -2301,7 +2302,7 @@
2301
2302
  --wds-segmented-toggle-fill-hover: var(--wds-color-fill-light-secondary);
2302
2303
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-tertiary);
2303
2304
  --wds-segmented-toggle-border-hover: var(--wds-color-border-standard-secondary-hover);
2304
- --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2305
+ --wds-section-helper-title-font-size: var(--wds-font-size-body-small);
2305
2306
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
2306
2307
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2307
2308
  --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
package/odeditor/all.scss CHANGED
@@ -329,6 +329,7 @@
329
329
  --wds-color-green-100: #4b916d;
330
330
  --wds-color-green-50: #3f7b5c;
331
331
  --wds-color-green-0: #0d4f3d;
332
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
332
333
  --wds-color-fill-surface-stage: #F7F7F7;
333
334
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
334
335
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
@@ -541,6 +542,18 @@
541
542
  --wds-vertical-tabs-item-padding-horizontal-small: var(--wds-space-300);
542
543
  --wds-vertical-tabs-item-label-font-weight-active: var(--wds-font-weight-semi-bold);
543
544
  --wds-vertical-tabs-item-label-font-weight: var(--wds-font-weight-medium);
545
+ --wds-vertical-tabs-item-fill-standard-premium-disabled: var(--wds-color-white-transparent-0);
546
+ --wds-vertical-tabs-item-fill-standard-premium: var(--wds-color-white-transparent-0);
547
+ --wds-vertical-tabs-item-fill-standard-disabled: var(--wds-color-white-transparent-0);
548
+ --wds-vertical-tabs-item-fill-standard: var(--wds-color-white-transparent-0);
549
+ --wds-vertical-tabs-item-fill-neutral-premium-disabled: var(--wds-color-white-transparent-0);
550
+ --wds-vertical-tabs-item-fill-neutral-premium: var(--wds-color-white-transparent-0);
551
+ --wds-vertical-tabs-item-fill-neutral-disabled: var(--wds-color-white-transparent-0);
552
+ --wds-vertical-tabs-item-fill-neutral: var(--wds-color-white-transparent-0);
553
+ --wds-vertical-tabs-item-fill-light-premium-disabled: var(--wds-color-white-transparent-0);
554
+ --wds-vertical-tabs-item-fill-light-premium: var(--wds-color-white-transparent-0);
555
+ --wds-vertical-tabs-item-fill-light-disabled: var(--wds-color-white-transparent-0);
556
+ --wds-vertical-tabs-item-fill-light: var(--wds-color-white-transparent-0);
544
557
  --wds-vertical-tabs-icon-padding-vertical-small: var(--wds-space-200);
545
558
  --wds-vertical-tabs-icon-padding-vertical-medium: var(--wds-space-200);
546
559
  --wds-vertical-tabs-icon-padding-horizontal-small: var(--wds-space-200);
@@ -1032,7 +1045,7 @@
1032
1045
  --wds-section-helper-horizontal-padding-medium: var(--wds-space-400);
1033
1046
  --wds-section-helper-horizontal-margin: var(--wds-space-150);
1034
1047
  --wds-section-helper-fill-warning: var(--wds-color-yellow-600);
1035
- --wds-section-helper-fill-success: var(--wds-color-green-600);
1048
+ --wds-section-helper-fill-success: var(--wds-color-green-500);
1036
1049
  --wds-section-helper-fill-standard: var(--wds-color-blue-600);
1037
1050
  --wds-section-helper-fill-preview: var(--wds-color-black-700);
1038
1051
  --wds-section-helper-fill-danger: var(--wds-color-red-600);
@@ -1041,15 +1054,15 @@
1041
1054
  --wds-section-helper-close-button-offset: var(--wds-space-0);
1042
1055
  --wds-section-helper-close-button-inset-small: var(--wds-space-100);
1043
1056
  --wds-section-helper-close-button-inset-medium: var(--wds-space-100);
1044
- --wds-section-helper-close-button-clearance-small: var(--wds-space-800);
1045
- --wds-section-helper-close-button-clearance-medium: var(--wds-space-800);
1057
+ --wds-section-helper-close-button-clearance-small: var(--wds-space-400);
1058
+ --wds-section-helper-close-button-clearance-medium: var(--wds-space-400);
1046
1059
  --wds-section-helper-border-success: var(--wds-color-green-200);
1047
1060
  --wds-section-helper-border-standard: var(--wds-color-blue-300);
1048
1061
  --wds-section-helper-border-radius: var(--wds-border-radius-600);
1049
1062
  --wds-section-helper-border-preview: var(--wds-color-black-550);
1050
1063
  --wds-section-helper-border-experimental-dark: var(--wds-color-black-300);
1051
1064
  --wds-section-helper-action-padding-small: var(--wds-space-200);
1052
- --wds-section-helper-action-padding-medium: var(--wds-space-300);
1065
+ --wds-section-helper-action-padding-medium: var(--wds-space-200);
1053
1066
  --wds-section-header-padding-vertical-small: var(--wds-space-200);
1054
1067
  --wds-section-header-padding-vertical-medium: var(--wds-space-300);
1055
1068
  --wds-section-header-font-weight: var(--wds-font-weight-semi-bold);
@@ -2076,29 +2089,17 @@
2076
2089
  --wds-vertical-tabs-item-label-text: var(--wds-color-text-standard-secondary);
2077
2090
  --wds-vertical-tabs-item-label-disabled: var(--wds-color-text-disabled);
2078
2091
  --wds-vertical-tabs-item-fill-standard-premium-hover: var(--wds-color-fill-standard-tertiary-hover);
2079
- --wds-vertical-tabs-item-fill-standard-premium-disabled: var(--wds-color-fill-standard-tertiary-hover);
2080
2092
  --wds-vertical-tabs-item-fill-standard-premium-active: var(--wds-color-fill-standard-tertiary-active);
2081
- --wds-vertical-tabs-item-fill-standard-premium: var(--wds-color-fill-standard-tertiary);
2082
2093
  --wds-vertical-tabs-item-fill-standard-hover: var(--wds-color-fill-dark-tertiary-hover);
2083
- --wds-vertical-tabs-item-fill-standard-disabled: var(--wds-color-fill-dark-tertiary-disabled);
2084
2094
  --wds-vertical-tabs-item-fill-standard-active: var(--wds-color-fill-dark-tertiary-active);
2085
- --wds-vertical-tabs-item-fill-standard: var(--wds-color-fill-standard-tertiary);
2086
2095
  --wds-vertical-tabs-item-fill-neutral-premium-hover: var(--wds-color-fill-premium-light-primary-hover);
2087
- --wds-vertical-tabs-item-fill-neutral-premium-disabled: var(--wds-color-fill-surface-neutral);
2088
2096
  --wds-vertical-tabs-item-fill-neutral-premium-active: var(--wds-color-fill-premium-tertiary-active);
2089
- --wds-vertical-tabs-item-fill-neutral-premium: var(--wds-color-fill-surface-neutral);
2090
2097
  --wds-vertical-tabs-item-fill-neutral-hover: var(--wds-color-fill-dark-secondary-hover);
2091
- --wds-vertical-tabs-item-fill-neutral-disabled: var(--wds-color-fill-surface-neutral);
2092
2098
  --wds-vertical-tabs-item-fill-neutral-active: var(--wds-color-fill-dark-tertiary-active);
2093
- --wds-vertical-tabs-item-fill-neutral: var(--wds-color-fill-surface-neutral);
2094
2099
  --wds-vertical-tabs-item-fill-light-premium-hover: var(--wds-color-fill-premium-tertiary-hover);
2095
- --wds-vertical-tabs-item-fill-light-premium-disabled: var(--wds-color-fill-premium-tertiary-disabled);
2096
2100
  --wds-vertical-tabs-item-fill-light-premium-active: var(--wds-color-fill-premium-tertiary-active);
2097
- --wds-vertical-tabs-item-fill-light-premium: var(--wds-color-fill-premium-tertiary);
2098
2101
  --wds-vertical-tabs-item-fill-light-hover: var(--wds-color-fill-dark-tertiary-hover);
2099
- --wds-vertical-tabs-item-fill-light-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2100
2102
  --wds-vertical-tabs-item-fill-light-active: var(--wds-color-fill-dark-tertiary-active);
2101
- --wds-vertical-tabs-item-fill-light: var(--wds-color-fill-standard-tertiary);
2102
2103
  --wds-vertical-tabs-item-active-title-text-disabled: var(--wds-color-text-disabled);
2103
2104
  --wds-vertical-tabs-icon-fill-hover: var(--wds-color-text-standard-secondary);
2104
2105
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
@@ -2270,7 +2271,7 @@
2270
2271
  --wds-segmented-toggle-fill-hover: var(--wds-color-fill-light-secondary);
2271
2272
  --wds-segmented-toggle-fill-default: var(--wds-color-fill-standard-tertiary);
2272
2273
  --wds-segmented-toggle-border-hover: var(--wds-color-border-standard-secondary-hover);
2273
- --wds-section-helper-title-font-size: var(--wds-font-size-body-tiny);
2274
+ --wds-section-helper-title-font-size: var(--wds-font-size-body-small);
2274
2275
  --wds-section-helper-text-font-size: var(--wds-font-size-body-tiny);
2275
2276
  --wds-section-helper-fill-premium: var(--wds-color-fill-surface-premium);
2276
2277
  --wds-section-helper-fill-experimental-dark: var(--wds-color-fill-dark-primary);
package/odeditor/all.st.css CHANGED
@@ -936,6 +936,7 @@
936
936
  @property st-global(--wds-color-fill-transparent-tertiary-active);
937
937
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
938
938
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
939
+ @property st-global(--wds-color-fill-transparent-tint);
939
940
  @property st-global(--wds-color-fill-urgent-primary);
940
941
  @property st-global(--wds-color-fill-urgent-primary-active);
941
942
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -3705,6 +3706,7 @@
3705
3706
  --wds-color-fill-transparent-tertiary-active: rgba(19, 23, 32, .5);
3706
3707
  --wds-color-fill-transparent-tertiary-disabled: rgba(19, 23, 32, 0);
3707
3708
  --wds-color-fill-transparent-tertiary-hover: rgba(19, 23, 32, .5);
3709
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
3708
3710
  --wds-color-fill-urgent-primary: #ff8044;
3709
3711
  --wds-color-fill-urgent-primary-active: #ae3e09;
3710
3712
  --wds-color-fill-urgent-primary-disabled: rgba(19, 23, 32, .3);
@@ -4638,15 +4640,15 @@
4638
4640
  --wds-section-header-label-font-size-small: 12px;
4639
4641
  --wds-section-header-padding-vertical-medium: 12px;
4640
4642
  --wds-section-header-padding-vertical-small: 8px;
4641
- --wds-section-helper-action-padding-medium: 12px;
4643
+ --wds-section-helper-action-padding-medium: 8px;
4642
4644
  --wds-section-helper-action-padding-small: 8px;
4643
4645
  --wds-section-helper-border-experimental-dark: #525150;
4644
4646
  --wds-section-helper-border-preview: #dedede;
4645
4647
  --wds-section-helper-border-radius: 12px;
4646
4648
  --wds-section-helper-border-standard: #acbeff;
4647
4649
  --wds-section-helper-border-success: #97c693;
4648
- --wds-section-helper-close-button-clearance-medium: 32px;
4649
- --wds-section-helper-close-button-clearance-small: 32px;
4650
+ --wds-section-helper-close-button-clearance-medium: 16px;
4651
+ --wds-section-helper-close-button-clearance-small: 16px;
4650
4652
  --wds-section-helper-close-button-inset-medium: 4px;
4651
4653
  --wds-section-helper-close-button-inset-small: 4px;
4652
4654
  --wds-section-helper-close-button-offset: 0px;
@@ -4657,7 +4659,7 @@
4657
4659
  --wds-section-helper-fill-premium: #f5f7ff;
4658
4660
  --wds-section-helper-fill-preview: #f0efef;
4659
4661
  --wds-section-helper-fill-standard: #f5f7ff;
4660
- --wds-section-helper-fill-success: #f1f5ed;
4662
+ --wds-section-helper-fill-success: #effae5;
4661
4663
  --wds-section-helper-fill-warning: #fef6ed;
4662
4664
  --wds-section-helper-horizontal-margin: 6px;
4663
4665
  --wds-section-helper-horizontal-padding-medium: 16px;
@@ -4666,7 +4668,7 @@
4666
4668
  --wds-section-helper-prefix-offset-medium: 16px;
4667
4669
  --wds-section-helper-text-font-line-height: 16px;
4668
4670
  --wds-section-helper-text-font-size: 12px;
4669
- --wds-section-helper-title-font-size: 12px;
4671
+ --wds-section-helper-title-font-size: 14px;
4670
4672
  --wds-section-helper-title-font-weight: 600;
4671
4673
  --wds-section-helper-vertical-margin: 6px;
4672
4674
  --wds-section-helper-vertical-padding-medium: 16px;
@@ -5486,29 +5488,29 @@
5486
5488
  --wds-vertical-tabs-icon-padding-vertical-medium: 8px;
5487
5489
  --wds-vertical-tabs-icon-padding-vertical-small: 8px;
5488
5490
  --wds-vertical-tabs-item-active-title-text-disabled: #a8a6a5;
5489
- --wds-vertical-tabs-item-fill-light: #ffffff;
5491
+ --wds-vertical-tabs-item-fill-light: rgba(255, 255, 255, 0);
5490
5492
  --wds-vertical-tabs-item-fill-light-active: #f0efef;
5491
- --wds-vertical-tabs-item-fill-light-disabled: #ffffff;
5493
+ --wds-vertical-tabs-item-fill-light-disabled: rgba(255, 255, 255, 0);
5492
5494
  --wds-vertical-tabs-item-fill-light-hover: #f8f6f6;
5493
- --wds-vertical-tabs-item-fill-light-premium: #ffffff;
5495
+ --wds-vertical-tabs-item-fill-light-premium: rgba(255, 255, 255, 0);
5494
5496
  --wds-vertical-tabs-item-fill-light-premium-active: #d5dfff;
5495
- --wds-vertical-tabs-item-fill-light-premium-disabled: #ffffff;
5497
+ --wds-vertical-tabs-item-fill-light-premium-disabled: rgba(255, 255, 255, 0);
5496
5498
  --wds-vertical-tabs-item-fill-light-premium-hover: #eaefff;
5497
- --wds-vertical-tabs-item-fill-neutral: #f8f6f6;
5499
+ --wds-vertical-tabs-item-fill-neutral: rgba(255, 255, 255, 0);
5498
5500
  --wds-vertical-tabs-item-fill-neutral-active: #f0efef;
5499
- --wds-vertical-tabs-item-fill-neutral-disabled: #f8f6f6;
5501
+ --wds-vertical-tabs-item-fill-neutral-disabled: rgba(255, 255, 255, 0);
5500
5502
  --wds-vertical-tabs-item-fill-neutral-hover: #e8e7e7;
5501
- --wds-vertical-tabs-item-fill-neutral-premium: #f8f6f6;
5503
+ --wds-vertical-tabs-item-fill-neutral-premium: rgba(255, 255, 255, 0);
5502
5504
  --wds-vertical-tabs-item-fill-neutral-premium-active: #d5dfff;
5503
- --wds-vertical-tabs-item-fill-neutral-premium-disabled: #f8f6f6;
5505
+ --wds-vertical-tabs-item-fill-neutral-premium-disabled: rgba(255, 255, 255, 0);
5504
5506
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #eaefff;
5505
- --wds-vertical-tabs-item-fill-standard: #ffffff;
5507
+ --wds-vertical-tabs-item-fill-standard: rgba(255, 255, 255, 0);
5506
5508
  --wds-vertical-tabs-item-fill-standard-active: #f0efef;
5507
- --wds-vertical-tabs-item-fill-standard-disabled: #ffffff;
5509
+ --wds-vertical-tabs-item-fill-standard-disabled: rgba(255, 255, 255, 0);
5508
5510
  --wds-vertical-tabs-item-fill-standard-hover: #f8f6f6;
5509
- --wds-vertical-tabs-item-fill-standard-premium: #ffffff;
5511
+ --wds-vertical-tabs-item-fill-standard-premium: rgba(255, 255, 255, 0);
5510
5512
  --wds-vertical-tabs-item-fill-standard-premium-active: #d5dfff;
5511
- --wds-vertical-tabs-item-fill-standard-premium-disabled: #eaefff;
5513
+ --wds-vertical-tabs-item-fill-standard-premium-disabled: rgba(255, 255, 255, 0);
5512
5514
  --wds-vertical-tabs-item-fill-standard-premium-hover: #eaefff;
5513
5515
  --wds-vertical-tabs-item-label-disabled: #a8a6a5;
5514
5516
  --wds-vertical-tabs-item-label-font-weight: 500;
package/odeditor/component.st.css CHANGED
@@ -3291,15 +3291,15 @@
3291
3291
  --wds-section-header-label-font-size-small: 12px;
3292
3292
  --wds-section-header-padding-vertical-medium: 12px;
3293
3293
  --wds-section-header-padding-vertical-small: 8px;
3294
- --wds-section-helper-action-padding-medium: 12px;
3294
+ --wds-section-helper-action-padding-medium: 8px;
3295
3295
  --wds-section-helper-action-padding-small: 8px;
3296
3296
  --wds-section-helper-border-experimental-dark: #525150;
3297
3297
  --wds-section-helper-border-preview: #dedede;
3298
3298
  --wds-section-helper-border-radius: 12px;
3299
3299
  --wds-section-helper-border-standard: #acbeff;
3300
3300
  --wds-section-helper-border-success: #97c693;
3301
- --wds-section-helper-close-button-clearance-medium: 32px;
3302
- --wds-section-helper-close-button-clearance-small: 32px;
3301
+ --wds-section-helper-close-button-clearance-medium: 16px;
3302
+ --wds-section-helper-close-button-clearance-small: 16px;
3303
3303
  --wds-section-helper-close-button-inset-medium: 4px;
3304
3304
  --wds-section-helper-close-button-inset-small: 4px;
3305
3305
  --wds-section-helper-close-button-offset: 0px;
@@ -3310,7 +3310,7 @@
3310
3310
  --wds-section-helper-fill-premium: #f5f7ff;
3311
3311
  --wds-section-helper-fill-preview: #f0efef;
3312
3312
  --wds-section-helper-fill-standard: #f5f7ff;
3313
- --wds-section-helper-fill-success: #f1f5ed;
3313
+ --wds-section-helper-fill-success: #effae5;
3314
3314
  --wds-section-helper-fill-warning: #fef6ed;
3315
3315
  --wds-section-helper-horizontal-margin: 6px;
3316
3316
  --wds-section-helper-horizontal-padding-medium: 16px;
@@ -3319,7 +3319,7 @@
3319
3319
  --wds-section-helper-prefix-offset-medium: 16px;
3320
3320
  --wds-section-helper-text-font-line-height: 16px;
3321
3321
  --wds-section-helper-text-font-size: 12px;
3322
- --wds-section-helper-title-font-size: 12px;
3322
+ --wds-section-helper-title-font-size: 14px;
3323
3323
  --wds-section-helper-title-font-weight: 600;
3324
3324
  --wds-section-helper-vertical-margin: 6px;
3325
3325
  --wds-section-helper-vertical-padding-medium: 16px;
@@ -3984,29 +3984,29 @@
3984
3984
  --wds-vertical-tabs-icon-padding-vertical-medium: 8px;
3985
3985
  --wds-vertical-tabs-icon-padding-vertical-small: 8px;
3986
3986
  --wds-vertical-tabs-item-active-title-text-disabled: #a8a6a5;
3987
- --wds-vertical-tabs-item-fill-light: #ffffff;
3987
+ --wds-vertical-tabs-item-fill-light: rgba(255, 255, 255, 0);
3988
3988
  --wds-vertical-tabs-item-fill-light-active: #f0efef;
3989
- --wds-vertical-tabs-item-fill-light-disabled: #ffffff;
3989
+ --wds-vertical-tabs-item-fill-light-disabled: rgba(255, 255, 255, 0);
3990
3990
  --wds-vertical-tabs-item-fill-light-hover: #f8f6f6;
3991
- --wds-vertical-tabs-item-fill-light-premium: #ffffff;
3991
+ --wds-vertical-tabs-item-fill-light-premium: rgba(255, 255, 255, 0);
3992
3992
  --wds-vertical-tabs-item-fill-light-premium-active: #d5dfff;
3993
- --wds-vertical-tabs-item-fill-light-premium-disabled: #ffffff;
3993
+ --wds-vertical-tabs-item-fill-light-premium-disabled: rgba(255, 255, 255, 0);
3994
3994
  --wds-vertical-tabs-item-fill-light-premium-hover: #eaefff;
3995
- --wds-vertical-tabs-item-fill-neutral: #f8f6f6;
3995
+ --wds-vertical-tabs-item-fill-neutral: rgba(255, 255, 255, 0);
3996
3996
  --wds-vertical-tabs-item-fill-neutral-active: #f0efef;
3997
- --wds-vertical-tabs-item-fill-neutral-disabled: #f8f6f6;
3997
+ --wds-vertical-tabs-item-fill-neutral-disabled: rgba(255, 255, 255, 0);
3998
3998
  --wds-vertical-tabs-item-fill-neutral-hover: #e8e7e7;
3999
- --wds-vertical-tabs-item-fill-neutral-premium: #f8f6f6;
3999
+ --wds-vertical-tabs-item-fill-neutral-premium: rgba(255, 255, 255, 0);
4000
4000
  --wds-vertical-tabs-item-fill-neutral-premium-active: #d5dfff;
4001
- --wds-vertical-tabs-item-fill-neutral-premium-disabled: #f8f6f6;
4001
+ --wds-vertical-tabs-item-fill-neutral-premium-disabled: rgba(255, 255, 255, 0);
4002
4002
  --wds-vertical-tabs-item-fill-neutral-premium-hover: #eaefff;
4003
- --wds-vertical-tabs-item-fill-standard: #ffffff;
4003
+ --wds-vertical-tabs-item-fill-standard: rgba(255, 255, 255, 0);
4004
4004
  --wds-vertical-tabs-item-fill-standard-active: #f0efef;
4005
- --wds-vertical-tabs-item-fill-standard-disabled: #ffffff;
4005
+ --wds-vertical-tabs-item-fill-standard-disabled: rgba(255, 255, 255, 0);
4006
4006
  --wds-vertical-tabs-item-fill-standard-hover: #f8f6f6;
4007
- --wds-vertical-tabs-item-fill-standard-premium: #ffffff;
4007
+ --wds-vertical-tabs-item-fill-standard-premium: rgba(255, 255, 255, 0);
4008
4008
  --wds-vertical-tabs-item-fill-standard-premium-active: #d5dfff;
4009
- --wds-vertical-tabs-item-fill-standard-premium-disabled: #eaefff;
4009
+ --wds-vertical-tabs-item-fill-standard-premium-disabled: rgba(255, 255, 255, 0);
4010
4010
  --wds-vertical-tabs-item-fill-standard-premium-hover: #eaefff;
4011
4011
  --wds-vertical-tabs-item-label-disabled: #a8a6a5;
4012
4012
  --wds-vertical-tabs-item-label-font-weight: 500;
package/odeditor/semantic.st.css CHANGED
@@ -332,6 +332,7 @@
332
332
  @property st-global(--wds-color-fill-transparent-tertiary-active);
333
333
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
334
334
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
335
+ @property st-global(--wds-color-fill-transparent-tint);
335
336
  @property st-global(--wds-color-fill-urgent-primary);
336
337
  @property st-global(--wds-color-fill-urgent-primary-active);
337
338
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -844,6 +845,7 @@
844
845
  --wds-color-fill-transparent-tertiary-active: rgba(19, 23, 32, .5);
845
846
  --wds-color-fill-transparent-tertiary-disabled: rgba(19, 23, 32, 0);
846
847
  --wds-color-fill-transparent-tertiary-hover: rgba(19, 23, 32, .5);
848
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
847
849
  --wds-color-fill-urgent-primary: #ff8044;
848
850
  --wds-color-fill-urgent-primary-active: #ae3e09;
849
851
  --wds-color-fill-urgent-primary-disabled: rgba(19, 23, 32, .3);
package/odeditor-dark/all.css CHANGED
@@ -101,6 +101,7 @@
101
101
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
102
102
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
103
103
  --wds-color-text-stage-section: #6f56f9;
104
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
104
105
  --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.98);
105
106
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
106
107
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
@@ -305,7 +306,6 @@
305
306
  --wds-variable-input-padding-vertical-tiny: 2px;
306
307
  --wds-variable-input-padding-vertical-small: 5px;
307
308
  --wds-trend-indicator-gap: 4px;
308
- --wds-top-banner-shadow: 0 0 0 transparent;
309
309
  --wds-tooltip-background-fill: #000000;
310
310
  --wds-toggle-switch-width-small: 24px;
311
311
  --wds-toggle-switch-width-medium: 26px;
@@ -994,14 +994,14 @@
994
994
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-300);
995
995
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-300);
996
996
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
997
- --wds-top-banner-padding-vertical: var(--wds-space-150);
998
- --wds-top-banner-padding-horizontal-start: var(--wds-space-200);
999
- --wds-top-banner-padding-horizontal-end: var(--wds-space-200);
997
+ --wds-top-banner-padding-vertical: var(--wds-space-0);
998
+ --wds-top-banner-padding-horizontal-start: var(--wds-space-750);
999
+ --wds-top-banner-padding-horizontal-end: var(--wds-space-300);
1000
1000
  --wds-top-banner-fill: var(--wds-color-purple-400);
1001
- --wds-top-banner-dismiss-gap: var(--wds-space-200);
1002
- --wds-top-banner-content-gap: var(--wds-space-200);
1003
- --wds-top-banner-border-radius: var(--wds-border-radius-0);
1004
- --wds-top-banner-border-color: var(--wds-color-white-transparent-0);
1001
+ --wds-top-banner-dismiss-gap: var(--wds-space-500);
1002
+ --wds-top-banner-content-gap: var(--wds-space-300);
1003
+ --wds-top-banner-border-radius: var(--wds-border-radius-400);
1004
+ --wds-top-banner-border-color: var(--wds-color-white);
1005
1005
  --wds-tooltip-shadow: var(--wds-color-black-100-transparent-0);
1006
1006
  --wds-tooltip-padding-vertical-small: var(--wds-space-150);
1007
1007
  --wds-tooltip-padding-vertical-medium: var(--wds-space-150);
@@ -2123,6 +2123,7 @@
2123
2123
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
2124
2124
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
2125
2125
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-standard-secondary);
2126
+ --wds-top-banner-shadow: var(--wds-shadow-300);
2126
2127
  --wds-top-banner-content-color: var(--wds-color-text-standard-primary-light);
2127
2128
  --wds-tooltip-text-fill: var(--wds-color-text-standard-primary);
2128
2129
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-tiny);
package/odeditor-dark/all.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  --wds-variable-input-padding-vertical-tiny: 2px;
6
6
  --wds-variable-input-padding-vertical-small: 5px;
7
7
  --wds-trend-indicator-gap: 4px;
8
- --wds-top-banner-shadow: 0 0 0 transparent;
9
8
  --wds-tooltip-background-fill: #000000;
10
9
  --wds-toggle-switch-width-small: 24px;
11
10
  --wds-toggle-switch-width-medium: 26px;
@@ -346,6 +345,7 @@
346
345
  --wds-color-green-100: #53DA98;
347
346
  --wds-color-green-50: #A3E5C5;
348
347
  --wds-color-green-0: #D6ECE1;
348
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
349
349
  --wds-color-fill-surface-overlay-blur: rgba(33, 33, 34, 0.98);
350
350
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
351
351
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
@@ -578,14 +578,14 @@
578
578
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-300);
579
579
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-300);
580
580
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
581
- --wds-top-banner-padding-vertical: var(--wds-space-150);
582
- --wds-top-banner-padding-horizontal-start: var(--wds-space-200);
583
- --wds-top-banner-padding-horizontal-end: var(--wds-space-200);
581
+ --wds-top-banner-padding-vertical: var(--wds-space-0);
582
+ --wds-top-banner-padding-horizontal-start: var(--wds-space-750);
583
+ --wds-top-banner-padding-horizontal-end: var(--wds-space-300);
584
584
  --wds-top-banner-fill: var(--wds-color-purple-400);
585
- --wds-top-banner-dismiss-gap: var(--wds-space-200);
586
- --wds-top-banner-content-gap: var(--wds-space-200);
587
- --wds-top-banner-border-radius: var(--wds-border-radius-0);
588
- --wds-top-banner-border-color: var(--wds-color-white-transparent-0);
585
+ --wds-top-banner-dismiss-gap: var(--wds-space-500);
586
+ --wds-top-banner-content-gap: var(--wds-space-300);
587
+ --wds-top-banner-border-radius: var(--wds-border-radius-400);
588
+ --wds-top-banner-border-color: var(--wds-color-white);
589
589
  --wds-tooltip-shadow: var(--wds-color-black-100-transparent-0);
590
590
  --wds-tooltip-padding-vertical-small: var(--wds-space-150);
591
591
  --wds-tooltip-padding-vertical-medium: var(--wds-space-150);
@@ -2089,6 +2089,7 @@
2089
2089
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
2090
2090
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
2091
2091
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-standard-secondary);
2092
+ --wds-top-banner-shadow: var(--wds-shadow-300);
2092
2093
  --wds-top-banner-content-color: var(--wds-color-text-standard-primary-light);
2093
2094
  --wds-tooltip-text-fill: var(--wds-color-text-standard-primary);
2094
2095
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-tiny);
package/odeditor-dark/all.st.css CHANGED
@@ -940,6 +940,7 @@
940
940
  @property st-global(--wds-color-fill-transparent-tertiary-active);
941
941
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
942
942
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
943
+ @property st-global(--wds-color-fill-transparent-tint);
943
944
  @property st-global(--wds-color-fill-urgent-primary);
944
945
  @property st-global(--wds-color-fill-urgent-primary-active);
945
946
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -3709,6 +3710,7 @@
3709
3710
  --wds-color-fill-transparent-tertiary-active: rgba(255, 255, 255, .5);
3710
3711
  --wds-color-fill-transparent-tertiary-disabled: rgba(255, 255, 255, 0);
3711
3712
  --wds-color-fill-transparent-tertiary-hover: rgba(255, 255, 255, .5);
3713
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
3712
3714
  --wds-color-fill-urgent-primary: #FF8044;
3713
3715
  --wds-color-fill-urgent-primary-active: #FBE3D9;
3714
3716
  --wds-color-fill-urgent-primary-disabled: rgba(255, 255, 255, .3);
@@ -5455,16 +5457,16 @@
5455
5457
  --wds-tooltip-padding-vertical-small: 6px;
5456
5458
  --wds-tooltip-shadow: rgba(255, 255, 255, 0);
5457
5459
  --wds-tooltip-text-fill: #FFFFFF;
5458
- --wds-top-banner-border-color: rgba(0, 0, 0, 0);
5459
- --wds-top-banner-border-radius: 0px;
5460
+ --wds-top-banner-border-color: #212122;
5461
+ --wds-top-banner-border-radius: 8px;
5460
5462
  --wds-top-banner-content-color: #212122;
5461
- --wds-top-banner-content-gap: 8px;
5462
- --wds-top-banner-dismiss-gap: 8px;
5463
+ --wds-top-banner-content-gap: 12px;
5464
+ --wds-top-banner-dismiss-gap: 20px;
5463
5465
  --wds-top-banner-fill: #d7b7fb;
5464
- --wds-top-banner-padding-horizontal-end: 8px;
5465
- --wds-top-banner-padding-horizontal-start: 8px;
5466
- --wds-top-banner-padding-vertical: 6px;
5467
- --wds-top-banner-shadow: 0 0 0 transparent;
5466
+ --wds-top-banner-padding-horizontal-end: 12px;
5467
+ --wds-top-banner-padding-horizontal-start: 30px;
5468
+ --wds-top-banner-padding-vertical: 0px;
5469
+ --wds-top-banner-shadow: 0 12px 30px 0 rgba(0, 0, 0, .3), 0 0px 0px 0 rgba(0, 0, 0, .3);
5468
5470
  --wds-trend-indicator-gap: 4px;
5469
5471
  --wds-variable-input-padding-vertical-small: 5px;
5470
5472
  --wds-variable-input-padding-vertical-tiny: 2px;
package/odeditor-dark/component.st.css CHANGED
@@ -3951,16 +3951,16 @@
3951
3951
  --wds-tooltip-padding-vertical-small: 6px;
3952
3952
  --wds-tooltip-shadow: rgba(255, 255, 255, 0);
3953
3953
  --wds-tooltip-text-fill: #FFFFFF;
3954
- --wds-top-banner-border-color: rgba(0, 0, 0, 0);
3955
- --wds-top-banner-border-radius: 0px;
3954
+ --wds-top-banner-border-color: #212122;
3955
+ --wds-top-banner-border-radius: 8px;
3956
3956
  --wds-top-banner-content-color: #212122;
3957
- --wds-top-banner-content-gap: 8px;
3958
- --wds-top-banner-dismiss-gap: 8px;
3957
+ --wds-top-banner-content-gap: 12px;
3958
+ --wds-top-banner-dismiss-gap: 20px;
3959
3959
  --wds-top-banner-fill: #d7b7fb;
3960
- --wds-top-banner-padding-horizontal-end: 8px;
3961
- --wds-top-banner-padding-horizontal-start: 8px;
3962
- --wds-top-banner-padding-vertical: 6px;
3963
- --wds-top-banner-shadow: 0 0 0 transparent;
3960
+ --wds-top-banner-padding-horizontal-end: 12px;
3961
+ --wds-top-banner-padding-horizontal-start: 30px;
3962
+ --wds-top-banner-padding-vertical: 0px;
3963
+ --wds-top-banner-shadow: 0 12px 30px 0 rgba(0, 0, 0, .3), 0 0px 0px 0 rgba(0, 0, 0, .3);
3964
3964
  --wds-trend-indicator-gap: 4px;
3965
3965
  --wds-variable-input-padding-vertical-small: 5px;
3966
3966
  --wds-variable-input-padding-vertical-tiny: 2px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -332,6 +332,7 @@
332
332
  @property st-global(--wds-color-fill-transparent-tertiary-active);
333
333
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
334
334
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
335
+ @property st-global(--wds-color-fill-transparent-tint);
335
336
  @property st-global(--wds-color-fill-urgent-primary);
336
337
  @property st-global(--wds-color-fill-urgent-primary-active);
337
338
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -844,6 +845,7 @@
844
845
  --wds-color-fill-transparent-tertiary-active: rgba(255, 255, 255, .5);
845
846
  --wds-color-fill-transparent-tertiary-disabled: rgba(255, 255, 255, 0);
846
847
  --wds-color-fill-transparent-tertiary-hover: rgba(255, 255, 255, .5);
848
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
847
849
  --wds-color-fill-urgent-primary: #FF8044;
848
850
  --wds-color-fill-urgent-primary-active: #FBE3D9;
849
851
  --wds-color-fill-urgent-primary-disabled: rgba(255, 255, 255, .3);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.235.1",
3
+ "version": "1.236.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "3c137a647de18e7ff2087c8c89632ed7a3688cb8ca0cc3e73e27ab56"
39
+ "falconPackageHash": "5f978773ec8d2fa5f75be373ed191c1e4cf05991c3c88445acf2a16b"
40
40
  }
package/semantic.st.css CHANGED
@@ -332,6 +332,7 @@
332
332
  @property st-global(--wds-color-fill-transparent-tertiary-active);
333
333
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
334
334
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
335
+ @property st-global(--wds-color-fill-transparent-tint);
335
336
  @property st-global(--wds-color-fill-urgent-primary);
336
337
  @property st-global(--wds-color-fill-urgent-primary-active);
337
338
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -836,6 +837,7 @@
836
837
  --wds-color-fill-transparent-tertiary-active: rgba(0, 6, 36, .5);
837
838
  --wds-color-fill-transparent-tertiary-disabled: rgba(0, 6, 36, 0);
838
839
  --wds-color-fill-transparent-tertiary-hover: rgba(0, 6, 36, .5);
840
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
839
841
  --wds-color-fill-urgent-primary: #fe620f;
840
842
  --wds-color-fill-urgent-primary-active: #df4d00;
841
843
  --wds-color-fill-urgent-primary-disabled: rgba(0, 6, 36, .3);
package/studio/all.css CHANGED
@@ -92,6 +92,7 @@
92
92
  --wds-color-fill-warning-primary-disabled: #bebebe;
93
93
  --wds-color-fill-urgent-secondary-disabled: #e5e5e5;
94
94
  --wds-color-fill-urgent-primary-disabled: #bebebe;
95
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
95
96
  --wds-color-fill-success-secondary-disabled: #e5e5e5;
96
97
  --wds-color-fill-success-primary-disabled: #bebebe;
97
98
  --wds-color-fill-standard-secondary-disabled: #e5e5e5;
package/studio/all.scss CHANGED
@@ -338,6 +338,7 @@
338
338
  --wds-color-fill-warning-primary-disabled: #bebebe;
339
339
  --wds-color-fill-urgent-secondary-disabled: #e5e5e5;
340
340
  --wds-color-fill-urgent-primary-disabled: #bebebe;
341
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
341
342
  --wds-color-fill-success-secondary-disabled: #e5e5e5;
342
343
  --wds-color-fill-success-primary-disabled: #bebebe;
343
344
  --wds-color-fill-standard-secondary-disabled: #e5e5e5;
package/studio/all.st.css CHANGED
@@ -937,6 +937,7 @@
937
937
  @property st-global(--wds-color-fill-transparent-tertiary-active);
938
938
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
939
939
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
940
+ @property st-global(--wds-color-fill-transparent-tint);
940
941
  @property st-global(--wds-color-fill-urgent-primary);
941
942
  @property st-global(--wds-color-fill-urgent-primary-active);
942
943
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -3703,6 +3704,7 @@
3703
3704
  --wds-color-fill-transparent-tertiary-active: rgba(19, 23, 32, .5);
3704
3705
  --wds-color-fill-transparent-tertiary-disabled: rgba(19, 23, 32, 0);
3705
3706
  --wds-color-fill-transparent-tertiary-hover: rgba(19, 23, 32, .5);
3707
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
3706
3708
  --wds-color-fill-urgent-primary: #f96132;
3707
3709
  --wds-color-fill-urgent-primary-active: #f96132;
3708
3710
  --wds-color-fill-urgent-primary-disabled: #bebebe;
package/studio/semantic.st.css CHANGED
@@ -332,6 +332,7 @@
332
332
  @property st-global(--wds-color-fill-transparent-tertiary-active);
333
333
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
334
334
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
335
+ @property st-global(--wds-color-fill-transparent-tint);
335
336
  @property st-global(--wds-color-fill-urgent-primary);
336
337
  @property st-global(--wds-color-fill-urgent-primary-active);
337
338
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -844,6 +845,7 @@
844
845
  --wds-color-fill-transparent-tertiary-active: rgba(19, 23, 32, .5);
845
846
  --wds-color-fill-transparent-tertiary-disabled: rgba(19, 23, 32, 0);
846
847
  --wds-color-fill-transparent-tertiary-hover: rgba(19, 23, 32, .5);
848
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
847
849
  --wds-color-fill-urgent-primary: #f96132;
848
850
  --wds-color-fill-urgent-primary-active: #f96132;
849
851
  --wds-color-fill-urgent-primary-disabled: #bebebe;
package/studio2-light/all.css CHANGED
@@ -99,6 +99,7 @@
99
99
  --wds-font-family-display: "Madefor Display", Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
100
100
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
101
101
  --wds-color-text-stage-section: #6f56f9;
102
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
102
103
  --wds-color-fill-surface-stage: #F7F7F7;
103
104
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
104
105
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
@@ -302,7 +303,6 @@
302
303
  --wds-variable-input-padding-vertical-tiny: 2px;
303
304
  --wds-variable-input-padding-vertical-small: 5px;
304
305
  --wds-trend-indicator-gap: 4px;
305
- --wds-top-banner-shadow: 0 0 0 transparent;
306
306
  --wds-toggle-switch-width-small: 24px;
307
307
  --wds-toggle-switch-width-medium: 26px;
308
308
  --wds-toggle-switch-width-large: 40px;
@@ -985,13 +985,13 @@
985
985
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-300);
986
986
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-300);
987
987
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
988
- --wds-top-banner-padding-vertical: var(--wds-space-150);
989
- --wds-top-banner-padding-horizontal-start: var(--wds-space-200);
990
- --wds-top-banner-padding-horizontal-end: var(--wds-space-200);
988
+ --wds-top-banner-padding-vertical: var(--wds-space-0);
989
+ --wds-top-banner-padding-horizontal-start: var(--wds-space-750);
990
+ --wds-top-banner-padding-horizontal-end: var(--wds-space-300);
991
991
  --wds-top-banner-fill: var(--wds-color-iris-500);
992
- --wds-top-banner-dismiss-gap: var(--wds-space-200);
993
- --wds-top-banner-content-gap: var(--wds-space-200);
994
- --wds-top-banner-border-radius: var(--wds-border-radius-0);
992
+ --wds-top-banner-dismiss-gap: var(--wds-space-500);
993
+ --wds-top-banner-content-gap: var(--wds-space-300);
994
+ --wds-top-banner-border-radius: var(--wds-border-radius-400);
995
995
  --wds-top-banner-border-color: var(--wds-color-white);
996
996
  --wds-tooltip-shadow: var(--wds-color-black-100-transparent-0);
997
997
  --wds-tooltip-padding-vertical-small: var(--wds-space-150);
@@ -2140,6 +2140,7 @@
2140
2140
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
2141
2141
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
2142
2142
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-standard-secondary);
2143
+ --wds-top-banner-shadow: var(--wds-shadow-300);
2143
2144
  --wds-top-banner-content-color: var(--wds-color-text-standard-primary);
2144
2145
  --wds-tooltip-text-fill: var(--wds-color-text-standard-primary-light);
2145
2146
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-tiny);
package/studio2-light/all.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  --wds-variable-input-padding-vertical-tiny: 2px;
6
6
  --wds-variable-input-padding-vertical-small: 5px;
7
7
  --wds-trend-indicator-gap: 4px;
8
- --wds-top-banner-shadow: 0 0 0 transparent;
9
8
  --wds-toggle-switch-width-small: 24px;
10
9
  --wds-toggle-switch-width-medium: 26px;
11
10
  --wds-toggle-switch-width-large: 40px;
@@ -346,6 +345,7 @@
346
345
  --wds-color-green-100: #4b916d;
347
346
  --wds-color-green-50: #3f7b5c;
348
347
  --wds-color-green-0: #0d4f3d;
348
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
349
349
  --wds-color-fill-surface-stage: #F7F7F7;
350
350
  --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
351
351
  --wds-color-fill-stage-section-secondary-active: #d9d2ff;
@@ -570,13 +570,13 @@
570
570
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-300);
571
571
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-300);
572
572
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
573
- --wds-top-banner-padding-vertical: var(--wds-space-150);
574
- --wds-top-banner-padding-horizontal-start: var(--wds-space-200);
575
- --wds-top-banner-padding-horizontal-end: var(--wds-space-200);
573
+ --wds-top-banner-padding-vertical: var(--wds-space-0);
574
+ --wds-top-banner-padding-horizontal-start: var(--wds-space-750);
575
+ --wds-top-banner-padding-horizontal-end: var(--wds-space-300);
576
576
  --wds-top-banner-fill: var(--wds-color-iris-500);
577
- --wds-top-banner-dismiss-gap: var(--wds-space-200);
578
- --wds-top-banner-content-gap: var(--wds-space-200);
579
- --wds-top-banner-border-radius: var(--wds-border-radius-0);
577
+ --wds-top-banner-dismiss-gap: var(--wds-space-500);
578
+ --wds-top-banner-content-gap: var(--wds-space-300);
579
+ --wds-top-banner-border-radius: var(--wds-border-radius-400);
580
580
  --wds-top-banner-border-color: var(--wds-color-white);
581
581
  --wds-tooltip-shadow: var(--wds-color-black-100-transparent-0);
582
582
  --wds-tooltip-padding-vertical-small: var(--wds-space-150);
@@ -2103,6 +2103,7 @@
2103
2103
  --wds-vertical-tabs-icon-fill-disabled: var(--wds-color-text-disabled);
2104
2104
  --wds-vertical-tabs-icon-fill-active: var(--wds-color-text-standard-primary);
2105
2105
  --wds-vertical-tabs-icon-fill: var(--wds-color-text-standard-secondary);
2106
+ --wds-top-banner-shadow: var(--wds-shadow-300);
2106
2107
  --wds-top-banner-content-color: var(--wds-color-text-standard-primary);
2107
2108
  --wds-tooltip-text-fill: var(--wds-color-text-standard-primary-light);
2108
2109
  --wds-tooltip-label-font-size-medium: var(--wds-font-size-body-tiny);
package/studio2-light/all.st.css CHANGED
@@ -936,6 +936,7 @@
936
936
  @property st-global(--wds-color-fill-transparent-tertiary-active);
937
937
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
938
938
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
939
+ @property st-global(--wds-color-fill-transparent-tint);
939
940
  @property st-global(--wds-color-fill-urgent-primary);
940
941
  @property st-global(--wds-color-fill-urgent-primary-active);
941
942
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -3703,6 +3704,7 @@
3703
3704
  --wds-color-fill-transparent-tertiary-active: rgba(19, 23, 32, .5);
3704
3705
  --wds-color-fill-transparent-tertiary-disabled: rgba(19, 23, 32, 0);
3705
3706
  --wds-color-fill-transparent-tertiary-hover: rgba(19, 23, 32, .5);
3707
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
3706
3708
  --wds-color-fill-urgent-primary: #ff8044;
3707
3709
  --wds-color-fill-urgent-primary-active: #ae3e09;
3708
3710
  --wds-color-fill-urgent-primary-disabled: rgba(19, 23, 32, .3);
@@ -5452,15 +5454,15 @@
5452
5454
  --wds-tooltip-shadow: rgba(19, 23, 32, 0);
5453
5455
  --wds-tooltip-text-fill: #ffffff;
5454
5456
  --wds-top-banner-border-color: #ffffff;
5455
- --wds-top-banner-border-radius: 0px;
5457
+ --wds-top-banner-border-radius: 8px;
5456
5458
  --wds-top-banner-content-color: #151414;
5457
- --wds-top-banner-content-gap: 8px;
5458
- --wds-top-banner-dismiss-gap: 8px;
5459
+ --wds-top-banner-content-gap: 12px;
5460
+ --wds-top-banner-dismiss-gap: 20px;
5459
5461
  --wds-top-banner-fill: #e7e4fe;
5460
- --wds-top-banner-padding-horizontal-end: 8px;
5461
- --wds-top-banner-padding-horizontal-start: 8px;
5462
- --wds-top-banner-padding-vertical: 6px;
5463
- --wds-top-banner-shadow: 0 0 0 transparent;
5462
+ --wds-top-banner-padding-horizontal-end: 12px;
5463
+ --wds-top-banner-padding-horizontal-start: 30px;
5464
+ --wds-top-banner-padding-vertical: 0px;
5465
+ --wds-top-banner-shadow: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
5464
5466
  --wds-trend-indicator-gap: 4px;
5465
5467
  --wds-variable-input-padding-vertical-small: 5px;
5466
5468
  --wds-variable-input-padding-vertical-tiny: 2px;
package/studio2-light/component.st.css CHANGED
@@ -3950,15 +3950,15 @@
3950
3950
  --wds-tooltip-shadow: rgba(19, 23, 32, 0);
3951
3951
  --wds-tooltip-text-fill: #ffffff;
3952
3952
  --wds-top-banner-border-color: #ffffff;
3953
- --wds-top-banner-border-radius: 0px;
3953
+ --wds-top-banner-border-radius: 8px;
3954
3954
  --wds-top-banner-content-color: #151414;
3955
- --wds-top-banner-content-gap: 8px;
3956
- --wds-top-banner-dismiss-gap: 8px;
3955
+ --wds-top-banner-content-gap: 12px;
3956
+ --wds-top-banner-dismiss-gap: 20px;
3957
3957
  --wds-top-banner-fill: #e7e4fe;
3958
- --wds-top-banner-padding-horizontal-end: 8px;
3959
- --wds-top-banner-padding-horizontal-start: 8px;
3960
- --wds-top-banner-padding-vertical: 6px;
3961
- --wds-top-banner-shadow: 0 0 0 transparent;
3958
+ --wds-top-banner-padding-horizontal-end: 12px;
3959
+ --wds-top-banner-padding-horizontal-start: 30px;
3960
+ --wds-top-banner-padding-vertical: 0px;
3961
+ --wds-top-banner-shadow: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
3962
3962
  --wds-trend-indicator-gap: 4px;
3963
3963
  --wds-variable-input-padding-vertical-small: 5px;
3964
3964
  --wds-variable-input-padding-vertical-tiny: 2px;
package/studio2-light/semantic.st.css CHANGED
@@ -332,6 +332,7 @@
332
332
  @property st-global(--wds-color-fill-transparent-tertiary-active);
333
333
  @property st-global(--wds-color-fill-transparent-tertiary-disabled);
334
334
  @property st-global(--wds-color-fill-transparent-tertiary-hover);
335
+ @property st-global(--wds-color-fill-transparent-tint);
335
336
  @property st-global(--wds-color-fill-urgent-primary);
336
337
  @property st-global(--wds-color-fill-urgent-primary-active);
337
338
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -844,6 +845,7 @@
844
845
  --wds-color-fill-transparent-tertiary-active: rgba(19, 23, 32, .5);
845
846
  --wds-color-fill-transparent-tertiary-disabled: rgba(19, 23, 32, 0);
846
847
  --wds-color-fill-transparent-tertiary-hover: rgba(19, 23, 32, .5);
848
+ --wds-color-fill-transparent-tint: rgba(234, 239, 255, .2);
847
849
  --wds-color-fill-urgent-primary: #ff8044;
848
850
  --wds-color-fill-urgent-primary-active: #ae3e09;
849
851
  --wds-color-fill-urgent-primary-disabled: rgba(19, 23, 32, .3);