Terra-core: Add theming for Button to meet cerner-consumer-theme requirements

[samvaity]

Issue Description

Uplift button theming to meet cerner-consumer-theme requirements.

Issue Type

• [ ] New Feature
• [x] Enhancement
• [ ] Bug
• [ ] Other

[samvaity]

Button Themeing Tech Design

Summary:

Adds theming variable "font-size" and web driver IO tests to Button component.

Themeable Style

• Font Size

Responsiveness & Accessibility

None to consider for uplift.

[emilyrohrbough]

• Font-family will be inherited from the base component and should not be themed on this level.

• Instead of adding a border-width for each button variant, we should remove the border-color variable and combine the variables to be border.

• Active and Focus Box shadow is not needed. Already included: see neutral, emphasis, and action

• If we need to add box shadow styling for both the active and hover states, we will need to add it for all button variants.

[samvaity]

@emilyrohrbough

• Cerner consumer theme uses Roboto font family across all the button variants. By keeping this theme-able the font-family can remain consistent across a theme for a button variant. Also, we can have it to have a default inherit in terra-core ?

• Currently, we need border-width only for neutral. Should we still consider changing it to border for all variants?

• Removed Active and Focus Box shadow from tech design.

• I had talked with @bjankord on this. He mentioned adding only the variables needed as of now for the cerner-consumer-theme requirements.

[emilyrohrbough]

Cerner consumer theme uses Roboto font family across all the button variants.

Yes, the Roboto font type will be used as defined at the root level. Then button will inherit the style

The current styles for button implement are implemented via this mixing. To only add theme for the variants the need the styles, this need need refactored.

[dylanklohr]

@samvaity , I think that we will be wanting to merge all border styles into a single CSS custom property. Though #1199 is closed, it was still called out as an issue in my form-input PR (#1235) by @bjankord. :)

[jmsv6d]

There are issues with having a different border widths for focus/active states. With the current styling it will cause odd resizing/shifting to occur. We saw this in the button group. In order to accomplish the consumer styling, either the box-sizing property will need to be set to border-box or an inset box-shadow can give the same effect.

[emilyrohrbough]

Like @jmsv6d mentioned, the an inset box shadow is how we are currently obtaining a 'double' border switch when altering the different states.

[dylanklohr]

@jmsv6d or @emilyrohrbough , do you have an example of this "double border" effect that's already been implemented? I glanced quickly at button-group, but I could just be misunderstanding / missing it.

[bjankord]

In the consumer theme, this line and this line apply a double border via box-shadow.

[benbcai]

@dylan-sftwr You can also take a look at this comment and the update to use an inset box-shadow to get the effect of a focus ring for the mock theme in button-group.

[dm123455]

+1

[bjankord]

+1 on updated tech design.

[mjhenkes]

+1

[dylanklohr]

+1

[PaulSolDev]

JIRA created