Curator: update link and button styles

[mikachan]

Changes proposed in this Pull Request:

This PR updates the link and button styles to match the mocks in #5996.

Default:

Hover:

Click/focus:

Active:

Related issue(s):

Closes #5996

[jffng]

Thank you for picking this up @mikachan!

I noticed a few things:

1. When the button is linked and is clicked, both the hover and active visual states are present:

2. When I click on a linked outline button, the border is still black:

3. Gutenberg provides default CSS for the "visited" state that makes the text of buttons white:

This results in the text of the button not showing at all, since the background is also white. Is this a bug in Gutenberg, or should we address that somehow here?

[mikachan]

Thanks @jffng! 1 & 2 should now be fixed.

Is this a bug in Gutenberg, or should we address that somehow here?

I've seen this at least once before when working on themes, so I'm thinking it's something that should be addressed in Gutenberg, probably as part of addressing hover/focus/active state styles (here are some related issues: WordPress/gutenberg#28063, WordPress/gutenberg#27075).

I've added a fix in the theme for now.

[pbking]

I notice that a 'filled button' doesn't have the same padding as an outline button. Should it?

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"white","width":100,"style":{"color":{"text":"#1267ed"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-white-background-color has-text-color has-background wp-element-button" style="color:#1267ed">Text</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":50,"style":{"color":{"background":"#ffbb00","text":"#0c0c0c"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#0c0c0c;background-color:#ffbb00">Solid</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"black","width":50,"style":{"color":{"gradient":"linear-gradient(160deg,rgb(0,166,141) 0%,rgb(119,255,0) 98%)"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link has-black-color has-text-color has-background wp-element-button" style="background:linear-gradient(160deg,rgb(0,166,141) 0%,rgb(119,255,0) 98%)">Gradient</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

[mikachan]

I notice that a 'filled button' doesn't have the same padding as an outline button. Should it?

Thanks @pbking and @beafialho. The 'fill' button now has the same padding as the 'outline' button. Here's what it looks like in the different states:

Default:

Hover:

Click/focus:

Active:

With a custom background:

[pbking]

This now addresses the problem with a custom background color, however I'm not sure that the padding is appropriate when there isn't one. Would it be helpful to use that padding based on the button having a .has-background class or something?

[mikachan]

Would it be helpful to use that padding based on the button having a .has-background class or something?

Yep good idea, I've applied the padding to just the buttons with a background now. Does this look better?

[pbking]

👍 Looks good to me!
🚢