From 7ebb41ed553143b2044431dce04dad44094f7b1f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 10 May 2021 11:28:56 +0200
Subject: [PATCH 1/5] typo

---
 packages/components/src/utils/colors.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/utils/colors.js b/packages/components/src/utils/colors.js
index 6815964f57a879..7ab1df31b720d7 100644
--- a/packages/components/src/utils/colors.js
+++ b/packages/components/src/utils/colors.js
@@ -10,7 +10,7 @@ import tinycolor from 'tinycolor2';
 import { COLORS } from './colors-values';
 
 /**
- * Generating a CSS complient rgba() color value.
+ * Generating a CSS compliant rgba() color value.
  *
  * @param {string} hexValue The hex value to convert to rgba().
  * @param {number} alpha The alpha value for opacity.

From 387064bc8eab2d0418ca903a6e4a3a18a9638f36 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 10 May 2021 15:53:20 +0200
Subject: [PATCH 2/5] Delete color() function

---
 packages/components/src/utils/colors.js       | 21 -------------------
 packages/components/src/utils/style-mixins.js |  2 +-
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/packages/components/src/utils/colors.js b/packages/components/src/utils/colors.js
index 7ab1df31b720d7..83b81799d52032 100644
--- a/packages/components/src/utils/colors.js
+++ b/packages/components/src/utils/colors.js
@@ -1,14 +1,8 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import tinycolor from 'tinycolor2';
 
-/**
- * Internal dependencies
- */
-import { COLORS } from './colors-values';
-
 /**
  * Generating a CSS compliant rgba() color value.
  *
@@ -24,18 +18,3 @@ export function rgba( hexValue = '', alpha = 1 ) {
 	const { r, g, b } = tinycolor( hexValue ).toRgb();
 	return `rgba(${ r }, ${ g }, ${ b }, ${ alpha })`;
 }
-
-/**
- * Retrieves a color from the color palette.
- *
- * @param {import('lodash').PropertyPath} value The value to retrieve.
- * @return {string} The color (or fallback, if not found).
- *
- * @example
- * color( 'blue.wordpress.700' )
- * // #00669b
- */
-export function color( value ) {
-	const fallbackColor = '#000';
-	return get( COLORS, value, fallbackColor );
-}
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
index be6347cf37b216..1950f831649ef3 100644
--- a/packages/components/src/utils/style-mixins.js
+++ b/packages/components/src/utils/style-mixins.js
@@ -1,4 +1,4 @@
-export { color, rgba } from './colors';
+export { rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
 export { space } from './space';

From 75a85f933257dbe5d6c2ea3a0e7c09a8fb74116a Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 10 May 2021 15:57:56 +0200
Subject: [PATCH 3/5] Use the COLORS map directly, instead of the colors()
 function

---
 .../styles/alignment-matrix-control-styles.js | 10 +++----
 .../styles/angle-picker-control-styles.js     |  8 ++---
 .../styles/base-control-styles.js             |  4 +--
 .../box-control/styles/box-control-styles.js  |  4 +--
 .../styles/box-control-visualizer-styles.js   |  6 ++--
 .../components/src/card/styles/card-styles.js |  8 ++---
 .../styles/focal-point-picker-style.js        |  4 +--
 .../styles/focal-point-style.js               |  6 ++--
 .../styles/input-control-styles.js            | 18 +++++------
 .../components/src/range-control/index.js     |  4 +--
 .../src/range-control/stories/index.js        |  4 +--
 .../styles/range-control-styles.js            | 30 +++++++++----------
 .../styles/resize-tooltip.styles.js           |  6 ++--
 .../styles/select-control-styles.js           |  6 ++--
 .../src/spinner/styles/spinner-styles.js      |  6 ++--
 .../styles/unit-control-styles.js             |  8 ++---
 packages/components/src/utils/input/base.js   |  4 +--
 .../src/utils/input/input-control.js          | 14 ++++-----
 18 files changed, 72 insertions(+), 78 deletions(-)

diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js
index 1d15682a0d45f3..aff6cba52691b6 100644
--- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js
+++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js
@@ -7,7 +7,7 @@ import { css } from '@emotion/core';
 /**
  * Internal dependencies
  */
-import { color, reduceMotion } from '../../utils/style-mixins';
+import { COLORS, reduceMotion } from '../../utils';
 
 export const rootBase = () => {
 	return css`
@@ -43,11 +43,9 @@ export const Row = styled.div`
 `;
 
 const pointActive = ( { isActive } ) => {
-	const boxShadow = isActive ? `0 0 0 2px ${ color( 'black' ) }` : null;
-	const pointColor = isActive ? color( 'black' ) : color( 'lightGray.800' );
-	const pointColorHover = isActive
-		? color( 'black' )
-		: color( 'blue.medium.focus' );
+	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.black }` : null;
+	const pointColor = isActive ? COLORS.black : COLORS.lightGray[ 800 ];
+	const pointColorHover = isActive ? COLORS.black : COLORS.blue.medium.focus;
 
 	return css`
 		box-shadow: ${ boxShadow };
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
index f025cddb77907c..a59471277d5db8 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Flex } from '../../flex';
-import { color } from '../../utils/style-mixins';
+import { COLORS } from '../../utils';
 
 const CIRCLE_SIZE = 30;
 
@@ -17,7 +17,7 @@ export const Root = styled( Flex )`
 
 export const CircleRoot = styled.div`
 	border-radius: 50%;
-	border: 1px solid ${ color( 'ui.borderLight' ) };
+	border: 1px solid ${ COLORS.ui.borderLight };
 	box-sizing: border-box;
 	cursor: grab;
 	height: ${ CIRCLE_SIZE }px;
@@ -33,9 +33,9 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: ${ color( 'ui.border' ) };
+	background: ${ COLORS.ui.border };
 	border-radius: 50%;
-	border: 3px solid ${ color( 'ui.border' ) };
+	border: 3px solid ${ COLORS.ui.border };
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;
diff --git a/packages/components/src/base-control/styles/base-control-styles.js b/packages/components/src/base-control/styles/base-control-styles.js
index d175554989177f..a6142d0139821f 100644
--- a/packages/components/src/base-control/styles/base-control-styles.js
+++ b/packages/components/src/base-control/styles/base-control-styles.js
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { font, space, color } from '../../utils';
+import { font, space, COLORS } from '../../utils';
 
 export const Wrapper = styled.div`
 	font-family: ${ font( 'default.fontFamily' ) };
@@ -29,5 +29,5 @@ export const StyledLabel = styled.label`
 export const StyledHelp = styled.p`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
-	color: ${ color( 'mediumGray.text' ) };
+	color: ${ COLORS.mediumGray.text };
 `;
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 7d42aa42dcb186..b26c518949a502 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import BaseUnitControl from '../../unit-control';
-import { color, rtl } from '../../utils/style-mixins';
+import { COLORS, rtl } from '../../utils';
 
 export const Root = styled.div`
 	box-sizing: border-box;
@@ -18,7 +18,7 @@ export const Root = styled.div`
 `;
 
 export const Header = styled( Flex )`
-	color: ${ color( 'ui.label' ) };
+	color: ${ COLORS.ui.label };
 	padding-bottom: 8px;
 `;
 
diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.js b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
index f6bea27b758e97..daf99519fa5760 100644
--- a/packages/components/src/box-control/styles/box-control-visualizer-styles.js
+++ b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { color, rtl } from '../../utils/style-mixins';
+import { COLORS, rtl } from '../../utils';
 
 const containerPositionStyles = ( { isPositionAbsolute } ) => {
 	if ( ! isPositionAbsolute ) return '';
@@ -31,8 +31,8 @@ export const Container = styled.div`
 
 export const Side = styled.div`
 	box-sizing: border-box;
-	background: ${ color( 'blue.wordpress.700' ) };
-	background: ${ color( 'ui.theme' ) };
+	background: ${ COLORS.blue.wordpress[ 700 ] };
+	background: ${ COLORS.ui.theme };
 	filter: brightness( 1 );
 	opacity: 0;
 	position: absolute;
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index b884470c98c4b2..a3415843312c43 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -12,18 +12,18 @@ import { HorizontalRule } from '@wordpress/primitives';
  * Internal dependencies
  */
 import { Flex } from '../../flex';
-import { color, space } from '../../utils/style-mixins';
+import { COLORS, space } from '../../utils';
 
 export const styleProps = {
-	borderColor: color( 'lightGray.500' ),
+	borderColor: COLORS.lightGray[ 500 ],
 	borderRadius: '3px',
-	backgroundShady: color( 'lightGray.200' ),
+	backgroundShady: COLORS.lightGray[ 200 ],
 };
 
 const { borderColor, borderRadius, backgroundShady } = styleProps;
 
 export const CardUI = styled.div`
-	background: ${ color( 'white' ) };
+	background: ${ COLORS.white };
 	box-sizing: border-box;
 	border-radius: ${ borderRadius };
 	border: 1px solid ${ borderColor };
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index 03acaf795d04c9..7e7dd9df46059d 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import BaseUnitControl from '../../unit-control';
-import { color } from '../../utils/style-mixins';
+import { COLORS } from '../../utils';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
@@ -43,7 +43,7 @@ export const MediaContainer = styled.div`
 `;
 
 export const MediaPlaceholder = styled.div`
-	background: ${ color( 'lightGray.300' ) };
+	background: ${ COLORS.lightGray[ 300 ] };
 	box-sizing: border-box;
 	height: 170px;
 	max-width: 280px;
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.js b/packages/components/src/focal-point-picker/styles/focal-point-style.js
index 0e3f5eef4e0e16..56d3175a75754f 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-style.js
@@ -11,7 +11,7 @@ import { Path, SVG } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
-import { color } from '../../utils/style-mixins';
+import { COLORS } from '../../utils';
 
 export const FocalPointWrapper = styled.div`
 	background-color: transparent;
@@ -43,6 +43,6 @@ export const PointerIconPathOutline = styled( Path )`
 `;
 
 export const PointerIconPathFill = styled( Path )`
-	fill: ${ color( 'blue.wordpress.700' ) };
-	fill: ${ color( 'ui.theme' ) };
+	fill: ${ COLORS.blue.wordpress[ 700 ] };
+	fill: ${ COLORS.ui.theme };
 `;
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index 759f52ef0608b8..4cc115dd979cc6 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
  */
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
-import { color, rtl } from '../../utils/style-mixins';
+import { COLORS, rtl } from '../../utils';
 
 const rootFloatLabelStyles = () => {
 	return css( { paddingTop: 0 } );
@@ -53,8 +53,8 @@ export const Root = styled( Flex )`
 
 const containerDisabledStyles = ( { disabled } ) => {
 	const backgroundColor = disabled
-		? color( 'ui.backgroundDisabled' )
-		: color( 'ui.background' );
+		? COLORS.ui.backgroundDisabled
+		: COLORS.ui.background;
 
 	return css( { backgroundColor } );
 };
@@ -95,7 +95,7 @@ const disabledStyles = ( { disabled } ) => {
 	if ( ! disabled ) return '';
 
 	return css( {
-		color: color( 'ui.textDisabled' ),
+		color: COLORS.ui.textDisabled,
 	} );
 };
 
@@ -186,7 +186,7 @@ export const Input = styled.input`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ color( 'black' ) };
+		color: ${ COLORS.black };
 		display: block;
 		margin: 0;
 		outline: none;
@@ -242,18 +242,16 @@ export const LabelWrapper = styled( FlexItem )`
 `;
 
 const backdropFocusedStyles = ( { disabled, isFocused } ) => {
-	let borderColor = isFocused
-		? color( 'ui.borderFocus' )
-		: color( 'ui.border' );
+	let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;
 
 	let boxShadow = null;
 
 	if ( isFocused ) {
-		boxShadow = `0 0 0 1px ${ color( 'ui.borderFocus' ) } inset`;
+		boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`;
 	}
 
 	if ( disabled ) {
-		borderColor = color( 'ui.borderDisabled' );
+		borderColor = COLORS.ui.borderDisabled;
 	}
 
 	return css( {
diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js
index 976ec27b40cc97..bec2cdd8783fd2 100644
--- a/packages/components/src/range-control/index.js
+++ b/packages/components/src/range-control/index.js
@@ -17,7 +17,7 @@ import { useInstanceId } from '@wordpress/compose';
 import BaseControl from '../base-control';
 import Button from '../button';
 import Icon from '../icon';
-import { color } from '../utils/colors';
+import { COLORS } from '../utils';
 import { floatClamp, useControlledRangeValue } from './utils';
 import InputRange from './input-range';
 import RangeRail from './rail';
@@ -41,7 +41,7 @@ function RangeControl(
 		beforeIcon,
 		className,
 		currentInput,
-		color: colorProp = color( 'ui.theme' ),
+		color: colorProp = COLORS.ui.theme,
 		disabled = false,
 		help,
 		initialPosition,
diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js
index f65983161c5a3b..0756ac8a8ade49 100644
--- a/packages/components/src/range-control/stories/index.js
+++ b/packages/components/src/range-control/stories/index.js
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import RangeControl from '../index';
-import { color } from '../../utils/colors';
+import { COLORS } from '../../utils';
 
 export default { title: 'Components/RangeControl', component: RangeControl };
 
@@ -31,7 +31,7 @@ const DefaultExample = () => {
 		afterIcon: text( 'afterIcon', '' ),
 		allowReset: boolean( 'allowReset', false ),
 		beforeIcon: text( 'beforeIcon', '' ),
-		color: text( 'color', color( 'ui.theme' ) ),
+		color: text( 'color', COLORS.ui.theme ),
 		disabled: boolean( 'disabled', false ),
 		help: text( 'help', '' ),
 		label: text( 'label', 'Range Label' ),
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 18b96e6d469b61..abf3f3cbefb26d 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import NumberControl from '../../number-control';
-import { color, reduceMotion, rtl, space } from '../../utils/style-mixins';
+import { COLORS, reduceMotion, rtl, space } from '../../utils';
 
 const rangeHeight = () => css( { height: 30, minHeight: 30 } );
 const thumbSize = 20;
@@ -25,7 +25,7 @@ export const Root = styled.div`
 	width: 100%;
 `;
 
-const wrapperColor = ( { color: colorProp = color( 'ui.borderFocus' ) } ) => {
+const wrapperColor = ( { color: colorProp = COLORS.ui.borderFocus } ) => {
 	return css( { color: colorProp } );
 };
 const wrapperMargin = ( { marks } ) =>
@@ -33,7 +33,7 @@ const wrapperMargin = ( { marks } ) =>
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;
-	color: ${ color( 'blue.medium.focus' ) };
+	color: ${ COLORS.blue.medium.focus };
 	display: block;
 	flex: 1;
 	padding-top: 15px;
@@ -63,7 +63,7 @@ const railBackgroundColor = ( { disabled, railColor } ) => {
 	let background = railColor || null;
 
 	if ( disabled ) {
-		background = color( 'lightGray.400' );
+		background = COLORS.lightGray[ 400 ];
 	}
 
 	return css( {
@@ -72,7 +72,7 @@ const railBackgroundColor = ( { disabled, railColor } ) => {
 };
 
 export const Rail = styled.span`
-	background-color: ${ color( 'lightGray.600' ) };
+	background-color: ${ COLORS.lightGray[ 600 ] };
 	box-sizing: border-box;
 	left: 0;
 	pointer-events: none;
@@ -90,7 +90,7 @@ const trackBackgroundColor = ( { disabled, trackColor } ) => {
 	let background = trackColor || 'currentColor';
 
 	if ( disabled ) {
-		background = color( 'lightGray.800' );
+		background = COLORS.lightGray[ 800 ];
 	}
 
 	return css( {
@@ -122,10 +122,10 @@ export const MarksWrapper = styled.span`
 `;
 
 const markFill = ( { disabled, isFilled } ) => {
-	let backgroundColor = isFilled ? 'currentColor' : color( 'lightGray.600' );
+	let backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];
 
 	if ( disabled ) {
-		backgroundColor = color( 'lightGray.800' );
+		backgroundColor = COLORS.lightGray[ 800 ];
 	}
 
 	return css( {
@@ -146,13 +146,13 @@ export const Mark = styled.span`
 
 const markLabelFill = ( { isFilled } ) => {
 	return css( {
-		color: isFilled ? color( 'darkGray.300' ) : color( 'lightGray.600' ),
+		color: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],
 	} );
 };
 
 export const MarkLabel = styled.span`
 	box-sizing: border-box;
-	color: ${ color( 'lightGray.600' ) };
+	color: ${ COLORS.lightGray[ 600 ] };
 	left: 0;
 	font-size: 11px;
 	position: absolute;
@@ -182,12 +182,10 @@ export const ThumbWrapper = styled.span`
 
 const thumbFocus = ( { isFocused } ) => {
 	return css( {
-		borderColor: isFocused
-			? color( 'ui.borderFocus' )
-			: color( 'darkGray.200' ),
+		borderColor: isFocused ? COLORS.ui.borderFocus : COLORS.darkGray[ 200 ],
 		boxShadow: isFocused
 			? `
-				0 0 0 1px ${ color( 'ui.borderFocus' ) }
+				0 0 0 1px ${ COLORS.ui.borderFocus }
 			`
 			: `
 				0 0 0 rgba(0, 0, 0, 0)
@@ -199,7 +197,7 @@ export const Thumb = styled.span`
 	align-items: center;
 	background-color: white;
 	border-radius: 50%;
-	border: 1px solid ${ color( 'darkGray.200' ) };
+	border: 1px solid ${ COLORS.darkGray[ 200 ] };
 	box-sizing: border-box;
 	height: 100%;
 	outline: 0;
@@ -246,7 +244,7 @@ const tooltipPosition = ( { position } ) => {
 };
 
 export const Tooltip = styled.span`
-	background: ${ color( 'ui.border' ) };
+	background: ${ COLORS.ui.border };
 	border-radius: 2px;
 	box-sizing: border-box;
 	color: white;
diff --git a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
index ea134719d50fe6..a1c91b86e3ca44 100644
--- a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
+++ b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Text } from '../../../text';
-import { color } from '../../../utils/style-mixins';
+import { COLORS } from '../../../utils';
 
 export const Root = styled.div`
 	bottom: 0;
@@ -30,11 +30,11 @@ export const TooltipWrapper = styled.div`
 `;
 
 export const Tooltip = styled.div`
-	background: ${ color( 'ui.border' ) };
+	background: ${ COLORS.ui.border };
 	border-radius: 2px;
 	box-sizing: border-box;
 	font-size: 12px;
-	color: ${ color( 'ui.textDark' ) };
+	color: ${ COLORS.ui.textDark };
 	padding: 4px 8px;
 	position: relative;
 `;
diff --git a/packages/components/src/select-control/styles/select-control-styles.js b/packages/components/src/select-control/styles/select-control-styles.js
index 8a3a5a22500ba9..a9b6ff9bc8acfe 100644
--- a/packages/components/src/select-control/styles/select-control-styles.js
+++ b/packages/components/src/select-control/styles/select-control-styles.js
@@ -7,13 +7,13 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { color, rtl } from '../../utils/style-mixins';
+import { COLORS, rtl } from '../../utils';
 
 const disabledStyles = ( { disabled } ) => {
 	if ( ! disabled ) return '';
 
 	return css( {
-		color: color( 'ui.textDisabled' ),
+		color: COLORS.ui.textDisabled,
 	} );
 };
 
@@ -66,7 +66,7 @@ export const Select = styled.select`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ color( 'black' ) };
+		color: ${ COLORS.black };
 		display: block;
 		margin: 0;
 		width: 100%;
diff --git a/packages/components/src/spinner/styles/spinner-styles.js b/packages/components/src/spinner/styles/spinner-styles.js
index 8f30a9febfbd28..4974de616f0ead 100644
--- a/packages/components/src/spinner/styles/spinner-styles.js
+++ b/packages/components/src/spinner/styles/spinner-styles.js
@@ -7,7 +7,7 @@ import { keyframes } from '@emotion/core';
 /**
  * Internal dependencies
  */
-import { color, config } from '../../utils';
+import { COLORS, config } from '../../utils';
 
 const spinAnimation = keyframes`
 	from {
@@ -25,7 +25,7 @@ const topLeft = `calc( ( ${ config( 'spinnerSize' ) } - ${ config(
 
 export const StyledSpinner = styled.span`
 	display: inline-block;
-	background-color: ${ color( 'gray.600' ) };
+	background-color: ${ COLORS.gray[ 600 ] };
 	width: ${ config( 'spinnerSize' ) };
 	height: ${ config( 'spinnerSize' ) };
 	opacity: 0.7;
@@ -36,7 +36,7 @@ export const StyledSpinner = styled.span`
 	&::before {
 		content: '';
 		position: absolute;
-		background-color: ${ color( 'white' ) };
+		background-color: ${ COLORS.white };
 		top: ${ topLeft };
 		left: ${ topLeft };
 		width: calc( ${ config( 'spinnerSize' ) } / 4.5 );
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index 3c38a49685f1b8..c5b300525debb8 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { color, rtl } from '../../utils/style-mixins';
+import { COLORS, rtl } from '../../utils';
 import NumberControl from '../../number-control';
 
 export const Root = styled.div`
@@ -77,7 +77,7 @@ const baseUnitLabelStyles = ( props ) => {
 		border-radius: 2px;
 		border: none;
 		box-sizing: border-box;
-		color: ${ color( 'darkGray.500' ) };
+		color: ${ COLORS.darkGray[ 500 ] };
 		display: block;
 		font-size: 8px;
 		line-height: 1;
@@ -110,11 +110,11 @@ export const UnitSelect = styled.select`
 		border: 1px solid transparent;
 
 		&:hover {
-			background-color: ${ color( 'lightGray.300' ) };
+			background-color: ${ COLORS.lightGray[ 300 ] };
 		}
 
 		&:focus {
-			border-color: ${ color( 'ui.borderFocus' ) };
+			border-color: ${ COLORS.ui.borderFocus };
 			outline: 2px solid transparent;
 			outline-offset: 0;
 		}
diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js
index 91c1c3be939edd..1952b96b3fdb5f 100644
--- a/packages/components/src/utils/input/base.js
+++ b/packages/components/src/utils/input/base.js
@@ -8,13 +8,13 @@ import { css } from '@emotion/core';
  */
 import { reduceMotion } from '../reduce-motion';
 import { config } from '../config';
-import { color } from '../colors';
+import { COLORS } from '../colors-values';
 
 export const inputStyleNeutral = css`
 	box-shadow: 0 0 0 transparent;
 	transition: box-shadow 0.1s linear;
 	border-radius: ${ config( 'radiusBlockUi' ) };
-	border: ${ config( 'borderWidth' ) } solid ${ color( 'ui.border' ) };
+	border: ${ config( 'borderWidth' ) } solid ${ COLORS.ui.border };
 	${ reduceMotion( 'transition' ) }
 `;
 
diff --git a/packages/components/src/utils/input/input-control.js b/packages/components/src/utils/input/input-control.js
index ef63f997b9e926..b6296b95c7ab43 100644
--- a/packages/components/src/utils/input/input-control.js
+++ b/packages/components/src/utils/input/input-control.js
@@ -8,7 +8,7 @@ import { css } from '@emotion/core';
  */
 import { inputStyleNeutral, inputStyleFocus } from './base';
 import { font } from '../font';
-import { color } from '../colors';
+import { COLORS } from '../colors-values';
 import { breakpoint } from '../breakpoint';
 
 export const inputControl = css`
@@ -33,30 +33,30 @@ export const inputControl = css`
 
 	// Use opacity to work in various editor styles.
 	&::-webkit-input-placeholder {
-		color: ${ color( 'darkGray.placeholder' ) };
+		color: ${ COLORS.darkGray.placeholder };
 	}
 
 	&::-moz-placeholder {
 		opacity: 1; // Necessary because Firefox reduces this from 1.
-		color: ${ color( 'darkGray.placeholder' ) };
+		color: ${ COLORS.darkGray.placeholder };
 	}
 
 	&:-ms-input-placeholder {
-		color: ${ color( 'darkGray.placeholder' ) };
+		color: ${ COLORS.darkGray.placeholder };
 	}
 
 	.is-dark-theme & {
 		&::-webkit-input-placeholder {
-			color: ${ color( 'lightGray.placeholder' ) };
+			color: ${ COLORS.lightGray.placeholder };
 		}
 
 		&::-moz-placeholder {
 			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: ${ color( 'lightGray.placeholder' ) };
+			color: ${ COLORS.lightGray.placeholder };
 		}
 
 		&:-ms-input-placeholder {
-			color: ${ color( 'lightGray.placeholder' ) };
+			color: ${ COLORS.lightGray.placeholder };
 		}
 	}
 `;

From b85342217608b18b7afc088da903fe6f65e095a7 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 11 May 2021 11:34:27 +0200
Subject: [PATCH 4/5] changelog

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index ef83be58ff5671..ee31d797eb3d16 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,7 @@
 ### Internal
 
 -   `Flex`, `FlexBlock`, and `FlexItem` components have been re-written from the ground up ([#31297](https://github.com/WordPress/gutenberg/pull/31297)).
+-   `color()` utility function has been removed, in favour of accessing color values directly ([#31661](https://github.com/WordPress/gutenberg/pull/31661))
 
 ## 13.0.0 (2021-03-17)
 

From dd4b976853827c3311f802232d9800f7103b7870 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 12 May 2021 15:48:08 +0200
Subject: [PATCH 5/5] Remove changelog entry

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index ee31d797eb3d16..ef83be58ff5671 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,7 +15,6 @@
 ### Internal
 
 -   `Flex`, `FlexBlock`, and `FlexItem` components have been re-written from the ground up ([#31297](https://github.com/WordPress/gutenberg/pull/31297)).
--   `color()` utility function has been removed, in favour of accessing color values directly ([#31661](https://github.com/WordPress/gutenberg/pull/31661))
 
 ## 13.0.0 (2021-03-17)