@wix/design-system-tokens 1.200.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 (28) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/all.css +10 -0
  3. package/all.scss +10 -0
  4. package/all.st.css +20 -0
  5. package/component.st.css +12 -0
  6. package/odeditor/all.css +15 -2
  7. package/odeditor/all.scss +15 -2
  8. package/odeditor/all.st.css +28 -2
  9. package/odeditor/component.st.css +17 -1
  10. package/odeditor/foundation.st.css +2 -0
  11. package/odeditor/semantic.st.css +9 -1
  12. package/odeditor-dark/all.css +12 -0
  13. package/odeditor-dark/all.scss +12 -0
  14. package/odeditor-dark/all.st.css +24 -0
  15. package/odeditor-dark/component.st.css +16 -0
  16. package/odeditor-dark/semantic.st.css +8 -0
  17. package/package.json +2 -2
  18. package/semantic.st.css +8 -0
  19. package/studio/all.css +10 -0
  20. package/studio/all.scss +10 -0
  21. package/studio/all.st.css +20 -0
  22. package/studio/component.st.css +12 -0
  23. package/studio/semantic.st.css +8 -0
  24. package/wixel/all.css +10 -0
  25. package/wixel/all.scss +10 -0
  26. package/wixel/all.st.css +20 -0
  27. package/wixel/component.st.css +12 -0
  28. package/wixel/semantic.st.css +8 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
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
+
7
+ ## 1.201.0 - 2026-06-10
8
+
9
+ ### Features
10
+
11
+ - feat(SocialButton): add tiktok icon [16354](https://github.com/wix-private/wix-design-systems/pull/16354)
12
+
1
13
  ## 1.198.0 - 2026-06-04
2
14
 
3
15
  ### Bug Fixes
package/all.css CHANGED
@@ -97,6 +97,9 @@
97
97
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, .8);
98
98
  --wds-color-fill-social-twitter-active: #1da1f2;
99
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;
100
103
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
101
104
  --wds-color-fill-social-pinterest-active: #e60019;
102
105
  --wds-color-fill-social-pinterest: #e60019;
@@ -620,6 +623,7 @@
620
623
  --wds-color-fill-social-youtube-disabled: var(--wds-color-black-100-transparent-30);
621
624
  --wds-color-fill-social-xcorp-disabled: var(--wds-color-black-100-transparent-30);
622
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);
623
627
  --wds-color-fill-social-pinterest-disabled: var(--wds-color-black-100-transparent-30);
624
628
  --wds-color-fill-social-linkedin-disabled: var(--wds-color-black-100-transparent-30);
625
629
  --wds-color-fill-social-instagram-disabled: var(--wds-color-black-100-transparent-30);
@@ -1353,8 +1357,10 @@
1353
1357
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1354
1358
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
1355
1359
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-300);
1360
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1356
1361
  --wds-card-header-padding-vertical: var(--wds-space-300);
1357
1362
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1363
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1358
1364
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1359
1365
  --wds-card-content-paddings-horizontal: var(--wds-space-400);
1360
1366
  --wds-card-content-padding-medium: var(--wds-space-400);
@@ -1945,6 +1951,9 @@
1945
1951
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1946
1952
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1947
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);
1948
1957
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1949
1958
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1950
1959
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2115,6 +2124,7 @@
2115
2124
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2116
2125
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2117
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);
2118
2128
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2119
2129
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-small);
2120
2130
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/all.scss CHANGED
@@ -224,6 +224,9 @@
224
224
  --wds-color-fill-social-twitter-hover: rgba(29, 161, 242, .8);
225
225
  --wds-color-fill-social-twitter-active: #1da1f2;
226
226
  --wds-color-fill-social-twitter: #1da1f2;
227
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
228
+ --wds-color-fill-social-tiktok-active: #010101;
229
+ --wds-color-fill-social-tiktok: #010101;
227
230
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
228
231
  --wds-color-fill-social-pinterest-active: #e60019;
229
232
  --wds-color-fill-social-pinterest: #e60019;
@@ -1148,6 +1151,7 @@
1148
1151
  --wds-color-fill-social-youtube-disabled: var(--wds-color-black-100-transparent-30);
1149
1152
  --wds-color-fill-social-xcorp-disabled: var(--wds-color-black-100-transparent-30);
1150
1153
  --wds-color-fill-social-twitter-disabled: var(--wds-color-black-100-transparent-30);
1154
+ --wds-color-fill-social-tiktok-disabled: var(--wds-color-black-100-transparent-30);
1151
1155
  --wds-color-fill-social-pinterest-disabled: var(--wds-color-black-100-transparent-30);
1152
1156
  --wds-color-fill-social-linkedin-disabled: var(--wds-color-black-100-transparent-30);
1153
1157
  --wds-color-fill-social-instagram-disabled: var(--wds-color-black-100-transparent-30);
@@ -1330,8 +1334,10 @@
1330
1334
  --wds-card-tab-padding-vertical-medium: var(--wds-space-300);
1331
1335
  --wds-card-tab-padding-horizontal-small: var(--wds-space-300);
1332
1336
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-300);
1337
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1333
1338
  --wds-card-header-padding-vertical: var(--wds-space-300);
1334
1339
  --wds-card-header-padding-horizontal: var(--wds-space-400);
1340
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1335
1341
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-200);
1336
1342
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-300);
1337
1343
  --wds-card-gallery-item-padding-right-small: var(--wds-space-300);
@@ -1941,10 +1947,13 @@
1941
1947
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1942
1948
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1943
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);
1944
1952
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-heading-4);
1945
1953
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1946
1954
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1947
1955
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1956
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1948
1957
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1949
1958
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1950
1959
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2113,6 +2122,7 @@
2113
2122
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-small);
2114
2123
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2115
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);
2116
2126
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2117
2127
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-heading-4);
2118
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);
@@ -596,6 +602,10 @@
596
602
  @property st-global(--wds-color-fill-social-pinterest-active);
597
603
  @property st-global(--wds-color-fill-social-pinterest-disabled);
598
604
  @property st-global(--wds-color-fill-social-pinterest-hover);
605
+ @property st-global(--wds-color-fill-social-tiktok);
606
+ @property st-global(--wds-color-fill-social-tiktok-active);
607
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
608
+ @property st-global(--wds-color-fill-social-tiktok-hover);
599
609
  @property st-global(--wds-color-fill-social-twitter);
600
610
  @property st-global(--wds-color-fill-social-twitter-active);
601
611
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -2397,6 +2407,7 @@
2397
2407
  --wds-button-text-standard-primary: #000624;
2398
2408
  --wds-button-text-standard-primary-hover: #000624;
2399
2409
  --wds-card-border: 8px;
2410
+ --wds-card-border-radius: 8px;
2400
2411
  --wds-card-content-padding-large: 36px;
2401
2412
  --wds-card-content-padding-medium: 24px;
2402
2413
  --wds-card-content-paddings-horizontal: 24px;
@@ -2419,8 +2430,13 @@
2419
2430
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2420
2431
  --wds-card-gallery-item-title-font-line-height-small: 18px;
2421
2432
  --wds-card-gallery-item-title-font-size-medium: 18px;
2433
+ --wds-card-header-divider-width: 0px;
2422
2434
  --wds-card-header-padding-horizontal: 24px;
2423
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;
2424
2440
  --wds-card-tab-padding-horizontal-medium: 18px;
2425
2441
  --wds-card-tab-padding-horizontal-small: 18px;
2426
2442
  --wds-card-tab-padding-vertical-medium: 18px;
@@ -2726,6 +2742,10 @@
2726
2742
  --wds-color-fill-social-pinterest-active: #e60019;
2727
2743
  --wds-color-fill-social-pinterest-disabled: rgba(0, 6, 36, .3);
2728
2744
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
2745
+ --wds-color-fill-social-tiktok: #010101;
2746
+ --wds-color-fill-social-tiktok-active: #010101;
2747
+ --wds-color-fill-social-tiktok-disabled: rgba(0, 6, 36, .3);
2748
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
2729
2749
  --wds-color-fill-social-twitter: #1da1f2;
2730
2750
  --wds-color-fill-social-twitter-active: #1da1f2;
2731
2751
  --wds-color-fill-social-twitter-disabled: rgba(0, 6, 36, .3);
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
@@ -117,6 +117,10 @@
117
117
  --wds-color-fill-social-twitter-disabled: #bebebe;
118
118
  --wds-color-fill-social-twitter-active: #1da1f2;
119
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;
120
124
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
121
125
  --wds-color-fill-social-pinterest-disabled: #bebebe;
122
126
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -267,6 +271,7 @@
267
271
  --wds-border-width-0: 0px;
268
272
  --wds-border-radius-full: 1000px;
269
273
  --wds-border-radius-1200: 24px;
274
+ --wds-border-radius-800: 16px;
270
275
  --wds-border-radius-600: 12px;
271
276
  --wds-border-radius-500: 10px;
272
277
  --wds-border-radius-400: 8px;
@@ -366,6 +371,7 @@
366
371
  --wds-composer-sidebar-end-max-width: 240px;
367
372
  --wds-composer-sidebar-bottom-width: 88px;
368
373
  --wds-color-picker-width: 236px;
374
+ --wds-card-subtitle-color: #44485f;
369
375
  --wds-avatar-group-gap-condensed: -2px;
370
376
  --wds-angle-input-knob-size: 6px;
371
377
  --wds-angle-input-knob-border: 2px;
@@ -410,6 +416,7 @@
410
416
  --wds-space-padding-horizontal-large: var(--wds-space-400);
411
417
  --wds-space-mobile-viewport-spacing: var(--wds-space-800);
412
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);
413
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);
414
421
  --wds-shadow-focus-warning: 0 0 0 var(--wds-color-yellow-400);
415
422
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
@@ -1419,10 +1426,16 @@
1419
1426
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1420
1427
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1421
1428
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1422
- --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);
1423
1432
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1433
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1424
1434
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1425
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);
1426
1439
  --wds-button-size-x-tiny: var(--wds-space-475);
1427
1440
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1428
1441
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1544,7 +1557,6 @@
1544
1557
  --wds-accordion-inner-content-padding-top: var(--wds-space-100);
1545
1558
  --wds-accordion-inner-content-fill: var(--wds-color-white);
1546
1559
  --wds-accordion-border-radius: var(--wds-border-radius-0);
1547
- --wds-shadow-surface-raised: var(--wds-shadow-200);
1548
1560
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1549
1561
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1550
1562
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1939,6 +1951,7 @@
1939
1951
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1940
1952
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1941
1953
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1954
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
1942
1955
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1943
1956
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1944
1957
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
package/odeditor/all.scss CHANGED
@@ -259,6 +259,10 @@
259
259
  --wds-color-fill-social-twitter-disabled: #bebebe;
260
260
  --wds-color-fill-social-twitter-active: #1da1f2;
261
261
  --wds-color-fill-social-twitter: #1da1f2;
262
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
263
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
264
+ --wds-color-fill-social-tiktok-active: #010101;
265
+ --wds-color-fill-social-tiktok: #010101;
262
266
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
263
267
  --wds-color-fill-social-pinterest-disabled: #bebebe;
264
268
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -337,6 +341,7 @@
337
341
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
338
342
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
339
343
  --wds-color-black-100: #151414;
344
+ --wds-card-subtitle-color: #44485f;
340
345
  --wds-breakpoint-x-large: 1572px;
341
346
  --wds-breakpoint-small: 490px;
342
347
  --wds-breakpoint-medium: 768px;
@@ -348,6 +353,7 @@
348
353
  --wds-border-width-0: 0px;
349
354
  --wds-border-radius-full: 1000px;
350
355
  --wds-border-radius-1200: 24px;
356
+ --wds-border-radius-800: 16px;
351
357
  --wds-border-radius-600: 12px;
352
358
  --wds-border-radius-500: 10px;
353
359
  --wds-border-radius-400: 8px;
@@ -666,6 +672,7 @@
666
672
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-25);
667
673
  --wds-shadow-x-primary-modal: var(--wds-shadow-x-50);
668
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);
669
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);
670
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;
671
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;
@@ -1398,8 +1405,11 @@
1398
1405
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1399
1406
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1400
1407
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1401
- --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);
1402
1411
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1412
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1403
1413
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1404
1414
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1405
1415
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1412,6 +1422,9 @@
1412
1422
  --wds-card-gallery-item-buttons-gap: var(--wds-space-200);
1413
1423
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1414
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);
1415
1428
  --wds-button-size-x-tiny: var(--wds-space-475);
1416
1429
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1417
1430
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1667,7 +1680,6 @@
1667
1680
  --wds-side-panel-subtitle-font-size: var(--wds-font-size-body-medium);
1668
1681
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1669
1682
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
1670
- --wds-shadow-surface-raised: var(--wds-shadow-200);
1671
1683
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1672
1684
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1673
1685
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1935,6 +1947,7 @@
1935
1947
  --wds-checkbox-border-disabled: var(--wds-color-border-transparent-primary);
1936
1948
  --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1937
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);
1938
1951
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1939
1952
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1940
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);
@@ -581,6 +590,10 @@
581
590
  @property st-global(--wds-color-fill-social-pinterest-active);
582
591
  @property st-global(--wds-color-fill-social-pinterest-disabled);
583
592
  @property st-global(--wds-color-fill-social-pinterest-hover);
593
+ @property st-global(--wds-color-fill-social-tiktok);
594
+ @property st-global(--wds-color-fill-social-tiktok-active);
595
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
596
+ @property st-global(--wds-color-fill-social-tiktok-hover);
584
597
  @property st-global(--wds-color-fill-social-twitter);
585
598
  @property st-global(--wds-color-fill-social-twitter-active);
586
599
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -2189,6 +2202,7 @@
2189
2202
  --wds-border-radius-400: 8px;
2190
2203
  --wds-border-radius-500: 10px;
2191
2204
  --wds-border-radius-600: 12px;
2205
+ --wds-border-radius-800: 16px;
2192
2206
  --wds-border-radius-1200: 24px;
2193
2207
  --wds-border-radius-full: 1000px;
2194
2208
  --wds-border-radius-surface-default: 12px;
@@ -2338,6 +2352,9 @@
2338
2352
  --wds-button-size-tiny: 24px;
2339
2353
  --wds-button-size-tiny-screen-small: 32px;
2340
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;
2341
2358
  --wds-card-content-paddings-horizontal: 12px;
2342
2359
  --wds-card-content-paddings-vertical: 12px;
2343
2360
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -2356,8 +2373,13 @@
2356
2373
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2357
2374
  --wds-card-gallery-item-title-font-line-height-small: 16px;
2358
2375
  --wds-card-gallery-item-title-font-size-medium: 16px;
2376
+ --wds-card-header-divider-width: 0px;
2359
2377
  --wds-card-header-padding-horizontal: 24px;
2360
- --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;
2361
2383
  --wds-card-tab-padding-horizontal-medium: 20px;
2362
2384
  --wds-card-tab-padding-horizontal-small: 20px;
2363
2385
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2660,6 +2682,10 @@
2660
2682
  --wds-color-fill-social-pinterest-active: #e60019;
2661
2683
  --wds-color-fill-social-pinterest-disabled: #bebebe;
2662
2684
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
2685
+ --wds-color-fill-social-tiktok: #010101;
2686
+ --wds-color-fill-social-tiktok-active: #010101;
2687
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
2688
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
2663
2689
  --wds-color-fill-social-twitter: #1da1f2;
2664
2690
  --wds-color-fill-social-twitter-active: #1da1f2;
2665
2691
  --wds-color-fill-social-twitter-disabled: #bebebe;
@@ -3612,7 +3638,7 @@
3612
3638
  --wds-shadow-surface-modal: 2px 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
3613
3639
  --wds-shadow-surface-overlay: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
3614
3640
  --wds-shadow-surface-overlay-dark: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
3615
- --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);
3616
3642
  --wds-shadow-x-0: 0px;
3617
3643
  --wds-shadow-x-25: 1px;
3618
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
@@ -204,6 +204,10 @@
204
204
  @property st-global(--wds-color-fill-social-pinterest-active);
205
205
  @property st-global(--wds-color-fill-social-pinterest-disabled);
206
206
  @property st-global(--wds-color-fill-social-pinterest-hover);
207
+ @property st-global(--wds-color-fill-social-tiktok);
208
+ @property st-global(--wds-color-fill-social-tiktok-active);
209
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
210
+ @property st-global(--wds-color-fill-social-tiktok-hover);
207
211
  @property st-global(--wds-color-fill-social-twitter);
208
212
  @property st-global(--wds-color-fill-social-twitter-active);
209
213
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -702,6 +706,10 @@
702
706
  --wds-color-fill-social-pinterest-active: #e60019;
703
707
  --wds-color-fill-social-pinterest-disabled: #bebebe;
704
708
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
709
+ --wds-color-fill-social-tiktok: #010101;
710
+ --wds-color-fill-social-tiktok-active: #010101;
711
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
712
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
705
713
  --wds-color-fill-social-twitter: #1da1f2;
706
714
  --wds-color-fill-social-twitter-active: #1da1f2;
707
715
  --wds-color-fill-social-twitter-disabled: #bebebe;
@@ -955,7 +963,7 @@
955
963
  --wds-shadow-surface-modal: 2px 20px 30px rgba(19, 23, 32, .1), 0 0px 0px rgba(19, 23, 32, 0);
956
964
  --wds-shadow-surface-overlay: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
957
965
  --wds-shadow-surface-overlay-dark: 0 12px 30px 0 rgba(19, 23, 32, .1), 0 0px 0px 0 rgba(19, 23, 32, 0);
958
- --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);
959
967
  --wds-shadow-x-input: 1px;
960
968
  --wds-shadow-x-primary-modal: 2px;
961
969
  --wds-shadow-x-primary-toggle-button: 1px;
package/odeditor-dark/all.css CHANGED
@@ -121,6 +121,10 @@
121
121
  --wds-color-fill-social-twitter-disabled: #bebebe;
122
122
  --wds-color-fill-social-twitter-active: #1da1f2;
123
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;
124
128
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
125
129
  --wds-color-fill-social-pinterest-disabled: #bebebe;
126
130
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1443,10 +1447,14 @@
1443
1447
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1444
1448
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1445
1449
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1450
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1446
1451
  --wds-card-header-padding-vertical: var(--wds-space-400);
1447
1452
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1453
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1448
1454
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1449
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);
1450
1458
  --wds-button-size-x-tiny: var(--wds-space-475);
1451
1459
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1452
1460
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1954,6 +1962,9 @@
1954
1962
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1955
1963
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1956
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);
1957
1968
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1958
1969
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1959
1970
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
@@ -2074,6 +2085,7 @@
2074
2085
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-small);
2075
2086
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
2076
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);
2077
2089
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2078
2090
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
2079
2091
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-medium);
package/odeditor-dark/all.scss CHANGED
@@ -272,6 +272,10 @@
272
272
  --wds-color-fill-social-twitter-disabled: #bebebe;
273
273
  --wds-color-fill-social-twitter-active: #1da1f2;
274
274
  --wds-color-fill-social-twitter: #1da1f2;
275
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
276
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
277
+ --wds-color-fill-social-tiktok-active: #010101;
278
+ --wds-color-fill-social-tiktok: #010101;
275
279
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
276
280
  --wds-color-fill-social-pinterest-disabled: #bebebe;
277
281
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1422,8 +1426,10 @@
1422
1426
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1423
1427
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1424
1428
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1429
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1425
1430
  --wds-card-header-padding-vertical: var(--wds-space-400);
1426
1431
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1432
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1427
1433
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1428
1434
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1429
1435
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1436,6 +1442,8 @@
1436
1442
  --wds-card-gallery-item-buttons-gap: var(--wds-space-200);
1437
1443
  --wds-card-content-paddings-vertical: var(--wds-space-300);
1438
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);
1439
1447
  --wds-button-size-x-tiny: var(--wds-space-475);
1440
1448
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1441
1449
  --wds-button-size-tiny: var(--wds-space-600);
@@ -1950,10 +1958,13 @@
1950
1958
  --wds-checkbox-border-disabled: var(--wds-color-border-transparent-primary);
1951
1959
  --wds-checkbox-border-active: var(--wds-color-border-standard-primary-active);
1952
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);
1953
1963
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-medium);
1954
1964
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-tiny);
1955
1965
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1956
1966
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1967
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1957
1968
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
1958
1969
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
1959
1970
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
@@ -2072,6 +2083,7 @@
2072
2083
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2073
2084
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-tiny);
2074
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);
2075
2087
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
2076
2088
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2077
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);
@@ -586,6 +594,10 @@
586
594
  @property st-global(--wds-color-fill-social-pinterest-active);
587
595
  @property st-global(--wds-color-fill-social-pinterest-disabled);
588
596
  @property st-global(--wds-color-fill-social-pinterest-hover);
597
+ @property st-global(--wds-color-fill-social-tiktok);
598
+ @property st-global(--wds-color-fill-social-tiktok-active);
599
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
600
+ @property st-global(--wds-color-fill-social-tiktok-hover);
589
601
  @property st-global(--wds-color-fill-social-twitter);
590
602
  @property st-global(--wds-color-fill-social-twitter-active);
591
603
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -2352,6 +2364,9 @@
2352
2364
  --wds-button-size-tiny: 24px;
2353
2365
  --wds-button-size-tiny-screen-small: 32px;
2354
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;
2355
2370
  --wds-card-content-paddings-horizontal: 12px;
2356
2371
  --wds-card-content-paddings-vertical: 12px;
2357
2372
  --wds-card-gallery-item-buttons-gap: 8px;
@@ -2370,8 +2385,13 @@
2370
2385
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2371
2386
  --wds-card-gallery-item-title-font-line-height-small: 16px;
2372
2387
  --wds-card-gallery-item-title-font-size-medium: 16px;
2388
+ --wds-card-header-divider-width: 0px;
2373
2389
  --wds-card-header-padding-horizontal: 24px;
2374
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;
2375
2395
  --wds-card-tab-padding-horizontal-medium: 20px;
2376
2396
  --wds-card-tab-padding-horizontal-small: 20px;
2377
2397
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2675,6 +2695,10 @@
2675
2695
  --wds-color-fill-social-pinterest-active: #e60019;
2676
2696
  --wds-color-fill-social-pinterest-disabled: #bebebe;
2677
2697
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
2698
+ --wds-color-fill-social-tiktok: #010101;
2699
+ --wds-color-fill-social-tiktok-active: #010101;
2700
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
2701
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
2678
2702
  --wds-color-fill-social-twitter: #1da1f2;
2679
2703
  --wds-color-fill-social-twitter-active: #1da1f2;
2680
2704
  --wds-color-fill-social-twitter-disabled: #bebebe;
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/odeditor-dark/semantic.st.css CHANGED
@@ -204,6 +204,10 @@
204
204
  @property st-global(--wds-color-fill-social-pinterest-active);
205
205
  @property st-global(--wds-color-fill-social-pinterest-disabled);
206
206
  @property st-global(--wds-color-fill-social-pinterest-hover);
207
+ @property st-global(--wds-color-fill-social-tiktok);
208
+ @property st-global(--wds-color-fill-social-tiktok-active);
209
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
210
+ @property st-global(--wds-color-fill-social-tiktok-hover);
207
211
  @property st-global(--wds-color-fill-social-twitter);
208
212
  @property st-global(--wds-color-fill-social-twitter-active);
209
213
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -702,6 +706,10 @@
702
706
  --wds-color-fill-social-pinterest-active: #e60019;
703
707
  --wds-color-fill-social-pinterest-disabled: #bebebe;
704
708
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
709
+ --wds-color-fill-social-tiktok: #010101;
710
+ --wds-color-fill-social-tiktok-active: #010101;
711
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
712
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
705
713
  --wds-color-fill-social-twitter: #1da1f2;
706
714
  --wds-color-fill-social-twitter-active: #1da1f2;
707
715
  --wds-color-fill-social-twitter-disabled: #bebebe;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.200.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": "beec9646efe73b5499bcd9f91cf8b7b99433242f917d3cb4d386a6c5"
35
+ "falconPackageHash": "600306c206d6d3954bf671195508d3fb78110776f2648926c51c2c9d"
36
36
  }
package/semantic.st.css CHANGED
@@ -204,6 +204,10 @@
204
204
  @property st-global(--wds-color-fill-social-pinterest-active);
205
205
  @property st-global(--wds-color-fill-social-pinterest-disabled);
206
206
  @property st-global(--wds-color-fill-social-pinterest-hover);
207
+ @property st-global(--wds-color-fill-social-tiktok);
208
+ @property st-global(--wds-color-fill-social-tiktok-active);
209
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
210
+ @property st-global(--wds-color-fill-social-tiktok-hover);
207
211
  @property st-global(--wds-color-fill-social-twitter);
208
212
  @property st-global(--wds-color-fill-social-twitter-active);
209
213
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -699,6 +703,10 @@
699
703
  --wds-color-fill-social-pinterest-active: #e60019;
700
704
  --wds-color-fill-social-pinterest-disabled: rgba(0, 6, 36, .3);
701
705
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
706
+ --wds-color-fill-social-tiktok: #010101;
707
+ --wds-color-fill-social-tiktok-active: #010101;
708
+ --wds-color-fill-social-tiktok-disabled: rgba(0, 6, 36, .3);
709
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
702
710
  --wds-color-fill-social-twitter: #1da1f2;
703
711
  --wds-color-fill-social-twitter-active: #1da1f2;
704
712
  --wds-color-fill-social-twitter-disabled: rgba(0, 6, 36, .3);
package/studio/all.css CHANGED
@@ -123,6 +123,10 @@
123
123
  --wds-color-fill-social-twitter-disabled: #bebebe;
124
124
  --wds-color-fill-social-twitter-active: #1da1f2;
125
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;
126
130
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
127
131
  --wds-color-fill-social-pinterest-disabled: #bebebe;
128
132
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1418,8 +1422,10 @@
1418
1422
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1419
1423
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1420
1424
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1425
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1421
1426
  --wds-card-header-padding-vertical: var(--wds-space-400);
1422
1427
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1428
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1423
1429
  --wds-card-content-paddings-vertical: var(--wds-space-600);
1424
1430
  --wds-card-content-paddings-horizontal: var(--wds-space-600);
1425
1431
  --wds-card-content-padding-medium: var(--wds-space-600);
@@ -1947,6 +1953,9 @@
1947
1953
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1948
1954
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1949
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);
1950
1959
  --wds-button-text-hover: var(--wds-color-text-primary);
1951
1960
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
1952
1961
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
@@ -2110,6 +2119,7 @@
2110
2119
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2111
2120
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2112
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);
2113
2123
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
2114
2124
  --wds-button-font-line-height-large: var(--wds-font-line-height-body-medium);
2115
2125
  --wds-button-font-line-height-extra-large: var(--wds-font-line-height-body-medium);
package/studio/all.scss CHANGED
@@ -252,6 +252,10 @@
252
252
  --wds-color-fill-social-twitter-disabled: #bebebe;
253
253
  --wds-color-fill-social-twitter-active: #1da1f2;
254
254
  --wds-color-fill-social-twitter: #1da1f2;
255
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
256
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
257
+ --wds-color-fill-social-tiktok-active: #010101;
258
+ --wds-color-fill-social-tiktok: #010101;
255
259
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
256
260
  --wds-color-fill-social-pinterest-disabled: #bebebe;
257
261
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1396,8 +1400,10 @@
1396
1400
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1397
1401
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1398
1402
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1403
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1399
1404
  --wds-card-header-padding-vertical: var(--wds-space-400);
1400
1405
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1406
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1401
1407
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-300);
1402
1408
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1403
1409
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1943,10 +1949,13 @@
1943
1949
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1944
1950
  --wds-checkbox-border: var(--wds-color-border-dark-primary);
1945
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);
1946
1954
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1947
1955
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1948
1956
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
1949
1957
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
1958
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1950
1959
  --wds-button-text-hover: var(--wds-color-text-primary);
1951
1960
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
1952
1961
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
@@ -2108,6 +2117,7 @@
2108
2117
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2109
2118
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2110
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);
2111
2121
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2112
2122
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2113
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);
@@ -592,6 +598,10 @@
592
598
  @property st-global(--wds-color-fill-social-pinterest-active);
593
599
  @property st-global(--wds-color-fill-social-pinterest-disabled);
594
600
  @property st-global(--wds-color-fill-social-pinterest-hover);
601
+ @property st-global(--wds-color-fill-social-tiktok);
602
+ @property st-global(--wds-color-fill-social-tiktok-active);
603
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
604
+ @property st-global(--wds-color-fill-social-tiktok-hover);
595
605
  @property st-global(--wds-color-fill-social-twitter);
596
606
  @property st-global(--wds-color-fill-social-twitter-active);
597
607
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -2386,6 +2396,7 @@
2386
2396
  --wds-button-text-standard-primary: #131720;
2387
2397
  --wds-button-text-standard-primary-hover: #131720;
2388
2398
  --wds-card-border: 4px;
2399
+ --wds-card-border-radius: 4px;
2389
2400
  --wds-card-content-padding-large: 36px;
2390
2401
  --wds-card-content-padding-medium: 24px;
2391
2402
  --wds-card-content-paddings-horizontal: 24px;
@@ -2407,8 +2418,13 @@
2407
2418
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2408
2419
  --wds-card-gallery-item-title-font-line-height-small: 20px;
2409
2420
  --wds-card-gallery-item-title-font-size-medium: 14px;
2421
+ --wds-card-header-divider-width: 0px;
2410
2422
  --wds-card-header-padding-horizontal: 24px;
2411
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;
2412
2428
  --wds-card-tab-padding-horizontal-medium: 20px;
2413
2429
  --wds-card-tab-padding-horizontal-small: 20px;
2414
2430
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2714,6 +2730,10 @@
2714
2730
  --wds-color-fill-social-pinterest-active: #e60019;
2715
2731
  --wds-color-fill-social-pinterest-disabled: #bebebe;
2716
2732
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
2733
+ --wds-color-fill-social-tiktok: #010101;
2734
+ --wds-color-fill-social-tiktok-active: #010101;
2735
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
2736
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
2717
2737
  --wds-color-fill-social-twitter: #1da1f2;
2718
2738
  --wds-color-fill-social-twitter-active: #1da1f2;
2719
2739
  --wds-color-fill-social-twitter-disabled: #bebebe;
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/studio/semantic.st.css CHANGED
@@ -204,6 +204,10 @@
204
204
  @property st-global(--wds-color-fill-social-pinterest-active);
205
205
  @property st-global(--wds-color-fill-social-pinterest-disabled);
206
206
  @property st-global(--wds-color-fill-social-pinterest-hover);
207
+ @property st-global(--wds-color-fill-social-tiktok);
208
+ @property st-global(--wds-color-fill-social-tiktok-active);
209
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
210
+ @property st-global(--wds-color-fill-social-tiktok-hover);
207
211
  @property st-global(--wds-color-fill-social-twitter);
208
212
  @property st-global(--wds-color-fill-social-twitter-active);
209
213
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -702,6 +706,10 @@
702
706
  --wds-color-fill-social-pinterest-active: #e60019;
703
707
  --wds-color-fill-social-pinterest-disabled: #bebebe;
704
708
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, .8);
709
+ --wds-color-fill-social-tiktok: #010101;
710
+ --wds-color-fill-social-tiktok-active: #010101;
711
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
712
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, .8);
705
713
  --wds-color-fill-social-twitter: #1da1f2;
706
714
  --wds-color-fill-social-twitter-active: #1da1f2;
707
715
  --wds-color-fill-social-twitter-disabled: #bebebe;
package/wixel/all.css CHANGED
@@ -116,6 +116,10 @@
116
116
  --wds-color-fill-social-twitter-disabled: #bebebe;
117
117
  --wds-color-fill-social-twitter-active: #1da1f2;
118
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;
119
123
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
120
124
  --wds-color-fill-social-pinterest-disabled: #bebebe;
121
125
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1358,8 +1362,10 @@
1358
1362
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1359
1363
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1360
1364
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1365
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1361
1366
  --wds-card-header-padding-vertical: var(--wds-space-400);
1362
1367
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1368
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1363
1369
  --wds-card-content-paddings-vertical: var(--wds-space-600);
1364
1370
  --wds-card-content-paddings-horizontal: var(--wds-space-600);
1365
1371
  --wds-card-content-padding-medium: var(--wds-space-600);
@@ -1885,6 +1891,9 @@
1885
1891
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1886
1892
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1887
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);
1888
1897
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1889
1898
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1890
1899
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2048,6 +2057,7 @@
2048
2057
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2049
2058
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2050
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);
2051
2061
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
2052
2062
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
2053
2063
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-small);
package/wixel/all.scss CHANGED
@@ -242,6 +242,10 @@
242
242
  --wds-color-fill-social-twitter-disabled: #bebebe;
243
243
  --wds-color-fill-social-twitter-active: #1da1f2;
244
244
  --wds-color-fill-social-twitter: #1da1f2;
245
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
246
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
247
+ --wds-color-fill-social-tiktok-active: #010101;
248
+ --wds-color-fill-social-tiktok: #010101;
245
249
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
246
250
  --wds-color-fill-social-pinterest-disabled: #bebebe;
247
251
  --wds-color-fill-social-pinterest-active: #e60019;
@@ -1336,8 +1340,10 @@
1336
1340
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1337
1341
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1338
1342
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1343
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1339
1344
  --wds-card-header-padding-vertical: var(--wds-space-400);
1340
1345
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1346
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1341
1347
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-400);
1342
1348
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1343
1349
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1882,9 +1888,12 @@
1882
1888
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1883
1889
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1884
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);
1885
1893
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1886
1894
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1887
1895
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
1896
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1888
1897
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1889
1898
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1890
1899
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2046,6 +2055,7 @@
2046
2055
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2047
2056
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2048
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);
2049
2059
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2050
2060
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2051
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);
@@ -575,6 +581,10 @@
575
581
  @property st-global(--wds-color-fill-social-pinterest-active);
576
582
  @property st-global(--wds-color-fill-social-pinterest-disabled);
577
583
  @property st-global(--wds-color-fill-social-pinterest-hover);
584
+ @property st-global(--wds-color-fill-social-tiktok);
585
+ @property st-global(--wds-color-fill-social-tiktok-active);
586
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
587
+ @property st-global(--wds-color-fill-social-tiktok-hover);
578
588
  @property st-global(--wds-color-fill-social-twitter);
579
589
  @property st-global(--wds-color-fill-social-twitter-active);
580
590
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -2327,6 +2337,7 @@
2327
2337
  --wds-button-text-standard-primary: #000624;
2328
2338
  --wds-button-text-standard-primary-hover: #000624;
2329
2339
  --wds-card-border: 4px;
2340
+ --wds-card-border-radius: 12px;
2330
2341
  --wds-card-content-padding-large: 24px;
2331
2342
  --wds-card-content-padding-medium: 24px;
2332
2343
  --wds-card-content-paddings-horizontal: 24px;
@@ -2348,8 +2359,13 @@
2348
2359
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2349
2360
  --wds-card-gallery-item-title-font-line-height-small: 20px;
2350
2361
  --wds-card-gallery-item-title-font-size-medium: 14px;
2362
+ --wds-card-header-divider-width: 0px;
2351
2363
  --wds-card-header-padding-horizontal: 24px;
2352
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;
2353
2369
  --wds-card-tab-padding-horizontal-medium: 20px;
2354
2370
  --wds-card-tab-padding-horizontal-small: 20px;
2355
2371
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2638,6 +2654,10 @@
2638
2654
  --wds-color-fill-social-pinterest-active: #e60019;
2639
2655
  --wds-color-fill-social-pinterest-disabled: #bebebe;
2640
2656
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
2657
+ --wds-color-fill-social-tiktok: #010101;
2658
+ --wds-color-fill-social-tiktok-active: #010101;
2659
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
2660
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
2641
2661
  --wds-color-fill-social-twitter: #1da1f2;
2642
2662
  --wds-color-fill-social-twitter-active: #1da1f2;
2643
2663
  --wds-color-fill-social-twitter-disabled: #bebebe;
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;
package/wixel/semantic.st.css CHANGED
@@ -204,6 +204,10 @@
204
204
  @property st-global(--wds-color-fill-social-pinterest-active);
205
205
  @property st-global(--wds-color-fill-social-pinterest-disabled);
206
206
  @property st-global(--wds-color-fill-social-pinterest-hover);
207
+ @property st-global(--wds-color-fill-social-tiktok);
208
+ @property st-global(--wds-color-fill-social-tiktok-active);
209
+ @property st-global(--wds-color-fill-social-tiktok-disabled);
210
+ @property st-global(--wds-color-fill-social-tiktok-hover);
207
211
  @property st-global(--wds-color-fill-social-twitter);
208
212
  @property st-global(--wds-color-fill-social-twitter-active);
209
213
  @property st-global(--wds-color-fill-social-twitter-disabled);
@@ -682,6 +686,10 @@
682
686
  --wds-color-fill-social-pinterest-active: #e60019;
683
687
  --wds-color-fill-social-pinterest-disabled: #bebebe;
684
688
  --wds-color-fill-social-pinterest-hover: rgba(230, 0, 25, 0.8000);
689
+ --wds-color-fill-social-tiktok: #010101;
690
+ --wds-color-fill-social-tiktok-active: #010101;
691
+ --wds-color-fill-social-tiktok-disabled: #bebebe;
692
+ --wds-color-fill-social-tiktok-hover: rgba(1, 1, 1, 0.8000);
685
693
  --wds-color-fill-social-twitter: #1da1f2;
686
694
  --wds-color-fill-social-twitter-active: #1da1f2;
687
695
  --wds-color-fill-social-twitter-disabled: #bebebe;