feat(border): focus styles mechanism

[bmdalex]

feat(border): focus styles mechanism

BREAKING CHANGES MIGRATION STEPS

The following component variables have been removed from:

• Attachment:
  focusInnerBorderColor, focusOuterBorderColor

• Button:
  circularRadius, colorActive, borderColorActive, borderColorFocus, borderColorFocusIndicator, borderColorDisabled, borderWidth, primaryColorActive, primaryBorderColorActive, primaryBorderColorHover, primaryBorderColorFocus, primaryBorderColorFocusIndicator, primaryBorderWidth, primaryCircularBorderColorFocusIndicator , circularBorderColorActive, circularBorderColorFocusIndicator, borderRadiusFocused

• RadioGroupItem:
  focusInnerBorderColor, focusOuterBorderColor

These variables are deprecated and should not be used.

1. For the variables related to borders, Teams now have a unified way of displaying it that is consistent with the whole Teams theme => border styles should be unified, no custom border appearances.

2. For the other variables, they were either used in dead style objects or they do not match redline requirements => NO IMPACT

Description

This PR covers:

1. implementation of utility function that will be used for styling components on focus state (from keyboard): getBorderFocusStyles from getBorderFocusStyles.ts

2. integration of getBorderFocusStyles for border focus styles for following components:

• Button
• Attachment
• RadioGroupItem

Screenshots for Button:

Regular Theme

Dark Theme

High Contrast Theme

We will adopt this mechanism for all other components in separate PR.

3. simplifying component variables and writing styles for border by:

• moving generic border variables from component variables to siteVariables.ts
• leveraging getBorderFocusStyles and generic border styles from siteVariables.ts

4. fix for Button outline styles overlapping issue in Grid:

BEFORE

AFTER

[codecov]

Codecov Report

Merging #1269 into master will decrease coverage by 0.18%.
The diff coverage is 28.81%.

@@            Coverage Diff             @@
##           master    #1269      +/-   ##
==========================================
- Coverage   72.55%   72.36%   -0.19%     
==========================================
  Files         754      756       +2     
  Lines        5647     5678      +31     
  Branches     1677     1662      -15     
==========================================
+ Hits         4097     4109      +12     
- Misses       1544     1563      +19     
  Partials        6        6

Impacted Files	Coverage Δ
...teams/components/Attachment/attachmentVariables.ts	0% <ø> (ø)	⬆️
...s/components/RadioGroup/radioGroupItemVariables.ts	0% <ø> (ø)	⬆️
...s-high-contrast/components/Alert/alertVariables.ts	0% <ø> (ø)	⬆️
...rc/themes/teams/components/Alert/alertVariables.ts	0% <ø> (ø)	⬆️
...high-contrast/components/Button/buttonVariables.ts	0% <ø> (ø)	⬆️
...es/teams-dark/components/Button/buttonVariables.ts	0% <ø> (ø)	⬆️
...contrast/components/Attachment/attachmentStyles.ts	25% <ø> (+5%)	⬆️
.../themes/teams/components/Button/buttonVariables.ts	0% <0%> (ø)	⬆️
...eams/components/RadioGroup/radioGroupItemStyles.ts	18.18% <0%> (+1.51%)	⬆️
...src/themes/teams/components/Menu/menuItemStyles.ts	7.14% <0%> (ø)	⬆️
... and 12 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 08d2f82...f78512f. Read the comment docs.

[bcalvery]

The focus border as originally implemented appears around the item, but in this PR it looks like it is within the item. Has the design changed to be more easily implemented?

Before:

After:

This is pretty subtle in normal themes, but in contrast the "focus border" was much thicker and would look distinctly different if drawn "inside" the button.

[bmdalex]

@bcalvery these changes are all part of the new design indeed

[bmdalex]

I had to squash my commits into one in order to be able to merge more easily the big amount of changes that got to master recently via #1069