NavigationTabButton: Use extended border for active focus

Devin Linrequested to merge
work/devinlin/navigationtabbarselected into master

In !1522 (merged), the border was changed to only show for active focus.

This MR brings it back for the checked state for contrast for consistency with the Plasma style. In order to show active focus, a border outline is introduced separately. This idea was taken from the Breeze blue ocean mockups: https://www.figma.com/file/gjuIy1rxU9xHkaJXM0pasK/ocean-v3?node-id=0%3A1

image

Regular state:

image

State with keyboard navigation (Press Tab)

image

State with keyboard navigation with active item being not the selected one (Press Tab)

image

This MR also directly uses highlightColor for the border rather than relying on changing it with opacity.

Merge request reports