@wix/design-system-tokens 1.201.0 → 1.203.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 (30) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/all.css +18 -4
  3. package/all.scss +14 -0
  4. package/all.st.css +28 -0
  5. package/component.st.css +12 -0
  6. package/foundation.st.css +16 -0
  7. package/odeditor/all.css +24 -6
  8. package/odeditor/all.scss +20 -2
  9. package/odeditor/all.st.css +38 -2
  10. package/odeditor/component.st.css +17 -1
  11. package/odeditor/foundation.st.css +18 -0
  12. package/odeditor/semantic.st.css +3 -1
  13. package/odeditor-dark/all.css +22 -5
  14. package/odeditor-dark/all.scss +18 -1
  15. package/odeditor-dark/all.st.css +35 -1
  16. package/odeditor-dark/component.st.css +17 -1
  17. package/odeditor-dark/foundation.st.css +16 -0
  18. package/odeditor-dark/semantic.st.css +2 -0
  19. package/package.json +2 -2
  20. package/studio/all.css +20 -5
  21. package/studio/all.scss +16 -1
  22. package/studio/all.st.css +31 -1
  23. package/studio/component.st.css +12 -0
  24. package/studio/foundation.st.css +16 -0
  25. package/studio/semantic.st.css +3 -1
  26. package/wixel/all.css +18 -4
  27. package/wixel/all.scss +14 -0
  28. package/wixel/all.st.css +28 -0
  29. package/wixel/component.st.css +12 -0
  30. package/wixel/foundation.st.css +16 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## 1.203.0 - 2026-06-17
2
+
3
+ ### Bug Fixes
4
+
5
+ - fix(TableListItem): make TableListItem background transparent in Harmony dark theme [16397](https://github.com/wix-private/wix-design-systems/pull/16397)
6
+
7
+ ### Features
8
+
9
+ - feat(tokens): add pink color family [16392](https://github.com/wix-private/wix-design-systems/pull/16392)
10
+
11
+ ## 1.202.0 - 2026-06-15
12
+
13
+ ### Features
14
+
15
+ - feat(tokens): add Card Harmony tokens [16378](https://github.com/wix-private/wix-design-systems/pull/16378)
16
+
1
17
  ## 1.201.0 - 2026-06-10
2
18
 
3
19
  ### Features
package/all.css CHANGED
@@ -94,12 +94,12 @@
94
94
  --wds-color-fill-social-xcorp-hover: rgba(16, 20, 25, .8);
95
95
  --wds-color-fill-social-xcorp-active: #101419;
96
96
  --wds-color-fill-social-xcorp: #101419;
97
- --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
98
- --wds-color-fill-social-tiktok-active: #010101;
99
- --wds-color-fill-social-tiktok: #010101;
100
97
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, .8);
101
98
  --wds-color-fill-social-twitter-active: #1da1f2;
102
99
  --wds-color-fill-social-twitter: #1da1f2;
100
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
101
+ --wds-color-fill-social-tiktok-active: #010101;
102
+ --wds-color-fill-social-tiktok: #010101;
103
103
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
104
104
  --wds-color-fill-social-pinterest-active: #e60019;
105
105
  --wds-color-fill-social-pinterest: #e60019;
@@ -172,6 +172,14 @@
172
172
  --wds-color-purple-100: #9a27d5;
173
173
  --wds-color-purple-50: #8e1dd1;
174
174
  --wds-color-purple-0: #7416a5;
175
+ --wds-color-pink-600: #feebfb;
176
+ --wds-color-pink-500: #fdd7f2;
177
+ --wds-color-pink-400: #ffc2f3;
178
+ --wds-color-pink-300: #ffa9ef;
179
+ --wds-color-pink-200: #ff77e6;
180
+ --wds-color-pink-100: #f639d3;
181
+ --wds-color-pink-50: #e221ac;
182
+ --wds-color-pink-0: #bd22a1;
175
183
  --wds-color-orange-600: #feefe6;
176
184
  --wds-color-orange-500: #fee5d7;
177
185
  --wds-color-orange-400: #fddbc8;
@@ -622,8 +630,8 @@
622
630
  --wds-color-fill-stage-anchor-disabled: var(--wds-color-black-100-transparent-30);
623
631
  --wds-color-fill-social-youtube-disabled: var(--wds-color-black-100-transparent-30);
624
632
  --wds-color-fill-social-xcorp-disabled: var(--wds-color-black-100-transparent-30);
625
- --wds-color-fill-social-tiktok-disabled: var(--wds-color-black-100-transparent-30);
626
633
  --wds-color-fill-social-twitter-disabled: var(--wds-color-black-100-transparent-30);
634
+ --wds-color-fill-social-tiktok-disabled: var(--wds-color-black-100-transparent-30);
627
635
  --wds-color-fill-social-pinterest-disabled: var(--wds-color-black-100-transparent-30);
628
636
  --wds-color-fill-social-linkedin-disabled: var(--wds-color-black-100-transparent-30);
629
637
  --wds-color-fill-social-instagram-disabled: var(--wds-color-black-100-transparent-30);
@@ -1357,8 +1365,10 @@
1357
1365
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1358
1366
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
1359
1367
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-300);
1368
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1360
1369
  --wds-card-header-padding-vertical: var(--wds-space-300);
1361
1370
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1371
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1362
1372
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1363
1373
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1364
1374
  --wds-card-content-padding-medium: var(--wds-space-400);
@@ -1949,6 +1959,9 @@
1949
1959
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1950
1960
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1951
1961
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1962
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1963
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1964
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1952
1965
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1953
1966
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1954
1967
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2119,6 +2132,7 @@
2119
2132
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2120
2133
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2121
2134
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2135
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2122
2136
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2123
2137
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
2124
2138
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -177,6 +177,14 @@
177
177
  --wds-color-purple-100: #9a27d5;
178
178
  --wds-color-purple-50: #8e1dd1;
179
179
  --wds-color-purple-0: #7416a5;
180
+ --wds-color-pink-600: #feebfb;
181
+ --wds-color-pink-500: #fdd7f2;
182
+ --wds-color-pink-400: #ffc2f3;
183
+ --wds-color-pink-300: #ffa9ef;
184
+ --wds-color-pink-200: #ff77e6;
185
+ --wds-color-pink-100: #f639d3;
186
+ --wds-color-pink-50: #e221ac;
187
+ --wds-color-pink-0: #bd22a1;
180
188
  --wds-color-picker-width: 240px;
181
189
  --wds-color-orange-600: #feefe6;
182
190
  --wds-color-orange-500: #fee5d7;
@@ -1334,8 +1342,10 @@
1334
1342
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1335
1343
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
1336
1344
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-300);
1345
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1337
1346
  --wds-card-header-padding-vertical: var(--wds-space-300);
1338
1347
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1348
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1339
1349
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1340
1350
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1341
1351
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1945,10 +1955,13 @@
1945
1955
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1946
1956
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1947
1957
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
1958
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1959
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1948
1960
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1949
1961
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1950
1962
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1951
1963
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1964
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1952
1965
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1953
1966
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1954
1967
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2117,6 +2130,7 @@
2117
2130
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
2118
2131
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2119
2132
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2133
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2120
2134
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2121
2135
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2122
2136
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/all.st.css CHANGED
@@ -267,6 +267,7 @@
267
267
  @property st-global(--wds-button-text-standard-primary);
268
268
  @property st-global(--wds-button-text-standard-primary-hover);
269
269
  @property st-global(--wds-card-border);
270
+ @property st-global(--wds-card-border-radius);
270
271
  @property st-global(--wds-card-content-padding-large);
271
272
  @property st-global(--wds-card-content-padding-medium);
272
273
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -289,8 +290,13 @@
289
290
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
290
291
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
291
292
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
293
+ @property st-global(--wds-card-header-divider-width);
292
294
  @property st-global(--wds-card-header-padding-horizontal);
293
295
  @property st-global(--wds-card-header-padding-vertical);
296
+ @property st-global(--wds-card-header-title-subtitle-gap);
297
+ @property st-global(--wds-card-subtitle-color);
298
+ @property st-global(--wds-card-subtitle-font-size);
299
+ @property st-global(--wds-card-subtitle-line-height);
294
300
  @property st-global(--wds-card-tab-padding-horizontal-medium);
295
301
  @property st-global(--wds-card-tab-padding-horizontal-small);
296
302
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -771,6 +777,14 @@
771
777
  @property st-global(--wds-color-picker-padding-horizontal);
772
778
  @property st-global(--wds-color-picker-padding-vertical);
773
779
  @property st-global(--wds-color-picker-width);
780
+ @property st-global(--wds-color-pink-0);
781
+ @property st-global(--wds-color-pink-50);
782
+ @property st-global(--wds-color-pink-100);
783
+ @property st-global(--wds-color-pink-200);
784
+ @property st-global(--wds-color-pink-300);
785
+ @property st-global(--wds-color-pink-400);
786
+ @property st-global(--wds-color-pink-500);
787
+ @property st-global(--wds-color-pink-600);
774
788
  @property st-global(--wds-color-purple-0);
775
789
  @property st-global(--wds-color-purple-50);
776
790
  @property st-global(--wds-color-purple-100);
@@ -2401,6 +2415,7 @@
2401
2415
  --wds-button-text-standard-primary: #000624;
2402
2416
  --wds-button-text-standard-primary-hover: #000624;
2403
2417
  --wds-card-border: 8px;
2418
+ --wds-card-border-radius: 8px;
2404
2419
  --wds-card-content-padding-large: 36px;
2405
2420
  --wds-card-content-padding-medium: 24px;
2406
2421
  --wds-card-content-paddings-horizontal: 24px;
@@ -2423,8 +2438,13 @@
2423
2438
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2424
2439
  --wds-card-gallery-item-title-font-line-height-small: 18px;
2425
2440
  --wds-card-gallery-item-title-font-size-medium: 18px;
2441
+ --wds-card-header-divider-width: 0px;
2426
2442
  --wds-card-header-padding-horizontal: 24px;
2427
2443
  --wds-card-header-padding-vertical: 18px;
2444
+ --wds-card-header-title-subtitle-gap: 0px;
2445
+ --wds-card-subtitle-color: #44485f;
2446
+ --wds-card-subtitle-font-size: 16px;
2447
+ --wds-card-subtitle-line-height: 24px;
2428
2448
  --wds-card-tab-padding-horizontal-medium: 18px;
2429
2449
  --wds-card-tab-padding-horizontal-small: 18px;
2430
2450
  --wds-card-tab-padding-vertical-medium: 18px;
@@ -2905,6 +2925,14 @@
2905
2925
  --wds-color-picker-padding-horizontal: 18px;
2906
2926
  --wds-color-picker-padding-vertical: 12px;
2907
2927
  --wds-color-picker-width: 240px;
2928
+ --wds-color-pink-0: #bd22a1;
2929
+ --wds-color-pink-50: #e221ac;
2930
+ --wds-color-pink-100: #f639d3;
2931
+ --wds-color-pink-200: #ff77e6;
2932
+ --wds-color-pink-300: #ffa9ef;
2933
+ --wds-color-pink-400: #ffc2f3;
2934
+ --wds-color-pink-500: #fdd7f2;
2935
+ --wds-color-pink-600: #feebfb;
2908
2936
  --wds-color-purple-0: #7416a5;
2909
2937
  --wds-color-purple-50: #8e1dd1;
2910
2938
  --wds-color-purple-100: #9a27d5;
package/component.st.css CHANGED
@@ -229,6 +229,7 @@
229
229
  @property st-global(--wds-button-text-standard-primary);
230
230
  @property st-global(--wds-button-text-standard-primary-hover);
231
231
  @property st-global(--wds-card-border);
232
+ @property st-global(--wds-card-border-radius);
232
233
  @property st-global(--wds-card-content-padding-large);
233
234
  @property st-global(--wds-card-content-padding-medium);
234
235
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -251,8 +252,13 @@
251
252
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
252
253
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
253
254
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
255
+ @property st-global(--wds-card-header-divider-width);
254
256
  @property st-global(--wds-card-header-padding-horizontal);
255
257
  @property st-global(--wds-card-header-padding-vertical);
258
+ @property st-global(--wds-card-header-title-subtitle-gap);
259
+ @property st-global(--wds-card-subtitle-color);
260
+ @property st-global(--wds-card-subtitle-font-size);
261
+ @property st-global(--wds-card-subtitle-line-height);
256
262
  @property st-global(--wds-card-tab-padding-horizontal-medium);
257
263
  @property st-global(--wds-card-tab-padding-horizontal-small);
258
264
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -1636,6 +1642,7 @@
1636
1642
  --wds-button-text-standard-primary: #000624;
1637
1643
  --wds-button-text-standard-primary-hover: #000624;
1638
1644
  --wds-card-border: 8px;
1645
+ --wds-card-border-radius: 8px;
1639
1646
  --wds-card-content-padding-large: 36px;
1640
1647
  --wds-card-content-padding-medium: 24px;
1641
1648
  --wds-card-content-paddings-horizontal: 24px;
@@ -1658,8 +1665,13 @@
1658
1665
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
1659
1666
  --wds-card-gallery-item-title-font-line-height-small: 18px;
1660
1667
  --wds-card-gallery-item-title-font-size-medium: 18px;
1668
+ --wds-card-header-divider-width: 0px;
1661
1669
  --wds-card-header-padding-horizontal: 24px;
1662
1670
  --wds-card-header-padding-vertical: 18px;
1671
+ --wds-card-header-title-subtitle-gap: 0px;
1672
+ --wds-card-subtitle-color: #44485f;
1673
+ --wds-card-subtitle-font-size: 16px;
1674
+ --wds-card-subtitle-line-height: 24px;
1663
1675
  --wds-card-tab-padding-horizontal-medium: 18px;
1664
1676
  --wds-card-tab-padding-horizontal-small: 18px;
1665
1677
  --wds-card-tab-padding-vertical-medium: 18px;
package/foundation.st.css CHANGED
@@ -92,6 +92,14 @@
92
92
  @property st-global(--wds-color-orange-400);
93
93
  @property st-global(--wds-color-orange-500);
94
94
  @property st-global(--wds-color-orange-600);
95
+ @property st-global(--wds-color-pink-0);
96
+ @property st-global(--wds-color-pink-50);
97
+ @property st-global(--wds-color-pink-100);
98
+ @property st-global(--wds-color-pink-200);
99
+ @property st-global(--wds-color-pink-300);
100
+ @property st-global(--wds-color-pink-400);
101
+ @property st-global(--wds-color-pink-500);
102
+ @property st-global(--wds-color-pink-600);
95
103
  @property st-global(--wds-color-purple-0);
96
104
  @property st-global(--wds-color-purple-50);
97
105
  @property st-global(--wds-color-purple-100);
@@ -324,6 +332,14 @@
324
332
  --wds-color-orange-400: #fddbc8;
325
333
  --wds-color-orange-500: #fee5d7;
326
334
  --wds-color-orange-600: #feefe6;
335
+ --wds-color-pink-0: #bd22a1;
336
+ --wds-color-pink-50: #e221ac;
337
+ --wds-color-pink-100: #f639d3;
338
+ --wds-color-pink-200: #ff77e6;
339
+ --wds-color-pink-300: #ffa9ef;
340
+ --wds-color-pink-400: #ffc2f3;
341
+ --wds-color-pink-500: #fdd7f2;
342
+ --wds-color-pink-600: #feebfb;
327
343
  --wds-color-purple-0: #7416a5;
328
344
  --wds-color-purple-50: #8e1dd1;
329
345
  --wds-color-purple-100: #9a27d5;
package/odeditor/all.css CHANGED
@@ -1,5 +1,6 @@
1
1
  :root, .wds-tokens {
2
2
  --wds-illustration-color-background: #F8F6F6;
3
+ --wds-illustration-color-7: #002294;
3
4
  --wds-illustration-color-6: #002294;
4
5
  --wds-illustration-color-5: #EAEFFF;
5
6
  --wds-illustration-color-4: #D5DFFF;
@@ -113,14 +114,14 @@
113
114
  --wds-color-fill-social-xcorp-disabled: #bebebe;
114
115
  --wds-color-fill-social-xcorp-active: #101419;
115
116
  --wds-color-fill-social-xcorp: #101419;
116
- --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
117
- --wds-color-fill-social-tiktok-disabled: #bebebe;
118
- --wds-color-fill-social-tiktok-active: #010101;
119
- --wds-color-fill-social-tiktok: #010101;
120
117
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, 0.8000);
121
118
  --wds-color-fill-social-twitter-disabled: #bebebe;
122
119
  --wds-color-fill-social-twitter-active: #1da1f2;
123
120
  --wds-color-fill-social-twitter: #1da1f2;
121
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
122
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
123
+ --wds-color-fill-social-tiktok-active: #010101;
124
+ --wds-color-fill-social-tiktok: #010101;
124
125
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
125
126
  --wds-color-fill-social-pinterest-disabled: #bebebe;
126
127
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -196,6 +197,14 @@
196
197
  --wds-color-purple-100: #7200f3;
197
198
  --wds-color-purple-50: #6100cf;
198
199
  --wds-color-purple-0: #5000aa;
200
+ --wds-color-pink-600: #feebfb;
201
+ --wds-color-pink-500: #fdd7f2;
202
+ --wds-color-pink-400: #ffc2f3;
203
+ --wds-color-pink-300: #ffa9ef;
204
+ --wds-color-pink-200: #ff77e6;
205
+ --wds-color-pink-100: #f639d3;
206
+ --wds-color-pink-50: #e221ac;
207
+ --wds-color-pink-0: #bd22a1;
199
208
  --wds-color-orange-600: #fdf1ec;
200
209
  --wds-color-orange-500: #fbe3d9;
201
210
  --wds-color-orange-400: #fbcfbb;
@@ -271,6 +280,7 @@
271
280
  --wds-border-width-0: 0px;
272
281
  --wds-border-radius-full: 1000px;
273
282
  --wds-border-radius-1200: 24px;
283
+ --wds-border-radius-800: 16px;
274
284
  --wds-border-radius-600: 12px;
275
285
  --wds-border-radius-500: 10px;
276
286
  --wds-border-radius-400: 8px;
@@ -370,6 +380,7 @@
370
380
  --wds-composer-sidebar-end-max-width: 240px;
371
381
  --wds-composer-sidebar-bottom-width: 88px;
372
382
  --wds-color-picker-width: 236px;
383
+ --wds-card-subtitle-color: #44485f;
373
384
  --wds-avatar-group-gap-condensed: -2px;
374
385
  --wds-angle-input-knob-size: 6px;
375
386
  --wds-angle-input-knob-border: 2px;
@@ -414,6 +425,7 @@
414
425
  --wds-space-padding-horizontal-large: var(--wds-space-400);
415
426
  --wds-space-mobile-viewport-spacing: var(--wds-space-800);
416
427
  --wds-shadow-x-secondary-raised: var(--wds-shadow-x-25);
428
+ --wds-shadow-surface-raised: 1px 4px 4px 0 var(--wds-color-black-100-transparent-5), 0 1px 1px -1.5px var(--wds-color-black-100-transparent-5), 1px 0 2px -0.7px var(--wds-color-black-100-transparent-5), 0 1px 10px 0 var(--wds-color-black-100-transparent-5);
417
429
  --wds-shadow-surface-modal: var(--wds-shadow-x-50) var(--wds-shadow-y-600) var(--wds-shadow-blur-800) var(--wds-color-black-100-transparent-10), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) var(--wds-color-black-100-transparent-0);
418
430
  --wds-shadow-focus-warning: 0 0 0 var(--wds-color-yellow-400);
419
431
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
@@ -1423,10 +1435,16 @@
1423
1435
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1424
1436
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1425
1437
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1426
- --wds-card-header-padding-vertical: var(--wds-space-400);
1438
+ --wds-card-subtitle-font-size: var(--wds-font-size-200);
1439
+ --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1440
+ --wds-card-header-padding-vertical: var(--wds-space-600);
1427
1441
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1442
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1428
1443
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1429
1444
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1445
+ --wds-card-content-padding-medium: var(--wds-space-300);
1446
+ --wds-card-content-padding-large: var(--wds-space-300);
1447
+ --wds-card-border-radius: var(--wds-border-radius-800);
1430
1448
  --wds-button-size-x-tiny: var(--wds-space-475);
1431
1449
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1432
1450
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1548,7 +1566,6 @@
1548
1566
  --wds-accordion-inner-content-padding-top: var(--wds-space-100);
1549
1567
  --wds-accordion-inner-content-fill: var(--wds-color-white);
1550
1568
  --wds-accordion-border-radius: var(--wds-border-radius-0);
1551
- --wds-shadow-surface-raised: var(--wds-shadow-200);
1552
1569
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1553
1570
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1554
1571
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1943,6 +1960,7 @@
1943
1960
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1944
1961
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1945
1962
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1963
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
1946
1964
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1947
1965
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1948
1966
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
package/odeditor/all.scss CHANGED
@@ -143,6 +143,7 @@
143
143
  --wds-input-shadow-focus-standard: transparent;
144
144
  --wds-input-shadow-focus-destructive: transparent;
145
145
  --wds-illustration-color-background: #F8F6F6;
146
+ --wds-illustration-color-7: #002294;
146
147
  --wds-illustration-color-6: #002294;
147
148
  --wds-illustration-color-5: #EAEFFF;
148
149
  --wds-illustration-color-4: #D5DFFF;
@@ -210,6 +211,14 @@
210
211
  --wds-color-purple-100: #7200f3;
211
212
  --wds-color-purple-50: #6100cf;
212
213
  --wds-color-purple-0: #5000aa;
214
+ --wds-color-pink-600: #feebfb;
215
+ --wds-color-pink-500: #fdd7f2;
216
+ --wds-color-pink-400: #ffc2f3;
217
+ --wds-color-pink-300: #ffa9ef;
218
+ --wds-color-pink-200: #ff77e6;
219
+ --wds-color-pink-100: #f639d3;
220
+ --wds-color-pink-50: #e221ac;
221
+ --wds-color-pink-0: #bd22a1;
213
222
  --wds-color-picker-width: 236px;
214
223
  --wds-color-orange-600: #fdf1ec;
215
224
  --wds-color-orange-500: #fbe3d9;
@@ -341,6 +350,7 @@
341
350
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
342
351
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
343
352
  --wds-color-black-100: #151414;
353
+ --wds-card-subtitle-color: #44485f;
344
354
  --wds-breakpoint-x-large: 1572px;
345
355
  --wds-breakpoint-small: 490px;
346
356
  --wds-breakpoint-medium: 768px;
@@ -352,6 +362,7 @@
352
362
  --wds-border-width-0: 0px;
353
363
  --wds-border-radius-full: 1000px;
354
364
  --wds-border-radius-1200: 24px;
365
+ --wds-border-radius-800: 16px;
355
366
  --wds-border-radius-600: 12px;
356
367
  --wds-border-radius-500: 10px;
357
368
  --wds-border-radius-400: 8px;
@@ -670,6 +681,7 @@
670
681
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-25);
671
682
  --wds-shadow-x-primary-modal: var(--wds-shadow-x-50);
672
683
  --wds-shadow-x-input: var(--wds-shadow-x-25);
684
+ --wds-shadow-surface-raised: 1px 4px 4px 0 var(--wds-color-black-100-transparent-5), 0 1px 1px -1.5px var(--wds-color-black-100-transparent-5), 1px 0 2px -0.7px var(--wds-color-black-100-transparent-5), 0 1px 10px 0 var(--wds-color-black-100-transparent-5);
673
685
  --wds-shadow-surface-modal: var(--wds-shadow-x-50) var(--wds-shadow-y-600) var(--wds-shadow-blur-800) var(--wds-color-black-100-transparent-10), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) var(--wds-color-black-100-transparent-0);
674
686
  --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
675
687
  --wds-shadow-inner-400-right: -32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, -8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
@@ -1402,8 +1414,11 @@
1402
1414
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1403
1415
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1404
1416
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1405
- --wds-card-header-padding-vertical: var(--wds-space-400);
1417
+ --wds-card-subtitle-font-size: var(--wds-font-size-200);
1418
+ --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1419
+ --wds-card-header-padding-vertical: var(--wds-space-600);
1406
1420
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1421
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1407
1422
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1408
1423
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1409
1424
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1416,6 +1431,9 @@
1416
1431
  --wds-card-gallery-item-buttons-gap: var(--wds-space-200);
1417
1432
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1418
1433
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1434
+ --wds-card-content-padding-medium: var(--wds-space-300);
1435
+ --wds-card-content-padding-large: var(--wds-space-300);
1436
+ --wds-card-border-radius: var(--wds-border-radius-800);
1419
1437
  --wds-button-size-x-tiny: var(--wds-space-475);
1420
1438
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1421
1439
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1671,7 +1689,6 @@
1671
1689
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1672
1690
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1673
1691
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1674
- --wds-shadow-surface-raised: var(--wds-shadow-200);
1675
1692
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1676
1693
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1677
1694
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1939,6 +1956,7 @@
1939
1956
  --wds-checkbox-border-disabled: var(--wds-color-border-transparent-primary);
1940
1957
  --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1941
1958
  --wds-carousel-controls-shadow: 0 var(--wds-shadow-y-primary-modal) var(--wds-shadow-blur-primary-modal) var(--wds-shadow-fill-primary-modal), 0 var(--wds-shadow-blur-secondary-modal) var(--wds-shadow-y-secondary-modal) var(--wds-shadow-fill-secondary-modal);
1959
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
1942
1960
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1943
1961
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1944
1962
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
package/odeditor/all.st.css CHANGED
@@ -110,6 +110,7 @@
110
110
  @property st-global(--wds-border-radius-400);
111
111
  @property st-global(--wds-border-radius-500);
112
112
  @property st-global(--wds-border-radius-600);
113
+ @property st-global(--wds-border-radius-800);
113
114
  @property st-global(--wds-border-radius-1200);
114
115
  @property st-global(--wds-border-radius-full);
115
116
  @property st-global(--wds-border-radius-surface-default);
@@ -259,6 +260,9 @@
259
260
  @property st-global(--wds-button-size-tiny);
260
261
  @property st-global(--wds-button-size-tiny-screen-small);
261
262
  @property st-global(--wds-button-size-x-tiny);
263
+ @property st-global(--wds-card-border-radius);
264
+ @property st-global(--wds-card-content-padding-large);
265
+ @property st-global(--wds-card-content-padding-medium);
262
266
  @property st-global(--wds-card-content-paddings-horizontal);
263
267
  @property st-global(--wds-card-content-paddings-vertical);
264
268
  @property st-global(--wds-card-gallery-item-buttons-gap);
@@ -277,8 +281,13 @@
277
281
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
278
282
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
279
283
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
284
+ @property st-global(--wds-card-header-divider-width);
280
285
  @property st-global(--wds-card-header-padding-horizontal);
281
286
  @property st-global(--wds-card-header-padding-vertical);
287
+ @property st-global(--wds-card-header-title-subtitle-gap);
288
+ @property st-global(--wds-card-subtitle-color);
289
+ @property st-global(--wds-card-subtitle-font-size);
290
+ @property st-global(--wds-card-subtitle-line-height);
282
291
  @property st-global(--wds-card-tab-padding-horizontal-medium);
283
292
  @property st-global(--wds-card-tab-padding-horizontal-small);
284
293
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -752,6 +761,14 @@
752
761
  @property st-global(--wds-color-picker-padding-horizontal);
753
762
  @property st-global(--wds-color-picker-padding-vertical);
754
763
  @property st-global(--wds-color-picker-width);
764
+ @property st-global(--wds-color-pink-0);
765
+ @property st-global(--wds-color-pink-50);
766
+ @property st-global(--wds-color-pink-100);
767
+ @property st-global(--wds-color-pink-200);
768
+ @property st-global(--wds-color-pink-300);
769
+ @property st-global(--wds-color-pink-400);
770
+ @property st-global(--wds-color-pink-500);
771
+ @property st-global(--wds-color-pink-600);
755
772
  @property st-global(--wds-color-purple-0);
756
773
  @property st-global(--wds-color-purple-50);
757
774
  @property st-global(--wds-color-purple-100);
@@ -1069,6 +1086,7 @@
1069
1086
  @property st-global(--wds-illustration-color-4);
1070
1087
  @property st-global(--wds-illustration-color-5);
1071
1088
  @property st-global(--wds-illustration-color-6);
1089
+ @property st-global(--wds-illustration-color-7);
1072
1090
  @property st-global(--wds-illustration-color-background);
1073
1091
  @property st-global(--wds-image-border-radius-default);
1074
1092
  @property st-global(--wds-image-border-radius-none);
@@ -2193,6 +2211,7 @@
2193
2211
  --wds-border-radius-400: 8px;
2194
2212
  --wds-border-radius-500: 10px;
2195
2213
  --wds-border-radius-600: 12px;
2214
+ --wds-border-radius-800: 16px;
2196
2215
  --wds-border-radius-1200: 24px;
2197
2216
  --wds-border-radius-full: 1000px;
2198
2217
  --wds-border-radius-surface-default: 12px;
@@ -2342,6 +2361,9 @@
2342
2361
  --wds-button-size-tiny: 24px;
2343
2362
  --wds-button-size-tiny-screen-small: 32px;
2344
2363
  --wds-button-size-x-tiny: 18px;
2364
+ --wds-card-border-radius: 16px;
2365
+ --wds-card-content-padding-large: 12px;
2366
+ --wds-card-content-padding-medium: 12px;
2345
2367
  --wds-card-content-paddings-horizontal: 12px;
2346
2368
  --wds-card-content-paddings-vertical: 12px;
2347
2369
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -2360,8 +2382,13 @@
2360
2382
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2361
2383
  --wds-card-gallery-item-title-font-line-height-small: 16px;
2362
2384
  --wds-card-gallery-item-title-font-size-medium: 16px;
2385
+ --wds-card-header-divider-width: 0px;
2363
2386
  --wds-card-header-padding-horizontal: 24px;
2364
- --wds-card-header-padding-vertical: 16px;
2387
+ --wds-card-header-padding-vertical: 24px;
2388
+ --wds-card-header-title-subtitle-gap: 4px;
2389
+ --wds-card-subtitle-color: #44485f;
2390
+ --wds-card-subtitle-font-size: 12px;
2391
+ --wds-card-subtitle-line-height: 16px;
2365
2392
  --wds-card-tab-padding-horizontal-medium: 20px;
2366
2393
  --wds-card-tab-padding-horizontal-small: 20px;
2367
2394
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2835,6 +2862,14 @@
2835
2862
  --wds-color-picker-padding-horizontal: 16px;
2836
2863
  --wds-color-picker-padding-vertical: 12px;
2837
2864
  --wds-color-picker-width: 236px;
2865
+ --wds-color-pink-0: #bd22a1;
2866
+ --wds-color-pink-50: #e221ac;
2867
+ --wds-color-pink-100: #f639d3;
2868
+ --wds-color-pink-200: #ff77e6;
2869
+ --wds-color-pink-300: #ffa9ef;
2870
+ --wds-color-pink-400: #ffc2f3;
2871
+ --wds-color-pink-500: #fdd7f2;
2872
+ --wds-color-pink-600: #feebfb;
2838
2873
  --wds-color-purple-0: #5000aa;
2839
2874
  --wds-color-purple-50: #6100cf;
2840
2875
  --wds-color-purple-100: #7200f3;
@@ -3152,6 +3187,7 @@
3152
3187
  --wds-illustration-color-4: #D5DFFF;
3153
3188
  --wds-illustration-color-5: #EAEFFF;
3154
3189
  --wds-illustration-color-6: #002294;
3190
+ --wds-illustration-color-7: #002294;
3155
3191
  --wds-illustration-color-background: #F8F6F6;
3156
3192
  --wds-image-border-radius-default: 8px;
3157
3193
  --wds-image-border-radius-none: 0px;
@@ -3620,7 +3656,7 @@
3620
3656
  --wds-shadow-surface-modal: 2px 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
3621
3657
  --wds-shadow-surface-overlay: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
3622
3658
  --wds-shadow-surface-overlay-dark: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
3623
- --wds-shadow-surface-raised: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
3659
+ --wds-shadow-surface-raised: 1px 4px 4px 0 rgba(19, 23, 32, .05), 0 1px 1px -1.5px rgba(19, 23, 32, .05), 1px 0 2px -0.7px rgba(19, 23, 32, .05), 0 1px 10px 0 rgba(19, 23, 32, .05);
3624
3660
  --wds-shadow-x-0: 0px;
3625
3661
  --wds-shadow-x-25: 1px;
3626
3662
  --wds-shadow-x-50: 2px;
package/odeditor/component.st.css CHANGED
@@ -219,6 +219,9 @@
219
219
  @property st-global(--wds-button-size-tiny);
220
220
  @property st-global(--wds-button-size-tiny-screen-small);
221
221
  @property st-global(--wds-button-size-x-tiny);
222
+ @property st-global(--wds-card-border-radius);
223
+ @property st-global(--wds-card-content-padding-large);
224
+ @property st-global(--wds-card-content-padding-medium);
222
225
  @property st-global(--wds-card-content-paddings-horizontal);
223
226
  @property st-global(--wds-card-content-paddings-vertical);
224
227
  @property st-global(--wds-card-gallery-item-buttons-gap);
@@ -237,8 +240,13 @@
237
240
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
238
241
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
239
242
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
243
+ @property st-global(--wds-card-header-divider-width);
240
244
  @property st-global(--wds-card-header-padding-horizontal);
241
245
  @property st-global(--wds-card-header-padding-vertical);
246
+ @property st-global(--wds-card-header-title-subtitle-gap);
247
+ @property st-global(--wds-card-subtitle-color);
248
+ @property st-global(--wds-card-subtitle-font-size);
249
+ @property st-global(--wds-card-subtitle-line-height);
242
250
  @property st-global(--wds-card-tab-padding-horizontal-medium);
243
251
  @property st-global(--wds-card-tab-padding-horizontal-small);
244
252
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -1570,6 +1578,9 @@
1570
1578
  --wds-button-size-tiny: 24px;
1571
1579
  --wds-button-size-tiny-screen-small: 32px;
1572
1580
  --wds-button-size-x-tiny: 18px;
1581
+ --wds-card-border-radius: 16px;
1582
+ --wds-card-content-padding-large: 12px;
1583
+ --wds-card-content-padding-medium: 12px;
1573
1584
  --wds-card-content-paddings-horizontal: 12px;
1574
1585
  --wds-card-content-paddings-vertical: 12px;
1575
1586
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -1588,8 +1599,13 @@
1588
1599
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
1589
1600
  --wds-card-gallery-item-title-font-line-height-small: 16px;
1590
1601
  --wds-card-gallery-item-title-font-size-medium: 16px;
1602
+ --wds-card-header-divider-width: 0px;
1591
1603
  --wds-card-header-padding-horizontal: 24px;
1592
- --wds-card-header-padding-vertical: 16px;
1604
+ --wds-card-header-padding-vertical: 24px;
1605
+ --wds-card-header-title-subtitle-gap: 4px;
1606
+ --wds-card-subtitle-color: #44485f;
1607
+ --wds-card-subtitle-font-size: 12px;
1608
+ --wds-card-subtitle-line-height: 16px;
1593
1609
  --wds-card-tab-padding-horizontal-medium: 20px;
1594
1610
  --wds-card-tab-padding-horizontal-small: 20px;
1595
1611
  --wds-card-tab-padding-vertical-medium: 16px;