Components: Unify black color to gray-900

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   Consolidate the main black colors to gray-900. Affects `AlignmentMatrixControl`, `InputControl`, `Heading`, `SelectControl`, `Spinner (Experimental)`, and `Text` ([#40391](https://github.com/WordPress/gutenberg/pull/40391)).
+
 ## 19.8.0 (2022-04-08)
 
 ### Enhancements

packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js

@@ -43,9 +43,11 @@ export const Row = styled.div`
 `;
 
 const pointActive = ( { isActive } ) => {
-	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;
+	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;
 
 	return css`
 		box-shadow: ${ boxShadow };

packages/components/src/heading/hook.ts

@@ -70,7 +70,7 @@ export function useHeading(
 	}
 
 	const textProps = useText( {
-		color: COLORS.darkGray.heading,
+		color: COLORS.gray[ 900 ],
 		size: getHeadingFontSize( level ),
 		isBlock: true,
 		weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],

packages/components/src/heading/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
-  color: #050505;
+  color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;
@@ -27,7 +27,7 @@ Snapshot Diff:
 
   Array [
     Object {
-      "color": "#050505",
+      "color": "#1e1e1e",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
@@ -45,7 +45,7 @@ Snapshot Diff:
 
   Array [
     Object {
-      "color": "#050505",
+      "color": "#1e1e1e",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",

packages/components/src/input-control/styles/input-control-styles.tsx

@@ -210,7 +210,7 @@ export const Input = styled.input< InputProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.black };
+		color: ${ COLORS.gray[ 900 ] };
 		display: block;
 		font-family: inherit;
 		margin: 0;

packages/components/src/select-control/styles/select-control-styles.ts

@@ -96,7 +96,7 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.black };
+		color: ${ COLORS.gray[ 900 ] };
 		display: block;
 		font-family: inherit;
 		margin: 0;

packages/components/src/surface/styles.js

@@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils';
 
 export const Surface = css`
 	background-color: ${ CONFIG.surfaceColor };
-	color: ${ COLORS.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	position: relative;
 `;
 

packages/components/src/text/hook.js

@@ -105,7 +105,7 @@ export default function useText( props ) {
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.black } )
+				? css( { color: COLORS.gray[ 900 ] } )
 				: css( { color: COLORS.white } );
 		}
 

packages/components/src/text/styles.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 
 export const Text = css`
-	color: ${ COLORS.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
 `;

packages/components/src/tools-panel/test/__snapshots__/index.js.snap

@@ -64,7 +64,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
-  color: #050505;
+  color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;

packages/components/src/ui/spinner/component.js

@@ -21,7 +21,7 @@ import { COLORS } from '../../utils/colors-values';
  */
 function Spinner( props, forwardedRef ) {
 	const {
-		color = COLORS.black,
+		color = COLORS.gray[ 900 ],
 		size = BASE_SIZE,
 		...otherProps
 	} = useContextSystem( props, 'Spinner' );

packages/components/src/ui/spinner/test/__snapshots__/index.js.snap

@@ -12,7 +12,7 @@ Snapshot Diff:
       <div
         class="css-tada40-BarsView e1s9yo7h0"
 -       style="color: blue;"
-+       style="color: rgb(0, 0, 0);"
++       style="color: rgb(30, 30, 30);"
       >
         <div
           class="InnerBar1"
@@ -193,7 +193,7 @@ exports[`props should render correctly 1`] = `
   >
     <div
       class="emotion-4 emotion-5"
-      style="color: rgb(0, 0, 0);"
+      style="color: rgb(30, 30, 30);"
     >
       <div
         class="InnerBar1"
@@ -258,6 +258,6 @@ Snapshot Diff:
     >
       <div
         class="css-tada40-BarsView e1s9yo7h0"
-        style="color: rgb(0, 0, 0);"
+        style="color: rgb(30, 30, 30);"
       >
 `;

packages/components/src/utils/colors-values.js

@@ -13,12 +13,6 @@ export const BASE = {
 	white: '#fff',
 };
 
-/**
- * TODO: Continue to update values as "G2" design evolves.
- *
- * "G2" refers to the movement to advance the interface of the block editor.
- * https://github.com/WordPress/gutenberg/issues/18667
- */
 export const G2 = {
 	blue: {
 		medium: {
@@ -35,10 +29,6 @@ export const G2 = {
 		200: '#e0e0e0', // Used sparingly for light borders.
 		100: '#f0f0f0', // Used for light gray backgrounds.
 	},
-	darkGray: {
-		primary: '#1e1e1e',
-		heading: '#050505',
-	},
 	mediumGray: {
 		text: '#757575',
 	},
@@ -169,10 +159,16 @@ export const UI = {
 // Using Object.assign instead of { ...spread } syntax helps TypeScript
 // to extract the correct type defs here.
 export const COLORS = Object.assign( {}, BASE, {
-	darkGray: merge( {}, DARK_GRAY, G2.darkGray ),
+	darkGray: DARK_GRAY,
 	darkOpacity: DARK_OPACITY,
 	darkOpacityLight: DARK_OPACITY_LIGHT,
 	mediumGray: G2.mediumGray,
+	/**
+	 * The main gray color object (since Apr 16, 2022).
+	 *
+	 * We are in the process of simplifying the colors in this file,
+	 * please prefer this `gray` object in the meantime.
+	 */
 	gray: G2.gray,
 	lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
 	lightGrayLight: LIGHT_OPACITY_LIGHT,