Components: remove color() utility function, use values directly (#…

…31661) * typo * Delete color() function * Use the COLORS map directly, instead of the colors() function * changelog * Remove changelog entry
WordPress · May 12, 2021 · 4b0f0f0 · 4b0f0f0
1 parent 6be03f0
commit 4b0f0f0
Show file tree

Hide file tree

Showing 20 changed files with 74 additions and 101 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +25,15 @@ 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 } ) =>
 	css( { marginBottom: marks ? 16 : null } );
 
 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;