Styles: Update the button block styles

[ryelle]

Fixes #96 — Update the active, hover, and focus states for "on dark" buttons. This ensures the buttons have visible interactive states.

Screenshots

How to test the changes in this Pull Request:

1. Try adding some buttons
2. The various button states should match the design

[jasmussen]

Can move forward, though in general to all of wp.org, we should unify on a single focus style. I think @fcoveram may have designed some focus styles here? Alternatively I'd be happy to reuse the Gutenberg focus styles.

[ryelle]

Can move forward, though in general to all of wp.org, we should unify on a single focus style. I think @fcoveram may have designed some focus styles here? Alternatively I'd be happy to reuse the Gutenberg focus styles.

I grabbed this directly from the design library (see #96), so I assumed this was the designed focus style. We did have a separate solid outline focus on the search field and button, we could use something like this but it might look odd on the outline-style buttons

[fcoveram]

That dash border in Button / Big Desktop and Button / Big Mobile come from previous designs, likely when News was redesigned.

I prefer the new solid outline style, and for the border variants in the Design Library, I can propose a new style.

[jasmussen]

Thanks both! I personally lean towards the newer style, but I suppose no reason to block this PR then, we can follow up separately. Ideally we have a single unified style across all, when it comes to focus.

[fcoveram]

I updated all Button components with the new focus style

[ryelle]

Here's a version with the latest designs in figma. I also left these comments there, feel free to reply in either location.

• Fill on dark (A): Focus state is the blueberry border, but blueberry doesn't have a passing contrast against dark backgrounds, so could this be blueberry-2 instead? This is less of a problem on the Outline on dark (D) button, because the white inner border changes the look enough, but ideally both "on dark" versions would use blueberry-2.
• Outline (C): Focus state is just a slightly thicker border, it's not different enough from the default state. Could this reuse the Fill (B) focus state?
• Outline on dark (D): This active state is invisible on dark backgrounds, so I've left it as the white filled version.

Default

Focus

Hover

Active

[jasmussen]

Looks good, and non-blocking but can the focus style on "outline on dark" just be a thicker white border, just like it's a thicker blue order on the light background? In general feel free to go pure white with the focus style on the dark background if you need to, the default blueberry doesn't always meet contrast.

[ryelle]

Thanks for the replies on figma, @fcoveram! I've updated the styles again to match, with one tweak— I flipped the outlines on the "on dark" buttons, so that the white is on the outside, which adds slightly better contrast. I can undo that, but I think it matches the on-light buttons better too.

[ryelle]

I'm going to merge this — if there's more design feedback once it's on production we can iterate from there 👍🏻

[jasmussen]

Looks good, fine to ship.

A small nuance that I failed to clarify, and something that isn't urgent to fix, this is mostly visible in the "outline on dark" where we have two colors and should only have one.

Essentially, for outline buttons, the outline simply becomes thicker on focus. It doesn't change color. Here are two sheets from how the Gutenberg components work (and these wp.org components can/should be similar). Light backgrounds:

Dark backgrounds:

Notice especially the focus style of the outline buttons.