[Banner] Secondary action `:focused` button state has a strange visual and transition presentation

[lgriffee]

Issue summary

Background Color

The :focued SecondaryAction button background color on a colored banner looks incorrect.

Transition

The underline transition also has a has strange border-radius and is not smooth.

screencast.2022-01-26.12-34-30.mp4

Expected behavior

• I would expect the button background on focus to be a darker version of the background color it is on, not grey.
• I would expect the button underline to have a smooth transition and not change shape during the transition.

Notes

• The background color and border radius transition seem due to the color and border radius set in @include plain-button-backdrop; on line 244 of Banner.scss
• Wonky transition seems due to transition: box-shadow var(--p-duration-200) var(--p-ease); on line 257 of Banner.scss
• During our pairing session @kyledurand and I were talking about possibly removing this transition altogether?

---

@sarahill @laurkim Mentioning y'all here since you're working on buttons right now.