@pareto-engineering/design-system 2.0.0-alpha.14 → 2.0.0-alpha.15

package/dist/cjs/b/Button/styles.scss

@@ -7,6 +7,7 @@ $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
 $default-margin:.5em;
+$default-animation-time: .3s;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
@@ -14,8 +15,8 @@ $default-margin:.5em;
   border-radius: var(--theme-border-radius);
   color: var(--on-x, var(--on-#{$default-color}));
   display: inline-flex;
-  font-weight: 600;
   font-family: var(--theme-default-paragraph);
+  font-weight: 600;
   justify-content: space-between;
   padding: $default-padding;
   transition: all .25s;
@@ -24,6 +25,14 @@ $default-margin:.5em;
     &::after {
       content: "-->";
       margin-left: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::after {
+        --final-position: 50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
     }
   }
 
@@ -31,6 +40,14 @@ $default-margin:.5em;
     &::before {
       content: "<--";
       margin-right: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::before {
+        --final-position: -50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
     }
   }
 
@@ -46,7 +63,6 @@ $default-margin:.5em;
     }
   }
 
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -114,3 +130,12 @@ $default-margin:.5em;
 }
 
 
+@keyframes animateArrow {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--final-position));
+  }
+}

package/dist/cjs/c/ContentSlides/common/Navigator/Navigator.js

@@ -74,7 +74,8 @@ var Navigator = _ref => {
       } else {
         setNextStepIndex(stepsForward);
       }
-    }
+    },
+    isCompact: true
   }, "Next") : /*#__PURE__*/React.createElement("span", null));
 };
 
@@ -136,8 +137,8 @@ Navigator.propTypes = {
 };
 Navigator.defaultProps = {
   canMoveForward: true,
-  previousColor: 'main1',
-  nextColor: 'main1',
+  previousColor: 'main2',
+  nextColor: 'main2',
   stepsForward: 1,
   stepsBackwards: 1
 };

package/dist/cjs/f/common/Debugger/Debugger.js

@@ -47,7 +47,7 @@ var Debugger = _ref => {
     style: style
   }, /*#__PURE__*/React.createElement(_b.Button, {
     onClick: toggleDebugger,
-    color: "main1"
+    color: "main2"
   }, isOpen ? 'Close FormDebugger' : 'Open FormDebugger'), isOpen && /*#__PURE__*/React.createElement("pre", {
     className: "debuger-content"
   }, JSON.stringify(formikContext, null, 2)));

package/dist/cjs/f/common/Label/Label.js

@@ -86,7 +86,7 @@ Label.propTypes = {
 Label.defaultProps = {
   // someProp:false
   as: 'label',
-  color: 'main1'
+  color: 'main2'
 };
 var _default = Label;
 exports.default = _default;

package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js

@@ -150,7 +150,7 @@ ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
   color: 'background2',
-  colorChecked: 'main1',
+  colorChecked: 'main2',
   disabled: false
 };
 

package/dist/cjs/f/fields/SelectInput/styles.scss

@@ -14,7 +14,7 @@ $default-padding: 0.75em 0.75em 0.55em;
 
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {

package/dist/cjs/f/fields/TaskRecommendationInput/TaskRecommendationInput.js

@@ -123,7 +123,7 @@ TaskRecommendationInput.propTypes = {
   image: _propTypes.default.string.isRequired
 };
 TaskRecommendationInput.defaultProps = {
-  color: 'main1'
+  color: 'main2'
 };
 
 var _default = /*#__PURE__*/(0, React.memo)(TaskRecommendationInput);

package/dist/cjs/f/fields/TextInput/styles.scss

@@ -10,16 +10,16 @@ $default-padding: 0.75em 0.75em 0.55em;
   flex-direction: column;
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {
-    background: var(--light-background1);
-    color: var(--on-background1);
+    background: var(--light-background2);
+    color: var(--on-background2);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background1);
+      background: var(--dark-background2);
     }
   }
 }

package/dist/cjs/f/fields/TextareaInput/TextareaInput.js

@@ -142,7 +142,7 @@ TextareaInput.propTypes = {
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background1',
-  labelColor: 'main1',
+  labelColor: 'main2',
   disabled: false
 };
 

package/dist/es/b/Button/styles.scss

@@ -7,6 +7,7 @@ $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
 $default-margin:.5em;
+$default-animation-time: .3s;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
@@ -14,8 +15,8 @@ $default-margin:.5em;
   border-radius: var(--theme-border-radius);
   color: var(--on-x, var(--on-#{$default-color}));
   display: inline-flex;
-  font-weight: 600;
   font-family: var(--theme-default-paragraph);
+  font-weight: 600;
   justify-content: space-between;
   padding: $default-padding;
   transition: all .25s;
@@ -24,6 +25,14 @@ $default-margin:.5em;
     &::after {
       content: "-->";
       margin-left: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::after {
+        --final-position: 50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
     }
   }
 
@@ -31,6 +40,14 @@ $default-margin:.5em;
     &::before {
       content: "<--";
       margin-right: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::before {
+        --final-position: -50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
     }
   }
 
@@ -46,7 +63,6 @@ $default-margin:.5em;
     }
   }
 
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -114,3 +130,12 @@ $default-margin:.5em;
 }
 
 
+@keyframes animateArrow {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--final-position));
+  }
+}

package/dist/es/c/ContentSlides/common/Navigator/Navigator.js

@@ -56,7 +56,8 @@ const Navigator = ({
       } else {
         setNextStepIndex(stepsForward);
       }
-    }
+    },
+    isCompact: true
   }, "Next") : /*#__PURE__*/React.createElement("span", null));
 };
 
@@ -118,8 +119,8 @@ Navigator.propTypes = {
 };
 Navigator.defaultProps = {
   canMoveForward: true,
-  previousColor: 'main1',
-  nextColor: 'main1',
+  previousColor: 'main2',
+  nextColor: 'main2',
   stepsForward: 1,
   stepsBackwards: 1
 };

package/dist/es/f/common/Debugger/Debugger.js

@@ -31,7 +31,7 @@ const Debugger = ({
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: toggleDebugger,
-    color: "main1"
+    color: "main2"
   }, isOpen ? 'Close FormDebugger' : 'Open FormDebugger'), isOpen && /*#__PURE__*/React.createElement("pre", {
     className: "debuger-content"
   }, JSON.stringify(formikContext, null, 2)));

package/dist/es/f/common/Label/Label.js

@@ -71,6 +71,6 @@ Label.propTypes = {
 Label.defaultProps = {
   // someProp:false
   as: 'label',
-  color: 'main1'
+  color: 'main2'
 };
 export default Label;

package/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -129,7 +129,7 @@ ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
   color: 'background2',
-  colorChecked: 'main1',
+  colorChecked: 'main2',
   disabled: false
 };
 export default /*#__PURE__*/memo(ChoicesInput);

package/dist/es/f/fields/SelectInput/styles.scss

@@ -14,7 +14,7 @@ $default-padding: 0.75em 0.75em 0.55em;
 
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {

package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js

@@ -106,6 +106,6 @@ TaskRecommendationInput.propTypes = {
   image: PropTypes.string.isRequired
 };
 TaskRecommendationInput.defaultProps = {
-  color: 'main1'
+  color: 'main2'
 };
 export default /*#__PURE__*/memo(TaskRecommendationInput);

package/dist/es/f/fields/TextInput/styles.scss

@@ -10,16 +10,16 @@ $default-padding: 0.75em 0.75em 0.55em;
   flex-direction: column;
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {
-    background: var(--light-background1);
-    color: var(--on-background1);
+    background: var(--light-background2);
+    color: var(--on-background2);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background1);
+      background: var(--dark-background2);
     }
   }
 }

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -126,7 +126,7 @@ TextareaInput.propTypes = {
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background1',
-  labelColor: 'main1',
+  labelColor: 'main2',
   disabled: false
 };
 export default /*#__PURE__*/memo(TextareaInput);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.15",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -8632,7 +8632,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8689,7 +8689,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8728,7 +8728,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8767,7 +8767,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8886,7 +8886,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -8941,7 +8941,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -8980,7 +8980,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -9019,7 +9019,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -9130,7 +9130,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -9150,7 +9150,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -9166,10 +9166,10 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1 y-main1"
+    className="base text-area-input form-input x-background1 y-main2"
   >
     <label
-      className="base label c-y v50 mb-v x-main1"
+      className="base label c-y v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -9185,7 +9185,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
      
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main1"
+    className="base choices-input form-input x-background2 y-main2"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -9194,7 +9194,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -9261,7 +9261,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base select-input form-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -9295,7 +9295,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9315,7 +9315,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -9335,7 +9335,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -9351,10 +9351,10 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1 y-main1"
+    className="base text-area-input form-input x-background1 y-main2"
   >
     <label
-      className="base label c-y v50 mb-v x-main1"
+      className="base label c-y v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -9370,7 +9370,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
      
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main1"
+    className="base choices-input form-input x-background2 y-main2"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -9379,7 +9379,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -9446,7 +9446,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base select-input form-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -9480,7 +9480,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9500,7 +9500,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label input-label v50 mb-v x-main2"
       htmlFor="extended"
     >
       Extended type input
@@ -9519,7 +9519,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9539,7 +9539,7 @@ exports[`Storyshots f/common/Description Base 1`] = `
 
 exports[`Storyshots f/common/Label Base 1`] = `
 <label
-  className="base label x-main1"
+  className="base label x-main2"
 >
   Sample Label
 </label>
@@ -9561,7 +9561,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9586,7 +9586,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9611,7 +9611,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9636,7 +9636,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9658,7 +9658,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -9676,7 +9676,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -9748,7 +9748,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9765,7 +9765,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="shapes"
     style={
       Object {
@@ -9775,7 +9775,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       Geometric Shapes
     </p>
@@ -9842,7 +9842,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9859,7 +9859,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="shapes"
     style={
       Object {
@@ -9869,7 +9869,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       Geometric Shapes
     </p>
@@ -9936,7 +9936,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9953,7 +9953,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main1"
+    className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -10025,7 +10025,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10042,7 +10042,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main1"
+    className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -10204,7 +10204,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10227,7 +10227,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10254,7 +10254,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10281,7 +10281,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10308,7 +10308,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10332,7 +10332,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10471,7 +10471,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10785,7 +10785,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11089,7 +11089,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11109,7 +11109,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11144,7 +11144,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11164,7 +11164,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11209,7 +11209,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11229,7 +11229,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11259,7 +11259,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11279,7 +11279,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11324,7 +11324,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11349,7 +11349,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
     }
   >
     <div
-      className="base task-recommendation-input x-main1"
+      className="base task-recommendation-input x-main2"
     >
       <div
         className="task-content b-on-x"
@@ -11358,7 +11358,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
           className="v1 p-v task"
         >
           <label
-            className="base label uc mb-v  x-main1"
+            className="base label uc mb-v  x-main2"
             htmlFor="taskRecommendations"
           >
             Find potential business customers
@@ -11402,7 +11402,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label input-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11422,7 +11422,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11446,7 +11446,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label input-label v50 mb-v x-main2"
         htmlFor="date"
       >
         Select date
@@ -11466,7 +11466,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label input-label v50 mb-v x-main2"
         htmlFor="time"
       >
         Select time
@@ -11486,7 +11486,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11510,7 +11510,7 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label input-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11540,10 +11540,10 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
     className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background1 y-main1"
+      className="base text-area-input x-background1 y-main2"
     >
       <label
-        className="base label c-y v50 mb-v x-main1"
+        className="base label c-y v50 mb-v x-main2"
         htmlFor="feedBack"
       >
         What can we improve on?
@@ -11563,7 +11563,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11584,10 +11584,10 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
     className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background1 y-main1"
+      className="base text-area-input x-background1 y-main2"
     >
       <label
-        className="base label c-y v50 mb-v x-main1"
+        className="base label c-y v50 mb-v x-main2"
         htmlFor="feedBack"
       >
         What can we improve on?
@@ -11607,7 +11607,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >

package/src/stories/b/Button.stories.jsx

@@ -14,10 +14,11 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    color   :{ control: { type: 'select', options: ALL_COLORS } },
-    disabled:{ control: { type: 'boolean' } },
-    isGhost :{ control: { type: 'boolean' } },
-    isSimple:{ control: { type: 'boolean' } },
+    color     :{ control: { type: 'select', options: ALL_COLORS } },
+    disabled  :{ control: { type: 'boolean' } },
+    isGhost   :{ control: { type: 'boolean' } },
+    isSimple  :{ control: { type: 'boolean' } },
+    isAnimated:{ control: { type: 'boolean' } },
   },
 }
 

package/src/ui/b/Button/Button.jsx

@@ -100,7 +100,8 @@ Button.propTypes = {
   /**
    * The button color
    */
-  color    :PropTypes.string,
+  color:PropTypes.string,
+
   /**
    * Button loading state
    */

package/src/ui/b/Button/styles.scss

@@ -7,6 +7,7 @@ $compact-padding: .6em .6em .48em;
 $default-color:primary;
 $font-weight:bold;
 $default-margin:.5em;
+$default-animation-time: .3s;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
@@ -14,8 +15,8 @@ $default-margin:.5em;
   border-radius: var(--theme-border-radius);
   color: var(--on-x, var(--on-#{$default-color}));
   display: inline-flex;
-  font-weight: 600;
   font-family: var(--theme-default-paragraph);
+  font-weight: 600;
   justify-content: space-between;
   padding: $default-padding;
   transition: all .25s;
@@ -24,6 +25,14 @@ $default-margin:.5em;
     &::after {
       content: "-->";
       margin-left: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::after {
+        --final-position: 50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
     }
   }
 
@@ -31,6 +40,14 @@ $default-margin:.5em;
     &::before {
       content: "<--";
       margin-right: $default-margin;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &::before {
+        --final-position: -50%;
+        animation: animateArrow $default-animation-time forwards;
+      }
     }
   }
 
@@ -46,7 +63,6 @@ $default-margin:.5em;
     }
   }
 
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -114,3 +130,12 @@ $default-margin:.5em;
 }
 
 
+@keyframes animateArrow {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--final-position));
+  }
+}

package/src/ui/c/ContentSlides/common/Navigator/Navigator.jsx

@@ -77,6 +77,7 @@ const Navigator = ({
                 setNextStepIndex(stepsForward)
               }
             }}
+            isCompact
           >
             Next
           </Button>
@@ -140,8 +141,8 @@ Navigator.propTypes = {
 
 Navigator.defaultProps = {
   canMoveForward:true,
-  previousColor :'main1',
-  nextColor     :'main1',
+  previousColor :'main2',
+  nextColor     :'main2',
   stepsForward  :1,
   stepsBackwards:1,
 }

package/src/ui/f/common/Debugger/Debugger.jsx

@@ -41,7 +41,7 @@ const Debugger = ({
         .join(' ')}
       style={style}
     >
-      <Button onClick={toggleDebugger} color="main1">
+      <Button onClick={toggleDebugger} color="main2">
         { isOpen
           ? 'Close FormDebugger'
           : 'Open FormDebugger'}

package/src/ui/f/common/Label/Label.jsx

@@ -90,7 +90,7 @@ Label.propTypes = {
 Label.defaultProps = {
   // someProp:false
   as   :'label',
-  color:'main1',
+  color:'main2',
 }
 
 export default Label

package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx

@@ -148,7 +148,7 @@ ChoicesInput.defaultProps = {
   gridColumnsMobile :2,
   gridColumnsDesktop:3,
   color             :'background2',
-  colorChecked      :'main1',
+  colorChecked      :'main2',
   disabled          :false,
 }
 

package/src/ui/f/fields/SelectInput/styles.scss

@@ -14,7 +14,7 @@ $default-padding: 0.75em 0.75em 0.55em;
 
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {

package/src/ui/f/fields/TaskRecommendationInput/TaskRecommendationInput.jsx

@@ -124,7 +124,7 @@ TaskRecommendationInput.propTypes = {
 }
 
 TaskRecommendationInput.defaultProps = {
-  color:'main1',
+  color:'main2',
 }
 
 export default memo(TaskRecommendationInput)

package/src/ui/f/fields/TextInput/styles.scss

@@ -10,16 +10,16 @@ $default-padding: 0.75em 0.75em 0.55em;
   flex-direction: column;
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {
-    background: var(--light-background1);
-    color: var(--on-background1);
+    background: var(--light-background2);
+    color: var(--on-background2);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background1);
+      background: var(--dark-background2);
     }
   }
 }

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -152,7 +152,7 @@ TextareaInput.propTypes = {
 TextareaInput.defaultProps = {
   rows         :3,
   textAreaColor:'background1',
-  labelColor   :'main1',
+  labelColor   :'main2',
   disabled     :false,
 }