Apply suggestions from code review

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com> (+1 squashed commit)
Squashed commits:
[eeb7fa834e] Implement new color picker design

packages/components/src/range-control/styles/range-control-styles.js

@@ -12,8 +12,10 @@ import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
-const rangeHeight = () => css( { height: 30, minHeight: 30 } );
-const thumbSize = 12;
+const rangeHeightValue = 30;
+const rangeHeight = () =>
+	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
+const thumbSize = 9;
 
 export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
@@ -179,7 +181,7 @@ export const ThumbWrapper = styled.span`
 	display: flex;
 	height: ${ thumbSize }px;
 	justify-content: center;
-	margin-top: 9px;
+	margin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;
 	outline: 0;
 	pointer-events: none;
 	position: absolute;

packages/components/src/ui/color-picker/component.tsx

@@ -9,7 +9,7 @@ import type { ColorFormats } from 'tinycolor2';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { moreVertical } from '@wordpress/icons';
+import { settings } from '@wordpress/icons';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -24,7 +24,7 @@ import {
 import { HStack } from '../../h-stack';
 import Button from '../../button';
 import { Spacer } from '../../spacer';
-import { ColorfulWrapper, SelectControl } from './styles';
+import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper } from './styles';
 import { ColorDisplay } from './color-display';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
@@ -95,7 +95,8 @@ const ColorPicker = (
 				color={ safeColor }
 				enableAlpha={ enableAlpha }
 			/>
-			<HStack justify="space-between">
+			<AuxiliaryColorArtefactWrapper>
+				<HStack justify="space-between">
 				{ showInputs ? (
 					<SelectControl
 						options={ options }
@@ -115,7 +116,7 @@ const ColorPicker = (
 				) }
 				<Button
 					onClick={ () => setShowInputs( ! showInputs ) }
-					icon={ moreVertical }
+					icon={ settings }
 					isPressed={ showInputs }
 					label={
 						showInputs
@@ -124,15 +125,16 @@ const ColorPicker = (
 					}
 				/>
 			</HStack>
-			<Spacer />
-			{ showInputs && (
-				<ColorInput
-					colorType={ colorType }
-					color={ safeColor }
-					onChange={ handleChange }
-					enableAlpha={ enableAlpha }
-				/>
-			) }
+				<Spacer margin={ 4 } />
+				{ showInputs && (
+					<ColorInput
+						colorType={ colorType }
+						color={ safeColor }
+						onChange={ handleChange }
+						enableAlpha={ enableAlpha }
+					/>
+				) }
+			</AuxiliaryColorArtefactWrapper>
 		</ColorfulWrapper>
 	);
 };

packages/components/src/ui/color-picker/hex-input.tsx

@@ -38,7 +38,12 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 		<InputControl
 			__unstableInputWidth="8em"
 			prefix={
-				<Spacer as={ Text } marginLeft={ space( 2 ) } color="blue">
+				<Spacer
+					as={ Text }
+					marginLeft={ space( 3.5 ) }
+					color="blue"
+					lineHeight={ 1 }
+				>
 					#
 				</Spacer>
 			}

packages/components/src/ui/color-picker/input-with-slider.tsx

@@ -1,12 +1,11 @@
 /**
  * Internal dependencies
  */
-import NumberControl from '../../number-control';
 import { HStack } from '../../h-stack';
 import { Text } from '../../text';
 import { Spacer } from '../../spacer';
 import { space } from '../utils/space';
-import { RangeControl } from './styles';
+import { RangeControl, NumberControlWrapper } from './styles';
 
 interface InputWithSliderProps {
 	min: number;
@@ -27,16 +26,20 @@ export const InputWithSlider = ( {
 }: InputWithSliderProps ) => {
 	return (
 		<Spacer as={ HStack }>
-			<NumberControl
-				__unstableInputWidth="5em"
+			<NumberControlWrapper
 				min={ min }
 				max={ max }
 				label={ label }
 				hideLabelFromVision
 				value={ value }
 				onChange={ onChange }
 				prefix={
-					<Spacer as={ Text } paddingLeft={ space( 1 ) } color="blue">
+					<Spacer
+						as={ Text }
+						paddingLeft={ space( 3.5 ) }
+						color="blue"
+						lineHeight={ 1 }
+					>
 						{ abbreviation }
 					</Spacer>
 				}

packages/components/src/ui/color-picker/styles.ts

@@ -6,13 +6,29 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
+import NumberControl from '../../number-control';
 import InnerSelectControl from '../../select-control';
 import InnerRangeControl from '../../range-control';
 import { StyledField } from '../../base-control/styles/base-control-styles';
 import { space } from '../utils/space';
+import {
+	BackdropUI,
+	Container as InputControlContainer,
+	Input,
+} from '../../input-control/styles/input-control-styles';
+
+export const NumberControlWrapper = styled( NumberControl )`
+	${ InputControlContainer } {
+		width: ${ space( 24 ) };
+	}
+`;
 
 export const SelectControl = styled( InnerSelectControl )`
+	margin-left: ${ space( -2 ) };
 	width: 5em;
+	${ BackdropUI } {
+		display: none;
+	}
 `;
 
 export const RangeControl = styled( InnerRangeControl )`
@@ -23,6 +39,18 @@ 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;
+}`;
+
+export const AuxiliaryColorArtefactWrapper = styled.div`
+	padding: ${ space( 2 ) } ${ space( 4 ) };
+`;
+
 export const ColorfulWrapper = styled.div`
 	width: 216px;
 
@@ -53,9 +81,13 @@ export const ColorfulWrapper = styled.div`
 	.react-colorful__pointer {
 		height: 16px;
 		width: 16px;
+		border: 1.5px solid #ffffff;
+		box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.25 );
 	}
 
 	${ StyledField } {
 		margin-bottom: 0;
 	}
+
+	${ inputHeightStyle }
 `;