Improve motion speed styles with milliseconds

To simplify the usage with animations all motion speed values have been
changed from seconds unit to milliseconds.

GH-64

src/components/atoms/core/vectors/shared/styles.js

@@ -30,7 +30,7 @@ const themeModeFillColor = themedMode({
  */
 const themeModeFillColorStyles = css`
   fill: ${themeModeFillColor};
-  transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}s ease-in-out;
+  transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
 `;
 
 /* eslint-disable-next-line import/prefer-default-export */

src/components/containers/core/Page/Page.jsx

@@ -23,7 +23,7 @@ const backgroundColor = themedMode({
  */
 const Page = styled.main`
   background-color: ${backgroundColor};
-  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}s ease-in-out;
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
 `;
 
 export default Page;

src/styles/theme/globals.js

@@ -44,8 +44,8 @@ const globals = css`
     line-height: ${typography.sizes.lineHeight};
     color: ${baseFontColor};
     background-color: ${baseBackgroundColor};
-    transition: color ${speed.duration.transition.base.themeModeSwitch}s ease-in-out,
-      background-color ${speed.duration.transition.base.themeModeSwitch}s ease-in-out;
+    transition: color ${speed.duration.transition.base.themeModeSwitch}ms ease-in-out,
+      background-color ${speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
     scroll-behavior: smooth;
   }
 `;

src/styles/theme/motion/speed.js

@@ -19,14 +19,22 @@
  * The values for motion durations.
  *
  * @type {object}
- * @see @see https://material.io/design/motion/speed.html#duration
+ * @see https://material.io/design/motion/speed.html#duration
  * @since 0.2.0
  */
 const duration = {
-  unit: "s",
+  unit: "ms",
+  exitReducerFactor: 0.8,
   transition: {
-    base: { themeModeSwitch: 0.4 },
-    area: { large: 0.4 }
+    base: { themeModeSwitch: 400 },
+    area: {
+      large: 300,
+      medium: 250,
+      small: 100
+    },
+    text: {
+      fade: 200
+    }
   }
 };
 

test/components/containers/core/Page/__snapshots__/Page.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`snapshot 1`] = `
 <div>
   <main
-    class="sc-bdVaJa dhBqSf"
+    class="sc-bdVaJa fWIgbF"
   />
 </div>
 `;