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,@@ -56,6 +57,7 @@ const { useCommands } = unlock( coreCommandsPrivateApis );
const { useCommandContext } = unlock( commandsPrivateApis );
const { useLocation } = unlock( routerPrivateApis );
const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+ const { Theme } = unlock( componentsPrivateApis );@@ -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>@@ -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>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);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;- 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);+ }+ 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
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-colorCSS variable does not seem to match the dark background color.What is your proposed solution?
With #53262, the
Themecomponent can now be used outside of@wordpress/componentspackage.By applying the
Themecomponent to the entire sidebar and passing the appropriate color props for the sidebar to theThemecomponent, 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
Themecomponent applied to the sidebar on a trial basis, assuming some styling adjustments were made.To reproduce this screencast, the following changes are required:
Details
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