From 56572c24a2109378d8c37381e84bec4c4b9fbfd9 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 15 Oct 2021 03:43:47 +0900
Subject: [PATCH 01/26] InputControl: Increase `default` size to 40px

Maintains previous size for the `small` variant.
---
 .../src/input-control/styles/input-control-styles.tsx  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index c6471fa96ead5..3f791df211976 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -145,14 +145,18 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 const sizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: {
-			height: 30,
+			height: 40,
 			lineHeight: 1,
-			minHeight: 30,
+			minHeight: 40,
+			paddingLeft: 16,
+			paddingRight: 16,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
+			paddingLeft: 8,
+			paddingRight: 8,
 		},
 	};
 
@@ -205,8 +209,6 @@ export const Input = styled.input< InputProps >`
 		display: block;
 		margin: 0;
 		outline: none;
-		padding-left: 8px;
-		padding-right: 8px;
 		width: 100%;
 
 		${ dragStyles }

From 9720b3793820ed47f3b61bc5cf0dc9859c39c00b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 15 Oct 2021 03:48:16 +0900
Subject: [PATCH 02/26] InputControl: Flex `Suffix` for simpler alignment

---
 .../src/input-control/styles/input-control-styles.tsx         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 3f791df211976..026cf074b0d2b 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -317,6 +317,8 @@ export const Prefix = styled.span`
 `;
 
 export const Suffix = styled.span`
+	align-items: center;
+	align-self: stretch;
 	box-sizing: border-box;
-	display: block;
+	display: flex;
 `;

From da29622124763b8a0cf7993323a9ef4fb4dd517b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 15 Oct 2021 03:52:13 +0900
Subject: [PATCH 03/26] AnglePickerControl: Fix degree symbol alignment

There is a default marginBottom on the Spacer component that throws off the vertical alignment here.
---
 packages/components/src/angle-picker-control/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index 7d8aeb4b3e382..e29d882d14c7d 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -48,6 +48,7 @@ export default function AnglePickerControl( {
 					suffix={
 						<Spacer
 							as={ Text }
+							marginBottom={ 0 }
 							marginRight={ space( 3 ) }
 							style={ {
 								color: 'var( --wp-admin-theme-color )',

From 54b39206d3f38440799ae8462e6c4f7e272f4563 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 15 Oct 2021 03:54:54 +0900
Subject: [PATCH 04/26] BoxControl: Default to `small` inputs

The `small` variant is now more appropriate in this use case.
---
 packages/components/src/box-control/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index 5779b4a975b18..e29f5ee8535ff 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -39,6 +39,7 @@ import { useControlledState } from '../utils/hooks';
 
 const defaultInputProps = {
 	min: 0,
+	size: 'small',
 };
 
 function useUniqueId( idProp ) {

From 0608091b32cdd8ec973522c1d0bede9db8049fbc Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 20 Oct 2021 03:36:31 +0900
Subject: [PATCH 05/26] ColorPicker: Remove adhoc height

---
 packages/components/src/color-picker/styles.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index 4d80b8761d20b..200c10e720b2f 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -42,14 +42,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 {
@@ -107,8 +99,6 @@ export const ColorfulWrapper = styled.div`
 	${ StyledField } {
 		margin-bottom: 0;
 	}
-
-	${ inputHeightStyle }
 `;
 
 export const DetailsControlButton = styled( Button )`

From f5c81c14d0e4874176565e7b563a585b5bc334fc Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 21 Oct 2021 05:46:55 +0900
Subject: [PATCH 06/26] ColorPicker: Widen controls to work on mobile

To prevent unnecessary truncation in mobile-width viewports when the font size gets bigger.
---
 packages/components/src/color-picker/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index 200c10e720b2f..f701c83a6c802 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -28,7 +28,7 @@ export const NumberControlWrapper = styled( NumberControl )`
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
-	width: 5em;
+	width: 6.5em;
 	${ BackdropUI } {
 		display: none;
 	}
@@ -109,5 +109,5 @@ export const DetailsControlButton = styled( Button )`
 `;
 
 export const ColorHexInputControl = styled( InputControl )`
-	width: 8em;
+	width: 9em;
 `;

From 24cf17e603a5e2fb33cd5d18a4efd67ee0006b96 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 20 Oct 2021 04:24:01 +0900
Subject: [PATCH 07/26] SelectControl: Increase `default` size to 40px

Maintains previous size for the `small` variant.
---
 .../styles/select-control-styles.ts           | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index 63b242fd58cab..7e04c751e5537 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -46,9 +46,9 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
 const sizeStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
 		default: {
-			height: 30,
+			height: 40,
 			lineHeight: 1,
-			minHeight: 30,
+			minHeight: 40,
 		},
 		small: {
 			height: 24,
@@ -62,6 +62,20 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
 	return css( style );
 };
 
+const sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {
+	const sizes = {
+		default: {
+			paddingLeft: 16,
+			paddingRight: 32,
+		},
+		small: {
+			paddingLeft: 8,
+			paddingRight: 24,
+		},
+	};
+	return rtl( sizes[ selectSize ] );
+};
+
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -80,8 +94,7 @@ export const Select = styled.select< SelectProps >`
 		${ disabledStyles };
 		${ fontSizeStyles };
 		${ sizeStyles };
-
-		${ rtl( { paddingLeft: 8, paddingRight: 24 } ) }
+		${ sizePaddings };
 	}
 `;
 

From 9b1ffb2a1adc01d77427fb5c1d028f84eaa68fc3 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 20 Oct 2021 04:25:54 +0900
Subject: [PATCH 08/26] CustomGradientPicker: Remove adhoc height

---
 packages/components/src/custom-gradient-picker/style.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index 809a4f0ad29d7..4b4daff76ce30 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -111,10 +111,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 
 // All these styles should be made generic and changed on the inputs for all components.
 .components-custom-gradient-picker {
-	.components-select-control__input,
-	.components-input-control__input {
-		height: 40px !important;
-	}
 	.components-input-control__label {
 		line-height: 1;
 		padding-bottom: $grid-unit-10 !important;

From 40d37657d988b9d9891934bfc4c4a660f040db9c Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 20 Oct 2021 04:53:11 +0900
Subject: [PATCH 09/26] UnitControl: Align units

- Simplifies unit alignment across sizes
- Fixes paddings for disableUnits
---
 .../src/unit-control/stories/index.js         | 17 +++++
 .../styles/unit-control-styles.ts             | 76 ++++++++-----------
 2 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
index de4bdfc52a4fe..e6819523a9c3d 100644
--- a/packages/components/src/unit-control/stories/index.js
+++ b/packages/components/src/unit-control/stories/index.js
@@ -67,6 +67,23 @@ export const _default = () => {
 	return <Example />;
 };
 
+export const WithSingleUnit = ( props ) => {
+	const [ value, setValue ] = useState( '10px' );
+	return (
+		<ControlWrapperView>
+			<UnitControl
+				{ ...props }
+				value={ value }
+				onChange={ ( v ) => setValue( v ) }
+			/>
+		</ControlWrapperView>
+	);
+};
+WithSingleUnit.args = {
+	label: 'Value',
+	units: CSS_UNITS.slice( 0, 1 ),
+};
+
 export function WithCustomUnits() {
 	const [ value, setValue ] = useState( '10km' );
 
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
index 9d951f5481bbb..d6c31314827bf 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.ts
+++ b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -18,6 +18,7 @@ type SelectProps = {
 
 type InputProps = {
 	disableUnits?: boolean;
+	size: SelectSize;
 };
 
 export const Root = styled.div`
@@ -25,11 +26,18 @@ export const Root = styled.div`
 	position: relative;
 `;
 
-const paddingStyles = ( { disableUnits }: InputProps ) => {
-	const value = disableUnits ? 3 : 24;
+const paddingStyles = ( { disableUnits, size }: InputProps ) => {
+	const paddings = {
+		default: {
+			paddingRight: disableUnits ? 16 : 8,
+		},
+		small: {
+			paddingRight: 8,
+		},
+	};
 
 	return css`
-		${ rtl( { paddingRight: value } )() };
+		${ rtl( paddings[ size ] )() };
 	`;
 };
 
@@ -62,49 +70,24 @@ export const ValueInput = styled( NumberControl )`
 	}
 `;
 
-const unitSizeStyles = ( { selectSize }: SelectProps ) => {
-	const sizes = {
-		default: {
-			height: 28,
-			lineHeight: '24px',
-			minHeight: 28,
-			top: 1,
-		},
-		small: {
-			height: 22,
-			lineHeight: '18px',
-			minHeight: 22,
-			top: 1,
-		},
-	};
-
-	return css( sizes[ selectSize ] );
-};
-
-const baseUnitLabelStyles = ( props: SelectProps ) => {
-	return css`
-		appearance: none;
-		background: transparent;
-		border-radius: 2px;
-		border: none;
-		box-sizing: border-box;
-		color: ${ COLORS.darkGray[ 500 ] };
-		display: block;
-		font-size: 8px;
-		line-height: 1;
-		letter-spacing: -0.5px;
-		outline: none;
-		padding: 2px 1px;
-		position: absolute;
-		text-align-last: center;
-		text-transform: uppercase;
-		width: 20px;
-
-		${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-		${ rtl( { right: 0 } )() }
-		${ unitSizeStyles( props ) }
-	`;
-};
+const baseUnitLabelStyles = css`
+	appearance: none;
+	background: transparent;
+	border-radius: 2px;
+	border: none;
+	box-sizing: border-box;
+	color: ${ COLORS.darkGray[ 500 ] };
+	display: block;
+	font-size: 8px;
+	letter-spacing: -0.5px;
+	outline: none;
+	padding: 2px 1px;
+	text-align-last: center;
+	text-transform: uppercase;
+	width: 20px;
+
+	${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
+`;
 
 export const UnitLabel = styled.div< SelectProps >`
 	&&& {
@@ -119,6 +102,7 @@ export const UnitSelect = styled.select< SelectProps >`
 		${ baseUnitLabelStyles };
 		cursor: pointer;
 		border: 1px solid transparent;
+		height: 100%;
 
 		&:hover {
 			background-color: ${ COLORS.lightGray[ 300 ] };

From a05caf7922d5b4ef1d0d3b313267f3051d7975f4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 20 Oct 2021 05:09:35 +0900
Subject: [PATCH 10/26] RangeControl: Increase height to 40px

---
 .../components/src/range-control/styles/range-control-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
index 5daaeeb259be8..d847e2edec82c 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -12,7 +12,7 @@ import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
-const rangeHeightValue = 30;
+const rangeHeightValue = 40;
 const railHeight = 4;
 const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );

From eb0cc2d69f4c559a3b28df709089a9aa388c0ffd Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 2 Nov 2021 23:58:55 +0900
Subject: [PATCH 11/26] RangeControl: Widen input to allow 3 digits

Compensates for wider padding on InputControl
---
 .../components/src/range-control/styles/range-control-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
index d847e2edec82c..e7d2f90190fdf 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -298,7 +298,7 @@ export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
-	width: ${ space( 16 ) } !important;
+	width: ${ space( 20 ) } !important;
 
 	input[type='number']& {
 		${ rangeHeight };

From 47a51136df43cfbdc7c87b97ecc37ccfb5b7dd99 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 3 Nov 2021 01:52:42 +0900
Subject: [PATCH 12/26] Add changelog entry

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 96ec72b73bb27..89fc21ff74ba9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Experimental
 
 -   Updated the `ToolsPanel` to use `Grid` internally to manage panel layout ([35621](https://github.com/WordPress/gutenberg/pull/35621)).
+-   Enlarged the `default` size variant of `InputControl` to the new 40px design. `AnglePickerControl`, `BoxControl`, `ColorPicker`, `CustomGradientPicker`, `RangeControl`, `SelectControl`, and `UnitControl` were also slightly modified (either visually or internally) to accommodate this change ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
 
 ## 19.0.0 (2021-10-22)
 

From 914094bf014f62e684780cd082f517a93e7e99e1 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 03:28:39 +0900
Subject: [PATCH 13/26] InputControl: Extract style changes to `unstable-large`
 variant

---
 .../src/input-control/stories/index.js        |  1 +
 .../styles/input-control-styles.tsx           | 20 ++++++++++++-------
 .../components/src/input-control/types.ts     |  4 +++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/input-control/stories/index.js b/packages/components/src/input-control/stories/index.js
index 2a0d088f70065..53743a5943942 100644
--- a/packages/components/src/input-control/stories/index.js
+++ b/packages/components/src/input-control/stories/index.js
@@ -44,6 +44,7 @@ function Example() {
 			{
 				default: 'default',
 				small: 'small',
+				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 026cf074b0d2b..93bc15fc9c773 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -13,7 +13,7 @@ import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { COLORS, rtl } from '../../utils';
-import type { LabelPosition } from '../types';
+import type { LabelPosition, Size } from '../types';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -105,8 +105,6 @@ export const Container = styled.div< ContainerProps >`
 	${ containerWidthStyles }
 `;
 
-type Size = 'default' | 'small';
-
 type InputProps = {
 	disabled?: boolean;
 	inputSize?: Size;
@@ -126,6 +124,7 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
+		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ size as Size ] || sizes.default;
@@ -145,11 +144,11 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 const sizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: {
-			height: 40,
+			height: 36,
 			lineHeight: 1,
-			minHeight: 40,
-			paddingLeft: 16,
-			paddingRight: 16,
+			minHeight: 36,
+			paddingLeft: 8,
+			paddingRight: 8,
 		},
 		small: {
 			height: 24,
@@ -158,6 +157,13 @@ const sizeStyles = ( { inputSize: size }: InputProps ) => {
 			paddingLeft: 8,
 			paddingRight: 8,
 		},
+		'__unstable-large': {
+			height: 40,
+			lineHeight: 1,
+			minHeight: 40,
+			paddingLeft: 16,
+			paddingRight: 16,
+		},
 	};
 
 	const style = sizes[ size as Size ] || sizes.default;
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index eebefd349c86b..1e9477243474f 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -23,12 +23,14 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
+export type Size = 'default' | 'small' | '__unstable-large';
+
 interface BaseProps {
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	hideLabelFromVision?: boolean;
 	isFocused: boolean;
 	labelPosition?: LabelPosition;
-	size?: 'default' | 'small';
+	size?: Size;
 }
 
 export type InputChangeCallback<

From db8dcbceaf8f548a190d207683402c96a83df1c9 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 05:44:30 +0900
Subject: [PATCH 14/26] Revert "RangeControl: Increase height to 40px"

This reverts commit a05caf7922d5b4ef1d0d3b313267f3051d7975f4.
---
 .../components/src/range-control/styles/range-control-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
index e7d2f90190fdf..741d1cd66fff1 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -12,7 +12,7 @@ import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
-const rangeHeightValue = 40;
+const rangeHeightValue = 30;
 const railHeight = 4;
 const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );

From 190681d06b0c2705132e4c457e61a62d9028df9a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 05:44:30 +0900
Subject: [PATCH 15/26] Revert "RangeControl: Widen input to allow 3 digits"

This reverts commit eb0cc2d69f4c559a3b28df709089a9aa388c0ffd.
---
 .../components/src/range-control/styles/range-control-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
index 741d1cd66fff1..5daaeeb259be8 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -298,7 +298,7 @@ export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
-	width: ${ space( 20 ) } !important;
+	width: ${ space( 16 ) } !important;
 
 	input[type='number']& {
 		${ rangeHeight };

From 08ec3622dd0d5623f5fd6b0cef559c82a547e4e2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 07:01:17 +0900
Subject: [PATCH 16/26] Revert "BoxControl: Default to `small` inputs"

This reverts commit 54b39206d3f38440799ae8462e6c4f7e272f4563.
---
 packages/components/src/box-control/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index e29f5ee8535ff..5779b4a975b18 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -39,7 +39,6 @@ import { useControlledState } from '../utils/hooks';
 
 const defaultInputProps = {
 	min: 0,
-	size: 'small',
 };
 
 function useUniqueId( idProp ) {

From f24ffc98043e5b797f52538292546e8488d65f21 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 08:04:24 +0900
Subject: [PATCH 17/26] SelectControl: Add `__unstable-large` variant

---
 .../src/select-control/stories/index.js        |  1 +
 .../styles/select-control-styles.ts            | 18 ++++++++++++++----
 .../components/src/select-control/types.ts     |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/select-control/stories/index.js b/packages/components/src/select-control/stories/index.js
index bd3cca9e67320..357c8c631d7d5 100644
--- a/packages/components/src/select-control/stories/index.js
+++ b/packages/components/src/select-control/stories/index.js
@@ -60,6 +60,7 @@ export const _default = () => {
 			{
 				default: 'default',
 				small: 'small',
+				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),
diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index 7e04c751e5537..c0646560984bd 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -27,6 +27,7 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
+		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ selectSize as Size ];
@@ -46,15 +47,20 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
 const sizeStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
 		default: {
-			height: 40,
+			height: 30,
 			lineHeight: 1,
-			minHeight: 40,
+			minHeight: 30,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
 		},
+		'__unstable-large': {
+			height: 40,
+			lineHeight: 1,
+			minHeight: 40,
+		},
 	};
 
 	const style = sizes[ selectSize as Size ] || sizes.default;
@@ -65,13 +71,17 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
 const sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {
 	const sizes = {
 		default: {
-			paddingLeft: 16,
-			paddingRight: 32,
+			paddingLeft: 8,
+			paddingRight: 24,
 		},
 		small: {
 			paddingLeft: 8,
 			paddingRight: 24,
 		},
+		'__unstable-large': {
+			paddingLeft: 16,
+			paddingRight: 32,
+		},
 	};
 	return rtl( sizes[ selectSize ] );
 };
diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts
index e69c3c45a9eb2..c4c38cdf428b4 100644
--- a/packages/components/src/select-control/types.ts
+++ b/packages/components/src/select-control/types.ts
@@ -1 +1 @@
-export type Size = 'default' | 'small';
+export type Size = 'default' | 'small' | '__unstable-large';

From e603f5174d30abcb8267b7002fbce405e97cf6a5 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 08:06:03 +0900
Subject: [PATCH 18/26] UnitControl: Add `__unstable-large` variant

---
 packages/components/src/unit-control/stories/index.js      | 1 +
 .../src/unit-control/styles/unit-control-styles.ts         | 5 ++++-
 packages/components/src/unit-control/types.ts              | 7 +++++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js
index e6819523a9c3d..0109fa56451e5 100644
--- a/packages/components/src/unit-control/stories/index.js
+++ b/packages/components/src/unit-control/stories/index.js
@@ -45,6 +45,7 @@ function Example() {
 			{
 				default: 'default',
 				small: 'small',
+				'__unstable-large': '__unstable-large',
 			},
 			'default'
 		),
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
index d6c31314827bf..7035df6f47d1b 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.ts
+++ b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -29,11 +29,14 @@ export const Root = styled.div`
 const paddingStyles = ( { disableUnits, size }: InputProps ) => {
 	const paddings = {
 		default: {
-			paddingRight: disableUnits ? 16 : 8,
+			paddingRight: 8,
 		},
 		small: {
 			paddingRight: 8,
 		},
+		'__unstable-large': {
+			paddingRight: disableUnits ? 16 : 8,
+		},
 	};
 
 	return css`
diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts
index dafce74b176b9..8e15ac6f85b84 100644
--- a/packages/components/src/unit-control/types.ts
+++ b/packages/components/src/unit-control/types.ts
@@ -8,11 +8,14 @@ import type { SyntheticEvent } from 'react';
  * Internal dependencies
  */
 import type { StateReducer } from '../input-control/reducer/state';
-import type { InputChangeCallback } from '../input-control/types';
+import type {
+	InputChangeCallback,
+	Size as InputSize,
+} from '../input-control/types';
 
 export type Value = number | string;
 
-export type SelectSize = 'default' | 'small';
+export type SelectSize = InputSize;
 
 export type WPUnitControlUnit = {
 	/**

From 06b91c4569e77c58fea102a33ff6f7fd770c81ad Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 07:27:35 +0900
Subject: [PATCH 19/26] AnglePickerControl: Set to `__unstable-large`

---
 packages/components/src/angle-picker-control/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index e29d882d14c7d..ff0e60e37232b 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -42,6 +42,7 @@ export default function AnglePickerControl( {
 					max={ 360 }
 					min={ 0 }
 					onChange={ handleOnNumberChange }
+					size="__unstable-large"
 					step="1"
 					value={ value }
 					hideHTMLArrows

From cee69a8d73e53692f714a4f0faa3f607f83514e7 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 07:33:59 +0900
Subject: [PATCH 20/26] CustomGradientPicker: Set to `__unstable-large`

---
 packages/components/src/custom-gradient-picker/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js
index 251fc8ccec816..4196578c6cb94 100644
--- a/packages/components/src/custom-gradient-picker/index.js
+++ b/packages/components/src/custom-gradient-picker/index.js
@@ -98,6 +98,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
+			size="__unstable-large"
 			value={ hasGradient && type }
 		/>
 	);

From b5974d43d3d0e7624bf831291e9097f224ba61b2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 08:03:05 +0900
Subject: [PATCH 21/26] RangeControl: Tweak specificity to work as before

---
 .../components/src/range-control/styles/range-control-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
index 5daaeeb259be8..8a9fe1bd6f6a9 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -300,7 +300,7 @@ export const InputNumber = styled( NumberControl )`
 	margin-top: 0;
 	width: ${ space( 16 ) } !important;
 
-	input[type='number']& {
+	&& input[type='number'] {
 		${ rangeHeight };
 	}
 

From 3f4dd5090e3cf502b1cfd0a5aa0c92ffd82d5a81 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 11:19:29 +0900
Subject: [PATCH 22/26] Revert "ColorPicker: Remove adhoc height"

This reverts commit 0608091b32cdd8ec973522c1d0bede9db8049fbc.
---
 packages/components/src/color-picker/styles.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index f701c83a6c802..786f82e6e6e17 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -42,6 +42,14 @@ 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 {
@@ -99,6 +107,8 @@ export const ColorfulWrapper = styled.div`
 	${ StyledField } {
 		margin-bottom: 0;
 	}
+
+	${ inputHeightStyle }
 `;
 
 export const DetailsControlButton = styled( Button )`

From 345da0bc572e0e70d9c2c38234aadd619f5152ee Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 11:19:29 +0900
Subject: [PATCH 23/26] Revert "ColorPicker: Widen controls to work on mobile"

This reverts commit f5c81c14d0e4874176565e7b563a585b5bc334fc.
---
 packages/components/src/color-picker/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index 786f82e6e6e17..4d80b8761d20b 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -28,7 +28,7 @@ export const NumberControlWrapper = styled( NumberControl )`
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
-	width: 6.5em;
+	width: 5em;
 	${ BackdropUI } {
 		display: none;
 	}
@@ -119,5 +119,5 @@ export const DetailsControlButton = styled( Button )`
 `;
 
 export const ColorHexInputControl = styled( InputControl )`
-	width: 9em;
+	width: 8em;
 `;

From 1dd69a425a893f21742ea8f7c7c9e0cdd03537d3 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 4 Nov 2021 13:24:18 +0900
Subject: [PATCH 24/26] Update changelog

---
 packages/components/CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 89fc21ff74ba9..2bdfb9535363a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,7 +5,8 @@
 ### Experimental
 
 -   Updated the `ToolsPanel` to use `Grid` internally to manage panel layout ([35621](https://github.com/WordPress/gutenberg/pull/35621)).
--   Enlarged the `default` size variant of `InputControl` to the new 40px design. `AnglePickerControl`, `BoxControl`, `ColorPicker`, `CustomGradientPicker`, `RangeControl`, `SelectControl`, and `UnitControl` were also slightly modified (either visually or internally) to accommodate this change ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
+-   Added an `__unstable-large` size variant to `InputControl`, `SelectControl`, and `UnitControl` for selective migration to the larger 40px heights. ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
+-   Fixed inconsistent padding in `UnitControl` ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
 
 ## 19.0.0 (2021-10-22)
 

From 8376cf03ea1fb798f6ad9916c6b804f6081fd467 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 5 Nov 2021 03:54:41 +0900
Subject: [PATCH 25/26] InputControl: Revert default height back to 30px

---
 .../src/input-control/styles/input-control-styles.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 93bc15fc9c773..dac503b85fdc0 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -144,9 +144,9 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 const sizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: {
-			height: 36,
+			height: 30,
 			lineHeight: 1,
-			minHeight: 36,
+			minHeight: 30,
 			paddingLeft: 8,
 			paddingRight: 8,
 		},

From 6227b6abf23ac53ba673bf9d04e844890da1bf79 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 5 Nov 2021 03:55:02 +0900
Subject: [PATCH 26/26] Revert "RangeControl: Tweak specificity to work as
 before"

This reverts commit b5974d43d3d0e7624bf831291e9097f224ba61b2.
---
 .../components/src/range-control/styles/range-control-styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
index 8a9fe1bd6f6a9..5daaeeb259be8 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -300,7 +300,7 @@ export const InputNumber = styled( NumberControl )`
 	margin-top: 0;
 	width: ${ space( 16 ) } !important;
 
-	&& input[type='number'] {
+	input[type='number']& {
 		${ rangeHeight };
 	}