fix: focus styling inconsistencies (#16265)

* fix: focus styling inconsistencies

* Change files

* bump package

change/@fluentui-web-components-2020-12-17-10-45-34-userrs-jes-focus-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix: focus styling inconsistencies",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-12-17T18:45:34.045Z"
+}

packages/web-components/package.json

@@ -95,7 +95,7 @@
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-components-styles-msft": "^4.29.0",
     "@microsoft/fast-element": "^0.21.1",
-    "@microsoft/fast-foundation": "^1.11.0",
+    "@microsoft/fast-foundation": "^1.11.1",
     "tslib": "^1.13.0"
   },
   "beachball": {

packages/web-components/src/styles/patterns/button.ts

@@ -423,8 +423,8 @@ export const OutlineButtonStyles = css`
     }
 
     :host(.outline) .control:${focusVisible} {
-        border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var});
         box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${neutralFocusBehavior.var};
+        border-color: ${neutralFocusBehavior.var};
     }
 
     :host(.outline.disabled) {

yarn.lock

@@ -2419,10 +2419,10 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.21.1.tgz#366fb006608819edf8053e0fbdb31618957b86a4"
   integrity sha512-DZVu9KGtwP+vg9z6fAHpiPntPPFNj4ex6qBSsRLP5RP8akqD54OiUokRTJ9/JodIF7R9w34XLG3EJRD75LQwDQ==
 
-"@microsoft/fast-foundation@^1.11.0":
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.11.0.tgz#c609fea459bebf41d49e715649c33334fe04af1b"
-  integrity sha512-ZbRrHKuN4xfnoxFHb8bmWPQHzOxC39KucL4CQ0hE8GRfNI38QbIAUNhVwgohsQWaKgiWv9soQr8kf94jdmaQow==
+"@microsoft/fast-foundation@^1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.11.1.tgz#d3e04c55be7a51b7cf38ef2acfe6eb3cbb0aec27"
+  integrity sha512-tRgx6MbfbyArzRhBwkki+MjB98tSbTRjgZ+pq3HiPtRE8leoi0kkNqcj+9+xuPSvzxU+u8eG2ySuOtTzk7VskA==
   dependencies:
     "@microsoft/fast-element" "^0.21.1"
     "@microsoft/fast-web-utilities" "^4.7.0"