diff --git a/packages/edit-site/src/components/global-styles/color-indicator-spacer.js b/packages/edit-site/src/components/global-styles/color-indicator-spacer.js
new file mode 100644
index 00000000000000..b24625a81dbf37
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/color-indicator-spacer.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ ColorIndicator,
+ __experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+// Compensate for the fact that `ColorIndicator` has a height of 20px,
+// while all other icons have a height of 24px.
+function ColorIndicatorWithSpacer( colorIndicatorProps ) {
+ return (
+
+
+
+ );
+}
+
+export default ColorIndicatorWithSpacer;
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 327ad806e22b3c..b06232b7e6dedb 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -7,7 +7,6 @@ import {
__experimentalHStack as HStack,
__experimentalZStack as ZStack,
__experimentalVStack as VStack,
- ColorIndicator,
} from '@wordpress/components';
import { __, _n, sprintf } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
@@ -18,6 +17,7 @@ import { useMemo } from '@wordpress/element';
import Subtitle from './subtitle';
import { NavigationButton } from './navigation-button';
import { useSetting } from './hooks';
+import ColorIndicatorWithSpacer from './color-indicator-spacer';
const EMPTY_COLORS = [];
@@ -65,10 +65,9 @@ function Palette( { name } ) {
>
{ colors.slice( 0, 5 ).map( ( { color } ) => (
-
) ) }
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 3d2b67e9accab8..56f3005dfeeec3 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -7,7 +7,6 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
FlexItem,
- ColorIndicator,
} from '@wordpress/components';
/**
@@ -18,6 +17,7 @@ import Palette from './palette';
import { NavigationButton } from './navigation-button';
import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
import Subtitle from './subtitle';
+import ColorIndicatorWithSpacer from './color-indicator-spacer';
function BackgroundColorItem( { name, parentMenu } ) {
const supports = getSupportedGlobalStylesPanels( name );
@@ -34,9 +34,8 @@ function BackgroundColorItem( { name, parentMenu } ) {
return (
-
{ __( 'Background' ) }
@@ -56,10 +55,7 @@ function TextColorItem( { name, parentMenu } ) {
return (
-
+
{ __( 'Text' ) }
@@ -78,10 +74,7 @@ function LinkColorItem( { name, parentMenu } ) {
return (
-
+
{ __( 'Links' ) }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 3b7a804bf4b983..6266031b7f50da 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -92,10 +92,3 @@
border: var(--wp-admin-theme-color) $border-width solid;
}
}
-
-.edit-site-global-styles__color-indicator-with-margin {
- // Add 4px to compensate for the fact that `ColorIndicator` has a height
- // of 20px, while all other icons have a height of 24px.
- margin-top: $grid-unit * 0.25;
- margin-bottom: $grid-unit * 0.25;
-}