@wix/design-system-tokens 1.201.0 → 1.202.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 (24) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +10 -4
  3. package/all.scss +6 -0
  4. package/all.st.css +12 -0
  5. package/component.st.css +12 -0
  6. package/odeditor/all.css +15 -6
  7. package/odeditor/all.scss +11 -2
  8. package/odeditor/all.st.css +20 -2
  9. package/odeditor/component.st.css +17 -1
  10. package/odeditor/foundation.st.css +2 -0
  11. package/odeditor/semantic.st.css +1 -1
  12. package/odeditor-dark/all.css +12 -4
  13. package/odeditor-dark/all.scss +8 -0
  14. package/odeditor-dark/all.st.css +16 -0
  15. package/odeditor-dark/component.st.css +16 -0
  16. package/package.json +2 -2
  17. package/studio/all.css +10 -4
  18. package/studio/all.scss +6 -0
  19. package/studio/all.st.css +12 -0
  20. package/studio/component.st.css +12 -0
  21. package/wixel/all.css +10 -4
  22. package/wixel/all.scss +6 -0
  23. package/wixel/all.st.css +12 -0
  24. package/wixel/component.st.css +12 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.202.0 - 2026-06-15
2
+
3
+ ### Features
4
+
5
+ - feat(tokens): add Card Harmony tokens [16378](https://github.com/wix-private/wix-design-systems/pull/16378)
6
+
1
7
  ## 1.201.0 - 2026-06-10
2
8
 
3
9
  ### 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;
@@ -622,8 +622,8 @@
622
622
  --wds-color-fill-stage-anchor-disabled: var(--wds-color-black-100-transparent-30);
623
623
  --wds-color-fill-social-youtube-disabled: var(--wds-color-black-100-transparent-30);
624
624
  --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
625
  --wds-color-fill-social-twitter-disabled: var(--wds-color-black-100-transparent-30);
626
+ --wds-color-fill-social-tiktok-disabled: var(--wds-color-black-100-transparent-30);
627
627
  --wds-color-fill-social-pinterest-disabled: var(--wds-color-black-100-transparent-30);
628
628
  --wds-color-fill-social-linkedin-disabled: var(--wds-color-black-100-transparent-30);
629
629
  --wds-color-fill-social-instagram-disabled: var(--wds-color-black-100-transparent-30);
@@ -1357,8 +1357,10 @@
1357
1357
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1358
1358
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
1359
1359
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-300);
1360
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1360
1361
  --wds-card-header-padding-vertical: var(--wds-space-300);
1361
1362
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1363
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1362
1364
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1363
1365
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1364
1366
  --wds-card-content-padding-medium: var(--wds-space-400);
@@ -1949,6 +1951,9 @@
1949
1951
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1950
1952
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1951
1953
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1954
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1955
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1956
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1952
1957
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1953
1958
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1954
1959
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2119,6 +2124,7 @@
2119
2124
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2120
2125
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2121
2126
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2127
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2122
2128
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2123
2129
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
2124
2130
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -1334,8 +1334,10 @@
1334
1334
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1335
1335
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
1336
1336
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-300);
1337
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1337
1338
  --wds-card-header-padding-vertical: var(--wds-space-300);
1338
1339
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1340
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1339
1341
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1340
1342
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1341
1343
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1945,10 +1947,13 @@
1945
1947
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1946
1948
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1947
1949
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
1950
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1951
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1948
1952
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1949
1953
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1950
1954
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1951
1955
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1956
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1952
1957
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1953
1958
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1954
1959
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2117,6 +2122,7 @@
2117
2122
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
2118
2123
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2119
2124
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2125
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2120
2126
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2121
2127
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2122
2128
  --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);
@@ -2401,6 +2407,7 @@
2401
2407
  --wds-button-text-standard-primary: #000624;
2402
2408
  --wds-button-text-standard-primary-hover: #000624;
2403
2409
  --wds-card-border: 8px;
2410
+ --wds-card-border-radius: 8px;
2404
2411
  --wds-card-content-padding-large: 36px;
2405
2412
  --wds-card-content-padding-medium: 24px;
2406
2413
  --wds-card-content-paddings-horizontal: 24px;
@@ -2423,8 +2430,13 @@
2423
2430
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2424
2431
  --wds-card-gallery-item-title-font-line-height-small: 18px;
2425
2432
  --wds-card-gallery-item-title-font-size-medium: 18px;
2433
+ --wds-card-header-divider-width: 0px;
2426
2434
  --wds-card-header-padding-horizontal: 24px;
2427
2435
  --wds-card-header-padding-vertical: 18px;
2436
+ --wds-card-header-title-subtitle-gap: 0px;
2437
+ --wds-card-subtitle-color: #44485f;
2438
+ --wds-card-subtitle-font-size: 16px;
2439
+ --wds-card-subtitle-line-height: 24px;
2428
2440
  --wds-card-tab-padding-horizontal-medium: 18px;
2429
2441
  --wds-card-tab-padding-horizontal-small: 18px;
2430
2442
  --wds-card-tab-padding-vertical-medium: 18px;
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/odeditor/all.css CHANGED
@@ -113,14 +113,14 @@
113
113
  --wds-color-fill-social-xcorp-disabled: #bebebe;
114
114
  --wds-color-fill-social-xcorp-active: #101419;
115
115
  --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
116
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, 0.8000);
121
117
  --wds-color-fill-social-twitter-disabled: #bebebe;
122
118
  --wds-color-fill-social-twitter-active: #1da1f2;
123
119
  --wds-color-fill-social-twitter: #1da1f2;
120
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
121
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
122
+ --wds-color-fill-social-tiktok-active: #010101;
123
+ --wds-color-fill-social-tiktok: #010101;
124
124
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
125
125
  --wds-color-fill-social-pinterest-disabled: #bebebe;
126
126
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -271,6 +271,7 @@
271
271
  --wds-border-width-0: 0px;
272
272
  --wds-border-radius-full: 1000px;
273
273
  --wds-border-radius-1200: 24px;
274
+ --wds-border-radius-800: 16px;
274
275
  --wds-border-radius-600: 12px;
275
276
  --wds-border-radius-500: 10px;
276
277
  --wds-border-radius-400: 8px;
@@ -370,6 +371,7 @@
370
371
  --wds-composer-sidebar-end-max-width: 240px;
371
372
  --wds-composer-sidebar-bottom-width: 88px;
372
373
  --wds-color-picker-width: 236px;
374
+ --wds-card-subtitle-color: #44485f;
373
375
  --wds-avatar-group-gap-condensed: -2px;
374
376
  --wds-angle-input-knob-size: 6px;
375
377
  --wds-angle-input-knob-border: 2px;
@@ -414,6 +416,7 @@
414
416
  --wds-space-padding-horizontal-large: var(--wds-space-400);
415
417
  --wds-space-mobile-viewport-spacing: var(--wds-space-800);
416
418
  --wds-shadow-x-secondary-raised: var(--wds-shadow-x-25);
419
+ --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
420
  --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
421
  --wds-shadow-focus-warning: 0 0 0 var(--wds-color-yellow-400);
419
422
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
@@ -1423,10 +1426,16 @@
1423
1426
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1424
1427
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1425
1428
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1426
- --wds-card-header-padding-vertical: var(--wds-space-400);
1429
+ --wds-card-subtitle-font-size: var(--wds-font-size-200);
1430
+ --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1431
+ --wds-card-header-padding-vertical: var(--wds-space-600);
1427
1432
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1433
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1428
1434
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1429
1435
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1436
+ --wds-card-content-padding-large: var(--wds-space-300);
1437
+ --wds-card-content-padding-medium: var(--wds-space-300);
1438
+ --wds-card-border-radius: var(--wds-border-radius-800);
1430
1439
  --wds-button-size-x-tiny: var(--wds-space-475);
1431
1440
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1432
1441
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1548,7 +1557,6 @@
1548
1557
  --wds-accordion-inner-content-padding-top: var(--wds-space-100);
1549
1558
  --wds-accordion-inner-content-fill: var(--wds-color-white);
1550
1559
  --wds-accordion-border-radius: var(--wds-border-radius-0);
1551
- --wds-shadow-surface-raised: var(--wds-shadow-200);
1552
1560
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1553
1561
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1554
1562
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1943,6 +1951,7 @@
1943
1951
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1944
1952
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1945
1953
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1954
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
1946
1955
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1947
1956
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1948
1957
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
package/odeditor/all.scss CHANGED
@@ -341,6 +341,7 @@
341
341
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
342
342
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
343
343
  --wds-color-black-100: #151414;
344
+ --wds-card-subtitle-color: #44485f;
344
345
  --wds-breakpoint-x-large: 1572px;
345
346
  --wds-breakpoint-small: 490px;
346
347
  --wds-breakpoint-medium: 768px;
@@ -352,6 +353,7 @@
352
353
  --wds-border-width-0: 0px;
353
354
  --wds-border-radius-full: 1000px;
354
355
  --wds-border-radius-1200: 24px;
356
+ --wds-border-radius-800: 16px;
355
357
  --wds-border-radius-600: 12px;
356
358
  --wds-border-radius-500: 10px;
357
359
  --wds-border-radius-400: 8px;
@@ -670,6 +672,7 @@
670
672
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-25);
671
673
  --wds-shadow-x-primary-modal: var(--wds-shadow-x-50);
672
674
  --wds-shadow-x-input: var(--wds-shadow-x-25);
675
+ --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
676
  --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
677
  --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
678
  --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 +1405,11 @@
1402
1405
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1403
1406
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1404
1407
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1405
- --wds-card-header-padding-vertical: var(--wds-space-400);
1408
+ --wds-card-subtitle-font-size: var(--wds-font-size-200);
1409
+ --wds-card-header-title-subtitle-gap: var(--wds-space-100);
1410
+ --wds-card-header-padding-vertical: var(--wds-space-600);
1406
1411
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1412
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1407
1413
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1408
1414
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1409
1415
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1416,6 +1422,9 @@
1416
1422
  --wds-card-gallery-item-buttons-gap: var(--wds-space-200);
1417
1423
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1418
1424
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1425
+ --wds-card-content-padding-medium: var(--wds-space-300);
1426
+ --wds-card-content-padding-large: var(--wds-space-300);
1427
+ --wds-card-border-radius: var(--wds-border-radius-800);
1419
1428
  --wds-button-size-x-tiny: var(--wds-space-475);
1420
1429
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1421
1430
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1671,7 +1680,6 @@
1671
1680
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1672
1681
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1673
1682
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1674
- --wds-shadow-surface-raised: var(--wds-shadow-200);
1675
1683
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1676
1684
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1677
1685
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1939,6 +1947,7 @@
1939
1947
  --wds-checkbox-border-disabled: var(--wds-color-border-transparent-primary);
1940
1948
  --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1941
1949
  --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);
1950
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
1942
1951
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1943
1952
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1944
1953
  --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);
@@ -2193,6 +2202,7 @@
2193
2202
  --wds-border-radius-400: 8px;
2194
2203
  --wds-border-radius-500: 10px;
2195
2204
  --wds-border-radius-600: 12px;
2205
+ --wds-border-radius-800: 16px;
2196
2206
  --wds-border-radius-1200: 24px;
2197
2207
  --wds-border-radius-full: 1000px;
2198
2208
  --wds-border-radius-surface-default: 12px;
@@ -2342,6 +2352,9 @@
2342
2352
  --wds-button-size-tiny: 24px;
2343
2353
  --wds-button-size-tiny-screen-small: 32px;
2344
2354
  --wds-button-size-x-tiny: 18px;
2355
+ --wds-card-border-radius: 16px;
2356
+ --wds-card-content-padding-large: 12px;
2357
+ --wds-card-content-padding-medium: 12px;
2345
2358
  --wds-card-content-paddings-horizontal: 12px;
2346
2359
  --wds-card-content-paddings-vertical: 12px;
2347
2360
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -2360,8 +2373,13 @@
2360
2373
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2361
2374
  --wds-card-gallery-item-title-font-line-height-small: 16px;
2362
2375
  --wds-card-gallery-item-title-font-size-medium: 16px;
2376
+ --wds-card-header-divider-width: 0px;
2363
2377
  --wds-card-header-padding-horizontal: 24px;
2364
- --wds-card-header-padding-vertical: 16px;
2378
+ --wds-card-header-padding-vertical: 24px;
2379
+ --wds-card-header-title-subtitle-gap: 4px;
2380
+ --wds-card-subtitle-color: #44485f;
2381
+ --wds-card-subtitle-font-size: 12px;
2382
+ --wds-card-subtitle-line-height: 16px;
2365
2383
  --wds-card-tab-padding-horizontal-medium: 20px;
2366
2384
  --wds-card-tab-padding-horizontal-small: 20px;
2367
2385
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -3620,7 +3638,7 @@
3620
3638
  --wds-shadow-surface-modal: 2px 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
3621
3639
  --wds-shadow-surface-overlay: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
3622
3640
  --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);
3641
+ --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
3642
  --wds-shadow-x-0: 0px;
3625
3643
  --wds-shadow-x-25: 1px;
3626
3644
  --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;
package/odeditor/foundation.st.css CHANGED
@@ -16,6 +16,7 @@
16
16
  @property st-global(--wds-border-radius-400);
17
17
  @property st-global(--wds-border-radius-500);
18
18
  @property st-global(--wds-border-radius-600);
19
+ @property st-global(--wds-border-radius-800);
19
20
  @property st-global(--wds-border-radius-1200);
20
21
  @property st-global(--wds-border-radius-full);
21
22
  @property st-global(--wds-border-width-0);
@@ -250,6 +251,7 @@
250
251
  --wds-border-radius-400: 8px;
251
252
  --wds-border-radius-500: 10px;
252
253
  --wds-border-radius-600: 12px;
254
+ --wds-border-radius-800: 16px;
253
255
  --wds-border-radius-1200: 24px;
254
256
  --wds-border-radius-full: 1000px;
255
257
  --wds-border-width-0: 0px;
package/odeditor/semantic.st.css CHANGED
@@ -963,7 +963,7 @@
963
963
  --wds-shadow-surface-modal: 2px 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
964
964
  --wds-shadow-surface-overlay: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
965
965
  --wds-shadow-surface-overlay-dark: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
966
- --wds-shadow-surface-raised: 0 2px 4px rgba(19, 23, 32, .05), 0 0 6px rgba(19, 23, 32, .1);
966
+ --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);
967
967
  --wds-shadow-x-input: 1px;
968
968
  --wds-shadow-x-primary-modal: 2px;
969
969
  --wds-shadow-x-primary-toggle-button: 1px;
package/odeditor-dark/all.css CHANGED
@@ -117,14 +117,14 @@
117
117
  --wds-color-fill-social-xcorp-disabled: #bebebe;
118
118
  --wds-color-fill-social-xcorp-active: #101419;
119
119
  --wds-color-fill-social-xcorp: #101419;
120
- --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
121
- --wds-color-fill-social-tiktok-disabled: #bebebe;
122
- --wds-color-fill-social-tiktok-active: #010101;
123
- --wds-color-fill-social-tiktok: #010101;
124
120
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, 0.8000);
125
121
  --wds-color-fill-social-twitter-disabled: #bebebe;
126
122
  --wds-color-fill-social-twitter-active: #1da1f2;
127
123
  --wds-color-fill-social-twitter: #1da1f2;
124
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
125
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
126
+ --wds-color-fill-social-tiktok-active: #010101;
127
+ --wds-color-fill-social-tiktok: #010101;
128
128
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
129
129
  --wds-color-fill-social-pinterest-disabled: #bebebe;
130
130
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1447,10 +1447,14 @@
1447
1447
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1448
1448
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1449
1449
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1450
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1450
1451
  --wds-card-header-padding-vertical: var(--wds-space-400);
1451
1452
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1453
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1452
1454
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1453
1455
  --wds-card-content-paddings-horizontal: var(--wds-space-300);
1456
+ --wds-card-content-padding-large: var(--wds-space-300);
1457
+ --wds-card-content-padding-medium: var(--wds-space-300);
1454
1458
  --wds-button-size-x-tiny: var(--wds-space-475);
1455
1459
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1456
1460
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1958,6 +1962,9 @@
1958
1962
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1959
1963
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1960
1964
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1965
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1966
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1967
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1961
1968
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1962
1969
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1963
1970
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
@@ -2078,6 +2085,7 @@
2078
2085
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2079
2086
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
2080
2087
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2088
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2081
2089
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2082
2090
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
2083
2091
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/odeditor-dark/all.scss CHANGED
@@ -1426,8 +1426,10 @@
1426
1426
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1427
1427
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1428
1428
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1429
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1429
1430
  --wds-card-header-padding-vertical: var(--wds-space-400);
1430
1431
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1432
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1431
1433
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1432
1434
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1433
1435
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1440,6 +1442,8 @@
1440
1442
  --wds-card-gallery-item-buttons-gap: var(--wds-space-200);
1441
1443
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1442
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);
1443
1447
  --wds-button-size-x-tiny: var(--wds-space-475);
1444
1448
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1445
1449
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1954,10 +1958,13 @@
1954
1958
  --wds-checkbox-border-disabled: var(--wds-color-border-transparent-primary);
1955
1959
  --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1956
1960
  --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);
1961
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1962
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1957
1963
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1958
1964
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1959
1965
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1960
1966
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1967
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1961
1968
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1962
1969
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1963
1970
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
@@ -2076,6 +2083,7 @@
2076
2083
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2077
2084
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2078
2085
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2086
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2079
2087
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
2080
2088
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2081
2089
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/odeditor-dark/all.st.css CHANGED
@@ -263,6 +263,9 @@
263
263
  @property st-global(--wds-button-size-tiny);
264
264
  @property st-global(--wds-button-size-tiny-screen-small);
265
265
  @property st-global(--wds-button-size-x-tiny);
266
+ @property st-global(--wds-card-border-radius);
267
+ @property st-global(--wds-card-content-padding-large);
268
+ @property st-global(--wds-card-content-padding-medium);
266
269
  @property st-global(--wds-card-content-paddings-horizontal);
267
270
  @property st-global(--wds-card-content-paddings-vertical);
268
271
  @property st-global(--wds-card-gallery-item-buttons-gap);
@@ -281,8 +284,13 @@
281
284
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
282
285
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
283
286
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
287
+ @property st-global(--wds-card-header-divider-width);
284
288
  @property st-global(--wds-card-header-padding-horizontal);
285
289
  @property st-global(--wds-card-header-padding-vertical);
290
+ @property st-global(--wds-card-header-title-subtitle-gap);
291
+ @property st-global(--wds-card-subtitle-color);
292
+ @property st-global(--wds-card-subtitle-font-size);
293
+ @property st-global(--wds-card-subtitle-line-height);
286
294
  @property st-global(--wds-card-tab-padding-horizontal-medium);
287
295
  @property st-global(--wds-card-tab-padding-horizontal-small);
288
296
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -2356,6 +2364,9 @@
2356
2364
  --wds-button-size-tiny: 24px;
2357
2365
  --wds-button-size-tiny-screen-small: 32px;
2358
2366
  --wds-button-size-x-tiny: 18px;
2367
+ --wds-card-border-radius: 12px;
2368
+ --wds-card-content-padding-large: 12px;
2369
+ --wds-card-content-padding-medium: 12px;
2359
2370
  --wds-card-content-paddings-horizontal: 12px;
2360
2371
  --wds-card-content-paddings-vertical: 12px;
2361
2372
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -2374,8 +2385,13 @@
2374
2385
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2375
2386
  --wds-card-gallery-item-title-font-line-height-small: 16px;
2376
2387
  --wds-card-gallery-item-title-font-size-medium: 16px;
2388
+ --wds-card-header-divider-width: 0px;
2377
2389
  --wds-card-header-padding-horizontal: 24px;
2378
2390
  --wds-card-header-padding-vertical: 16px;
2391
+ --wds-card-header-title-subtitle-gap: 0px;
2392
+ --wds-card-subtitle-color: #D4D3D2;
2393
+ --wds-card-subtitle-font-size: 16px;
2394
+ --wds-card-subtitle-line-height: 24px;
2379
2395
  --wds-card-tab-padding-horizontal-medium: 20px;
2380
2396
  --wds-card-tab-padding-horizontal-small: 20px;
2381
2397
  --wds-card-tab-padding-vertical-medium: 16px;
package/odeditor-dark/component.st.css CHANGED
@@ -222,6 +222,9 @@
222
222
  @property st-global(--wds-button-size-tiny);
223
223
  @property st-global(--wds-button-size-tiny-screen-small);
224
224
  @property st-global(--wds-button-size-x-tiny);
225
+ @property st-global(--wds-card-border-radius);
226
+ @property st-global(--wds-card-content-padding-large);
227
+ @property st-global(--wds-card-content-padding-medium);
225
228
  @property st-global(--wds-card-content-paddings-horizontal);
226
229
  @property st-global(--wds-card-content-paddings-vertical);
227
230
  @property st-global(--wds-card-gallery-item-buttons-gap);
@@ -240,8 +243,13 @@
240
243
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
241
244
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
242
245
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
246
+ @property st-global(--wds-card-header-divider-width);
243
247
  @property st-global(--wds-card-header-padding-horizontal);
244
248
  @property st-global(--wds-card-header-padding-vertical);
249
+ @property st-global(--wds-card-header-title-subtitle-gap);
250
+ @property st-global(--wds-card-subtitle-color);
251
+ @property st-global(--wds-card-subtitle-font-size);
252
+ @property st-global(--wds-card-subtitle-line-height);
245
253
  @property st-global(--wds-card-tab-padding-horizontal-medium);
246
254
  @property st-global(--wds-card-tab-padding-horizontal-small);
247
255
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -1581,6 +1589,9 @@
1581
1589
  --wds-button-size-tiny: 24px;
1582
1590
  --wds-button-size-tiny-screen-small: 32px;
1583
1591
  --wds-button-size-x-tiny: 18px;
1592
+ --wds-card-border-radius: 12px;
1593
+ --wds-card-content-padding-large: 12px;
1594
+ --wds-card-content-padding-medium: 12px;
1584
1595
  --wds-card-content-paddings-horizontal: 12px;
1585
1596
  --wds-card-content-paddings-vertical: 12px;
1586
1597
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -1599,8 +1610,13 @@
1599
1610
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
1600
1611
  --wds-card-gallery-item-title-font-line-height-small: 16px;
1601
1612
  --wds-card-gallery-item-title-font-size-medium: 16px;
1613
+ --wds-card-header-divider-width: 0px;
1602
1614
  --wds-card-header-padding-horizontal: 24px;
1603
1615
  --wds-card-header-padding-vertical: 16px;
1616
+ --wds-card-header-title-subtitle-gap: 0px;
1617
+ --wds-card-subtitle-color: #D4D3D2;
1618
+ --wds-card-subtitle-font-size: 16px;
1619
+ --wds-card-subtitle-line-height: 24px;
1604
1620
  --wds-card-tab-padding-horizontal-medium: 20px;
1605
1621
  --wds-card-tab-padding-horizontal-small: 20px;
1606
1622
  --wds-card-tab-padding-vertical-medium: 16px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.201.0",
3
+ "version": "1.202.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -32,5 +32,5 @@
32
32
  "author": "augustinasv@wix.com",
33
33
  "description": "Design system tokens",
34
34
  "packageManager": "yarn@3.5.0",
35
- "falconPackageHash": "35c99a066d148fdcd6982f23c23d9c3960c9a0760434d21556383f9e"
35
+ "falconPackageHash": "600306c206d6d3954bf671195508d3fb78110776f2648926c51c2c9d"
36
36
  }
package/studio/all.css CHANGED
@@ -119,14 +119,14 @@
119
119
  --wds-color-fill-social-xcorp-disabled: #bebebe;
120
120
  --wds-color-fill-social-xcorp-active: #101419;
121
121
  --wds-color-fill-social-xcorp: #101419;
122
- --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
123
- --wds-color-fill-social-tiktok-disabled: #bebebe;
124
- --wds-color-fill-social-tiktok-active: #010101;
125
- --wds-color-fill-social-tiktok: #010101;
126
122
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, .8);
127
123
  --wds-color-fill-social-twitter-disabled: #bebebe;
128
124
  --wds-color-fill-social-twitter-active: #1da1f2;
129
125
  --wds-color-fill-social-twitter: #1da1f2;
126
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
127
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
128
+ --wds-color-fill-social-tiktok-active: #010101;
129
+ --wds-color-fill-social-tiktok: #010101;
130
130
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
131
131
  --wds-color-fill-social-pinterest-disabled: #bebebe;
132
132
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1422,8 +1422,10 @@
1422
1422
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1423
1423
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1424
1424
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1425
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1425
1426
  --wds-card-header-padding-vertical: var(--wds-space-400);
1426
1427
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1428
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1427
1429
  --wds-card-content-paddings-vertical: var(--wds-space-600);
1428
1430
  --wds-card-content-paddings-horizontal: var(--wds-space-600);
1429
1431
  --wds-card-content-padding-medium: var(--wds-space-600);
@@ -1951,6 +1953,9 @@
1951
1953
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1952
1954
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1953
1955
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1956
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1957
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1958
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1954
1959
  --wds-button-text-hover: var(--wds-color-text-primary);
1955
1960
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
1956
1961
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
@@ -2114,6 +2119,7 @@
2114
2119
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2115
2120
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2116
2121
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2122
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2117
2123
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2118
2124
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
2119
2125
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
package/studio/all.scss CHANGED
@@ -1400,8 +1400,10 @@
1400
1400
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1401
1401
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1402
1402
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1403
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1403
1404
  --wds-card-header-padding-vertical: var(--wds-space-400);
1404
1405
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1406
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1405
1407
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1406
1408
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1407
1409
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1947,10 +1949,13 @@
1947
1949
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1948
1950
  --wds-checkbox-border: var(--wds-color-border-dark-primary);
1949
1951
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
1952
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1953
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1950
1954
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1951
1955
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1952
1956
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1953
1957
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1958
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1954
1959
  --wds-button-text-hover: var(--wds-color-text-primary);
1955
1960
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
1956
1961
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
@@ -2112,6 +2117,7 @@
2112
2117
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2113
2118
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2114
2119
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2120
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2115
2121
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2116
2122
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2117
2123
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
package/studio/all.st.css CHANGED
@@ -264,6 +264,7 @@
264
264
  @property st-global(--wds-button-text-standard-primary);
265
265
  @property st-global(--wds-button-text-standard-primary-hover);
266
266
  @property st-global(--wds-card-border);
267
+ @property st-global(--wds-card-border-radius);
267
268
  @property st-global(--wds-card-content-padding-large);
268
269
  @property st-global(--wds-card-content-padding-medium);
269
270
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -285,8 +286,13 @@
285
286
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
286
287
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
287
288
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
289
+ @property st-global(--wds-card-header-divider-width);
288
290
  @property st-global(--wds-card-header-padding-horizontal);
289
291
  @property st-global(--wds-card-header-padding-vertical);
292
+ @property st-global(--wds-card-header-title-subtitle-gap);
293
+ @property st-global(--wds-card-subtitle-color);
294
+ @property st-global(--wds-card-subtitle-font-size);
295
+ @property st-global(--wds-card-subtitle-line-height);
290
296
  @property st-global(--wds-card-tab-padding-horizontal-medium);
291
297
  @property st-global(--wds-card-tab-padding-horizontal-small);
292
298
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -2390,6 +2396,7 @@
2390
2396
  --wds-button-text-standard-primary: #131720;
2391
2397
  --wds-button-text-standard-primary-hover: #131720;
2392
2398
  --wds-card-border: 4px;
2399
+ --wds-card-border-radius: 4px;
2393
2400
  --wds-card-content-padding-large: 36px;
2394
2401
  --wds-card-content-padding-medium: 24px;
2395
2402
  --wds-card-content-paddings-horizontal: 24px;
@@ -2411,8 +2418,13 @@
2411
2418
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2412
2419
  --wds-card-gallery-item-title-font-line-height-small: 20px;
2413
2420
  --wds-card-gallery-item-title-font-size-medium: 14px;
2421
+ --wds-card-header-divider-width: 0px;
2414
2422
  --wds-card-header-padding-horizontal: 24px;
2415
2423
  --wds-card-header-padding-vertical: 16px;
2424
+ --wds-card-header-title-subtitle-gap: 0px;
2425
+ --wds-card-subtitle-color: #42454c;
2426
+ --wds-card-subtitle-font-size: 16px;
2427
+ --wds-card-subtitle-line-height: 24px;
2416
2428
  --wds-card-tab-padding-horizontal-medium: 20px;
2417
2429
  --wds-card-tab-padding-horizontal-small: 20px;
2418
2430
  --wds-card-tab-padding-vertical-medium: 16px;
package/studio/component.st.css CHANGED
@@ -226,6 +226,7 @@
226
226
  @property st-global(--wds-button-text-standard-primary);
227
227
  @property st-global(--wds-button-text-standard-primary-hover);
228
228
  @property st-global(--wds-card-border);
229
+ @property st-global(--wds-card-border-radius);
229
230
  @property st-global(--wds-card-content-padding-large);
230
231
  @property st-global(--wds-card-content-padding-medium);
231
232
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -247,8 +248,13 @@
247
248
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
248
249
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
249
250
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
251
+ @property st-global(--wds-card-header-divider-width);
250
252
  @property st-global(--wds-card-header-padding-horizontal);
251
253
  @property st-global(--wds-card-header-padding-vertical);
254
+ @property st-global(--wds-card-header-title-subtitle-gap);
255
+ @property st-global(--wds-card-subtitle-color);
256
+ @property st-global(--wds-card-subtitle-font-size);
257
+ @property st-global(--wds-card-subtitle-line-height);
252
258
  @property st-global(--wds-card-tab-padding-horizontal-medium);
253
259
  @property st-global(--wds-card-tab-padding-horizontal-small);
254
260
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -1622,6 +1628,7 @@
1622
1628
  --wds-button-text-standard-primary: #131720;
1623
1629
  --wds-button-text-standard-primary-hover: #131720;
1624
1630
  --wds-card-border: 4px;
1631
+ --wds-card-border-radius: 4px;
1625
1632
  --wds-card-content-padding-large: 36px;
1626
1633
  --wds-card-content-padding-medium: 24px;
1627
1634
  --wds-card-content-paddings-horizontal: 24px;
@@ -1643,8 +1650,13 @@
1643
1650
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
1644
1651
  --wds-card-gallery-item-title-font-line-height-small: 20px;
1645
1652
  --wds-card-gallery-item-title-font-size-medium: 14px;
1653
+ --wds-card-header-divider-width: 0px;
1646
1654
  --wds-card-header-padding-horizontal: 24px;
1647
1655
  --wds-card-header-padding-vertical: 16px;
1656
+ --wds-card-header-title-subtitle-gap: 0px;
1657
+ --wds-card-subtitle-color: #42454c;
1658
+ --wds-card-subtitle-font-size: 16px;
1659
+ --wds-card-subtitle-line-height: 24px;
1648
1660
  --wds-card-tab-padding-horizontal-medium: 20px;
1649
1661
  --wds-card-tab-padding-horizontal-small: 20px;
1650
1662
  --wds-card-tab-padding-vertical-medium: 16px;
package/wixel/all.css CHANGED
@@ -112,14 +112,14 @@
112
112
  --wds-color-fill-social-xcorp-disabled: #bebebe;
113
113
  --wds-color-fill-social-xcorp-active: #101419;
114
114
  --wds-color-fill-social-xcorp: #101419;
115
- --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
116
- --wds-color-fill-social-tiktok-disabled: #bebebe;
117
- --wds-color-fill-social-tiktok-active: #010101;
118
- --wds-color-fill-social-tiktok: #010101;
119
115
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, 0.8000);
120
116
  --wds-color-fill-social-twitter-disabled: #bebebe;
121
117
  --wds-color-fill-social-twitter-active: #1da1f2;
122
118
  --wds-color-fill-social-twitter: #1da1f2;
119
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
120
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
121
+ --wds-color-fill-social-tiktok-active: #010101;
122
+ --wds-color-fill-social-tiktok: #010101;
123
123
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
124
124
  --wds-color-fill-social-pinterest-disabled: #bebebe;
125
125
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1362,8 +1362,10 @@
1362
1362
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1363
1363
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1364
1364
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1365
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1365
1366
  --wds-card-header-padding-vertical: var(--wds-space-400);
1366
1367
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1368
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1367
1369
  --wds-card-content-paddings-vertical: var(--wds-space-600);
1368
1370
  --wds-card-content-paddings-horizontal: var(--wds-space-600);
1369
1371
  --wds-card-content-padding-medium: var(--wds-space-600);
@@ -1889,6 +1891,9 @@
1889
1891
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1890
1892
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1891
1893
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
1894
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1895
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1896
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1892
1897
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1893
1898
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1894
1899
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2052,6 +2057,7 @@
2052
2057
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2053
2058
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2054
2059
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2060
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2055
2061
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
2056
2062
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
2057
2063
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-small);
package/wixel/all.scss CHANGED
@@ -1340,8 +1340,10 @@
1340
1340
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1341
1341
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1342
1342
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1343
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1343
1344
  --wds-card-header-padding-vertical: var(--wds-space-400);
1344
1345
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1346
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1345
1347
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-400);
1346
1348
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1347
1349
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1886,9 +1888,12 @@
1886
1888
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1887
1889
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1888
1890
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
1891
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1892
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1889
1893
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1890
1894
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1891
1895
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
1896
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1892
1897
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1893
1898
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1894
1899
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2050,6 +2055,7 @@
2050
2055
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2051
2056
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2052
2057
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2058
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2053
2059
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2054
2060
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2055
2061
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
package/wixel/all.st.css CHANGED
@@ -264,6 +264,7 @@
264
264
  @property st-global(--wds-button-text-standard-primary);
265
265
  @property st-global(--wds-button-text-standard-primary-hover);
266
266
  @property st-global(--wds-card-border);
267
+ @property st-global(--wds-card-border-radius);
267
268
  @property st-global(--wds-card-content-padding-large);
268
269
  @property st-global(--wds-card-content-padding-medium);
269
270
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -285,8 +286,13 @@
285
286
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
286
287
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
287
288
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
289
+ @property st-global(--wds-card-header-divider-width);
288
290
  @property st-global(--wds-card-header-padding-horizontal);
289
291
  @property st-global(--wds-card-header-padding-vertical);
292
+ @property st-global(--wds-card-header-title-subtitle-gap);
293
+ @property st-global(--wds-card-subtitle-color);
294
+ @property st-global(--wds-card-subtitle-font-size);
295
+ @property st-global(--wds-card-subtitle-line-height);
290
296
  @property st-global(--wds-card-tab-padding-horizontal-medium);
291
297
  @property st-global(--wds-card-tab-padding-horizontal-small);
292
298
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -2331,6 +2337,7 @@
2331
2337
  --wds-button-text-standard-primary: #000624;
2332
2338
  --wds-button-text-standard-primary-hover: #000624;
2333
2339
  --wds-card-border: 4px;
2340
+ --wds-card-border-radius: 12px;
2334
2341
  --wds-card-content-padding-large: 24px;
2335
2342
  --wds-card-content-padding-medium: 24px;
2336
2343
  --wds-card-content-paddings-horizontal: 24px;
@@ -2352,8 +2359,13 @@
2352
2359
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2353
2360
  --wds-card-gallery-item-title-font-line-height-small: 20px;
2354
2361
  --wds-card-gallery-item-title-font-size-medium: 14px;
2362
+ --wds-card-header-divider-width: 0px;
2355
2363
  --wds-card-header-padding-horizontal: 24px;
2356
2364
  --wds-card-header-padding-vertical: 16px;
2365
+ --wds-card-header-title-subtitle-gap: 0px;
2366
+ --wds-card-subtitle-color: #595d70;
2367
+ --wds-card-subtitle-font-size: 16px;
2368
+ --wds-card-subtitle-line-height: 24px;
2357
2369
  --wds-card-tab-padding-horizontal-medium: 20px;
2358
2370
  --wds-card-tab-padding-horizontal-small: 20px;
2359
2371
  --wds-card-tab-padding-vertical-medium: 16px;
package/wixel/component.st.css CHANGED
@@ -226,6 +226,7 @@
226
226
  @property st-global(--wds-button-text-standard-primary);
227
227
  @property st-global(--wds-button-text-standard-primary-hover);
228
228
  @property st-global(--wds-card-border);
229
+ @property st-global(--wds-card-border-radius);
229
230
  @property st-global(--wds-card-content-padding-large);
230
231
  @property st-global(--wds-card-content-padding-medium);
231
232
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -247,8 +248,13 @@
247
248
  @property st-global(--wds-card-gallery-item-title-font-line-height-medium);
248
249
  @property st-global(--wds-card-gallery-item-title-font-line-height-small);
249
250
  @property st-global(--wds-card-gallery-item-title-font-size-medium);
251
+ @property st-global(--wds-card-header-divider-width);
250
252
  @property st-global(--wds-card-header-padding-horizontal);
251
253
  @property st-global(--wds-card-header-padding-vertical);
254
+ @property st-global(--wds-card-header-title-subtitle-gap);
255
+ @property st-global(--wds-card-subtitle-color);
256
+ @property st-global(--wds-card-subtitle-font-size);
257
+ @property st-global(--wds-card-subtitle-line-height);
252
258
  @property st-global(--wds-card-tab-padding-horizontal-medium);
253
259
  @property st-global(--wds-card-tab-padding-horizontal-small);
254
260
  @property st-global(--wds-card-tab-padding-vertical-medium);
@@ -1588,6 +1594,7 @@
1588
1594
  --wds-button-text-standard-primary: #000624;
1589
1595
  --wds-button-text-standard-primary-hover: #000624;
1590
1596
  --wds-card-border: 4px;
1597
+ --wds-card-border-radius: 12px;
1591
1598
  --wds-card-content-padding-large: 24px;
1592
1599
  --wds-card-content-padding-medium: 24px;
1593
1600
  --wds-card-content-paddings-horizontal: 24px;
@@ -1609,8 +1616,13 @@
1609
1616
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
1610
1617
  --wds-card-gallery-item-title-font-line-height-small: 20px;
1611
1618
  --wds-card-gallery-item-title-font-size-medium: 14px;
1619
+ --wds-card-header-divider-width: 0px;
1612
1620
  --wds-card-header-padding-horizontal: 24px;
1613
1621
  --wds-card-header-padding-vertical: 16px;
1622
+ --wds-card-header-title-subtitle-gap: 0px;
1623
+ --wds-card-subtitle-color: #595d70;
1624
+ --wds-card-subtitle-font-size: 16px;
1625
+ --wds-card-subtitle-line-height: 24px;
1614
1626
  --wds-card-tab-padding-horizontal-medium: 20px;
1615
1627
  --wds-card-tab-padding-horizontal-small: 20px;
1616
1628
  --wds-card-tab-padding-vertical-medium: 16px;