@wix/design-system-tokens 1.116.0 → 1.117.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 (17) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/all.css +3 -0
  3. package/all.st.css +6 -0
  4. package/component.st.css +2 -0
  5. package/foundation.st.css +2 -0
  6. package/package.json +2 -2
  7. package/semantic.st.css +2 -0
  8. package/studio/all.css +9 -6
  9. package/studio/all.st.css +13 -7
  10. package/studio/component.st.css +2 -0
  11. package/studio/foundation.st.css +7 -5
  12. package/studio/semantic.st.css +4 -2
  13. package/wixel/all.css +3 -0
  14. package/wixel/all.st.css +6 -0
  15. package/wixel/component.st.css +2 -0
  16. package/wixel/foundation.st.css +2 -0
  17. package/wixel/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 1.117.0 - 2025-07-01
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Modal): tokenization [15010](https://github.com/wix-private/wix-design-systems/pull/15010)
6
+
7
+ ### Features
8
+
9
+ - feat(Tokens): added new fill-standard token for Tag component [15033](https://github.com/wix-private/wix-design-systems/pull/15033)
10
+
1
11
  ## 1.116.0 - 2025-06-27
2
12
 
3
13
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --wds-shadow-blur-150: 6px;
40
40
  --wds-shadow-blur-100: 6px;
41
41
  --wds-shadow-blur-50: 3px;
42
+ --wds-shadow-blur-35: 2px;
42
43
  --wds-font-weight-semi-bold: 600;
43
44
  --wds-font-weight-regular: 400;
44
45
  --wds-font-weight-medium: 500;
@@ -324,6 +325,7 @@
324
325
  --wds-space-padding-horizontal-small: var(--wds-space-250);
325
326
  --wds-space-padding-horizontal-medium: var(--wds-space-300);
326
327
  --wds-space-padding-horizontal-large: var(--wds-space-400);
328
+ --wds-space-mobile-viewport-spacing: var(--wds-space-500);
327
329
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
328
330
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
329
331
  --wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
@@ -1326,6 +1328,7 @@
1326
1328
  --wds-thumbnail-subtitle-font-size-tiny: var(--wds-font-size-body-tiny);
1327
1329
  --wds-thumbnail-subtitle-fill: var(--wds-color-text-standard-secondary);
1328
1330
  --wds-tag-label-font-size-small: var(--wds-font-size-body-small);
1331
+ --wds-tag-fill-standard: var(--wds-color-fill-standard-secondary);
1329
1332
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1330
1333
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1331
1334
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-small);
package/all.st.css CHANGED
@@ -1138,6 +1138,7 @@
1138
1138
  @property st-global(--wds-shadow-200);
1139
1139
  @property st-global(--wds-shadow-300);
1140
1140
  @property st-global(--wds-shadow-400);
1141
+ @property st-global(--wds-shadow-blur-35);
1141
1142
  @property st-global(--wds-shadow-blur-50);
1142
1143
  @property st-global(--wds-shadow-blur-100);
1143
1144
  @property st-global(--wds-shadow-blur-150);
@@ -1318,6 +1319,7 @@
1318
1319
  @property st-global(--wds-space-1600);
1319
1320
  @property st-global(--wds-space-1700);
1320
1321
  @property st-global(--wds-space-2400);
1322
+ @property st-global(--wds-space-mobile-viewport-spacing);
1321
1323
  @property st-global(--wds-space-padding-horizontal-large);
1322
1324
  @property st-global(--wds-space-padding-horizontal-medium);
1323
1325
  @property st-global(--wds-space-padding-horizontal-small);
@@ -1376,6 +1378,7 @@
1376
1378
  @property st-global(--wds-tag-border-radius-medium);
1377
1379
  @property st-global(--wds-tag-border-radius-small);
1378
1380
  @property st-global(--wds-tag-border-radius-tiny);
1381
+ @property st-global(--wds-tag-fill-standard);
1379
1382
  @property st-global(--wds-tag-label-font-line-height-small);
1380
1383
  @property st-global(--wds-tag-label-font-size-small);
1381
1384
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -2717,6 +2720,7 @@
2717
2720
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
2718
2721
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
2719
2722
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
2723
+ --wds-shadow-blur-35: 2px;
2720
2724
  --wds-shadow-blur-50: 3px;
2721
2725
  --wds-shadow-blur-100: 6px;
2722
2726
  --wds-shadow-blur-150: 6px;
@@ -2897,6 +2901,7 @@
2897
2901
  --wds-space-1600: 96px;
2898
2902
  --wds-space-1700: 102px;
2899
2903
  --wds-space-2400: 144px;
2904
+ --wds-space-mobile-viewport-spacing: 30px;
2900
2905
  --wds-space-padding-horizontal-large: 24px;
2901
2906
  --wds-space-padding-horizontal-medium: 18px;
2902
2907
  --wds-space-padding-horizontal-small: 15px;
@@ -2955,6 +2960,7 @@
2955
2960
  --wds-tag-border-radius-medium: 1000px;
2956
2961
  --wds-tag-border-radius-small: 1000px;
2957
2962
  --wds-tag-border-radius-tiny: 1000px;
2963
+ --wds-tag-fill-standard: #d6e6fe;
2958
2964
  --wds-tag-label-font-line-height-small: 18px;
2959
2965
  --wds-tag-label-font-size-small: 14px;
2960
2966
  --wds-tag-padding-horizontal-large: 18px;
package/component.st.css CHANGED
@@ -751,6 +751,7 @@
751
751
  @property st-global(--wds-tag-border-radius-medium);
752
752
  @property st-global(--wds-tag-border-radius-small);
753
753
  @property st-global(--wds-tag-border-radius-tiny);
754
+ @property st-global(--wds-tag-fill-standard);
754
755
  @property st-global(--wds-tag-label-font-line-height-small);
755
756
  @property st-global(--wds-tag-label-font-size-small);
756
757
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -1703,6 +1704,7 @@
1703
1704
  --wds-tag-border-radius-medium: 1000px;
1704
1705
  --wds-tag-border-radius-small: 1000px;
1705
1706
  --wds-tag-border-radius-tiny: 1000px;
1707
+ --wds-tag-fill-standard: #d6e6fe;
1706
1708
  --wds-tag-label-font-line-height-small: 18px;
1707
1709
  --wds-tag-label-font-size-small: 14px;
1708
1710
  --wds-tag-padding-horizontal-large: 18px;
package/foundation.st.css CHANGED
@@ -144,6 +144,7 @@
144
144
  @property st-global(--wds-shadow-200);
145
145
  @property st-global(--wds-shadow-300);
146
146
  @property st-global(--wds-shadow-400);
147
+ @property st-global(--wds-shadow-blur-35);
147
148
  @property st-global(--wds-shadow-blur-50);
148
149
  @property st-global(--wds-shadow-blur-100);
149
150
  @property st-global(--wds-shadow-blur-150);
@@ -347,6 +348,7 @@
347
348
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
348
349
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
349
350
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
351
+ --wds-shadow-blur-35: 2px;
350
352
  --wds-shadow-blur-50: 3px;
351
353
  --wds-shadow-blur-100: 6px;
352
354
  --wds-shadow-blur-150: 6px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.116.0",
3
+ "version": "1.117.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "0576f8a091f816875d738261ae2fe4a24b65798c4d9d4a22476e7cc2"
36
+ "falconPackageHash": "d70d9f5986535a274361bad2eec8ee14c1192b42868225246d144e9f"
37
37
  }
package/semantic.st.css CHANGED
@@ -409,6 +409,7 @@
409
409
  @property st-global(--wds-shadow-surface-overlay);
410
410
  @property st-global(--wds-shadow-surface-overlay-dark);
411
411
  @property st-global(--wds-shadow-surface-raised);
412
+ @property st-global(--wds-space-mobile-viewport-spacing);
412
413
  @property st-global(--wds-space-padding-horizontal-large);
413
414
  @property st-global(--wds-space-padding-horizontal-medium);
414
415
  @property st-global(--wds-space-padding-horizontal-small);
@@ -837,6 +838,7 @@
837
838
  --wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
838
839
  --wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
839
840
  --wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
841
+ --wds-space-mobile-viewport-spacing: 30px;
840
842
  --wds-space-padding-horizontal-large: 24px;
841
843
  --wds-space-padding-horizontal-medium: 18px;
842
844
  --wds-space-padding-horizontal-small: 15px;
package/studio/all.css CHANGED
@@ -34,11 +34,12 @@
34
34
  --wds-shadow-y-200: 0;
35
35
  --wds-shadow-y-100: 0;
36
36
  --wds-shadow-y-0: 0;
37
- --wds-shadow-blur-400: 24;
38
- --wds-shadow-blur-200: 18;
39
- --wds-shadow-blur-150: 12;
40
- --wds-shadow-blur-100: 4;
41
- --wds-shadow-blur-50: 4;
37
+ --wds-shadow-blur-400: 24px;
38
+ --wds-shadow-blur-200: 18px;
39
+ --wds-shadow-blur-150: 12px;
40
+ --wds-shadow-blur-100: 4px;
41
+ --wds-shadow-blur-50: 4px;
42
+ --wds-shadow-blur-35: 3px;
42
43
  --wds-font-weight-semi-bold: 600;
43
44
  --wds-font-weight-regular: 400;
44
45
  --wds-font-weight-medium: 500;
@@ -357,6 +358,8 @@
357
358
  --wds-space-padding-horizontal-small: var(--wds-space-400);
358
359
  --wds-space-padding-horizontal-medium: var(--wds-space-500);
359
360
  --wds-space-padding-horizontal-large: var(--wds-space-600);
361
+ --wds-space-mobile-viewport-spacing: var(--wds-space-800);
362
+ --wds-shadow-surface-raised: var(--wds-shadow-y-var(--wds-shadow-y-0)) 0 var(--wds-shadow-blur-35) 0 var(--wds-shadow-fill-primary-raised), 0 0 0 0 var(--wds-shadow-fill-secondary-raised);
360
363
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-y-0) 0 var(--wds-shadow-blur-150) 0 var(--wds-color-black-100-transparent-20);
361
364
  --wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
362
365
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
@@ -1254,7 +1257,6 @@
1254
1257
  --wds-add-item-border-radius: var(--wds-border-radius-200);
1255
1258
  --wds-accordion-title-font-weight-small: var(--wds-font-weight-bold);
1256
1259
  --wds-accordion-title-font-weight: var(--wds-font-weight-medium);
1257
- --wds-shadow-surface-raised: var(--wds-shadow-200);
1258
1260
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1259
1261
  --wds-shadow-surface-modal: var(--wds-shadow-400);
1260
1262
  --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
@@ -1354,6 +1356,7 @@
1354
1356
  --wds-thumbnail-subtitle-fill: var(--wds-color-text-standard-secondary);
1355
1357
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1356
1358
  --wds-tag-label-font-line-height-small: var(--wds-font-size-body-tiny);
1359
+ --wds-tag-fill-standard: var(--wds-color-fill-standard-secondary);
1357
1360
  --wds-tabs-selection-fill-secondary: var(--wds-color-fill-standard-primary);
1358
1361
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1359
1362
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
package/studio/all.st.css CHANGED
@@ -1126,6 +1126,7 @@
1126
1126
  @property st-global(--wds-shadow-200);
1127
1127
  @property st-global(--wds-shadow-300);
1128
1128
  @property st-global(--wds-shadow-400);
1129
+ @property st-global(--wds-shadow-blur-35);
1129
1130
  @property st-global(--wds-shadow-blur-50);
1130
1131
  @property st-global(--wds-shadow-blur-100);
1131
1132
  @property st-global(--wds-shadow-blur-150);
@@ -1306,6 +1307,7 @@
1306
1307
  @property st-global(--wds-space-1600);
1307
1308
  @property st-global(--wds-space-1700);
1308
1309
  @property st-global(--wds-space-2400);
1310
+ @property st-global(--wds-space-mobile-viewport-spacing);
1309
1311
  @property st-global(--wds-space-padding-horizontal-large);
1310
1312
  @property st-global(--wds-space-padding-horizontal-medium);
1311
1313
  @property st-global(--wds-space-padding-horizontal-small);
@@ -1364,6 +1366,7 @@
1364
1366
  @property st-global(--wds-tag-border-radius-medium);
1365
1367
  @property st-global(--wds-tag-border-radius-small);
1366
1368
  @property st-global(--wds-tag-border-radius-tiny);
1369
+ @property st-global(--wds-tag-fill-standard);
1367
1370
  @property st-global(--wds-tag-label-font-line-height-small);
1368
1371
  @property st-global(--wds-tag-label-font-size-small);
1369
1372
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -2701,11 +2704,12 @@
2701
2704
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
2702
2705
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
2703
2706
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
2704
- --wds-shadow-blur-50: 4;
2705
- --wds-shadow-blur-100: 4;
2706
- --wds-shadow-blur-150: 12;
2707
- --wds-shadow-blur-200: 18;
2708
- --wds-shadow-blur-400: 24;
2707
+ --wds-shadow-blur-35: 3px;
2708
+ --wds-shadow-blur-50: 4px;
2709
+ --wds-shadow-blur-100: 4px;
2710
+ --wds-shadow-blur-150: 12px;
2711
+ --wds-shadow-blur-200: 18px;
2712
+ --wds-shadow-blur-400: 24px;
2709
2713
  --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .2);
2710
2714
  --wds-shadow-fill-primary-overlay: rgba(19, 23, 32, .1);
2711
2715
  --wds-shadow-fill-primary-raised: rgba(19, 23, 32, .1);
@@ -2738,8 +2742,8 @@
2738
2742
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
2739
2743
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
2740
2744
  --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
2741
- --wds-shadow-surface-overlay-dark: 0 0 12 0 rgba(19, 23, 32, .2);
2742
- --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
2745
+ --wds-shadow-surface-overlay-dark: 0 0 12px 0 rgba(19, 23, 32, .2);
2746
+ --wds-shadow-surface-raised: 0 0 3px 0 rgba(19, 23, 32, .1), 0 0 0 0 rgba(19, 23, 32, .05);
2743
2747
  --wds-shadow-y-0: 0;
2744
2748
  --wds-shadow-y-100: 0;
2745
2749
  --wds-shadow-y-200: 0;
@@ -2881,6 +2885,7 @@
2881
2885
  --wds-space-1600: 64px;
2882
2886
  --wds-space-1700: 68px;
2883
2887
  --wds-space-2400: 96px;
2888
+ --wds-space-mobile-viewport-spacing: 32px;
2884
2889
  --wds-space-padding-horizontal-large: 24px;
2885
2890
  --wds-space-padding-horizontal-medium: 20px;
2886
2891
  --wds-space-padding-horizontal-small: 16px;
@@ -2939,6 +2944,7 @@
2939
2944
  --wds-tag-border-radius-medium: 4px;
2940
2945
  --wds-tag-border-radius-small: 4px;
2941
2946
  --wds-tag-border-radius-tiny: 4px;
2947
+ --wds-tag-fill-standard: #dce9ff;
2942
2948
  --wds-tag-label-font-line-height-small: 12px;
2943
2949
  --wds-tag-label-font-size-small: 12px;
2944
2950
  --wds-tag-padding-horizontal-large: 16px;
package/studio/component.st.css CHANGED
@@ -743,6 +743,7 @@
743
743
  @property st-global(--wds-tag-border-radius-medium);
744
744
  @property st-global(--wds-tag-border-radius-small);
745
745
  @property st-global(--wds-tag-border-radius-tiny);
746
+ @property st-global(--wds-tag-fill-standard);
746
747
  @property st-global(--wds-tag-label-font-line-height-small);
747
748
  @property st-global(--wds-tag-label-font-size-small);
748
749
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -1695,6 +1696,7 @@
1695
1696
  --wds-tag-border-radius-medium: 4px;
1696
1697
  --wds-tag-border-radius-small: 4px;
1697
1698
  --wds-tag-border-radius-tiny: 4px;
1699
+ --wds-tag-fill-standard: #dce9ff;
1698
1700
  --wds-tag-label-font-line-height-small: 12px;
1699
1701
  --wds-tag-label-font-size-small: 12px;
1700
1702
  --wds-tag-padding-horizontal-large: 16px;
package/studio/foundation.st.css CHANGED
@@ -144,6 +144,7 @@
144
144
  @property st-global(--wds-shadow-200);
145
145
  @property st-global(--wds-shadow-300);
146
146
  @property st-global(--wds-shadow-400);
147
+ @property st-global(--wds-shadow-blur-35);
147
148
  @property st-global(--wds-shadow-blur-50);
148
149
  @property st-global(--wds-shadow-blur-100);
149
150
  @property st-global(--wds-shadow-blur-150);
@@ -347,11 +348,12 @@
347
348
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
348
349
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
349
350
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
350
- --wds-shadow-blur-50: 4;
351
- --wds-shadow-blur-100: 4;
352
- --wds-shadow-blur-150: 12;
353
- --wds-shadow-blur-200: 18;
354
- --wds-shadow-blur-400: 24;
351
+ --wds-shadow-blur-35: 3px;
352
+ --wds-shadow-blur-50: 4px;
353
+ --wds-shadow-blur-100: 4px;
354
+ --wds-shadow-blur-150: 12px;
355
+ --wds-shadow-blur-200: 18px;
356
+ --wds-shadow-blur-400: 24px;
355
357
  --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
356
358
  --wds-shadow-inner-200: 1px 1px 4px rgba(19, 23, 32, .2) inset;
357
359
  --wds-shadow-inner-300: 0 0 18px rgba(19, 23, 32, .1) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
package/studio/semantic.st.css CHANGED
@@ -405,6 +405,7 @@
405
405
  @property st-global(--wds-shadow-surface-overlay);
406
406
  @property st-global(--wds-shadow-surface-overlay-dark);
407
407
  @property st-global(--wds-shadow-surface-raised);
408
+ @property st-global(--wds-space-mobile-viewport-spacing);
408
409
  @property st-global(--wds-space-padding-horizontal-large);
409
410
  @property st-global(--wds-space-padding-horizontal-medium);
410
411
  @property st-global(--wds-space-padding-horizontal-small);
@@ -827,8 +828,9 @@
827
828
  --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
828
829
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
829
830
  --wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
830
- --wds-shadow-surface-overlay-dark: 0 0 12 0 rgba(19, 23, 32, .2);
831
- --wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
831
+ --wds-shadow-surface-overlay-dark: 0 0 12px 0 rgba(19, 23, 32, .2);
832
+ --wds-shadow-surface-raised: 0 0 3px 0 rgba(19, 23, 32, .1), 0 0 0 0 rgba(19, 23, 32, .05);
833
+ --wds-space-mobile-viewport-spacing: 32px;
832
834
  --wds-space-padding-horizontal-large: 24px;
833
835
  --wds-space-padding-horizontal-medium: 20px;
834
836
  --wds-space-padding-horizontal-small: 16px;
package/wixel/all.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --wds-shadow-blur-150: 6px;
40
40
  --wds-shadow-blur-100: 4px;
41
41
  --wds-shadow-blur-50: 4px;
42
+ --wds-shadow-blur-35: 3px;
42
43
  --wds-shadow-400: 0;
43
44
  --wds-shadow-200: 0;
44
45
  --wds-shadow-100: 0;
@@ -360,6 +361,7 @@
360
361
  --wds-space-padding-horizontal-small: var(--wds-space-400);
361
362
  --wds-space-padding-horizontal-medium: var(--wds-space-500);
362
363
  --wds-space-padding-horizontal-large: var(--wds-space-600);
364
+ --wds-space-mobile-viewport-spacing: var(--wds-space-800);
363
365
  --wds-shadow-surface-raised: 0 var(--wds-shadow-y-100) var(--wds-shadow-blur-50) var(--wds-shadow-fill-primary-raised), 0 2px 4px var(--wds-shadow-fill-secondary-raised);
364
366
  --wds-shadow-surface-overlay-dark: 0 var(--wds-shadow-y-300) var(--wds-shadow-blur-200) var(--wds-shadow-fill-primary-overlay), 0 6px 6px var(--wds-shadow-fill-secondary-raised);
365
367
  --wds-shadow-surface-overlay: 0 var(--wds-shadow-y-200) var(--wds-shadow-blur-200) var(--wds-shadow-fill-primary-overlay), 0 6px 6px var(--wds-shadow-fill-secondary-raised);
@@ -1364,6 +1366,7 @@
1364
1366
  --wds-thumbnail-fill: var(--wds-color-fill-standard-secondary);
1365
1367
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
1366
1368
  --wds-tag-label-font-line-height-small: var(--wds-font-size-body-tiny);
1369
+ --wds-tag-fill-standard: var(--wds-color-fill-standard-secondary);
1367
1370
  --wds-tabs-selection-fill-primary: var(--wds-color-fill-standard-primary);
1368
1371
  --wds-tabs-selection-border: linear-gradient(90deg, var(--wds-tabs-selection-fill-secondary) 0%, var(--wds-tabs-selection-fill-primary) 20%, var(--wds-tabs-selection-fill-primary) 80%, var(--wds-tabs-selection-fill-secondary) 100%);
1369
1372
  --wds-tabs-label-font-size-small: var(--wds-font-size-body-tiny);
package/wixel/all.st.css CHANGED
@@ -1136,6 +1136,7 @@
1136
1136
  @property st-global(--wds-shadow-200);
1137
1137
  @property st-global(--wds-shadow-300);
1138
1138
  @property st-global(--wds-shadow-400);
1139
+ @property st-global(--wds-shadow-blur-35);
1139
1140
  @property st-global(--wds-shadow-blur-50);
1140
1141
  @property st-global(--wds-shadow-blur-100);
1141
1142
  @property st-global(--wds-shadow-blur-150);
@@ -1316,6 +1317,7 @@
1316
1317
  @property st-global(--wds-space-1600);
1317
1318
  @property st-global(--wds-space-1700);
1318
1319
  @property st-global(--wds-space-2400);
1320
+ @property st-global(--wds-space-mobile-viewport-spacing);
1319
1321
  @property st-global(--wds-space-padding-horizontal-large);
1320
1322
  @property st-global(--wds-space-padding-horizontal-medium);
1321
1323
  @property st-global(--wds-space-padding-horizontal-small);
@@ -1373,6 +1375,7 @@
1373
1375
  @property st-global(--wds-tag-border-radius-medium);
1374
1376
  @property st-global(--wds-tag-border-radius-small);
1375
1377
  @property st-global(--wds-tag-border-radius-tiny);
1378
+ @property st-global(--wds-tag-fill-standard);
1376
1379
  @property st-global(--wds-tag-label-font-line-height-small);
1377
1380
  @property st-global(--wds-tag-label-font-size-small);
1378
1381
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -2720,6 +2723,7 @@
2720
2723
  --wds-shadow-200: 0;
2721
2724
  --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
2722
2725
  --wds-shadow-400: 0;
2726
+ --wds-shadow-blur-35: 3px;
2723
2727
  --wds-shadow-blur-50: 4px;
2724
2728
  --wds-shadow-blur-100: 4px;
2725
2729
  --wds-shadow-blur-150: 6px;
@@ -2900,6 +2904,7 @@
2900
2904
  --wds-space-1600: 64px;
2901
2905
  --wds-space-1700: 68px;
2902
2906
  --wds-space-2400: 96px;
2907
+ --wds-space-mobile-viewport-spacing: 32px;
2903
2908
  --wds-space-padding-horizontal-large: 24px;
2904
2909
  --wds-space-padding-horizontal-medium: 20px;
2905
2910
  --wds-space-padding-horizontal-small: 16px;
@@ -2957,6 +2962,7 @@
2957
2962
  --wds-tag-border-radius-medium: 4px;
2958
2963
  --wds-tag-border-radius-small: 4px;
2959
2964
  --wds-tag-border-radius-tiny: 4px;
2965
+ --wds-tag-fill-standard: #eef0ff;
2960
2966
  --wds-tag-label-font-line-height-small: 12px;
2961
2967
  --wds-tag-label-font-size-small: 12px;
2962
2968
  --wds-tag-padding-horizontal-large: 16px;
package/wixel/component.st.css CHANGED
@@ -748,6 +748,7 @@
748
748
  @property st-global(--wds-tag-border-radius-medium);
749
749
  @property st-global(--wds-tag-border-radius-small);
750
750
  @property st-global(--wds-tag-border-radius-tiny);
751
+ @property st-global(--wds-tag-fill-standard);
751
752
  @property st-global(--wds-tag-label-font-line-height-small);
752
753
  @property st-global(--wds-tag-label-font-size-small);
753
754
  @property st-global(--wds-tag-padding-horizontal-large);
@@ -1705,6 +1706,7 @@
1705
1706
  --wds-tag-border-radius-medium: 4px;
1706
1707
  --wds-tag-border-radius-small: 4px;
1707
1708
  --wds-tag-border-radius-tiny: 4px;
1709
+ --wds-tag-fill-standard: #eef0ff;
1708
1710
  --wds-tag-label-font-line-height-small: 12px;
1709
1711
  --wds-tag-label-font-size-small: 12px;
1710
1712
  --wds-tag-padding-horizontal-large: 16px;
package/wixel/foundation.st.css CHANGED
@@ -144,6 +144,7 @@
144
144
  @property st-global(--wds-shadow-200);
145
145
  @property st-global(--wds-shadow-300);
146
146
  @property st-global(--wds-shadow-400);
147
+ @property st-global(--wds-shadow-blur-35);
147
148
  @property st-global(--wds-shadow-blur-50);
148
149
  @property st-global(--wds-shadow-blur-100);
149
150
  @property st-global(--wds-shadow-blur-150);
@@ -347,6 +348,7 @@
347
348
  --wds-shadow-200: 0;
348
349
  --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
349
350
  --wds-shadow-400: 0;
351
+ --wds-shadow-blur-35: 3px;
350
352
  --wds-shadow-blur-50: 4px;
351
353
  --wds-shadow-blur-100: 4px;
352
354
  --wds-shadow-blur-150: 6px;
package/wixel/semantic.st.css CHANGED
@@ -409,6 +409,7 @@
409
409
  @property st-global(--wds-shadow-surface-overlay);
410
410
  @property st-global(--wds-shadow-surface-overlay-dark);
411
411
  @property st-global(--wds-shadow-surface-raised);
412
+ @property st-global(--wds-space-mobile-viewport-spacing);
412
413
  @property st-global(--wds-space-padding-horizontal-large);
413
414
  @property st-global(--wds-space-padding-horizontal-medium);
414
415
  @property st-global(--wds-space-padding-horizontal-small);
@@ -837,6 +838,7 @@
837
838
  --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
838
839
  --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
839
840
  --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
841
+ --wds-space-mobile-viewport-spacing: 32px;
840
842
  --wds-space-padding-horizontal-large: 24px;
841
843
  --wds-space-padding-horizontal-medium: 20px;
842
844
  --wds-space-padding-horizontal-small: 16px;