Global Styles: Fix black inconsistencies in sidebar

packages/components/CHANGELOG.md

@@ -21,6 +21,8 @@
 ### Bug Fix
 
 -   Use `Object.assign` instead of `{ ...spread }` syntax to avoid errors in the code generated by TypeScript ([#39932](https://github.com/WordPress/gutenberg/pull/39932)).
+-   `ItemGroup`: Ensure that the Item's text color is not overriden by the user agent's button color ([#40055](https://github.com/WordPress/gutenberg/pull/40055)).
+-   `Surface`: Use updated UI text color `#1e1e1e` instead of `#000` ([#40055](https://github.com/WordPress/gutenberg/pull/40055)).
 
 ## 19.7.0 (2022-03-23)
 

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

@@ -124,7 +124,7 @@ Snapshot Diff:
       "background-color": "#fff",
 -     "border-radius": "calc(2px - 1px)",
       "box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.1)",
-      "color": "#000",
+      "color": "#1e1e1e",
       "outline": "none",
       "position": "relative",
     },
@@ -174,8 +174,8 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-jutib-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
-+     class="components-surface components-card css-83a3ca-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+-     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
++     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
@@ -213,7 +213,7 @@ Object {
   "asFragment": [Function],
   "baseElement": .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
@@ -469,7 +469,7 @@ Object {
   </body>,
   "container": .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
@@ -809,7 +809,7 @@ Compared values have no visual difference.
 exports[`Card Card component should warn when the isElevated prop is passed 1`] = `
 .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;

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

@@ -3,7 +3,7 @@
 exports[`props should render correctly 1`] = `
 .emotion-1 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;

packages/components/src/item-group/styles.ts

@@ -36,6 +36,7 @@ export const item = css`
 	width: 100%;
 	display: block;
 	margin: 0;
+	color: inherit;
 `;
 
 export const bordered = css`

packages/components/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -24,8 +24,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -44,8 +44,8 @@ Snapshot Diff:
     role="listitem"
   >
     <div
--     class="components-item css-4qcpca-View-medium-item em57xhy0"
-+     class="components-item css-132y1d5-View-large-item em57xhy0"
+-     class="components-item css-bsdqin-View-medium-item em57xhy0"
++     class="components-item css-1ohjtsa-View-large-item em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Item"
     >
@@ -78,6 +78,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   width: 100%;
   display: block;
   margin: 0;
+  color: inherit;
   border-radius: 2px;
 }
 
@@ -120,8 +121,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-4qcpca-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-bsdqin-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -147,8 +148,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-4qcpca-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-bsdqin-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >

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.black };
+	color: ${ COLORS.darkGray.primary };
 	position: relative;
 `;
 

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

@@ -6,8 +6,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-k1ws5-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-pt58n0-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -21,8 +21,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-gi9sau-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1vckp4o-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -36,8 +36,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-1lwskr8-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-sw9dzi-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -51,8 +51,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-sdy6q1-View-Surface-getBorders-primary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-123k66h-View-Surface-getBorders-primary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >
@@ -63,7 +63,7 @@ Snapshot Diff:
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
 }
 
@@ -82,8 +82,8 @@ Snapshot Diff:
 + Second value
 
   <div
--   class="components-surface css-jkj9zl-View-Surface-getBorders-secondary em57xhy0"
-+   class="components-surface css-avigp2-View-Surface-getBorders-primary em57xhy0"
+-   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary em57xhy0"
++   class="components-surface css-soe81k-View-Surface-getBorders-primary em57xhy0"
     data-wp-c16t="true"
     data-wp-component="Surface"
   >

packages/edit-site/src/components/global-styles/header.js

@@ -9,7 +9,7 @@ import {
 	__experimentalView as View,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -22,12 +22,7 @@ function ScreenHeader( { title, description } ) {
 			<HStack spacing={ 2 }>
 				<View>
 					<NavigationBackButton
-						icon={
-							<Icon
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								variant="muted"
-							/>
-						}
+						icon={ isRTL() ? chevronRight : chevronLeft }
 						size="small"
 						aria-label={ __( 'Navigate to the previous view' ) }
 					/>

packages/edit-site/src/components/global-styles/icon-with-current-color.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+export function IconWithCurrentColor( { className, ...props } ) {
+	return (
+		<Icon
+			className={ classnames(
+				className,
+				'edit-site-global-styles-icon-with-current-color'
+			) }
+			{ ...props }
+		/>
+	);
+}

packages/edit-site/src/components/global-styles/navigation-button.js

@@ -8,15 +8,19 @@ import {
 	FlexItem,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { IconWithCurrentColor } from './icon-with-current-color';
 
 function GenericNavigationButton( { icon, children, ...props } ) {
 	return (
 		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
 					<FlexItem>
-						<Icon icon={ icon } size={ 24 } />
+						<IconWithCurrentColor icon={ icon } size={ 24 } />
 					</FlexItem>
 					<FlexItem>{ children }</FlexItem>
 				</HStack>

packages/edit-site/src/components/global-styles/screen-root.js

@@ -13,13 +13,14 @@ import {
 	CardMedia,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
+import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
@@ -47,7 +48,7 @@ function ScreenRoot() {
 							<HStack justify="space-between">
 								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
 								<FlexItem>
-									<Icon
+									<IconWithCurrentColor
 										icon={
 											isRTL() ? chevronLeft : chevronRight
 										}
@@ -76,7 +77,7 @@ function ScreenRoot() {
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<FlexItem>
-								<Icon
+								<IconWithCurrentColor
 									icon={
 										isRTL() ? chevronLeft : chevronRight
 									}

packages/edit-site/src/components/global-styles/style.scss

@@ -93,3 +93,6 @@
 	}
 }
 
+.edit-site-global-styles-icon-with-current-color {
+	fill: currentColor;
+}

packages/edit-site/src/components/sidebar/style.scss

@@ -80,7 +80,7 @@
 	padding: 0 $grid-unit-10;
 	height: $grid-unit-30;
 	border-radius: $radius-block-ui;
-	background-color: $black;
+	background-color: $gray-900;
 	color: $white;
 	align-items: center;
 	font-size: $helptext-font-size;