Update style book headings to new design #67546
Conversation
tellthemachines
added
[Type] Enhancement
|
Flaky tests detected in f97dfc8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12156958045
|
|
Thanks for this! I pushed some color changes so that now the headings match the mockups, while meeting contrast:
Doesn't have to be this PR, but can you help me follow up with a few changes to color swatches and the heading example? These two in the mockup:
The color swatches should be shown in 4 columns, and we need a spacer or taller margin between the H1 heading and the two paragraphs in columns, so the spacing gets closer to the mockup. It can be a fixed value if need be. For the moment, they're just next to each other: |
|
To clarify: on the Style landing page, the colors should be shown in 4 columns:
On the Colors section, they are two columns, and larger:
|
There was a problem hiding this comment.
On my testing, the headings of the stylebook sections looked like the mockups, and the colors seemed to be clearly visible with both light and dark background colors. I think this PR is good to go.
Screencast.from.2024-12-04.14-23-00.mp4
on the Style landing page, the colors should be shown in 4 columns:
We can work on that in another PR because this one seems targeted to headings. I'll submit a PR for that here: #67597
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| @@ -216,27 +216,25 @@ export const STYLE_BOOK_IFRAME_STYLES = ` | |||
| } | |||
| .edit-site-style-book__duotone-example > div:not(:first-child) { | |||
| height: 20px; | |||
| border: 1px solid #ddd; | |||
| border: 1px solid color-mix( in srgb, currentColor 10%, transparent ); | |||
There was a problem hiding this comment.
Oooh I didn't know we were already using color-mix! That does make things easier.
Co-authored-by: tellthemachines <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: matiasbenedetto <[email protected]>
What?
Part of #53431.
Updates the styles of stylebook headings to match designs on that issue.
Testing Instructions
The one thing in the design that I'm not sure how to best implement is the color difference between headings and actual theme text color:
Hardcoding a color in here won't work because the style book uses whatever background color is defined by the theme (and text color as well). The design seems to use always the same color, but what happens if the theme background color happens to be that exact color, or one very close to it?
We should also ensure that these headings have accessible levels of contrast, which some of the variations in the design don't seem to have.
Before I jump into making complicated JS calculations around text/background color in order to dynamically find the appropriate heading color, I just want to make sure we're all on the same page about this 😅 so:
Current headings match theme text color, and I haven't changed that yet in this PR: