Remove reduceMotion utility. (#61963)

* Remove reduceMotion utility. * Update changelog. Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: alexstine <alexstine@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org>
WordPress · May 25, 2024 · 278810c · 278810c
1 parent 97422ea
commit 278810c
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 43 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -19,6 +19,7 @@
 
 ### Internal
 
+-   Remove `reduceMotion` util ([#61963](https://github.com/WordPress/gutenberg/pull/61963)).
 -   Add type support for CSS Custom Properties ([#61872](https://github.com/WordPress/gutenberg/pull/61872)).
 -   Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
 -   Tooltip: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)).

diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts
@@ -3,11 +3,6 @@
  */
 import styled from '@emotion/styled';
 
-/**
- * Internal dependencies
- */
-import { reduceMotion } from '../../utils';
-
 export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
@@ -23,9 +18,10 @@ export const PointerCircle = styled.div`
 	border-radius: 50%;
 	backdrop-filter: blur( 16px ) saturate( 180% );
 	box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;
-	transition: transform 100ms linear;
 
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 100ms linear;
+	}
 
 	${ ( { isDragging }: { isDragging: boolean } ) =>
 		isDragging &&

diff --git a/packages/components/src/utils/reduce-motion.js b/packages/components/src/utils/reduce-motion.js
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
@@ -1,6 +1,5 @@
 export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
-export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
 export { font } from './font';
 export { breakpoint } from './breakpoint';