@wix/design-system-tokens 1.130.0 → 1.131.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 (22) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/all.css +12 -0
  3. package/all.scss +12 -0
  4. package/all.st.css +24 -0
  5. package/component.st.css +22 -0
  6. package/odeditor/all.css +19 -11
  7. package/odeditor/all.scss +19 -11
  8. package/odeditor/all.st.css +28 -12
  9. package/odeditor/component.st.css +26 -12
  10. package/odeditor/semantic.st.css +2 -0
  11. package/package.json +2 -2
  12. package/semantic.st.css +2 -0
  13. package/studio/all.css +12 -0
  14. package/studio/all.scss +12 -0
  15. package/studio/all.st.css +24 -0
  16. package/studio/component.st.css +22 -0
  17. package/studio/semantic.st.css +2 -0
  18. package/wixel/all.css +24 -0
  19. package/wixel/all.scss +24 -0
  20. package/wixel/all.st.css +48 -0
  21. package/wixel/component.st.css +22 -0
  22. package/wixel/semantic.st.css +26 -0
package/wixel/all.st.css CHANGED
@@ -21,6 +21,7 @@
21
21
  @property st-global(--wds-add-item-fill);
22
22
  @property st-global(--wds-add-item-fill-disabled);
23
23
  @property st-global(--wds-add-item-fill-hover);
24
+ @property st-global(--wds-add-item-fill-pressed);
24
25
  @property st-global(--wds-add-item-label-color);
25
26
  @property st-global(--wds-add-item-padding-horizontal-large);
26
27
  @property st-global(--wds-add-item-padding-horizontal-tiny);
@@ -1037,6 +1038,19 @@
1037
1038
  @property st-global(--wds-image-border-radius-none);
1038
1039
  @property st-global(--wds-info-icon-fill);
1039
1040
  @property st-global(--wds-info-icon-fill-hover);
1041
+ @property st-global(--wds-inner-shadow-blur-input);
1042
+ @property st-global(--wds-inner-shadow-blur-primary);
1043
+ @property st-global(--wds-inner-shadow-blur-secondary);
1044
+ @property st-global(--wds-inner-shadow-fill-input);
1045
+ @property st-global(--wds-inner-shadow-fill-primary);
1046
+ @property st-global(--wds-inner-shadow-fill-secondary);
1047
+ @property st-global(--wds-inner-shadow-fill-track);
1048
+ @property st-global(--wds-inner-shadow-x-input);
1049
+ @property st-global(--wds-inner-shadow-x-primary);
1050
+ @property st-global(--wds-inner-shadow-x-secondary);
1051
+ @property st-global(--wds-inner-shadow-y-input);
1052
+ @property st-global(--wds-inner-shadow-y-primary);
1053
+ @property st-global(--wds-inner-shadow-y-secondary);
1040
1054
  @property st-global(--wds-input-area-border-radius-default-medium);
1041
1055
  @property st-global(--wds-input-area-border-radius-default-small);
1042
1056
  @property st-global(--wds-input-area-padding-left-medium);
@@ -1108,6 +1122,9 @@
1108
1122
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
1109
1123
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
1110
1124
  @property st-global(--wds-linear-progress-bar-border-radius);
1125
+ @property st-global(--wds-linear-progress-bar-label-font-letter-spacing);
1126
+ @property st-global(--wds-linear-progress-bar-label-font-line-height);
1127
+ @property st-global(--wds-linear-progress-bar-value-gap);
1111
1128
  @property st-global(--wds-list-item-action-affix-margin);
1112
1129
  @property st-global(--wds-list-item-action-border-radius);
1113
1130
  @property st-global(--wds-list-item-action-fill);
@@ -1239,6 +1256,8 @@
1239
1256
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
1240
1257
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
1241
1258
  @property st-global(--wds-multiselect-icon-fill);
1259
+ @property st-global(--wds-nestable-list-fill);
1260
+ @property st-global(--wds-nestable-list-paddings);
1242
1261
  @property st-global(--wds-notification-fill-error);
1243
1262
  @property st-global(--wds-notification-fill-premium);
1244
1263
  @property st-global(--wds-notification-fill-standard);
@@ -1341,6 +1360,8 @@
1341
1360
  @property st-global(--wds-segmented-toggle-border-width);
1342
1361
  @property st-global(--wds-segmented-toggle-border-width-default);
1343
1362
  @property st-global(--wds-segmented-toggle-border-width-selected);
1363
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
1364
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
1344
1365
  @property st-global(--wds-segmented-toggle-fill);
1345
1366
  @property st-global(--wds-segmented-toggle-fill-default);
1346
1367
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -1508,11 +1529,13 @@
1508
1529
  @property st-global(--wds-side-panel-floating-title-font-line-height);
1509
1530
  @property st-global(--wds-side-panel-floating-title-font-size);
1510
1531
  @property st-global(--wds-side-panel-footer-border-width);
1532
+ @property st-global(--wds-side-panel-footer-divider-height);
1511
1533
  @property st-global(--wds-side-panel-footer-fill);
1512
1534
  @property st-global(--wds-side-panel-footer-padding-horizontal);
1513
1535
  @property st-global(--wds-side-panel-footer-padding-vertical);
1514
1536
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
1515
1537
  @property st-global(--wds-side-panel-footnote-padding-vertical);
1538
+ @property st-global(--wds-side-panel-header-divider-height);
1516
1539
  @property st-global(--wds-side-panel-header-padding-left);
1517
1540
  @property st-global(--wds-side-panel-header-padding-right);
1518
1541
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -1665,6 +1688,7 @@
1665
1688
  @property st-global(--wds-swatches-swatch-size-medium);
1666
1689
  @property st-global(--wds-swatches-swatch-size-small);
1667
1690
  @property st-global(--wds-swatches-swatch-size-tiny);
1691
+ @property st-global(--wds-table-list-item-border-color);
1668
1692
  @property st-global(--wds-table-list-item-border-radius);
1669
1693
  @property st-global(--wds-table-list-item-drag-handle-color);
1670
1694
  @property st-global(--wds-table-list-item-fill);
@@ -1989,6 +2013,7 @@
1989
2013
  --wds-add-item-fill: #f4f6ff;
1990
2014
  --wds-add-item-fill-disabled: rgba(38, 37, 36, 0.0500);
1991
2015
  --wds-add-item-fill-hover: #f4f6ff;
2016
+ --wds-add-item-fill-pressed: #eef0ff;
1992
2017
  --wds-add-item-label-color: #4a57ff;
1993
2018
  --wds-add-item-padding-horizontal-large: 28px;
1994
2019
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -3005,6 +3030,19 @@
3005
3030
  --wds-image-border-radius-none: 0px;
3006
3031
  --wds-info-icon-fill: #4a57ff;
3007
3032
  --wds-info-icon-fill-hover: #4a57ff;
3033
+ --wds-inner-shadow-blur-input: 0px;
3034
+ --wds-inner-shadow-blur-primary: 0px;
3035
+ --wds-inner-shadow-blur-secondary: 0px;
3036
+ --wds-inner-shadow-fill-input: rgba(38, 37, 36, 0.0000);
3037
+ --wds-inner-shadow-fill-primary: rgba(255, 255, 255, 0.0000);
3038
+ --wds-inner-shadow-fill-secondary: rgba(255, 255, 255, 0.0000);
3039
+ --wds-inner-shadow-fill-track: rgba(38, 37, 36, 0.0000);
3040
+ --wds-inner-shadow-x-input: 0px;
3041
+ --wds-inner-shadow-x-primary: 0px;
3042
+ --wds-inner-shadow-x-secondary: 0px;
3043
+ --wds-inner-shadow-y-input: 0px;
3044
+ --wds-inner-shadow-y-primary: 0px;
3045
+ --wds-inner-shadow-y-secondary: 0px;
3008
3046
  --wds-input-area-border-radius-default-medium: 12px;
3009
3047
  --wds-input-area-border-radius-default-small: 8px;
3010
3048
  --wds-input-area-padding-left-medium: 16px;
@@ -3076,6 +3114,9 @@
3076
3114
  --wds-internal-thumbnail-illustration-size-small: 51px;
3077
3115
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
3078
3116
  --wds-linear-progress-bar-border-radius: 0px;
3117
+ --wds-linear-progress-bar-label-font-letter-spacing: 1px;
3118
+ --wds-linear-progress-bar-label-font-line-height: 16px;
3119
+ --wds-linear-progress-bar-value-gap: 12px;
3079
3120
  --wds-list-item-action-affix-margin: 4px;
3080
3121
  --wds-list-item-action-border-radius: 8px;
3081
3122
  --wds-list-item-action-fill: #ffffff;
@@ -3207,6 +3248,8 @@
3207
3248
  --wds-mobile-modal-footer-padding-horizontal: 24px;
3208
3249
  --wds-mobile-modal-footer-padding-vertical: 24px;
3209
3250
  --wds-multiselect-icon-fill: #595d70;
3251
+ --wds-nestable-list-fill: #ffffff;
3252
+ --wds-nestable-list-paddings: 0px;
3210
3253
  --wds-notification-fill-error: #f1695f;
3211
3254
  --wds-notification-fill-premium: #c161f0;
3212
3255
  --wds-notification-fill-standard: #7489ff;
@@ -3309,6 +3352,8 @@
3309
3352
  --wds-segmented-toggle-border-width: 0px;
3310
3353
  --wds-segmented-toggle-border-width-default: 0px;
3311
3354
  --wds-segmented-toggle-border-width-selected: 0px;
3355
+ --wds-segmented-toggle-container-border-radius-medium: 8px;
3356
+ --wds-segmented-toggle-container-border-radius-small: 8px;
3312
3357
  --wds-segmented-toggle-fill: #eef0ff;
3313
3358
  --wds-segmented-toggle-fill-default: #eef0ff;
3314
3359
  --wds-segmented-toggle-fill-disabled: #e5e5e5;
@@ -3476,11 +3521,13 @@
3476
3521
  --wds-side-panel-floating-title-font-line-height: 24px;
3477
3522
  --wds-side-panel-floating-title-font-size: 16px;
3478
3523
  --wds-side-panel-footer-border-width: 2px;
3524
+ --wds-side-panel-footer-divider-height: 1px;
3479
3525
  --wds-side-panel-footer-fill: rgba(255, 255, 255, 0.0000);
3480
3526
  --wds-side-panel-footer-padding-horizontal: 24px;
3481
3527
  --wds-side-panel-footer-padding-vertical: 16px;
3482
3528
  --wds-side-panel-footnote-padding-horizontal: 24px;
3483
3529
  --wds-side-panel-footnote-padding-vertical: 8px;
3530
+ --wds-side-panel-header-divider-height: 1px;
3484
3531
  --wds-side-panel-header-padding-left: 24px;
3485
3532
  --wds-side-panel-header-padding-right: 8px;
3486
3533
  --wds-side-panel-header-padding-vertical: 16px;
@@ -3633,6 +3680,7 @@
3633
3680
  --wds-swatches-swatch-size-medium: 44px;
3634
3681
  --wds-swatches-swatch-size-small: 32px;
3635
3682
  --wds-swatches-swatch-size-tiny: 28px;
3683
+ --wds-table-list-item-border-color: #dce2ff;
3636
3684
  --wds-table-list-item-border-radius: 12px;
3637
3685
  --wds-table-list-item-drag-handle-color: #4a57ff;
3638
3686
  --wds-table-list-item-fill: #ffffff;
package/wixel/component.st.css CHANGED
@@ -21,6 +21,7 @@
21
21
  @property st-global(--wds-add-item-fill);
22
22
  @property st-global(--wds-add-item-fill-disabled);
23
23
  @property st-global(--wds-add-item-fill-hover);
24
+ @property st-global(--wds-add-item-fill-pressed);
24
25
  @property st-global(--wds-add-item-label-color);
25
26
  @property st-global(--wds-add-item-padding-horizontal-large);
26
27
  @property st-global(--wds-add-item-padding-horizontal-tiny);
@@ -560,6 +561,9 @@
560
561
  @property st-global(--wds-internal-thumbnail-illustration-size-small);
561
562
  @property st-global(--wds-internal-thumbnail-illustration-size-tiny);
562
563
  @property st-global(--wds-linear-progress-bar-border-radius);
564
+ @property st-global(--wds-linear-progress-bar-label-font-letter-spacing);
565
+ @property st-global(--wds-linear-progress-bar-label-font-line-height);
566
+ @property st-global(--wds-linear-progress-bar-value-gap);
563
567
  @property st-global(--wds-list-item-action-affix-margin);
564
568
  @property st-global(--wds-list-item-action-border-radius);
565
569
  @property st-global(--wds-list-item-action-fill);
@@ -691,6 +695,8 @@
691
695
  @property st-global(--wds-mobile-modal-footer-padding-horizontal);
692
696
  @property st-global(--wds-mobile-modal-footer-padding-vertical);
693
697
  @property st-global(--wds-multiselect-icon-fill);
698
+ @property st-global(--wds-nestable-list-fill);
699
+ @property st-global(--wds-nestable-list-paddings);
694
700
  @property st-global(--wds-notification-fill-error);
695
701
  @property st-global(--wds-notification-fill-premium);
696
702
  @property st-global(--wds-notification-fill-standard);
@@ -793,6 +799,8 @@
793
799
  @property st-global(--wds-segmented-toggle-border-width);
794
800
  @property st-global(--wds-segmented-toggle-border-width-default);
795
801
  @property st-global(--wds-segmented-toggle-border-width-selected);
802
+ @property st-global(--wds-segmented-toggle-container-border-radius-medium);
803
+ @property st-global(--wds-segmented-toggle-container-border-radius-small);
796
804
  @property st-global(--wds-segmented-toggle-fill);
797
805
  @property st-global(--wds-segmented-toggle-fill-default);
798
806
  @property st-global(--wds-segmented-toggle-fill-disabled);
@@ -867,11 +875,13 @@
867
875
  @property st-global(--wds-side-panel-floating-title-font-line-height);
868
876
  @property st-global(--wds-side-panel-floating-title-font-size);
869
877
  @property st-global(--wds-side-panel-footer-border-width);
878
+ @property st-global(--wds-side-panel-footer-divider-height);
870
879
  @property st-global(--wds-side-panel-footer-fill);
871
880
  @property st-global(--wds-side-panel-footer-padding-horizontal);
872
881
  @property st-global(--wds-side-panel-footer-padding-vertical);
873
882
  @property st-global(--wds-side-panel-footnote-padding-horizontal);
874
883
  @property st-global(--wds-side-panel-footnote-padding-vertical);
884
+ @property st-global(--wds-side-panel-header-divider-height);
875
885
  @property st-global(--wds-side-panel-header-padding-left);
876
886
  @property st-global(--wds-side-panel-header-padding-right);
877
887
  @property st-global(--wds-side-panel-header-padding-vertical);
@@ -980,6 +990,7 @@
980
990
  @property st-global(--wds-swatches-swatch-size-medium);
981
991
  @property st-global(--wds-swatches-swatch-size-small);
982
992
  @property st-global(--wds-swatches-swatch-size-tiny);
993
+ @property st-global(--wds-table-list-item-border-color);
983
994
  @property st-global(--wds-table-list-item-border-radius);
984
995
  @property st-global(--wds-table-list-item-drag-handle-color);
985
996
  @property st-global(--wds-table-list-item-fill);
@@ -1302,6 +1313,7 @@
1302
1313
  --wds-add-item-fill: #f4f6ff;
1303
1314
  --wds-add-item-fill-disabled: rgba(38, 37, 36, 0.0500);
1304
1315
  --wds-add-item-fill-hover: #f4f6ff;
1316
+ --wds-add-item-fill-pressed: #eef0ff;
1305
1317
  --wds-add-item-label-color: #4a57ff;
1306
1318
  --wds-add-item-padding-horizontal-large: 28px;
1307
1319
  --wds-add-item-padding-horizontal-tiny: 12px;
@@ -1841,6 +1853,9 @@
1841
1853
  --wds-internal-thumbnail-illustration-size-small: 51px;
1842
1854
  --wds-internal-thumbnail-illustration-size-tiny: 38px;
1843
1855
  --wds-linear-progress-bar-border-radius: 0px;
1856
+ --wds-linear-progress-bar-label-font-letter-spacing: 1px;
1857
+ --wds-linear-progress-bar-label-font-line-height: 16px;
1858
+ --wds-linear-progress-bar-value-gap: 12px;
1844
1859
  --wds-list-item-action-affix-margin: 4px;
1845
1860
  --wds-list-item-action-border-radius: 8px;
1846
1861
  --wds-list-item-action-fill: #ffffff;
@@ -1972,6 +1987,8 @@
1972
1987
  --wds-mobile-modal-footer-padding-horizontal: 24px;
1973
1988
  --wds-mobile-modal-footer-padding-vertical: 24px;
1974
1989
  --wds-multiselect-icon-fill: #595d70;
1990
+ --wds-nestable-list-fill: #ffffff;
1991
+ --wds-nestable-list-paddings: 0px;
1975
1992
  --wds-notification-fill-error: #f1695f;
1976
1993
  --wds-notification-fill-premium: #c161f0;
1977
1994
  --wds-notification-fill-standard: #7489ff;
@@ -2074,6 +2091,8 @@
2074
2091
  --wds-segmented-toggle-border-width: 0px;
2075
2092
  --wds-segmented-toggle-border-width-default: 0px;
2076
2093
  --wds-segmented-toggle-border-width-selected: 0px;
2094
+ --wds-segmented-toggle-container-border-radius-medium: 8px;
2095
+ --wds-segmented-toggle-container-border-radius-small: 8px;
2077
2096
  --wds-segmented-toggle-fill: #eef0ff;
2078
2097
  --wds-segmented-toggle-fill-default: #eef0ff;
2079
2098
  --wds-segmented-toggle-fill-disabled: #e5e5e5;
@@ -2148,11 +2167,13 @@
2148
2167
  --wds-side-panel-floating-title-font-line-height: 24px;
2149
2168
  --wds-side-panel-floating-title-font-size: 16px;
2150
2169
  --wds-side-panel-footer-border-width: 2px;
2170
+ --wds-side-panel-footer-divider-height: 1px;
2151
2171
  --wds-side-panel-footer-fill: rgba(255, 255, 255, 0.0000);
2152
2172
  --wds-side-panel-footer-padding-horizontal: 24px;
2153
2173
  --wds-side-panel-footer-padding-vertical: 16px;
2154
2174
  --wds-side-panel-footnote-padding-horizontal: 24px;
2155
2175
  --wds-side-panel-footnote-padding-vertical: 8px;
2176
+ --wds-side-panel-header-divider-height: 1px;
2156
2177
  --wds-side-panel-header-padding-left: 24px;
2157
2178
  --wds-side-panel-header-padding-right: 8px;
2158
2179
  --wds-side-panel-header-padding-vertical: 16px;
@@ -2261,6 +2282,7 @@
2261
2282
  --wds-swatches-swatch-size-medium: 44px;
2262
2283
  --wds-swatches-swatch-size-small: 32px;
2263
2284
  --wds-swatches-swatch-size-tiny: 28px;
2285
+ --wds-table-list-item-border-color: #dce2ff;
2264
2286
  --wds-table-list-item-border-radius: 12px;
2265
2287
  --wds-table-list-item-drag-handle-color: #4a57ff;
2266
2288
  --wds-table-list-item-fill: #ffffff;
package/wixel/semantic.st.css CHANGED
@@ -399,6 +399,19 @@
399
399
  @property st-global(--wds-font-weight-heading-4);
400
400
  @property st-global(--wds-font-weight-heading-5);
401
401
  @property st-global(--wds-font-weight-heading-6);
402
+ @property st-global(--wds-inner-shadow-blur-input);
403
+ @property st-global(--wds-inner-shadow-blur-primary);
404
+ @property st-global(--wds-inner-shadow-blur-secondary);
405
+ @property st-global(--wds-inner-shadow-fill-input);
406
+ @property st-global(--wds-inner-shadow-fill-primary);
407
+ @property st-global(--wds-inner-shadow-fill-secondary);
408
+ @property st-global(--wds-inner-shadow-fill-track);
409
+ @property st-global(--wds-inner-shadow-x-input);
410
+ @property st-global(--wds-inner-shadow-x-primary);
411
+ @property st-global(--wds-inner-shadow-x-secondary);
412
+ @property st-global(--wds-inner-shadow-y-input);
413
+ @property st-global(--wds-inner-shadow-y-primary);
414
+ @property st-global(--wds-inner-shadow-y-secondary);
402
415
  @property st-global(--wds-shadow-blur-input);
403
416
  @property st-global(--wds-shadow-blur-primary-modal);
404
417
  @property st-global(--wds-shadow-blur-primary-overlay);
@@ -868,6 +881,19 @@
868
881
  --wds-font-weight-heading-4: 700;
869
882
  --wds-font-weight-heading-5: 700;
870
883
  --wds-font-weight-heading-6: 400;
884
+ --wds-inner-shadow-blur-input: 0px;
885
+ --wds-inner-shadow-blur-primary: 0px;
886
+ --wds-inner-shadow-blur-secondary: 0px;
887
+ --wds-inner-shadow-fill-input: rgba(38, 37, 36, 0.0000);
888
+ --wds-inner-shadow-fill-primary: rgba(255, 255, 255, 0.0000);
889
+ --wds-inner-shadow-fill-secondary: rgba(255, 255, 255, 0.0000);
890
+ --wds-inner-shadow-fill-track: rgba(38, 37, 36, 0.0000);
891
+ --wds-inner-shadow-x-input: 0px;
892
+ --wds-inner-shadow-x-primary: 0px;
893
+ --wds-inner-shadow-x-secondary: 0px;
894
+ --wds-inner-shadow-y-input: 0px;
895
+ --wds-inner-shadow-y-primary: 0px;
896
+ --wds-inner-shadow-y-secondary: 0px;
871
897
  --wds-shadow-blur-input: 0px;
872
898
  --wds-shadow-blur-primary-modal: 30px;
873
899
  --wds-shadow-blur-primary-overlay: 30px;