feat: follow OS reduced motion setting (#1757)

- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference

Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>

4 files changed, 37 insertions, 8 deletions

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index c08c4e97d..0aef04a6c 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -35,13 +35,21 @@ interface IProps extends IFormField, IWithStyle {
   target?: string;
 }
 
+let buttonTransition: string = 'none';
+let loaderContainerTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'background .5s, opacity 0.3s';
+  loaderContainerTransition = 'all 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   button: {
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
     display: 'inline-flex',
     position: 'relative' as Property.Position,
-    transition: 'background .5s, opacity 0.3s',
+    transition: buttonTransition,
     textAlign: 'center' as Property.TextAlign,
     outline: 'none',
     alignItems: 'center',
@@ -50,7 +58,6 @@ const styles = (theme: Theme) => ({
       (props.stretch ? '100%' : 'auto') as Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
-    // height: theme.buttonHeight,
 
     '&:hover': {
       opacity: 0.8,
@@ -129,7 +136,7 @@ const styles = (theme: Theme) => ({
     width: (props: IProps): string => (!props.busy ? '0' : '40px'),
     height: 20,
     overflow: 'hidden',
-    transition: 'all 0.3s',
+    transition: loaderContainerTransition,
     marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
     marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
     position: (props: IProps): Property.Position =>
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 4a5775579..ef3e70ddb 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -46,6 +46,14 @@ interface IState {
   options: IOptions;
 }
 
+let popupTransition: string = 'none';
+let toggleTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  popupTransition = 'all 0.3s';
+  toggleTransition = 'transform 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   select: {
     background: theme.selectBackground,
@@ -70,7 +78,7 @@ const styles = (theme: Theme) => ({
     overflowX: 'scroll',
     border: theme.selectBorder,
     borderTop: 0,
-    transition: 'all 0.3s',
+    transition: popupTransition,
   },
   open: {
     opacity: 1,
@@ -98,7 +106,7 @@ const styles = (theme: Theme) => ({
   toggle: {
     marginLeft: 'auto',
     fill: theme.selectToggleColor,
-    transition: 'transform 0.3s',
+    transition: toggleTransition,
   },
   toggleOpened: {
     transform: 'rotateZ(90deg)',
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index a9970c8f1..e525d2906 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -17,6 +17,12 @@ interface IProps
   className?: string;
 }
 
+let buttonTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'all .5s';
+}
+
 const styles = (theme: Theme) => ({
   toggle: {
     background: theme.toggleBackground,
@@ -34,7 +40,7 @@ const styles = (theme: Theme) => ({
     left: 1,
     top: 1,
     position: 'absolute' as Property.Position,
-    transition: 'all .5s',
+    transition: buttonTransition,
   },
   buttonActive: {
     background: theme.toggleButtonActive,
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 961262001..a6e4b3240 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -44,6 +44,14 @@ const buttonStyles = (theme: Theme) => {
   return styles;
 };
 
+let infoBoxTransition: string = 'none';
+let ctaTransition: string = 'none';
+
+if (window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  infoBoxTransition = 'all 0.5s';
+  ctaTransition = 'opacity 0.3s';
+}
+
 const styles = (theme: Theme) => ({
   wrapper: {
     position: 'relative',
@@ -58,7 +66,7 @@ const styles = (theme: Theme) => ({
     height: 'auto',
     padding: '15px 20px',
     top: 0,
-    transition: 'all 0.5s',
+    transition: infoBoxTransition,
     opacity: 1,
   },
   dismissing: {
@@ -91,7 +99,7 @@ const styles = (theme: Theme) => ({
     marginLeft: 15,
     padding: [4, 10],
     fontSize: theme.uiFontSize,
-    transition: 'opacity 0.3s',
+    transition: ctaTransition,
 
     '&:hover': {
       opacity: 0.6,