refactor: use global CSS rule for prefers-reduced-motion instead of individual rules

- Added comprehensive global @media (prefers-reduced-motion: reduce) rule in .dumi/global.less
- Uses universal selector (*) with !important to ensure coverage across all elements
- More maintainable than 28+ individual @media blocks
- Follows modern accessibility best practices
- Minimal performance impact in modern browsers

Co-authored-by: li-jia-nan <49217418+li-jia-nan@users.noreply.github.com>

.dumi/global.less

@@ -1,6 +1,19 @@
 // FIXME: workaround for avoid searchbar styles be extracted to async chunk
 @import 'dumi/theme-default/slots/SearchBar/index.less';
 
+// Global prefers-reduced-motion support for accessibility
+// This respects user preferences for reduced motion by disabling transitions and animations
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 .demo-logo {
   width: 120px;
   min-width: 120px;
@@ -37,6 +50,9 @@ html {
   color: rgba(255, 255, 255, 0.9);
   text-decoration: none;
   transition: all 0.3s;
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 .rc-footer a:hover {
   color: #40a9ff;

.dumi/hooks/useThemeAnimation.ts

@@ -12,6 +12,10 @@ const viewTransitionStyle = `
   animation: keepAlive ${duration}s linear;
   animation-fill-mode: forwards;
   mix-blend-mode: normal;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    transition: none;
+  }
 }
 
 .dark::view-transition-old(root) {

.dumi/pages/index/components/BannerRecommends.tsx

@@ -28,7 +28,9 @@ const useStyle = createStyles(({ cssVar, css, cx }) => {
     padding-inline: ${cssVar.paddingLG};
     box-sizing: border-box;
     position: relative;
-
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
     &:before {
       content: '';
       inset: calc(${cssVar.lineWidth} * -1);
@@ -41,6 +43,9 @@ const useStyle = createStyles(({ cssVar, css, cx }) => {
       );
       opacity: 0;
       transition: all 0.3s ease;
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
       mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);

.dumi/pages/index/components/Group.tsx

@@ -13,6 +13,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     background-size: cover;
     background-position: 50% 0%;
     background-repeat: no-repeat;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `,
   container: css`
     position: absolute;

.dumi/pages/index/components/PreviewBanner/LuminousBg.tsx

@@ -4,6 +4,25 @@ import { createStyles } from 'antd-style';
 
 import { DarkContext } from '../../../../hooks/useDark';
 
+const useStyles = createStyles(({ css, cssVar }) => ({
+  container: css`
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    background: ${cssVar.colorBgContainer};
+  `,
+  bubble: css`
+    filter: blur(100px);
+    border-radius: 50%;
+    position: absolute;
+    transition: all 5s ease-in-out;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      animation: none;
+    }
+  `,
+}));
+
 interface BubbleProps {
   size: number | string;
   left?: number | string;
@@ -16,16 +35,20 @@ interface BubbleProps {
 
 const MAX_OFFSET = 200;
 
-const Bubble = ({
-  size,
-  left,
-  top,
-  color,
-  offsetXMultiple = 1,
-  offsetYMultiple = 1,
-  defaultOpacity = 0.1,
-}: BubbleProps) => {
-  const [offset, setOffset] = useState([0, 0]);
+const Bubble: React.FC<BubbleProps> = (props) => {
+  const {
+    size,
+    left,
+    top,
+    color,
+    offsetXMultiple = 1,
+    offsetYMultiple = 1,
+    defaultOpacity = 0.1,
+  } = props;
+
+  const { styles } = useStyles();
+
+  const [offset, setOffset] = useState<[number, number]>([0, 0]);
   const [opacity, setOpacity] = useState(defaultOpacity);
   const [sizeOffset, setSizeOffset] = useState(1);
 
@@ -47,7 +70,6 @@ const Bubble = ({
   useEffect(() => {
     const randomTimeout = Math.random() * 2000 + 3000;
     const id = setTimeout(randomPos, randomTimeout);
-
     return () => clearTimeout(id);
   }, [offset]);
 
@@ -55,39 +77,27 @@ const Bubble = ({
     <div
       aria-hidden="true"
       data-desc="luminous-bubble"
+      className={styles.bubble}
+      draggable={false}
       style={{
         opacity,
         width: size,
         height: size,
-        borderRadius: '50%',
         background: color,
-        filter: 'blur(100px)',
         left,
         top,
-        transform: `translate(-50%, -50%) translate(${offset[0]}px, ${offset[1]}px) scale(${sizeOffset})`,
-        transition: 'all 5s ease-in-out',
-        position: 'absolute',
+        transform: `translate3d(-50%, -50%, 0) translate3d(${offset[0]}px, ${offset[1]}px, 0) scale(${sizeOffset})`,
       }}
     />
   );
 };
 
-const useStyles = createStyles(({ css, cssVar }) => ({
-  container: css`
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    background: ${cssVar.colorBgContainer};
-  `,
-}));
-
 interface LuminousBgProps {
   className?: string;
 }
 
-export default function LuminousBg({ className }: LuminousBgProps) {
+const LuminousBg: React.FC<LuminousBgProps> = ({ className }) => {
   const { styles, cx } = useStyles();
-
   return (
     <div className={cx(styles.container, className)}>
       {/* Left + Top */}
@@ -112,4 +122,6 @@ export default function LuminousBg({ className }: LuminousBgProps) {
       />
     </div>
   );
-}
+};
+
+export default LuminousBg;

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -35,6 +35,9 @@ const useStyle = createStyles(({ cssVar, css, cx }) => {
     inset-inline-end: -60px;
     top: -24px;
     transition: all 1s cubic-bezier(0.03, 0.98, 0.52, 0.99);
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `);
 
   return {

.dumi/pages/index/components/Theme/BackgroundImage.tsx

@@ -20,6 +20,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     width: 100%;
     object-fit: cover;
     object-position: right top;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `,
 }));
 

.dumi/pages/index/components/Theme/ColorPicker.tsx

@@ -15,8 +15,11 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
     height: calc(${cssVar.controlHeightLG} / 2);
     border-radius: 100%;
     cursor: pointer;
-    transition: all ${cssVar.motionDurationFast};
     display: inline-block;
+    transition: all ${cssVar.motionDurationFast};
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
 
     & > input[type='radio'] {
       width: 0;

.dumi/pages/index/components/Theme/ThemePicker.tsx

@@ -39,6 +39,9 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
     transition: all ${cssVar.motionDurationSlow};
     overflow: hidden;
     display: inline-block;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
 
     & > input[type='radio'] {
       width: 0;

.dumi/pages/index/components/Theme/index.tsx

@@ -100,6 +100,9 @@ const styles = createStaticStyles(({ cssVar, css, cx }) => {
     backdrop-filter: blur(50px);
     box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
     transition: all ${cssVar.motionDurationSlow};
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `;
 
   return {
@@ -220,6 +223,9 @@ const styles = createStaticStyles(({ cssVar, css, cx }) => {
     `,
     motion: css`
       transition: all ${cssVar.motionDurationSlow};
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     `,
     op1: css`
       opacity: 1;

.dumi/scripts/mirror-notify.js

@@ -52,6 +52,10 @@
       border-radius: 4px;
       overflow: hidden;
       animation: slideInRight 0.3s ease-in-out;
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        transition: none;
+      }
     }
     .${prefixCls}-content {
       padding: 16px;

.dumi/theme/builtins/Audio/index.tsx

@@ -15,6 +15,9 @@ const styles = createStaticStyles(({ css, cssVar }) => {
       font-size: ${cssVar.fontSizeXL};
       color: ${cssVar.colorLink};
       transition: all ${cssVar.motionDurationSlow};
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
       &:hover {
         color: ${cssVar.colorLinkHover};
       }

.dumi/theme/builtins/ComponentMeta/index.tsx

@@ -76,6 +76,9 @@ const useStyle = createStyles(({ cssVar, token }) => ({
     transition: all ${cssVar.motionDurationSlow} !important;
     font-family: ${token.codeFamily};
     color: ${cssVar.colorTextSecondary} !important;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
     &:hover {
       background: ${cssVar.controlItemBgHover};
     }

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -30,6 +30,9 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
   componentsOverviewCard: css`
     cursor: pointer;
     transition: all 0.5s;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
     &:hover {
       box-shadow:
         0 6px 16px -8px #00000014,
@@ -41,6 +44,9 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
     display: flex;
     transition: all ${cssVar.motionDurationSlow};
     justify-content: space-between;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `,
   componentsOverviewSearch: css`
     padding: 0;

.dumi/theme/builtins/ComponentTokenTable/index.tsx

@@ -67,6 +67,9 @@ const useStyle = createStyles(({ cssVar }) => ({
     font-size: ${cssVar.fontSizeLG};
     & svg {
       transition: all ${cssVar.motionDurationSlow};
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   `,
   help: css`

.dumi/theme/builtins/IconSearch/CopyableIcon.tsx

@@ -33,11 +33,17 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
       border-radius: ${cssVar.borderRadiusSM};
       cursor: pointer;
       transition: all ${cssVar.motionDurationSlow} ease-in-out;
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
       ${token.iconCls} {
         margin: ${cssVar.marginXS} 0;
         font-size: 36px;
         transition: transform ${cssVar.motionDurationSlow} ease-in-out;
         will-change: transform;
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
       &:hover {
         color: ${cssVar.colorWhite};
@@ -68,6 +74,9 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
         background-color: ${cssVar.colorPrimary};
         opacity: 0;
         transition: all ${cssVar.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
       &.copied::after {
         opacity: 1;
@@ -81,6 +90,9 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
       transform: scale(0.8);
       ${antCls}-badge {
         transition: color ${cssVar.motionDurationSlow} ease-in-out;
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     `,
   };

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -27,6 +27,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     display: flex;
     transition: all ${cssVar.motionDurationSlow};
     justify-content: space-between;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `,
 }));
 

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -6,14 +6,15 @@ import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
 import { major, minVersion } from 'semver';
+
 import type { AntdPreviewerProps } from '.';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
 import ClientOnly from '../../common/ClientOnly';
 import CodePreview from '../../common/CodePreview';
 import EditButton from '../../common/EditButton';
-import SiteContext from '../../slots/SiteContext';
 import DemoContext from '../../slots/DemoContext';
+import SiteContext from '../../slots/SiteContext';
 import { isOfficialHost } from '../../utils';
 import Actions from './Actions';
 
@@ -34,6 +35,9 @@ const styles = createStaticStyles(({ cssVar, css }) => {
       transition: all ${cssVar.motionDurationMid} ease-in-out;
       background-color: ${cssVar.colorBgElevated};
       cursor: pointer;
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
       &:hover {
         color: ${cssVar.colorPrimary};
       }

.dumi/theme/builtins/ResourceCards/index.tsx

@@ -17,6 +17,9 @@ const useStyle = createStyles(({ cssVar, token, css }) => ({
     img {
       display: block;
       transition: all ${cssVar.motionDurationSlow} ease-out;
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
     &:hover img {
       transform: scale(1.3);

.dumi/theme/builtins/VideoPlayer/index.tsx

@@ -15,6 +15,9 @@ const styles = createStaticStyles(({ css, cx, cssVar }) => {
     color: rgba(0, 0, 0, 0.65);
     opacity: 0;
     transition: opacity ${cssVar.motionDurationSlow};
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `;
 
   return {

.dumi/theme/common/Color/ColorStyle.tsx

@@ -154,7 +154,9 @@ ${makeGrayPalette(index + 1)}
             line-height: 44px;
             cursor: pointer;
             transition: all ${token.motionDurationMid};
-
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
             &:first-child {
               border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
             }
@@ -172,6 +174,9 @@ ${makeGrayPalette(index + 1)}
           &-item &-text {
             float: left;
             transition: all ${token.motionDurationSlow};
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
           }
 
           &-item &-value {
@@ -182,6 +187,9 @@ ${makeGrayPalette(index + 1)}
             transform-origin: 100% 50%;
             opacity: 0;
             transition: all ${token.motionDurationSlow};
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
           }
         }
 

.dumi/theme/common/EditButton.tsx

@@ -27,6 +27,9 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
           color: ${colorIcon};
           font-size: ${cssVar.fontSizeLG};
           transition: all ${cssVar.motionDurationSlow};
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
           &:hover {
             color: ${colorText};
           }

.dumi/theme/common/PrevAndNext.tsx

@@ -34,6 +34,9 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
         color: #999;
         font-size: ${fontSizeIcon};
         transition: all ${cssVar.motionDurationSlow};
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       .chinese {
@@ -57,6 +60,9 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
         transition: inset-inline-end ${cssVar.motionDurationSlow};
         margin-inline-end: 1em;
         inset-inline-end: 0;
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       &:hover .footer-nav-icon-before {
@@ -81,6 +87,9 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
         transition: inset-inline-start ${cssVar.motionDurationSlow};
         margin-inline-start: 1em;
         inset-inline-start: 0;
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       &:hover .footer-nav-icon-after {

.dumi/theme/common/SemanticPreview.tsx

@@ -42,6 +42,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     cursor: pointer;
     padding: ${cssVar.paddingSM};
     transition: background-color ${cssVar.motionDurationFast} ease;
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
     &:hover {
       background-color: ${cssVar.controlItemBgHover};
     }

.dumi/theme/common/styles/Demo.tsx

@@ -28,7 +28,9 @@ const GlobalDemoStyles: React.FC = () => {
           border: 1px solid ${token.colorSplit};
           border-radius: ${token.borderRadiusLG}px;
           transition: all ${token.motionDurationMid};
-
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
           &.code-box-simplify {
             border-radius: 0;
             margin-bottom: 0;
@@ -80,7 +82,9 @@ const GlobalDemoStyles: React.FC = () => {
             border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
             transition: background-color 0.4s;
             margin-inline-start: ${token.margin}px;
-
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
             a,
             a:hover {
               color: ${token.colorText};
@@ -106,7 +110,9 @@ const GlobalDemoStyles: React.FC = () => {
             ${iconCls} {
               color: ${token.colorTextSecondary};
               transition: all ${token.motionDurationSlow};
-
+              @media (prefers-reduced-motion: reduce) {
+                transition: none;
+              }
               &:hover {
                 color: ${token.colorText};
               }
@@ -136,6 +142,9 @@ const GlobalDemoStyles: React.FC = () => {
               font-size: ${token.fontSize}px;
               border-radius: 0 0 ${token.borderRadius}px ${token.borderRadius}px;
               transition: background-color 0.4s;
+              @media (prefers-reduced-motion: reduce) {
+                transition: none;
+              }
             }
 
             blockquote {
@@ -198,7 +207,9 @@ const GlobalDemoStyles: React.FC = () => {
             border-top: 1px dashed ${token.colorSplit};
             opacity: 0.7;
             transition: opacity ${token.motionDurationSlow};
-
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
             &:hover {
               opacity: 1;
             }
@@ -213,7 +224,9 @@ const GlobalDemoStyles: React.FC = () => {
             color: ${token.colorTextSecondary};
             cursor: pointer;
             transition: all 0.24s;
-
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
             &:hover {
               color: ${token.colorText};
             }
@@ -231,7 +244,9 @@ const GlobalDemoStyles: React.FC = () => {
             background: ${token.colorBgContainer};
             cursor: pointer;
             transition: transform 0.24s;
-
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
             &${iconCls}-check {
               color: ${token.green6} !important;
               font-weight: bold;
@@ -246,7 +261,7 @@ const GlobalDemoStyles: React.FC = () => {
             cursor: pointer;
           }
 
-           &-codeblock {
+          &-codeblock {
             width: 16px;
             height: 16px;
             overflow: hidden;

.dumi/theme/common/styles/Markdown.tsx

@@ -227,7 +227,9 @@ const GlobalStyle: React.FC = () => {
           margin-inline-start: ${token.marginXS}px;
           opacity: 0;
           transition: opacity ${token.motionDurationSlow};
-
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
           .rtl & {
             margin-inline-end: ${token.marginXS}px;
             margin-inline-start: 0;
@@ -255,7 +257,9 @@ const GlobalStyle: React.FC = () => {
             color: ${token.colorTextSecondary};
             font-size: ${token.fontSizeLG}px;
             transition: all ${token.motionDurationSlow};
-
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
+            }
             &:hover {
               color: ${token.colorText};
             }
@@ -321,7 +325,9 @@ const GlobalStyle: React.FC = () => {
 
             tbody tr {
               transition: all ${token.motionDurationSlow};
-
+              @media (prefers-reduced-motion: reduce) {
+                transition: none;
+              }
               &:hover {
                 background: rgba(60, 90, 100, 0.04);
               }

.dumi/theme/common/styles/PreviewImage.tsx

@@ -123,7 +123,9 @@ export default () => {
           border-radius: ${token.borderRadius}px;
           cursor: pointer;
           transition: all ${token.motionDurationSlow};
-
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
           &.no-padding {
             padding: 0;
             background: none;

.dumi/theme/common/styles/Reset.tsx

@@ -65,6 +65,9 @@ export default () => {
           line-height: ${token.lineHeight};
           background: ${token.colorBgContainer};
           transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
         }
       `}
     />

.dumi/theme/slots/Content/ColumnCard.tsx

@@ -16,6 +16,9 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
     margin: calc(${cssVar.marginMD} * 2) 0;
     transition: all ${cssVar.motionDurationMid};
     background-color: ${cssVar.colorFillQuaternary};
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   `,
   bigTitle: css`
     color: #121212;

.dumi/theme/slots/Content/Contributors.tsx

@@ -24,6 +24,9 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
       height: 24px;
       transition: all ${cssVar.motionDurationSlow};
       margin-inline-end: calc(-1 * ${cssVar.marginXS});
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
     &:hover {
       li {

.dumi/theme/slots/Header/SwitchBtn.tsx

@@ -25,6 +25,9 @@ const styles = createStaticStyles(({ cssVar, css }) => {
       .btn-inner {
         transition: all ${cssVar.motionDurationMid};
         display: flex;
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
       img {
         width: ${BASE_SIZE};