feat(addon-backgrounds): reduced motion disables transition

- addon backgrounds should respect the user's configuration
- so it disables transition transition animation when requested

addons/backgrounds/src/decorators/withBackground.ts

@@ -1,7 +1,12 @@
 import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { clearStyles, addBackgroundStyle, getBackgroundColorByName } from '../helpers';
+import {
+  clearStyles,
+  addBackgroundStyle,
+  getBackgroundColorByName,
+  isReduceMotionEnabled,
+} from '../helpers';
 
 export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
   const { globals, parameters } = context;
@@ -29,10 +34,11 @@ export const withBackground = (StoryFn: StoryFunction, context: StoryContext) =>
     context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
 
   const backgroundStyles = useMemo(() => {
+    const transitionStyle = 'transition: background-color 0.3s;';
     return `
       ${selector} {
         background: ${selectedBackgroundColor} !important;
-        transition: background-color 0.3s;
+        ${isReduceMotionEnabled() ? '' : transitionStyle}
       }
     `;
   }, [selectedBackgroundColor, selector]);

addons/backgrounds/src/helpers/index.ts

@@ -1,10 +1,15 @@
-import { document } from 'global';
+import { document, window } from 'global';
 import dedent from 'ts-dedent';
 
 import { logger } from '@storybook/client-logger';
 
 import { Background } from '../types';
 
+export const isReduceMotionEnabled = () => {
+  const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  return prefersReduceMotion.matches;
+};
+
 export const getBackgroundColorByName = (
   currentSelectedValue: string,
   backgrounds: Background[] = [],