npm - @wix/design-system - Versions diffs - 1.172.0 → 1.172.2 - Mend

@wix/design-system 1.172.0 → 1.172.2

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 (684) hide show

package/dist/statics/tokens-default.global.css CHANGED Viewed

@@ -58,6 +58,7 @@
   --wds-button-border-radius-tiny: 1000px;
   --wds-button-fill-gradient-hover-primary: #0f62e6;
   --wds-button-fill-gradient-hover-secondary: #0f62e6;
+  --wds-button-fill-standard-primary-hover: #0f62e6;
   --wds-button-fill-standard-secondary: #ffffff;
   --wds-button-fill-standard-secondary-hover: #116dff;
   --wds-button-font-line-height-large: 24px;
@@ -68,6 +69,7 @@
   --wds-button-font-size-medium: 16px;
   --wds-button-font-size-small: 14px;
   --wds-button-font-size-tiny: 12px;
+  --wds-button-font-weight-tiny: 700;
   --wds-button-gap-large: 12px;
   --wds-button-gap-medium: 6px;
   --wds-button-gap-small: 6px;
@@ -78,14 +80,17 @@
   --wds-button-icon-offset-tiny: 12px;
   --wds-button-label-font-size-large: 16px;
   --wds-button-outline-hover: transparent;
+  --wds-button-padding-horizontal-extra-large: 36px;
   --wds-button-padding-horizontal-large: 30px;
   --wds-button-padding-horizontal-medium: 24px;
   --wds-button-padding-horizontal-small: 18px;
   --wds-button-padding-horizontal-tiny: 12px;
+  --wds-button-padding-vertical-extra-large: 12px;
   --wds-button-padding-vertical-large: 9px;
   --wds-button-padding-vertical-medium: 6px;
   --wds-button-padding-vertical-small: 6px;
   --wds-button-padding-vertical-tiny: 3px;
+  --wds-button-size-extra-large: 48px;
   --wds-button-size-large: 42px;
   --wds-button-size-large-screen-small: 54px;
   --wds-button-size-medium: 36px;
@@ -205,6 +210,9 @@
   --wds-custom-modal-header-title-font-size: 16px;
   --wds-divider-fill-color-light-1: #dfe5eb;
   --wds-divider-fill-color-light-2: #dfe5eb;
+  --wds-divider-fill-color-light-primary: #dfe5eb;
+  --wds-divider-fill-color-light-secondary: #dfe5eb;
+  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
   --wds-dock-background-fill: #e7f0ff;
   --wds-dock-background-fill-active: #d6e6fe;
   --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -333,6 +341,7 @@
   --wds-list-item-padding-vertical-tiny: 12px;
   --wds-list-item-padding-vertical-x-tiny: 6px;
   --wds-list-item-padding-vertical-xx-tiny: 3px;
+  --wds-list-item-action-affix-margin: 6px;
   --wds-list-item-action-border-radius: 0;
   --wds-list-item-action-label-font-line-height-medium: 24px;
   --wds-list-item-action-label-font-line-height-small: 18px;
@@ -344,7 +353,6 @@
   --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
   --wds-list-item-action-padding-vertical-small: 6px;
   --wds-list-item-action-padding-vertical-small-screen-small: 12px;
-  --wds-list-item-action-prefix-margin: 6px;
   --wds-list-item-action-subtitle-font-line-height-medium: 18px;
   --wds-list-item-action-subtitle-font-size-medium: 14px;
   --wds-list-item-section-font-size: 14px;
@@ -364,6 +372,7 @@
   --wds-list-item-select-active-title-disabled: rgba(255, 255, 255, .7);
   --wds-list-item-select-active-title-disabled-screen-small: rgba(0, 6, 36, .3);
   --wds-list-item-select-active-title-screen-small: #116dff;
+  --wds-list-item-select-affix-margin: 6px;
   --wds-list-item-select-border-radius: 0;
   --wds-list-item-select-fill: #ffffff;
   --wds-list-item-select-fill-active: #d6e6fe;
@@ -383,7 +392,6 @@
   --wds-list-item-select-padding-vertical-medium-screen-small: 12px;
   --wds-list-item-select-padding-vertical-small: 6px;
   --wds-list-item-select-padding-vertical-small-screen-small: 12px;
-  --wds-list-item-select-prefix-margin: 6px;
   --wds-list-item-select-subtitle: #868aa5;
   --wds-list-item-select-subtitle-disabled: rgba(0, 6, 36, .3);
   --wds-list-item-select-subtitle-font-line-height-medium: 18px;
@@ -698,6 +706,10 @@
   --wds-tabs-padding-horizontal-small: 12px;
   --wds-tabs-padding-vertical-medium: 18px;
   --wds-tabs-padding-vertical-small: 12px;
+  --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
+  --wds-tabs-selection-fill-primary: #116dff;
+  --wds-tabs-selection-fill-secondary: #116dff;
+  --wds-tabs-selection-height: 3px;
   --wds-tag-border-radius-large: 1000px;
   --wds-tag-border-radius-medium: 1000px;
   --wds-tag-border-radius-small: 1000px;
@@ -718,7 +730,7 @@
   --wds-tag-size-tiny: 18px;
   --wds-testimonial-list-gap: 30px;
   --wds-thumbnail-border-radius: 6px;
-  --wds-thumbnail-border-width-default: 1;
+  --wds-thumbnail-border-width-default: 1px;
   --wds-thumbnail-fill: rgba(255, 255, 255, 0);
   --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
   --wds-thumbnail-gap: 12px;
@@ -727,9 +739,9 @@
   --wds-thumbnail-illustration-fill-3: #e7f0ff;
   --wds-thumbnail-subtitle-fill: #44485f;
   --wds-thumbnail-subtitle-font-line-height-tiny: 18px;
-  --wds-thumbnail-subtitle-font-size-tiny: 14px;
+  --wds-thumbnail-subtitle-font-size-tiny: 12px;
   --wds-thumbnail-title-font-line-height-tiny: 18px;
-  --wds-thumbnail-title-font-size-tiny: 14px;
+  --wds-thumbnail-title-font-size-tiny: 12px;
   --wds-thumbnail-title-font-weight-tiny: 400;
   --wds-thumbnail-title-padding-top: 6px;
   --wds-timeline-title-font-line-height: 18px;
@@ -755,9 +767,9 @@
   --wds-toggle-button-padding-right-small-round: 18px;
   --wds-toggle-button-padding-right-tiny: 6px;
   --wds-toggle-button-padding-right-tiny-round: 12px;
+  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
   --wds-toggle-switch-border-standard-disabled: rgba(0, 6, 36, .1);
   --wds-toggle-switch-border-success-disabled: rgba(0, 6, 36, .1);
-  --wds-toggle-switch-border-error-disabled: rgba(0, 6, 36, .1);
   --wds-toggle-switch-border-urgent-disabled: rgba(0, 6, 36, .1);
   --wds-toggle-switch-fill-error: #fbd0cd;
   --wds-toggle-switch-fill-error-active: #e62214;

package/dist/statics/tokens-studio.global.css CHANGED Viewed

@@ -9,8 +9,8 @@
   --wds-accordion-title-font-line-height-small: 16px;
   --wds-accordion-title-font-size-medium: 14px;
   --wds-accordion-title-font-size-small: 12px;
-  --wds-accordion-title-font-weight: 700;
-  --wds-accordion-title-font-weight-small: 700;
+  --wds-accordion-title-font-weight: 500;
+  --wds-accordion-title-font-weight-small: 500;
   --wds-add-item-border-radius: 4px;
   --wds-add-item-padding-horizontal-large: 28px;
   --wds-add-item-padding-horizontal-tiny: 12px;
@@ -58,6 +58,7 @@
   --wds-button-border-radius-tiny: 4px;
   --wds-button-fill-gradient-hover-primary: #0f62e6;
   --wds-button-fill-gradient-hover-secondary: #0f62e6;
+  --wds-button-fill-standard-primary-hover: #0f62e6;
   --wds-button-fill-standard-secondary: #ffffff;
   --wds-button-fill-standard-secondary-hover: #f7f8f8;
   --wds-button-font-line-height-large: 24px;
@@ -79,14 +80,17 @@
   --wds-button-icon-offset-tiny: 12px;
   --wds-button-label-font-size-large: 16px;
   --wds-button-outline-hover: #e2e3ea;
+  --wds-button-padding-horizontal-extra-large: 20px;
   --wds-button-padding-horizontal-large: 16px;
   --wds-button-padding-horizontal-medium: 16px;
   --wds-button-padding-horizontal-small: 12px;
   --wds-button-padding-horizontal-tiny: 12px;
+  --wds-button-padding-vertical-extra-large: 10px;
   --wds-button-padding-vertical-large: 6px;
   --wds-button-padding-vertical-medium: 6px;
   --wds-button-padding-vertical-small: 6px;
   --wds-button-padding-vertical-tiny: 2px;
+  --wds-button-size-extra-large: 40px;
   --wds-button-size-large: 36px;
   --wds-button-size-large-screen-small: 44px;
   --wds-button-size-medium: 32px;
@@ -206,6 +210,9 @@
   --wds-custom-modal-header-title-font-size: 14px;
   --wds-divider-fill-color-light-1: #e2e3ea;
   --wds-divider-fill-color-light-2: #e2e3ea;
+  --wds-divider-fill-color-light-primary: #e2e3ea;
+  --wds-divider-fill-color-light-secondary: #e2e3ea;
+  --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
   --wds-dock-background-fill: #ebf2ff;
   --wds-dock-background-fill-active: #dce9ff;
   --wds-dock-background-fill-disabled: #e5e5e5;
@@ -334,6 +341,7 @@
   --wds-list-item-padding-vertical-tiny: 12px;
   --wds-list-item-padding-vertical-x-tiny: 8px;
   --wds-list-item-padding-vertical-xx-tiny: 4px;
+  --wds-list-item-action-affix-margin: 4px;
   --wds-list-item-action-border-radius: 0;
   --wds-list-item-action-label-font-line-height-medium: 20px;
   --wds-list-item-action-label-font-line-height-small: 18px;
@@ -345,7 +353,6 @@
   --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
   --wds-list-item-action-padding-vertical-small: 6px;
   --wds-list-item-action-padding-vertical-small-screen-small: 8px;
-  --wds-list-item-action-prefix-margin: 4px;
   --wds-list-item-action-subtitle-font-line-height-medium: 16px;
   --wds-list-item-action-subtitle-font-size-medium: 12px;
   --wds-list-item-section-font-size: 12px;
@@ -365,6 +372,7 @@
   --wds-list-item-select-active-title-disabled: #bebebe;
   --wds-list-item-select-active-title-disabled-screen-small: #bebebe;
   --wds-list-item-select-active-title-screen-small: #116dff;
+  --wds-list-item-select-affix-margin: 6px;
   --wds-list-item-select-fill: #ffffff;
   --wds-list-item-select-fill-active: #dce9ff;
   --wds-list-item-select-fill-disabled: #ffffff;
@@ -379,7 +387,6 @@
   --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
   --wds-list-item-select-padding-vertical-small: 4px;
   --wds-list-item-select-padding-vertical-small-screen-small: 8px;
-  --wds-list-item-select-prefix-margin: 6px;
   --wds-list-item-select-subtitle: #868aa5;
   --wds-list-item-select-subtitle-disabled: #bebebe;
   --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -685,6 +692,10 @@
   --wds-tabs-padding-horizontal-small: 12px;
   --wds-tabs-padding-vertical-medium: 16px;
   --wds-tabs-padding-vertical-small: 12px;
+  --wds-tabs-selection-border: linear-gradient(90deg, #116dff 0%, #116dff 20%, #116dff 80%, #116dff 100%);
+  --wds-tabs-selection-fill-primary: #116dff;
+  --wds-tabs-selection-fill-secondary: #116dff;
+  --wds-tabs-selection-height: 3px;
   --wds-tag-border-radius-large: 4px;
   --wds-tag-border-radius-medium: 4px;
   --wds-tag-border-radius-small: 4px;
@@ -705,7 +716,7 @@
   --wds-tag-size-tiny: 20px;
   --wds-testimonial-list-gap: 24px;
   --wds-thumbnail-border-radius: 4px;
-  --wds-thumbnail-border-width-default: 0;
+  --wds-thumbnail-border-width-default: 1px;
   --wds-thumbnail-fill: rgba(255, 255, 255, 0);
   --wds-thumbnail-fill-hover: rgba(255, 255, 255, 0);
   --wds-thumbnail-gap: 12px;

package/dist/statics/tokens-wixel.global.css CHANGED Viewed

@@ -58,8 +58,9 @@
   --wds-button-border-radius-tiny: 8px;
   --wds-button-fill-gradient-hover-primary: #4a2ae9;
   --wds-button-fill-gradient-hover-secondary: #526cff;
+  --wds-button-fill-standard-primary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
   --wds-button-fill-standard-secondary: #ffffff;
-  --wds-button-fill-standard-secondary-hover: #f4f6ff;
+  --wds-button-fill-standard-secondary-hover: linear-gradient(105deg, #526cff 17%, #4a2ae9 75%);
   --wds-button-font-line-height-large: 20px;
   --wds-button-font-line-height-medium: 20px;
   --wds-button-font-line-height-small: 16px;
@@ -78,24 +79,27 @@
   --wds-button-icon-offset-small: 12px;
   --wds-button-icon-offset-tiny: 12px;
   --wds-button-label-font-size-large: 14px;
-  --wds-button-outline-hover: #d6dcff;
+  --wds-button-outline-hover: transparent;
+  --wds-button-padding-horizontal-extra-large: 24px;
   --wds-button-padding-horizontal-large: 24px;
   --wds-button-padding-horizontal-medium: 20px;
   --wds-button-padding-horizontal-small: 16px;
   --wds-button-padding-horizontal-tiny: 12px;
+  --wds-button-padding-vertical-extra-large: 14px;
   --wds-button-padding-vertical-large: 10px;
   --wds-button-padding-vertical-medium: 8px;
   --wds-button-padding-vertical-small: 6px;
   --wds-button-padding-vertical-tiny: 6px;
-  --wds-button-size-large: 48px;
+  --wds-button-size-extra-large: 48px;
+  --wds-button-size-large: 42px;
   --wds-button-size-large-screen-small: 44px;
-  --wds-button-size-medium: 42px;
+  --wds-button-size-medium: 38px;
   --wds-button-size-medium-screen-small: 40px;
-  --wds-button-size-small: 36px;
+  --wds-button-size-small: 32px;
   --wds-button-size-small-screen-small: 36px;
-  --wds-button-size-tiny: 28px;
+  --wds-button-size-tiny: 24px;
   --wds-button-size-tiny-screen-small: 32px;
-  --wds-button-size-x-tiny: 24px;
+  --wds-button-size-x-tiny: 20px;
   --wds-button-text-standard-primary: #131720;
   --wds-button-text-standard-primary-hover: #131720;
   --wds-button-text-hover: #526cff;
@@ -150,7 +154,7 @@
   --wds-circular-progress-bar-size-medium: 52px;
   --wds-circular-progress-bar-size-small: 24px;
   --wds-circular-progress-bar-size-tiny: 18px;
-  --wds-close-button-standard-fill-active: #526cff;
+  --wds-close-button-standard-fill-active: #4a2ae9;
   --wds-close-button-standard-fill-disabled: #e5e5e5;
   --wds-close-button-standard-fill-hover: #bac5ff;
   --wds-close-button-standard-filled-fill: #d6dcff;
@@ -203,6 +207,9 @@
   --wds-custom-modal-header-title-font-size: 14px;
   --wds-divider-fill-color-light-1: #d6dcff;
   --wds-divider-fill-color-light-2: rgba(244, 247, 255, 0.0000);
+  --wds-divider-fill-color-light-primary: rgba(214, 220, 255, 1);
+  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
+  --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, rgba(214, 220, 255, 1) 16%, rgba(214, 220, 255, 1) 84%, rgba(244, 247, 255, 0.0000) 100%);
   --wds-dock-background-fill: #eef0ff;
   --wds-dock-background-fill-active: #d6dcff;
   --wds-dock-background-fill-disabled: #e5e5e5;
@@ -331,6 +338,7 @@
   --wds-list-item-padding-vertical-tiny: 12px;
   --wds-list-item-padding-vertical-x-tiny: 8px;
   --wds-list-item-padding-vertical-xx-tiny: 4px;
+  --wds-list-item-action-affix-margin: 6px;
   --wds-list-item-action-border-radius: 8px;
   --wds-list-item-action-label-font-line-height-medium: 20px;
   --wds-list-item-action-label-font-line-height-small: 16px;
@@ -342,7 +350,6 @@
   --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
   --wds-list-item-action-padding-vertical-small: 12px;
   --wds-list-item-action-padding-vertical-small-screen-small: 8px;
-  --wds-list-item-action-prefix-margin: 6px;
   --wds-list-item-action-subtitle-font-line-height-medium: 16px;
   --wds-list-item-action-subtitle-font-size-medium: 12px;
   --wds-list-item-section-font-line-height: 16px;
@@ -362,6 +369,7 @@
   --wds-list-item-select-active-title-disabled: rgba(38, 37, 36, 0.3000);
   --wds-list-item-select-active-title-disabled-screen-small: rgba(38, 37, 36, 0.3000);
   --wds-list-item-select-active-title-screen-small: #526cff;
+  --wds-list-item-select-affix-margin: 6px;
   --wds-list-item-select-border-radius: 8px;
   --wds-list-item-select-fill: #ffffff;
   --wds-list-item-select-fill-active: #eef0ff;
@@ -381,7 +389,6 @@
   --wds-list-item-select-padding-vertical-medium-screen-small: 8px;
   --wds-list-item-select-padding-vertical-small: 12px;
   --wds-list-item-select-padding-vertical-small-screen-small: 8px;
-  --wds-list-item-select-prefix-margin: 6px;
   --wds-list-item-select-subtitle: #868aa5;
   --wds-list-item-select-subtitle-disabled: rgba(38, 37, 36, 0.3000);
   --wds-list-item-select-subtitle-font-line-height-medium: 16px;
@@ -650,9 +657,9 @@
   --wds-skeleton-border-radius-rectangle: 4px;
   --wds-slider-slider-knob-border-width: 5px;
   --wds-slider-slider-knob-border-width-hover: 12px;
-  --wds-slider-slider-knob-color: #ffffff;
-  --wds-slider-slider-knob-color-hover: #f4f6ff;
-  --wds-slider-slider-knob-shadow: true;
+  --wds-slider-slider-knob-color: #526cff;
+  --wds-slider-slider-knob-color-hover: #4c49fb;
+  --wds-slider-slider-knob-shadow: 0 1px 4px 0 rgba(38, 37, 36, 0.3000), 0 2px 4px 0 rgba(38, 37, 36, 0.0000);
   --wds-slider-slider-knob-size: 16px;
   --wds-slider-slider-knob-size-hover: 24px;
   --wds-slider-slider-knob-size-transparent: 16px;
@@ -696,6 +703,10 @@
   --wds-tabs-padding-horizontal-small: 12px;
   --wds-tabs-padding-vertical-medium: 16px;
   --wds-tabs-padding-vertical-small: 12px;
+  --wds-tabs-selection-border: linear-gradient(90deg, rgba(255, 255, 255, 0.0000) 0%, #526cff 20%, #526cff 80%, rgba(255, 255, 255, 0.0000) 100%);
+  --wds-tabs-selection-fill-primary: #526cff;
+  --wds-tabs-selection-fill-secondary: rgba(255, 255, 255, 0.0000);
+  --wds-tabs-selection-height: 1px;
   --wds-tag-border-radius-large: 4px;
   --wds-tag-border-radius-medium: 4px;
   --wds-tag-border-radius-small: 4px;
@@ -795,7 +806,7 @@
   --wds-toggle-switch-width-large: 40px;
   --wds-toggle-switch-width-medium: 32px;
   --wds-toggle-switch-width-small: 24px;
-  --wds-tooltip-background-fill: #ffffff;
+  --wds-tooltip-background-fill: #131720;
   --wds-tooltip-border-radius: 8px;
   --wds-tooltip-border-radius-medium: 8px;
   --wds-tooltip-border-radius-small: 8px;
@@ -803,7 +814,7 @@
   --wds-tooltip-padding-horizontal-small: 8px;
   --wds-tooltip-padding-vertical-medium: 8px;
   --wds-tooltip-padding-vertical-small: 6px;
-  --wds-tooltip-text-fill: #131720;
+  --wds-tooltip-text-fill: #ffffff;
   --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
   --wds-vertical-tabs-action-padding-horizontal-small: 24px;
   --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
@@ -1240,7 +1251,7 @@
   --wds-color-fill-stage-section-secondary-disabled: #e5e5e5;
   --wds-color-fill-stage-section-secondary-hover: #bac5ff;
   --wds-color-fill-standard-primary: #526cff;
-  --wds-color-fill-standard-primary-active: #526cff;
+  --wds-color-fill-standard-primary-active: #4a2ae9;
   --wds-color-fill-standard-primary-disabled: #bebebe;
   --wds-color-fill-standard-primary-hover: #4c49fb;
   --wds-color-fill-standard-secondary: #eef0ff;
@@ -1405,7 +1416,7 @@
   --wds-font-weight-body-bold: 600;
   --wds-shadow-100: 0;
   --wds-shadow-200: 0;
-  --wds-shadow-300: 0;
+  --wds-shadow-300: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
   --wds-shadow-400: 0;
   --wds-shadow-blur-50: 4px;
   --wds-shadow-blur-100: 4px;
@@ -1443,10 +1454,10 @@
   --wds-shadow-focus-standard: #bac5ff;
   --wds-shadow-focus-warning: #fdead2;
   --wds-shadow-focus-spread: 0;
-  --wds-shadow-surface-modal: 0;
-  --wds-shadow-surface-overlay: 0;
-  --wds-shadow-surface-overlay-dark: 0;
-  --wds-shadow-surface-raised: 0;
+  --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
+  --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
+  --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
+  --wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
   --wds-space-0: 0;
   --wds-space-25: 1px;
   --wds-space-50: 2px;
@@ -1464,6 +1475,7 @@
   --wds-space-800: 32px;
   --wds-space-850: 34px;
   --wds-space-900: 36px;
+  --wds-space-950: 38px;
   --wds-space-1000: 40px;
   --wds-space-1050: 42px;
   --wds-space-1100: 44px;