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>

1 files changed, 7 insertions, 1 deletions

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,