twentytwentythree icon indicating copy to clipboard operation
twentytwentythree copied to clipboard

Button states: outline button should have dark background on hover

Open madhusudhand opened this issue 3 years ago • 8 comments

Following button states should match with figma.

Current:

Hover: (outline button background) image

Focus: (dashed outline for both buttons) image

Expected: image

madhusudhand avatar Aug 23 '22 04:08 madhusudhand

There is no way to target the outline style variation using theme.json.

carolinan avatar Aug 23 '22 05:08 carolinan

There is no way to target the outline style variation using theme.json.

Yeah... we'd need to use CSS. I may create a label for these kinds of issues, so we can decide on how much CSS we want to add (if any).

Is there a Gutenberg issue for styling outline buttons via theme.json? Maybe this one? https://github.com/WordPress/gutenberg/issues/42794

mikachan avatar Aug 23 '22 09:08 mikachan

I made a PR for this: https://github.com/WordPress/gutenberg/pull/43526

MaggieCabrera avatar Aug 23 '22 14:08 MaggieCabrera

Thanks @MaggieCabrera! It's actually the outline button variation we need to style with the above, but allowing CSS outlines to be controlled via theme.json is a great addition for style variation submissions.

mikachan avatar Aug 23 '22 17:08 mikachan

Thanks @MaggieCabrera! It's actually the outline button variation we need to style with the above, but allowing CSS outlines to be controlled via theme.json is a great addition for style variation submissions.

ugh, goes to show what happens when you read GH issues too early in the morning! I still think my PR is a good one to have. The outline variations one is a much harder one and I don't think we can make that one on time given the work that needs to be done to block styles variations, sadly

MaggieCabrera avatar Aug 24 '22 07:08 MaggieCabrera

Once there is a UI for borders for buttons, I think the outline style should be removed from core, because the settings will make the block more flexible.

carolinan avatar Aug 24 '22 07:08 carolinan

Once there is a UI for borders for buttons, I think the outline style should be removed form core, because the settings will make the block more flexible.

That will work for this specific variation but not for others (think of maybe the dotted separator?) so there's value on being able to control these via theme.json. I'm also keen on having the ability to select a variation as default that is not the current default one.

MaggieCabrera avatar Aug 24 '22 07:08 MaggieCabrera

Yeah, selecting a different default used to be possible with the ui, but it was removed.

carolinan avatar Aug 24 '22 07:08 carolinan

Closing this, as unfortunately, it's not currently possible to style outline buttons using theme.json.

mikachan avatar Sep 30 '22 12:09 mikachan