Proposal: Apply the Theme component to the sidebar of the Site Editor

[t-hamano]

What problem does this address?

Inspired by #53262

The sidebar background of the Site Editor is a dark color. In the components used in it, a lot of style overrides are occurring, especially in pseudo-classes such as :focus/:hover:-focus-visible, to match the dark background color. Also, as reported in #52594, if the button has any conditions, additional styles are needed to fix.

Also, the blue focus outline based on the --wp-admin-theme-color CSS variable does not seem to match the dark background color.

What is your proposed solution?

With #53262, the Theme component can now be used outside of @wordpress/components package.

By applying the Theme component to the entire sidebar and passing the appropriate color props for the sidebar to the Theme component, the components within the sidebar should behave with the appropriate style based on the generated --wp-components-color-{variation} CSS variables. At the same time, numerous style overrides should be unnecessary.

Screencast

The following is the behavior of the Theme component applied to the sidebar on a trial basis, assuming some styling adjustments were made.

To reproduce this screencast, the following changes are required:

Details

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 54ac50a021..b4655dee36 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -11,6 +11,7 @@ import {
        __unstableMotion as motion,
        __unstableAnimatePresence as AnimatePresence,
        __unstableUseNavigateRegions as useNavigateRegions,
+       privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import {
        useReducedMotion,
@@ -56,6 +57,7 @@ const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { Theme } = unlock( componentsPrivateApis );
 
 const ANIMATION_DURATION = 0.5;
 
@@ -211,17 +213,24 @@ export default function Layout() {
                                        }
                                        animate={ headerAnimationState }
                                >
-                                       <SiteHub
-                                               variants={ {
-                                                       isDistractionFree: { x: '-100%' },
-                                                       isDistractionFreeHovering: { x: 0 },
-                                                       view: { x: 0 },
-                                                       edit: { x: 0 },
-                                               } }
-                                               ref={ hubRef }
-                                               isTransparent={ isResizableFrameOversized }
-                                               className="edit-site-layout__hub"
-                                       />
+                                       <Theme
+                                               background="#1e1e1e"
+                                               foreground="#e0e0e0"
+                                               foregroundInverted="#e0e0e0"
+                                               accent="#e0e0e0"
+                                       >
+                                               <SiteHub
+                                                       variants={ {
+                                                               isDistractionFree: { x: '-100%' },
+                                                               isDistractionFreeHovering: { x: 0 },
+                                                               view: { x: 0 },
+                                                               edit: { x: 0 },
+                                                       } }
+                                                       ref={ hubRef }
+                                                       isTransparent={ isResizableFrameOversized }
+                                                       className="edit-site-layout__hub"
+                                               />
+                                       </Theme>
 
                                        <AnimatePresence initial={ false }>
                                                { isEditorPage && isEditing && (
@@ -285,7 +294,19 @@ export default function Layout() {
                                                        } }
                                                        className="edit-site-layout__sidebar"
                                                >
-                                                       <Sidebar />
+                                                       <Theme
+                                                               style={ {
+                                                                       height: '100%',
+                                                                       display: 'flex',
+                                                                       flexFlow: 'column',
+                                                               } }
+                                                               background="#1e1e1e"
+                                                               foreground="#e0e0e0"
+                                                               foregroundInverted="#e0e0e0"
+                                                               accent="#e0e0e0"
+                                                       >
+                                                               <Sidebar />
+                                                       </Theme>
                                                </motion.div>
                                        </NavigableRegion>
 
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 11c7bdeeaf..81f5ab3d85 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -207,7 +207,7 @@
        &:focus::before {
                box-shadow:
                        inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
-                       inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+                       inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent);
        }
 
        .edit-site-layout__view-mode-toggle-icon {
diff --git a/packages/edit-site/src/components/sidebar-button/style.scss b/packages/edit-site/src/components/sidebar-button/sty
le.scss
index 5135f97869..e69de29bb2 100644
--- a/packages/edit-site/src/components/sidebar-button/style.scss
-       &:hover,
-       &:focus-visible,
-       &:focus,
-       &:not([aria-disabled="true"]):active,
-       &[aria-expanded="true"] {
-               color: $gray-100;
-       }
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 65fe323157..db5ce02847 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -84,11 +84,11 @@
                border: $gray-100 $border-width solid;
        }
        .edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
-               border: var(--wp-admin-theme-color) $border-width solid;
+               border: var(--wp-components-color-accent) $border-width solid;
        }
 
        .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-               border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+               border: var(--wp-components-color-accent) var(--wp-admin-border-width-focus) solid;
        }
 }
 
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index 9a3644cc83..00548867db 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -1,3 +1,8 @@
+
+.edit-site-sidebar-button:not(.is-pressed):focus {
+       color: var(--wp-components-color-accent);
+}
+
 .edit-site-sidebar__content {
        flex-grow: 1;
        overflow-y: auto;

This is of course not ideal, since the color code is hard-coded into the component props.

This screencast shows that the focus outline is white and at the same time, the problem shown in #52594 has been solved.

3fb07d0c712849b45467cb2bc5271b98.mp4