Update the global styles sidebar to use a navigation component

packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -89,6 +89,7 @@ export const PanelColorGradientSettingsInner = ( {
  children,
  settings,
  title,
+ showTitle = true,
  ...props
 } ) => {
  if (
@@ -120,13 +121,14 @@ export const PanelColorGradientSettingsInner = ( {
  />
  </span>
  );
+
  return (
  <PanelBody
  className={ classnames(
  'block-editor-panel-color-gradient-settings',
  className
  ) }
- title={ titleElement }
+ title={ showTitle ? titleElement : undefined }
  { ...props }
  >
  { settings.map( ( setting, index ) => (

packages/block-editor/src/hooks/color-panel.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,6 +20,7 @@ export default function ColorPanel( {
  settings,
  clientId,
  enableContrastChecking = true,
+ showTitle = true,
 } ) {
  const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
  const [ detectedColor, setDetectedColor ] = useState();
@@ -58,6 +59,7 @@ export default function ColorPanel( {
  title={ __( 'Color' ) }
  initialOpen={ false }
  settings={ settings }
+ showTitle={ showTitle }
  >
  { enableContrastChecking && (
  <ContrastChecker

packages/components/src/navigation/menu/index.js

@@ -74,13 +74,15 @@ export default function NavigationMenu( props ) {
  />
  ) }
 
- <NavigationMenuTitle
- hasSearch={ hasSearch }
- onSearch={ onSearch }
- search={ search }
- title={ title }
- titleAction={ titleAction }
- />
+ { title && (
+ <NavigationMenuTitle
+ hasSearch={ hasSearch }
+ onSearch={ onSearch }
+ search={ search }
+ title={ title }
+ titleAction={ titleAction }
+ />
+ ) }
 
  <NavigableMenu>
  <ul aria-labelledby={ menuTitleId }>

packages/components/src/navigation/styles/navigation-styles.js

@@ -11,17 +11,15 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { G2, UI } from '../../utils/colors-values';
+import { BASE, G2, UI } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
 export const NavigationUI = styled.div`
  width: 100%;
- background-color: ${ G2.darkGray.primary };
  box-sizing: border-box;
- color: #f0f0f0;
  padding: 0 ${ space( 4 ) };
  overflow: hidden;
 `;
@@ -47,16 +45,19 @@ export const MenuUI = styled.div`
 
 export const MenuBackButtonUI = styled( Button )`
  &.is-tertiary {
- color: ${ G2.lightGray.ui };
+ color: inherit;
+ opacity: 0.7;
 
  &:hover:not( :disabled ) {
- color: #ddd;
+ opacity: 1;
  box-shadow: none;
+ color: inherit;
  }
 
  &:active:not( :disabled ) {
  background: transparent;
- color: #ddd;
+ opacity: 1;
+ color: inherit;
  }
  }
 `;
@@ -68,7 +69,7 @@ export const MenuTitleUI = styled.div`
 
 export const MenuTitleHeadingUI = styled( Text )`
  align-items: center;
- color: ${ G2.gray[ 100 ] };
+ color: inherit;
  display: flex;
  justify-content: space-between;
  margin-bottom: ${ space( 2 ) };
@@ -84,17 +85,20 @@ export const MenuTitleActionsUI = styled.span`
  height: ${ space( 6 ) }; // 24px, same height as the buttons inside
 
  .components-button.is-small {
- color: ${ G2.lightGray.ui };
+ color: inherit;
+ opacity: 0.7;
  margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline
  padding: 0;
 
  &:active:not( :disabled ) {
  background: none;
- color: ${ G2.gray[ 200 ] };
+ opacity: 1;
+ color: inherit;
  }
  &:hover:not( :disabled ) {
  box-shadow: none;
- color: ${ G2.gray[ 200 ] };
+ opacity: 1;
+ color: inherit;
  }
  }
 `;
@@ -142,46 +146,49 @@ export const MenuTitleSearchUI = styled.div`
 `;
 
 export const GroupTitleUI = styled( Text )`
+ color: inherit;
  margin-top: ${ space( 2 ) };
  padding: ${ () =>
  isRTL()
  ? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } 0`
  : `${ space( 1 ) } 0 ${ space( 1 ) } ${ space( 4 ) }` };
  text-transform: uppercase;
- color: ${ G2.gray[ 100 ] };
 `;
 
 export const ItemBaseUI = styled.li`
  border-radius: 2px;
- color: ${ G2.lightGray.ui };
+ color: inherit;
  margin-bottom: 0;
 
- button,
- a.components-button,
- a {
+ > button,
+ > a.components-button,
+ > a {
  width: 100%;
- color: ${ G2.lightGray.ui };
+ color: inherit;
+ opacity: 0.7;
  padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */
  ${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }
 
  &:hover,
  &:focus:not( [aria-disabled='true'] ):active,
  &:active:not( [aria-disabled='true'] ):active {
- color: #ddd;
+ color: inherit;
+ opacity: 1;
  }
  }
 
  &.is-active {
  background-color: ${ UI.theme };
- color: ${ UI.textDark };
+ color: ${ BASE.white };
 
- button,
- a {
- color: ${ UI.textDark };
+ > button,
+ > a {
+ color: ${ BASE.white };
+ opacity: 1;
  }
  }
 
- svg path {
+ > svg path {
  color: ${ G2.lightGray.ui };
  }
 `;
@@ -196,7 +203,8 @@ export const ItemUI = styled.div`
  font-weight: 400;
  line-height: 20px;
  width: 100%;
- color: ${ G2.lightGray.ui };
+ color: inherit;
+ opacity: 0.7;
 `;
 
 export const ItemBadgeUI = styled.span`

packages/edit-post/src/components/preferences-modal/style.scss

@@ -26,10 +26,10 @@ $vertical-tabs-width: 160px;
  }
 
  .components-navigation {
- background-color: $white;
  padding: 0;
  max-height: 100%;
  overflow-y: auto;
+ color: $black;
 
  > * {
  // Matches spacing cleared from the modal content element.
@@ -38,42 +38,26 @@ $vertical-tabs-width: 160px;
 
  .components-navigation__menu {
  margin: 0;
- color: $gray-900;
 
  .components-navigation__item {
- color: $gray-900; // The inheritance of some items is quite strong, so we have to duplicate this one.
-
  & > button {
- color: inherit;
  padding: 3px $grid-unit-20;
  height: $grid-unit-60;
  // Aligns button text instead of button box.
  margin: 0 #{-$grid-unit-20};
  width: calc(#{$grid-unit-40} + 100%);
  &:focus {
- background: $gray-100;
  font-weight: 500;
  }
- &:hover {
- color: var(--wp-admin-theme-color);
- }
- }
- .components-toggle-control__label {
- color: inherit;
  }
  }
  .components-navigation__menu-title-heading {
- color: inherit;
  border-bottom: 1px solid $gray-300;
  padding-left: 0;
  padding-right: 0;
  }
  .components-navigation__back-button {
- color: inherit;
  padding-left: 0;
- &:hover {
- color: var(--wp-admin-theme-color);
- }
  }
  .edit-post-preferences-modal__custom-fields-confirmation-button {
  width: auto;

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

@@ -4,6 +4,7 @@
  width: 0;
  overflow: hidden;
  background: $gray-900;
+ color: $white;
  transition: width 100ms linear;
  @include reduce-motion("transition");
 

packages/edit-site/src/components/sidebar/color-panel.js

@@ -123,6 +123,7 @@ export default function ColorPanel( {
  gradients={ gradients }
  disableCustomColors={ ! areCustomSolidsEnabled }
  disableCustomGradients={ ! areCustomGradientsEnabled }
+ showTitle={ false }
  >
  <ColorPalettePanel
  key={ 'color-palette-panel-' + name }