feat: add motion to theme

Author: joshuaellis

.changeset/odd-impalas-invent.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+feat: add motion properties to theme as well as transitions

packages/design-system/src/styles/easings.ts renamed to packages/design-system/src/styles/motion.ts

@@ -1,4 +1,6 @@
-export const EASINGS = {
+import { keyframes } from 'styled-components';
+
+const EASINGS = {
   easeInSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
   easeOutSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
   easeInOutSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
@@ -35,3 +37,86 @@ export const EASINGS = {
 
   authenticMotion: 'cubic-bezier(.4,0,.2,1)',
 };
+
+const TIMINGS = {
+  '320': '320ms',
+  '200': '200ms',
+  '120': '120ms',
+};
+
+/**
+ * A collection of common transitions attached to the theme to be used.
+ */
+const TRANSITIONS = {
+  color: `color ${TIMINGS['120']} ${EASINGS.easeOutQuad}`,
+  backgroundColor: `background-color ${TIMINGS['120']} ${EASINGS.easeOutQuad}`,
+};
+
+const ANIMATIONS = {
+  appear: keyframes`
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  `,
+  slideDownIn: keyframes`
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `,
+  slideDownOut: keyframes`
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+  `,
+  slideUpIn: keyframes`
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `,
+  slideUpOut: keyframes`
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+  `,
+  fadeIn: keyframes`
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  `,
+  fadeOut: keyframes`
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  `,
+};
+
+export { ANIMATIONS, EASINGS, TRANSITIONS, TIMINGS };

packages/design-system/src/themes/__tests__/extendTheme.test.ts

@@ -33,7 +33,8 @@ describe('extendTheme', () => {
       fontSizes: /* put the overrides for the fontSizes key */,
       lineHeights: /* put the overrides for the lineHeights key */,
       fontWeights: /* put the overrides for the fontWeights key */,
-      easings: /* put the overrides for the easings key */,
+      transitions: /* put the overrides for the transitions key */,
+      motion: /* put the overrides for the motion key */,
       })
       "
     `);
@@ -68,7 +69,8 @@ describe('extendTheme', () => {
       fontSizes: /* put the overrides for the fontSizes key */,
       lineHeights: /* put the overrides for the lineHeights key */,
       fontWeights: /* put the overrides for the fontWeights key */,
-      easings: /* put the overrides for the easings key */,
+      transitions: /* put the overrides for the transitions key */,
+      motion: /* put the overrides for the motion key */,
       })
       "
     `);

packages/design-system/src/themes/common-theme.ts

@@ -1,4 +1,4 @@
-import { EASINGS } from '../styles/easings';
+import { EASINGS, TIMINGS, TRANSITIONS } from '../styles/motion';
 
 import { Sizes, sizes } from './sizes';
 
@@ -26,7 +26,11 @@ export interface CommonTheme {
     semiBold: 500;
     bold: 600;
   };
-  easings: typeof EASINGS;
+  motion: {
+    easings: typeof EASINGS;
+    timings: typeof TIMINGS;
+  };
+  transitions: typeof TRANSITIONS;
 }
 
 export const commonTheme: CommonTheme = {
@@ -53,5 +57,9 @@ export const commonTheme: CommonTheme = {
     semiBold: 500,
     bold: 600,
   },
-  easings: EASINGS,
+  transitions: TRANSITIONS,
+  motion: {
+    easings: EASINGS,
+    timings: TIMINGS,
+  },
 };

packages/design-system/src/utilities/DesignSystemProvider.tsx

@@ -1,3 +1,5 @@
+import { useLayoutEffect } from 'react';
+
 import { Provider as TooltipProvider, TooltipProviderProps } from '@radix-ui/react-tooltip';
 import { DefaultTheme, ThemeProvider } from 'styled-components';
 
@@ -40,6 +42,31 @@ const DesignSystemProvider = ({
   theme = lightTheme,
   tooltipConfig,
 }: DesignSystemProviderProps) => {
+  useLayoutEffect(() => {
+    /**
+     * Switching themes should not trigger transitions and animations on elements.
+     * The following code will remove all transitions and animations when the theme changes.
+     */
+    const css = document.createElement('style');
+    css.type = 'text/css';
+    css.appendChild(
+      document.createTextNode(`
+        * {
+          -webkit-transition: none !important;
+          -moz-transition: none !important;
+          -o-transition: none !important;
+          -ms-transition: none !important;
+          transition: none !important;
+          animation: none !important;
+        }
+    `),
+    );
+    document.head.appendChild(css);
+
+    const _ = window.getComputedStyle(css).opacity;
+    document.head.removeChild(css);
+  }, [theme]);
+
   return (
     <Provider locale={locale}>
       <ThemeProvider theme={theme}>