Rely on theme system to generate the track color

WordPress · Aug 10, 2023 · d08732e · d08732e
1 parent f9a2a9f
commit d08732e
Showing 1 changed file with 2 additions and 15 deletions.
diff --git a/packages/edit-site/src/components/canvas-spinner/index.js b/packages/edit-site/src/components/canvas-spinner/index.js
@@ -1,11 +1,3 @@
-/**
- * External dependencies
- */
-import { colord, extend } from 'colord';
-import mixPlugin from 'colord/plugins/mix';
-
-extend( [ mixPlugin ] );
-
 /**
  * WordPress dependencies
  */
@@ -23,19 +15,14 @@ const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function CanvasSpinner() {
 	const [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const { highlightedColors } = useStylesPreviewColors();
-
 	const indicatorColor =
 		highlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;
-	const grayscaleIndicatorColor = colord( indicatorColor ).grayscale();
-	const trackColorBase = grayscaleIndicatorColor.isDark()
-		? grayscaleIndicatorColor.tints( 3 )[ 1 ]
-		: grayscaleIndicatorColor.shades( 3 )[ 1 ];
-	const trackColor = trackColorBase.alpha( 0.5 ).toHex();
 
 	return (
 		<div className="edit-site-canvas-spinner">
-			<Theme accent={ indicatorColor } background={ trackColor }>
+			<Theme accent={ indicatorColor } background={ backgroundColor }>
 				<ProgressBar />
 			</Theme>
 		</div>