[Button-fluid] Adding 3:1 border between touching buttons

[shixiedesign]

Summary

Suggestion is to consider adding gray-20, 1 px, solid border between fluid primary and secondary buttons.

This feature will add a 3:1 distinction between the two UI elements. It's a recommended feature to improve accessibility in data vis (advised by Michael Gower), although there are no clear requirements for UI to do the same, the logic applies as the two buttons should appear to users as distinct, and both interactive.

Exploration

[aagonzales]

We need @mjabbink and @jeanservaas input on this one.

[mjabbink]

Can we see this in context of a layout/usecase? In theory I have not issue with this but need to see more context.

[jeanservaas]

I like this and I want to do it in our next release, and I want to add it to button guidance now because we're getting tons of questions about this. This update not only adds clarity and contrast accessibility but in the dark themes, it will prevent the primary and secondary colors from vibrating.

But @shixiedesign I have one question, why not just use the subtle border token rather than going cool gray?

[mjabbink]

Agree on both. I don’t think the need is there for cool grey. Unless of course we switched all Grey to Cool Grey.

[aagonzales]

Status: ready for development.

Dev tasks:

• add border to buttons in modal
• add border to button groups in button component

Design tasks:

• update modal images on website
• update in modal kit symbols

[laurenmrice]

Closing because this has been added 👍🏻

[fabpico]

The official docs says this update is not yet made. Maybe someone can update the docs?

Although we haven’t made this update yet, we plan to add a 1px border between all fluid buttons that calls the $ui-03 token for subtle borders.