Repository navigation
Fix Connectors and Fonts pages background and color contrast #82826
Description
Description
With the latest updates to the packages into Core, the Appearance > Fonts page and the Settings > Connectors page have now a different background color.
Connectors page background is now --wpds-color-background-surface-neutral which is a light gray #fcfcfc. Previously, it was white.
Fonts page backgrouns is #fcfcfc but the inner container .font-library-page__content does have a background color set to --wpds-color-background-surface-neutral-strong) which is white.
As such, the actual background color of the two pages is different. It should be consistent.
More importantly, this change mede the fix for the color contrast of the Help paragraoh in the Connectors page useless. #82329 / #82378 changed that text color to $gray-700 > #757575 and that was OK with a white background. But now that the backgrouns is a light gray, the contrast is not sufficient.
I'd like to propose:
- Make the backtround of the two pages consistent (
#fcfcfc). - Remove any usage of the color
#757575and use#707070instead, In the design system,--wpds-color-foreground-content-neutral-weak: #707070is specifically documented asForeground color for content like text with weak emphasis.so that it appears the most appropriate color to use for text that needs to be less prominent but still provide a sufficient contrast ratio.
Important:
Note that this issue is a blocker for Core-66015 / WordPress/wordpress-develop#13348 and should be fixed and ported to WordPress soon, please.
Step-by-step reproduction instructions
- Go to the Connectors page.
- Observe the paragraph at the bottom of the page, the one that starts with text
If the connector you need is not listed... - Observe the text color of the paragraph is
#757575which, against the#fcfcfcbackground, provides an insufficient contrast ratio of 4.49:1.
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure
Activity