Components: Retire LIGHT_GRAY color object (#43994)

* Retire `LIGHT_GRAY[ 300 ]` → `GRAY[ 100 ]` * Retire `LIGHT_GRAY[ 400 ]` → `GRAY[ 100 ]` Using the more meaningful `COLORS.ui.backgroundDisabled` in this case * Retire `LIGHT_GRAY[ 600 ]` → `GRAY[ 300 ]` * Retire `LIGHT_GRAY[ 800 ]` → `GRAY[ 400 ]` * Add changelog
WordPress · Sep 12, 2022 · a70ad7c · a70ad7c
1 parent c1c046e
commit a70ad7c
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 23 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -28,6 +28,9 @@
 -   `SearchControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43871](https://github.com/WordPress/gutenberg/pull/43871)).
 -   `CardHeader`, `CardBody`, `CardFooter`: Tweak `isShady` background colors to be consistent with the grays in `@wordpress/base-styles` ([#43719](https://github.com/WordPress/gutenberg/pull/43719)).
 -   `InputControl`, `SelectControl`: Tweak `disabled` colors to be consistent with the grays in `@wordpress/base-styles` ([#43719](https://github.com/WordPress/gutenberg/pull/43719)).
+-   `FocalPointPicker`: Tweak media placeholder background color to be consistent with the grays in `@wordpress/base-styles` ([#43994](https://github.com/WordPress/gutenberg/pull/43994)).
+-   `RangeControl`: Tweak rail, track, and mark colors to be consistent with the grays in `@wordpress/base-styles` ([#43994](https://github.com/WordPress/gutenberg/pull/43994)).
+-   `UnitControl`: Tweak unit dropdown hover color to be consistent with the grays in `@wordpress/base-styles` ([#43994](https://github.com/WordPress/gutenberg/pull/43994)).
 -   `Popover`: stabilize `__unstableShift` to `shift` ([#43845](https://github.com/WordPress/gutenberg/pull/43845)).
 
 ### Internal

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
@@ -45,7 +45,7 @@ export const Row = styled.div`
 
 const pointActive = ( { isActive } ) => {
 	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
-	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.lightGray[ 800 ];
+	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ];
 	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme;
 
 	return css`

diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
@@ -44,7 +44,7 @@ export const MediaContainer = styled.div`
 `;
 
 export const MediaPlaceholder = styled.div`
-	background: ${ COLORS.lightGray[ 300 ] };
+	background: ${ COLORS.gray[ 100 ] };
 	box-sizing: border-box;
 	height: ${ INITIAL_BOUNDS.height }px;
 	max-width: 280px;

diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -76,14 +76,14 @@ const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {
 	let background = railColor || '';
 
 	if ( disabled ) {
-		background = COLORS.lightGray[ 400 ];
+		background = COLORS.ui.backgroundDisabled;
 	}
 
 	return css( { background } );
 };
 
 export const Rail = styled.span`
-	background-color: ${ COLORS.lightGray[ 600 ] };
+	background-color: ${ COLORS.gray[ 300 ] };
 	left: 0;
 	pointer-events: none;
 	right: 0;
@@ -101,7 +101,7 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
 	let background = trackColor || 'currentColor';
 
 	if ( disabled ) {
-		background = COLORS.lightGray[ 800 ];
+		background = COLORS.gray[ 400 ];
 	}
 
 	return css( { background } );
@@ -129,10 +129,10 @@ export const MarksWrapper = styled.span`
 `;
 
 const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
-	let backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];
+	let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];
 
 	if ( disabled ) {
-		backgroundColor = COLORS.lightGray[ 800 ];
+		backgroundColor = COLORS.gray[ 400 ];
 	}
 
 	return css( {
@@ -152,12 +152,12 @@ export const Mark = styled.span`
 
 const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 	return css( {
-		color: isFilled ? COLORS.gray[ 700 ] : COLORS.lightGray[ 600 ],
+		color: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],
 	} );
 };
 
 export const MarkLabel = styled.span`
-	color: ${ COLORS.lightGray[ 600 ] };
+	color: ${ COLORS.gray[ 300 ] };
 	left: 0;
 	font-size: 11px;
 	position: absolute;
@@ -171,7 +171,7 @@ export const MarkLabel = styled.span`
 const thumbColor = ( { disabled }: ThumbProps ) =>
 	disabled
 		? css`
-				background-color: ${ COLORS.lightGray[ 800 ] };
+				background-color: ${ COLORS.gray[ 400 ] };
 		  `
 		: css`
 				background-color: var( --wp-admin-theme-color );

diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -113,7 +113,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 			${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
 
 			&:not(:disabled):hover {
-				background-color: ${ COLORS.lightGray[ 300 ] };
+				background-color: ${ COLORS.gray[ 100 ] };
 			}
 
 			&:focus {

diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
@@ -22,14 +22,6 @@ const GRAY = {
 	100: '#f0f0f0',
 };
 
-// TODO: Replace usages of these with the equivalents in `GRAY`
-const LIGHT_GRAY = {
-	800: '#b5bcc2',
-	600: '#d7dade',
-	400: '#e8eaeb', // Good for "readonly" input fields and special text selection.
-	300: '#edeff0',
-};
-
 // Matches @wordpress/base-styles
 const ALERT = {
 	yellow: '#f0b849',
@@ -64,10 +56,6 @@ export const COLORS = Object.freeze( {
 	 * The main gray color object.
 	 */
 	gray: GRAY,
-	/**
-	 * @deprecated Try to use `gray` instead.
-	 */
-	lightGray: LIGHT_GRAY,
 	white,
 	alert: ALERT,
 	ui: UI,