@wix/design-system-tokens 1.201.0 → 1.203.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/all.css +18 -4
  3. package/all.scss +14 -0
  4. package/all.st.css +28 -0
  5. package/component.st.css +12 -0
  6. package/foundation.st.css +16 -0
  7. package/odeditor/all.css +24 -6
  8. package/odeditor/all.scss +20 -2
  9. package/odeditor/all.st.css +38 -2
  10. package/odeditor/component.st.css +17 -1
  11. package/odeditor/foundation.st.css +18 -0
  12. package/odeditor/semantic.st.css +3 -1
  13. package/odeditor-dark/all.css +22 -5
  14. package/odeditor-dark/all.scss +18 -1
  15. package/odeditor-dark/all.st.css +35 -1
  16. package/odeditor-dark/component.st.css +17 -1
  17. package/odeditor-dark/foundation.st.css +16 -0
  18. package/odeditor-dark/semantic.st.css +2 -0
  19. package/package.json +2 -2
  20. package/studio/all.css +20 -5
  21. package/studio/all.scss +16 -1
  22. package/studio/all.st.css +31 -1
  23. package/studio/component.st.css +12 -0
  24. package/studio/foundation.st.css +16 -0
  25. package/studio/semantic.st.css +3 -1
  26. package/wixel/all.css +18 -4
  27. package/wixel/all.scss +14 -0
  28. package/wixel/all.st.css +28 -0
  29. package/wixel/component.st.css +12 -0
  30. package/wixel/foundation.st.css +16 -0
package/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);
@@ -763,6 +769,14 @@
763
769
  @property st-global(--wds-color-picker-padding-horizontal);
764
770
  @property st-global(--wds-color-picker-padding-vertical);
765
771
  @property st-global(--wds-color-picker-width);
772
+ @property st-global(--wds-color-pink-0);
773
+ @property st-global(--wds-color-pink-50);
774
+ @property st-global(--wds-color-pink-100);
775
+ @property st-global(--wds-color-pink-200);
776
+ @property st-global(--wds-color-pink-300);
777
+ @property st-global(--wds-color-pink-400);
778
+ @property st-global(--wds-color-pink-500);
779
+ @property st-global(--wds-color-pink-600);
766
780
  @property st-global(--wds-color-purple-0);
767
781
  @property st-global(--wds-color-purple-50);
768
782
  @property st-global(--wds-color-purple-100);
@@ -1091,6 +1105,7 @@
1091
1105
  @property st-global(--wds-illustration-color-4);
1092
1106
  @property st-global(--wds-illustration-color-5);
1093
1107
  @property st-global(--wds-illustration-color-6);
1108
+ @property st-global(--wds-illustration-color-7);
1094
1109
  @property st-global(--wds-illustration-color-background);
1095
1110
  @property st-global(--wds-image-border-radius-default);
1096
1111
  @property st-global(--wds-image-border-radius-none);
@@ -2390,6 +2405,7 @@
2390
2405
  --wds-button-text-standard-primary: #131720;
2391
2406
  --wds-button-text-standard-primary-hover: #131720;
2392
2407
  --wds-card-border: 4px;
2408
+ --wds-card-border-radius: 4px;
2393
2409
  --wds-card-content-padding-large: 36px;
2394
2410
  --wds-card-content-padding-medium: 24px;
2395
2411
  --wds-card-content-paddings-horizontal: 24px;
@@ -2411,8 +2427,13 @@
2411
2427
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2412
2428
  --wds-card-gallery-item-title-font-line-height-small: 20px;
2413
2429
  --wds-card-gallery-item-title-font-size-medium: 14px;
2430
+ --wds-card-header-divider-width: 0px;
2414
2431
  --wds-card-header-padding-horizontal: 24px;
2415
2432
  --wds-card-header-padding-vertical: 16px;
2433
+ --wds-card-header-title-subtitle-gap: 0px;
2434
+ --wds-card-subtitle-color: #42454c;
2435
+ --wds-card-subtitle-font-size: 16px;
2436
+ --wds-card-subtitle-line-height: 24px;
2416
2437
  --wds-card-tab-padding-horizontal-medium: 20px;
2417
2438
  --wds-card-tab-padding-horizontal-small: 20px;
2418
2439
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2889,6 +2910,14 @@
2889
2910
  --wds-color-picker-padding-horizontal: 16px;
2890
2911
  --wds-color-picker-padding-vertical: 12px;
2891
2912
  --wds-color-picker-width: 236px;
2913
+ --wds-color-pink-0: #bd22a1;
2914
+ --wds-color-pink-50: #e221ac;
2915
+ --wds-color-pink-100: #f639d3;
2916
+ --wds-color-pink-200: #ff77e6;
2917
+ --wds-color-pink-300: #ffa9ef;
2918
+ --wds-color-pink-400: #ffc2f3;
2919
+ --wds-color-pink-500: #fdd7f2;
2920
+ --wds-color-pink-600: #feebfb;
2892
2921
  --wds-color-purple-0: #7927a3;
2893
2922
  --wds-color-purple-50: #8e1dd1;
2894
2923
  --wds-color-purple-100: #9a27d5;
@@ -3216,7 +3245,8 @@
3216
3245
  --wds-illustration-color-3: #B8C4FF;
3217
3246
  --wds-illustration-color-4: #D5DFFF;
3218
3247
  --wds-illustration-color-5: #EAEFF1;
3219
- --wds-illustration-color-6: #002297;
3248
+ --wds-illustration-color-6: #002296;
3249
+ --wds-illustration-color-7: #002297;
3220
3250
  --wds-illustration-color-background: #F8F6F6;
3221
3251
  --wds-image-border-radius-default: 4px;
3222
3252
  --wds-image-border-radius-none: 0px;
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/foundation.st.css CHANGED
@@ -92,6 +92,14 @@
92
92
  @property st-global(--wds-color-orange-400);
93
93
  @property st-global(--wds-color-orange-500);
94
94
  @property st-global(--wds-color-orange-600);
95
+ @property st-global(--wds-color-pink-0);
96
+ @property st-global(--wds-color-pink-50);
97
+ @property st-global(--wds-color-pink-100);
98
+ @property st-global(--wds-color-pink-200);
99
+ @property st-global(--wds-color-pink-300);
100
+ @property st-global(--wds-color-pink-400);
101
+ @property st-global(--wds-color-pink-500);
102
+ @property st-global(--wds-color-pink-600);
95
103
  @property st-global(--wds-color-purple-0);
96
104
  @property st-global(--wds-color-purple-50);
97
105
  @property st-global(--wds-color-purple-100);
@@ -324,6 +332,14 @@
324
332
  --wds-color-orange-400: #fdd7cc;
325
333
  --wds-color-orange-500: #fee8e1;
326
334
  --wds-color-orange-600: #feefea;
335
+ --wds-color-pink-0: #bd22a1;
336
+ --wds-color-pink-50: #e221ac;
337
+ --wds-color-pink-100: #f639d3;
338
+ --wds-color-pink-200: #ff77e6;
339
+ --wds-color-pink-300: #ffa9ef;
340
+ --wds-color-pink-400: #ffc2f3;
341
+ --wds-color-pink-500: #fdd7f2;
342
+ --wds-color-pink-600: #feebfb;
327
343
  --wds-color-purple-0: #7927a3;
328
344
  --wds-color-purple-50: #8e1dd1;
329
345
  --wds-color-purple-100: #9a27d5;
package/studio/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-illustration-color-4);
406
406
  @property st-global(--wds-illustration-color-5);
407
407
  @property st-global(--wds-illustration-color-6);
408
+ @property st-global(--wds-illustration-color-7);
408
409
  @property st-global(--wds-illustration-color-background);
409
410
  @property st-global(--wds-inner-shadow-blur-input);
410
411
  @property st-global(--wds-inner-shadow-blur-primary);
@@ -906,7 +907,8 @@
906
907
  --wds-illustration-color-3: #B8C4FF;
907
908
  --wds-illustration-color-4: #D5DFFF;
908
909
  --wds-illustration-color-5: #EAEFF1;
909
- --wds-illustration-color-6: #002297;
910
+ --wds-illustration-color-6: #002296;
911
+ --wds-illustration-color-7: #002297;
910
912
  --wds-illustration-color-background: #F8F6F6;
911
913
  --wds-inner-shadow-blur-input: 0px;
912
914
  --wds-inner-shadow-blur-primary: 0px;
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;
@@ -202,6 +202,14 @@
202
202
  --wds-color-purple-100: #9a27d5;
203
203
  --wds-color-purple-50: #8e1dd1;
204
204
  --wds-color-purple-0: #7927a3;
205
+ --wds-color-pink-600: #feebfb;
206
+ --wds-color-pink-500: #fdd7f2;
207
+ --wds-color-pink-400: #ffc2f3;
208
+ --wds-color-pink-300: #ffa9ef;
209
+ --wds-color-pink-200: #ff77e6;
210
+ --wds-color-pink-100: #f639d3;
211
+ --wds-color-pink-50: #e221ac;
212
+ --wds-color-pink-0: #bd22a1;
205
213
  --wds-color-orange-600: #feefea;
206
214
  --wds-color-orange-500: #fee8e1;
207
215
  --wds-color-orange-400: #fdd7cc;
@@ -1362,8 +1370,10 @@
1362
1370
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1363
1371
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1364
1372
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1373
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1365
1374
  --wds-card-header-padding-vertical: var(--wds-space-400);
1366
1375
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1376
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1367
1377
  --wds-card-content-paddings-vertical: var(--wds-space-600);
1368
1378
  --wds-card-content-paddings-horizontal: var(--wds-space-600);
1369
1379
  --wds-card-content-padding-medium: var(--wds-space-600);
@@ -1889,6 +1899,9 @@
1889
1899
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1890
1900
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1891
1901
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
1902
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1903
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1904
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1892
1905
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1893
1906
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1894
1907
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2052,6 +2065,7 @@
2052
2065
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2053
2066
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2054
2067
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2068
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2055
2069
  --wds-button-font-line-height-tiny: var(--wds-font-line-height-body-extra-tiny);
2056
2070
  --wds-button-font-line-height-small: var(--wds-font-line-height-body-tiny);
2057
2071
  --wds-button-font-line-height-medium: var(--wds-font-line-height-body-small);
package/wixel/all.scss CHANGED
@@ -178,6 +178,14 @@
178
178
  --wds-color-purple-100: #9a27d5;
179
179
  --wds-color-purple-50: #8e1dd1;
180
180
  --wds-color-purple-0: #7927a3;
181
+ --wds-color-pink-600: #feebfb;
182
+ --wds-color-pink-500: #fdd7f2;
183
+ --wds-color-pink-400: #ffc2f3;
184
+ --wds-color-pink-300: #ffa9ef;
185
+ --wds-color-pink-200: #ff77e6;
186
+ --wds-color-pink-100: #f639d3;
187
+ --wds-color-pink-50: #e221ac;
188
+ --wds-color-pink-0: #bd22a1;
181
189
  --wds-color-orange-600: #feefea;
182
190
  --wds-color-orange-500: #fee8e1;
183
191
  --wds-color-orange-400: #fdd7cc;
@@ -1340,8 +1348,10 @@
1340
1348
  --wds-card-tab-padding-vertical-medium: var(--wds-space-400);
1341
1349
  --wds-card-tab-padding-horizontal-small: var(--wds-space-500);
1342
1350
  --wds-card-tab-padding-horizontal-medium: var(--wds-space-500);
1351
+ --wds-card-header-title-subtitle-gap: var(--wds-space-0);
1343
1352
  --wds-card-header-padding-vertical: var(--wds-space-400);
1344
1353
  --wds-card-header-padding-horizontal: var(--wds-space-600);
1354
+ --wds-card-header-divider-width: var(--wds-border-width-none);
1345
1355
  --wds-card-gallery-item-padding-vertical-small: var(--wds-space-400);
1346
1356
  --wds-card-gallery-item-padding-vertical-medium: var(--wds-space-475);
1347
1357
  --wds-card-gallery-item-padding-right-small: var(--wds-space-475);
@@ -1886,9 +1896,12 @@
1886
1896
  --wds-checkbox-border-active: var(--wds-color-border-standard-secondary-active);
1887
1897
  --wds-checkbox-border: var(--wds-color-border-standard-secondary-active);
1888
1898
  --wds-carousel-controls-shadow: var(--wds-shadow-300);
1899
+ --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
1900
+ --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
1889
1901
  --wds-card-gallery-item-title-font-size-medium: var(--wds-font-size-body-small);
1890
1902
  --wds-card-gallery-item-subtitle-font-size-medium: var(--wds-font-size-body-small);
1891
1903
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
1904
+ --wds-card-border-radius: var(--wds-border-radius-surface-raised);
1892
1905
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
1893
1906
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
1894
1907
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
@@ -2050,6 +2063,7 @@
2050
2063
  --wds-custom-modal-footnote-text-font-line-height: var(--wds-font-line-height-body-tiny);
2051
2064
  --wds-checkbox-label-font-line-height-small: var(--wds-font-line-height-body-small);
2052
2065
  --wds-checkbox-label-font-line-height-medium: var(--wds-font-line-height-body-medium);
2066
+ --wds-card-subtitle-line-height: var(--wds-font-line-height-body-medium);
2053
2067
  --wds-card-gallery-item-title-font-line-height-small: var(--wds-font-line-height-body-small);
2054
2068
  --wds-card-gallery-item-title-font-line-height-medium: var(--wds-font-line-height-body-medium);
2055
2069
  --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);
@@ -743,6 +749,14 @@
743
749
  @property st-global(--wds-color-orange-400);
744
750
  @property st-global(--wds-color-orange-500);
745
751
  @property st-global(--wds-color-orange-600);
752
+ @property st-global(--wds-color-pink-0);
753
+ @property st-global(--wds-color-pink-50);
754
+ @property st-global(--wds-color-pink-100);
755
+ @property st-global(--wds-color-pink-200);
756
+ @property st-global(--wds-color-pink-300);
757
+ @property st-global(--wds-color-pink-400);
758
+ @property st-global(--wds-color-pink-500);
759
+ @property st-global(--wds-color-pink-600);
746
760
  @property st-global(--wds-color-purple-0);
747
761
  @property st-global(--wds-color-purple-50);
748
762
  @property st-global(--wds-color-purple-100);
@@ -2331,6 +2345,7 @@
2331
2345
  --wds-button-text-standard-primary: #000624;
2332
2346
  --wds-button-text-standard-primary-hover: #000624;
2333
2347
  --wds-card-border: 4px;
2348
+ --wds-card-border-radius: 12px;
2334
2349
  --wds-card-content-padding-large: 24px;
2335
2350
  --wds-card-content-padding-medium: 24px;
2336
2351
  --wds-card-content-paddings-horizontal: 24px;
@@ -2352,8 +2367,13 @@
2352
2367
  --wds-card-gallery-item-title-font-line-height-medium: 24px;
2353
2368
  --wds-card-gallery-item-title-font-line-height-small: 20px;
2354
2369
  --wds-card-gallery-item-title-font-size-medium: 14px;
2370
+ --wds-card-header-divider-width: 0px;
2355
2371
  --wds-card-header-padding-horizontal: 24px;
2356
2372
  --wds-card-header-padding-vertical: 16px;
2373
+ --wds-card-header-title-subtitle-gap: 0px;
2374
+ --wds-card-subtitle-color: #595d70;
2375
+ --wds-card-subtitle-font-size: 16px;
2376
+ --wds-card-subtitle-line-height: 24px;
2357
2377
  --wds-card-tab-padding-horizontal-medium: 20px;
2358
2378
  --wds-card-tab-padding-horizontal-small: 20px;
2359
2379
  --wds-card-tab-padding-vertical-medium: 16px;
@@ -2810,6 +2830,14 @@
2810
2830
  --wds-color-orange-400: #fdd7cc;
2811
2831
  --wds-color-orange-500: #fee8e1;
2812
2832
  --wds-color-orange-600: #feefea;
2833
+ --wds-color-pink-0: #bd22a1;
2834
+ --wds-color-pink-50: #e221ac;
2835
+ --wds-color-pink-100: #f639d3;
2836
+ --wds-color-pink-200: #ff77e6;
2837
+ --wds-color-pink-300: #ffa9ef;
2838
+ --wds-color-pink-400: #ffc2f3;
2839
+ --wds-color-pink-500: #fdd7f2;
2840
+ --wds-color-pink-600: #feebfb;
2813
2841
  --wds-color-purple-0: #7927a3;
2814
2842
  --wds-color-purple-50: #8e1dd1;
2815
2843
  --wds-color-purple-100: #9a27d5;
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/foundation.st.css CHANGED
@@ -89,6 +89,14 @@
89
89
  @property st-global(--wds-color-orange-400);
90
90
  @property st-global(--wds-color-orange-500);
91
91
  @property st-global(--wds-color-orange-600);
92
+ @property st-global(--wds-color-pink-0);
93
+ @property st-global(--wds-color-pink-50);
94
+ @property st-global(--wds-color-pink-100);
95
+ @property st-global(--wds-color-pink-200);
96
+ @property st-global(--wds-color-pink-300);
97
+ @property st-global(--wds-color-pink-400);
98
+ @property st-global(--wds-color-pink-500);
99
+ @property st-global(--wds-color-pink-600);
92
100
  @property st-global(--wds-color-purple-0);
93
101
  @property st-global(--wds-color-purple-50);
94
102
  @property st-global(--wds-color-purple-100);
@@ -316,6 +324,14 @@
316
324
  --wds-color-orange-400: #fdd7cc;
317
325
  --wds-color-orange-500: #fee8e1;
318
326
  --wds-color-orange-600: #feefea;
327
+ --wds-color-pink-0: #bd22a1;
328
+ --wds-color-pink-50: #e221ac;
329
+ --wds-color-pink-100: #f639d3;
330
+ --wds-color-pink-200: #ff77e6;
331
+ --wds-color-pink-300: #ffa9ef;
332
+ --wds-color-pink-400: #ffc2f3;
333
+ --wds-color-pink-500: #fdd7f2;
334
+ --wds-color-pink-600: #feebfb;
319
335
  --wds-color-purple-0: #7927a3;
320
336
  --wds-color-purple-50: #8e1dd1;
321
337
  --wds-color-purple-100: #9a27d5;