diff --git a/.changeset/five-dolls-begin.md b/.changeset/five-dolls-begin.md new file mode 100644 index 000000000..e083cbc6b --- /dev/null +++ b/.changeset/five-dolls-begin.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +adds support for reduced motion capabilities in overlay manager by disabling the opacity transition when a modal is opened/closed diff --git a/packages/ui/components/overlays/src/globalOverlaysStyle.js b/packages/ui/components/overlays/src/globalOverlaysStyle.js index 82145ecf6..8fb0dc04d 100644 --- a/packages/ui/components/overlays/src/globalOverlaysStyle.js +++ b/packages/ui/components/overlays/src/globalOverlaysStyle.js @@ -126,4 +126,14 @@ export const globalOverlaysStyle = css` html.global-overlays-scroll-lock-ios-fix { height: 100vh; } + + @media screen and (prefers-reduced-motion: reduce) { + .global-overlays .global-overlays__backdrop--animation-in { + animation: global-overlays-backdrop-fade-in 1ms; + } + + .global-overlays .global-overlays__backdrop--animation-out { + animation: global-overlays-backdrop-fade-out 1ms; + } + } `;