[wp-trac] [WordPress Trac] #51927: Twenty Twenty-One: Buttons lose contrast consistency in Dark Mode (was: Twenty Twenty-One: Buttons lose contrast consistency in dark-mode.)

[WordPress Trac]

#51927: Twenty Twenty-One: Buttons lose contrast consistency in Dark Mode
-----------------------------------+-----------------------------
 Reporter:  allancole              |       Owner:  SergeyBiryukov
     Type:  defect (bug)           |      Status:  closed
 Priority:  normal                 |   Milestone:  5.7
Component:  Bundled Theme          |     Version:  5.6
 Severity:  normal                 |  Resolution:  fixed
 Keywords:  2nd-opinion has-patch  |     Focuses:  css
-----------------------------------+-----------------------------
Description changed by desrosj:

Old description:

> While digging into another issue I discovered a possible flaw that
> suggests we may need to change the theme’s default palette colors when
> dark-mode is turned on. The color system in TT1 gets confused in dark-
> mode when it tries to deal with pastel background-colors and nested
> blocks that need special contrast to retain a11y.
>
> This CodePen lays out whats happening and some options for how to correct
> it:
> [https://codepen.io/allancole/pen/wvzKYWq]
>
> I’m pretty sure TT1 has some fall backs that catch some this already. But
> we’re doing it with block-by-block overrides which make it harder to
> comprehend and difficult to unravel and fix.
>
> To test this,
> 1) Create a group block using the pastel-yellow palette colors as the
> background.
> 2) Nest a paragraph block and a button block inside of that group.
> 3) Publish.
> 4) Set the theme to dark mode and visit the frontend.
>
> See screenshots to se expected and actual results.
>
> I have two possible suggestions to solve this.
>
> **Solution 1: Reverse the brightness for palette colors in dark-mode.**
>
> This requires adding the theme’s pastel and dark color variables to our
> `style-dark-mode.css` and including some new dark-mode specific pastel
> colors that are effectively reversed. the downside here is that if we
> change the theme’s palette colors, we might also might need to update the
> palette colors in the customizer and the block editor which is especially
> difficult and quite a big change.
>
> **Solution 2: Revise our utility classes to account for the dark-mode
> class.
>
> This would require us to revisit the `color-palette.scss` utility classes
> and include a new rule for dark-mode to make the text appear the right
> color.
>
> Example:
>
> {{{
> .has-green-background-color[class] {
>         background-color: var(--global--color-green);
> }
>
> .is-darkmode .has-black-background-color[class]:not(.has-text-color) {
>         color: var(--global--color-dark-gray); /* Make text dark when in
> dark mode */
> }
> }}}
>
> I’m still exploring the two options, but so far the second one seems the
> easiest to do with the least amount of refactoring and friction.
>
> I’m curious to hear other’s thoughts on this. Maybe there’s some other
> way to solve this?

New description:

 While digging into another issue I discovered a possible flaw that
 suggests we may need to change the theme’s default palette colors when
 Dark Mode is turned on. The color system in TT1 gets confused in Dark Mode
 when it tries to deal with pastel background-colors and nested blocks that
 need special contrast to retain a11y.

 This CodePen lays out whats happening and some options for how to correct
 it:
 [https://codepen.io/allancole/pen/wvzKYWq]

 I’m pretty sure TT1 has some fall backs that catch some this already. But
 we’re doing it with block-by-block overrides which make it harder to
 comprehend and difficult to unravel and fix.

 To test this,
 1) Create a group block using the pastel-yellow palette colors as the
 background.
 2) Nest a paragraph block and a button block inside of that group.
 3) Publish.
 4) Set the theme to Dark Mode and visit the frontend.

 See screenshots to se expected and actual results.

 I have two possible suggestions to solve this.

 **Solution 1: Reverse the brightness for palette colors in Dark Mode.**

 This requires adding the theme’s pastel and dark color variables to our
 `style-dark-mode.css` and including some new Dark Mode specific pastel
 colors that are effectively reversed. the downside here is that if we
 change the theme’s palette colors, we might also might need to update the
 palette colors in the customizer and the block editor which is especially
 difficult and quite a big change.

 **Solution 2: Revise our utility classes to account for the Dark Mode
 class.

 This would require us to revisit the `color-palette.scss` utility classes
 and include a new rule for Dark Mode to make the text appear the right
 color.

 Example:

 {{{
 .has-green-background-color[class] {
         background-color: var(--global--color-green);
 }

 .is-darkmode .has-black-background-color[class]:not(.has-text-color) {
         color: var(--global--color-dark-gray); /* Make text dark when in
 Dark Mode */
 }
 }}}

 I’m still exploring the two options, but so far the second one seems the
 easiest to do with the least amount of refactoring and friction.

 I’m curious to hear other’s thoughts on this. Maybe there’s some other way
 to solve this?

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51927#comment:28>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform