Components: Clean up unused and duplicate COLORS values (#43445)

* Remove unused colors * Fix incorrect fallback values for theme colors * Remove unused color It's only used in the RangeControl Wrapper, and it always gets overriden by another color. * Consolidate admin.theme with ui.theme * Consolidate `mediumGray.text` with `gray[ 700 ]` * Remove unused lightGray values * Simplify `white` color * Rename G2.gray * Add missing $gray-800 * Add deprecation warnings * Remove unused deprecated grays * Move out non-deprecated placeholder colors * Improve comments * Add changelog * Update snapshots * Add Object.freeze for better type checking * Fix existing lint errors * Fixup remaining blues
WordPress · Aug 23, 2022 · 19efda3 · 19efda3
1 parent b439e5f
commit 19efda3
Show file tree

Hide file tree

Showing 17 changed files with 72 additions and 170 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -30,6 +30,7 @@
 ### Internal
 
 -   `Tooltip`: Refactor tests to `@testing-library/react` ([#43061](https://github.com/WordPress/gutenberg/pull/43061)).
+-   Clean up unused and duplicate `COLORS` values ([#43445](https://github.com/WordPress/gutenberg/pull/43445)).
 -   Update `floating-ui` to the latest version ([#43206](https://github.com/WordPress/gutenberg/pull/43206)).
 -   `DateTimePicker`, `TimePicker`, `DatePicker`: Switch from `moment` to `date-fns` ([#43005](https://github.com/WordPress/gutenberg/pull/43005)).
 -   `DatePicker`: Switch from `react-dates` to `use-lilius` ([#43005](https://github.com/WordPress/gutenberg/pull/43005)).

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,9 +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 pointColorHover = isActive
-		? COLORS.gray[ 900 ]
-		: COLORS.blue.medium.focus;
+	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme;
 
 	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
@@ -45,9 +45,9 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: ${ COLORS.admin.theme };
+	background: ${ COLORS.ui.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.admin.theme };
+	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;

diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts
@@ -64,7 +64,7 @@ export const StyledHelp = styled.p`
 	margin-bottom: 0;
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
-	color: ${ COLORS.mediumGray.text };
+	color: ${ COLORS.gray[ 700 ] };
 
 	${ deprecatedMarginHelp }
 `;

diff --git a/packages/components/src/base-field/styles.js b/packages/components/src/base-field/styles.js
@@ -35,7 +35,7 @@ export const BaseField = css`
 
 	&:focus,
 	&[data-focused='true'] {
-		border-color: ${ COLORS.admin.theme };
+		border-color: ${ COLORS.ui.theme };
 		box-shadow: ${ CONFIG.controlBoxShadowFocus };
 	}
 `;

diff --git a/packages/components/src/base-field/test/__snapshots__/index.js.snap b/packages/components/src/base-field/test/__snapshots__/index.js.snap
@@ -129,8 +129,8 @@ exports[`base field should render correctly 1`] = `
 
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
-  border-color: var( --wp-admin-theme-color, #00669b);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
+  border-color: var( --wp-admin-theme-color, #007cba);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
 }
 
 <div

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
@@ -31,7 +31,6 @@ export const Container = styled.div`
 
 export const Side = styled.div`
 	box-sizing: border-box;
-	background: ${ COLORS.blue.wordpress[ 700 ] };
 	background: ${ COLORS.ui.theme };
 	filter: brightness( 1 );
 	opacity: 0;

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
@@ -42,6 +42,5 @@ export const PointerIconPathOutline = styled( Path )`
 `;
 
 export const PointerIconPathFill = styled( Path )`
-	fill: ${ COLORS.blue.wordpress[ 700 ] };
 	fill: ${ COLORS.ui.theme };
 `;
diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
@@ -16,13 +16,13 @@ export const unstyledButton = css`
 	text-align: left;
 
 	&:hover {
-		color: ${ COLORS.admin.theme };
+		color: ${ COLORS.ui.theme };
 	}
 
 	&:focus {
 		background-color: transparent;
-		color: ${ COLORS.admin.theme };
-		border-color: ${ COLORS.admin.theme };
+		color: ${ COLORS.ui.theme };
+		border-color: ${ COLORS.ui.theme };
 		outline: 3px solid transparent;
 	}
 `;

diff --git a/packages/components/src/palette-edit/styles.js b/packages/components/src/palette-edit/styles.js
@@ -29,7 +29,7 @@ export const IndicatorStyled = styled( CircularOptionPicker.Option )`
 export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
-		border-radius: ${ CONFIG.controlBorderRadius }};
+		border-radius: ${ CONFIG.controlBorderRadius };
 		${ Input }${ Input }${ Input }${ Input } {
 			height: ${ space( 8 ) };
 		}
@@ -58,7 +58,7 @@ export const PaletteItem = styled( View )`
 		border-top-color: transparent;
 	}
 	&.is-selected {
-		border-color: ${ COLORS.blue.wordpress[ 700 ] };
+		border-color: ${ COLORS.ui.theme };
 	}
 `;
 
@@ -69,7 +69,7 @@ export const NameContainer = styled.div`
 	white-space: nowrap;
 	overflow: hidden;
 	${ PaletteItem }:hover & {
-		color: var( --wp-admin-theme-color, ${ COLORS.blue.wordpress[ 700 ] } );
+		color: ${ COLORS.ui.theme };
 	}
 `;
 
@@ -95,8 +95,9 @@ export const PaletteHStackHeader = styled( HStack )`
 export const PaletteEditStyles = styled( View )`
 	&&& {
 		.components-button.has-icon {
-		min-width: 0;
-		padding: 0;
+			min-width: 0;
+			padding: 0;
+		}
 	}
 `;
 

diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -48,7 +48,6 @@ const wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {
 };
 
 export const Wrapper = styled.div< WrapperProps >`
-	color: ${ COLORS.blue.medium.focus };
 	display: block;
 	flex: 1;
 	position: relative;

diff --git a/packages/components/src/text/styles.js b/packages/components/src/text/styles.js
@@ -27,7 +27,7 @@ export const destructive = css`
 `;
 
 export const muted = css`
-	color: ${ COLORS.mediumGray.text };
+	color: ${ COLORS.gray[ 700 ] };
 `;
 
 export const highlighterText = css`

diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx
@@ -53,7 +53,7 @@ describe( 'Text', () => {
 			<Text variant="muted">Lorem ipsum.</Text>
 		);
 		expect( container.firstChild ).toHaveStyle( {
-			color: COLORS.mediumGray.text,
+			color: COLORS.gray[ 700 ],
 		} );
 	} );
 

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -55,8 +55,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-6:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #007cba);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
+  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
@@ -326,8 +326,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-6:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #007cba);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
+  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }