WordPress/twentytwentyfour

Separator Color Issue in ice , rust & maelstrom Style Variations

Closed this issue · 1 comments

Separator Color is not visible properly in ice , rust & maelstrom Style Variations.

1. Ice Style Variation:

Pricing Pattern's Separator is not Showing properly :

pricing

Sidebar Pattern's Separator is not Showing properly :

sidebar

2. Rust Style Variation:

FAQ Pattern's Separator is not showing properly:

rust-faq

3. Maelstrom Style Variation:

FAQ Pattern's Separator is not showing properly:

maelstrom-faq

These are hard to fix:

  • Rust doesn't have contrast 2, so the separator is not getting the correct color. The only fix I can think of for this is using CSS directly on the pattern to give it a fallback, but that will mess up with the color settings in the editor (the user will not see the color currently selected for the separator because it no longer will be a preset, but custom CSS)
  • The Ice situation is even trickier. The color is present, but it's not contrasting enough. @richtabor, if you could look at this? Can we change the color? It might be an a11y issue for some of the other patterns. Base 3 is a transparent color on the default variation. This makes it tricky because in this case, it needs to contrast against base, which is the background color. The naming convention for this color might be wrong in this case.

I've made a quick sweep, and base-3 is only used for separators. My proposal is to rename base-3 to something else and give it a different value for Ice, so it contrasts with the background, and do nothing about the issue with Rust.