Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set default text/link colors for background color #49830

Open
tkapler opened this issue Apr 14, 2023 · 5 comments
Open

Set default text/link colors for background color #49830

tkapler opened this issue Apr 14, 2023 · 5 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. Needs Technical Feedback Needs testing from a developer perspective. [Type] Enhancement A suggestion for improvement.

Comments

@tkapler
Copy link

tkapler commented Apr 14, 2023

What problem does this address?

it would be great if I could optionally assign in theme.json the default color used for text or link, which would be automatically set if the user sets that default color as background.
Today, for example, if I have a light theme and I want to make an invert block, not only do I have to select a dark background color, but I also have to select a light color for text and links. And when a theme has a larger color palette, sometimes it's not easy for the average user to know which color matches (or is downright prescribed) for a given background color. It then forces developers to make lots of preset blocks. The ability to set default complementary colors would solve this

What is your proposed solution?

theme.json color section could be something like

"palette": [
{
"color": "#000",
"name": "Contrast",
"slug": "contrast",
"defaultTextColor": "#fff",
"defaultLinkColor": "#acc8eaff",
}
]

And when you select contract color as a background and you have not selected color for text or link, they will be automaticaly predefined with the default colors.

@Thelmachido Thelmachido added [Type] Enhancement A suggestion for improvement. [a11y] Color Contrast Needs Technical Feedback Needs testing from a developer perspective. labels Apr 14, 2023
@ramonjd ramonjd added Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. labels May 10, 2023
@ramonjd
Copy link
Member

ramonjd commented May 10, 2023

Patterns and reusable blocks might help in a lot of situations - where the colors are already set in a pattern. Also, it's possible to define all these colors at the block level in theme.json.

I can imagine it would allow for more consistency to be able to set default text colors when selecting a background color.

There would be some UI challenges I think in relation to adding custom palette colors and applying them via the color panels, e.g., how to represent each variation to the user in the picker.

I could picture something like this in the palettes UI to represent the text/link color on top of the background color.

Screenshot 2023-05-10 at 2 51 03 pm

I understand it should be constrained to the case where someone is selecting a background color only?

We'd probably need to distinguish between single and multiple color palettes as I'd expect there'd still be cases where a user would want to set a single color for text or background or whatever.

cc @jasmussen

@ramonjd
Copy link
Member

ramonjd commented May 10, 2023

Also wanted to mention that styles can be applied globally across blocks in the site editor:

Screenshot 2023-05-10 at 3 20 11 pm

@jasmussen
Copy link
Contributor

CC: @WordPress/gutenberg-design

@paaljoachim
Copy link
Contributor

paaljoachim commented May 10, 2023

Free flowing thoughts.

I am right now experimenting with Styles.
First of all I notice when clicking different styles that these change a lot of things. I am not in control of what adjustments are added. I am just able to view it in the canvas/document area. The tricky part here is that let's say that I just like the background violet color of one of the styles (first style after default). Clicking the specific style changes so many things. It would actually be nice to drill down into each style and see the changes each style brings with it. Having a way to turn on or off different settings for any style and only add the setting/adjustment that I choose to add. This way I can click the various styles having various color adjustments that I like and turn off what I do not want to adjust and for instance only keep a background color.

Drilling down into each specific style it would also be nice to adjust the various settings/adjustments added for each style. By doing so I could based on an existing style save it with a new name as a custom style that I have modified to fit even better with the site.

@richtabor
Copy link
Member

Related to #48581 and https://richtabor.com/colorways/

@skorasaurus skorasaurus added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). and removed [a11y] Color Contrast labels Jul 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. Needs Technical Feedback Needs testing from a developer perspective. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

7 participants