Move ColorIndicator styles to sass

WordPress · Apr 1, 2022 · dcca723 · dcca723
1 parent ba0e353
commit dcca723
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 24 deletions.
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
@@ -63,19 +63,12 @@ function Palette( { name } ) {
 							colors.length === 0 ? 'row-reverse' : 'row'
 						}
 					>
-						<ZStack
-							isLayered={ false }
-							offset={ -8 }
-							// TODO:
-							// - move to SCSS code + classname
-							// - consider using grid scss variables
-							// - consider adding a size prop to `ColorIndicator` ?
-							style={ { marginTop: '2px', marginBottom: '2px' } }
-						>
+						<ZStack isLayered={ false } offset={ -8 }>
 							{ colors.slice( 0, 5 ).map( ( { color } ) => (
 								<ColorIndicator
 									key={ color }
 									colorValue={ color }
+									className="edit-site-global-styles__color-indicator-with-margin"
 								/>
 							) ) }
 						</ZStack>

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -36,11 +36,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 			<HStack justify="flex-start">
 				<ColorIndicator
 					colorValue={ gradientValue ?? backgroundColor }
-					// TODO:
-					// - move to SCSS code + classname
-					// - consider using grid scss variables
-					// - consider adding a size prop to `ColorIndicator` ?
-					style={ { marginTop: '2px', marginBottom: '2px' } }
+					className="edit-site-global-styles__color-indicator-with-margin"
 				/>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
@@ -62,11 +58,7 @@ function TextColorItem( { name, parentMenu } ) {
 			<HStack justify="flex-start">
 				<ColorIndicator
 					colorValue={ color }
-					// TODO:
-					// - move to SCSS code + classname
-					// - consider using grid scss variables
-					// - consider adding a size prop to `ColorIndicator` ?
-					style={ { marginTop: '2px', marginBottom: '2px' } }
+					className="edit-site-global-styles__color-indicator-with-margin"
 				/>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
@@ -88,11 +80,7 @@ function LinkColorItem( { name, parentMenu } ) {
 			<HStack justify="flex-start">
 				<ColorIndicator
 					colorValue={ color }
-					// TODO:
-					// - move to SCSS code + classname
-					// - consider using grid scss variables
-					// - consider adding a size prop to `ColorIndicator` ?
-					style={ { marginTop: '2px', marginBottom: '2px' } }
+					className="edit-site-global-styles__color-indicator-with-margin"
 				/>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -93,3 +93,9 @@
 	}
 }
 
+.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;
+}