From d573ad8eb768680ae5c2ee80eb5a66053f83bda9 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 30 Apr 2022 04:02:24 +0900
Subject: [PATCH 1/3] ColorPicker: Cleanly implement large size

---
 packages/components/src/color-picker/hex-input.tsx    |  1 +
 .../components/src/color-picker/input-with-slider.tsx |  1 +
 packages/components/src/color-picker/styles.ts        | 11 -----------
 3 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
index e1453a94ac9925..e7b2302cb7f417 100644
--- a/packages/components/src/color-picker/hex-input.tsx
+++ b/packages/components/src/color-picker/hex-input.tsx
@@ -65,6 +65,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
+			size="__unstable-large"
 			__unstableStateReducer={ stateReducer }
 			__unstableInputWidth="9em"
 		/>
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index 8b86f626fdc01c..1977c34be8b084 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -45,6 +45,7 @@ export const InputWithSlider = ( {
 					</Spacer>
 				}
 				hideHTMLArrows
+				size="__unstable-large"
 			/>
 			<RangeControl
 				label={ label }
diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index 17c44df6f0c184..d234f6fbb3c5d0 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -17,7 +17,6 @@ import { HStack } from '../h-stack';
 import {
 	BackdropUI,
 	Container as InputControlContainer,
-	Input,
 } from '../input-control/styles/input-control-styles';
 import CONFIG from '../utils/config-values';
 
@@ -44,14 +43,6 @@ export const RangeControl = styled( InnerRangeControl )`
 	}
 `;
 
-// All inputs should be the same height so this should be changed at the component level.
-// That involves changing heights of multiple input types probably buttons too etc.
-// So until that is done we are already using the new height on the color picker so it matches the mockups.
-const inputHeightStyle = `
-&&& ${ Input } {
-	height: 40px;
-}`;
-
 // Make the Hue circle picker not go out of the bar.
 const interactiveHueStyles = `
 .react-colorful__interactive {
@@ -125,8 +116,6 @@ export const ColorfulWrapper = styled.div`
 	${ StyledField } {
 		margin-bottom: 0;
 	}
-
-	${ inputHeightStyle }
 `;
 
 export const CopyButton = styled( Button )`

From 842d5c88ec7ed95e5931da8e77e1c1c0398d6e3b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 15 Jul 2022 11:44:38 +0900
Subject: [PATCH 2/3] Add changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d3b0de1e7d88b9..10273b37f602fd 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ### Internal
 
+-   `ColorPicker`: Clean up implementation of 40px size ([#42002](https://github.com/WordPress/gutenberg/pull/42002/)).
 -   `Divider`: Complete TypeScript migration ([#41991](https://github.com/WordPress/gutenberg/pull/41991)).
 -   `Divider`, `Flex`, `Spacer`: Improve documentation for the `SpaceInput` prop ([#42376](https://github.com/WordPress/gutenberg/pull/42376)).
 -   `Elevation`: Convert to TypeScript ([#42302](https://github.com/WordPress/gutenberg/pull/42302)).

From 416019490698b8945489734ecbbe52ce1ef0f4ef Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 15 Jul 2022 11:43:04 +0900
Subject: [PATCH 3/3] Fix prefix spacing

---
 packages/components/src/color-picker/hex-input.tsx         | 2 +-
 packages/components/src/color-picker/input-with-slider.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
index e7b2302cb7f417..b7c7032b284511 100644
--- a/packages/components/src/color-picker/hex-input.tsx
+++ b/packages/components/src/color-picker/hex-input.tsx
@@ -53,7 +53,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			prefix={
 				<Spacer
 					as={ Text }
-					marginLeft={ space( 3.5 ) }
+					marginLeft={ space( 4 ) }
 					color={ COLORS.ui.theme }
 					lineHeight={ 1 }
 				>
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index 1977c34be8b084..ca0376119f9463 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -37,7 +37,7 @@ export const InputWithSlider = ( {
 				prefix={
 					<Spacer
 						as={ Text }
-						paddingLeft={ space( 3.5 ) }
+						paddingLeft={ space( 4 ) }
 						color={ COLORS.ui.theme }
 						lineHeight={ 1 }
 					>