From ec5ceaefe295bf410b7e3db34867ac600f4a0d0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Collonval?=
 <fcollonval@users.noreply.github.com>
Date: Mon, 7 Feb 2022 22:14:27 +0100
Subject: [PATCH] `focusStrokeWidth` not applied on text-field and number-field
 (#5566)

* `focusStrokeWidth` not applied on text-field and number-field
Fixes #5565

* Change files
---
 ...st-components-81388374-b10c-4574-94fc-b77db302786a.json | 7 +++++++
 .../src/number-field/number-field.styles.ts                | 3 ++-
 .../fast-components/src/text-field/text-field.styles.ts    | 4 ++--
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 change/@microsoft-fast-components-81388374-b10c-4574-94fc-b77db302786a.json

diff --git a/change/@microsoft-fast-components-81388374-b10c-4574-94fc-b77db302786a.json b/change/@microsoft-fast-components-81388374-b10c-4574-94fc-b77db302786a.json
new file mode 100644
index 00000000000..21ac258dcb5
--- /dev/null
+++ b/change/@microsoft-fast-components-81388374-b10c-4574-94fc-b77db302786a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "`focusStrokeWidth` not applied on text-field and number-field Fixes #5565",
+  "packageName": "@microsoft/fast-components",
+  "email": "fcollonval@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-components/src/number-field/number-field.styles.ts b/packages/web-components/fast-components/src/number-field/number-field.styles.ts
index 2405fed0a05..45d0474c909 100644
--- a/packages/web-components/fast-components/src/number-field/number-field.styles.ts
+++ b/packages/web-components/fast-components/src/number-field/number-field.styles.ts
@@ -17,6 +17,7 @@ import {
     designUnit,
     disabledOpacity,
     focusStrokeOuter,
+    focusStrokeWidth,
     neutralFillHover,
     neutralFillInputHover,
     neutralFillInputRest,
@@ -151,7 +152,7 @@ export const numberFieldStyles: FoundationElementTemplate<
 
     :host(:focus-within:not([disabled])) .root {
         border-color: ${focusStrokeOuter};
-        box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
+        box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;
     }
 
     :host(:hover:not([disabled])) .controls,
diff --git a/packages/web-components/fast-components/src/text-field/text-field.styles.ts b/packages/web-components/fast-components/src/text-field/text-field.styles.ts
index d1d1213c264..2db812eb9ea 100644
--- a/packages/web-components/fast-components/src/text-field/text-field.styles.ts
+++ b/packages/web-components/fast-components/src/text-field/text-field.styles.ts
@@ -2,7 +2,6 @@ import { css, ElementStyles } from "@microsoft/fast-element";
 import {
     disabledCursor,
     display,
-    ElementDefinitionContext,
     focusVisible,
     forcedColorsStylesheetBehavior,
     FoundationElementTemplate,
@@ -18,6 +17,7 @@ import {
     designUnit,
     disabledOpacity,
     focusStrokeOuter,
+    focusStrokeWidth,
     neutralFillHover,
     neutralFillInputHover,
     neutralFillInputRest,
@@ -127,7 +127,7 @@ export const textFieldStyles: FoundationElementTemplate<
 
     :host(:focus-within:not([disabled])) .root {
         border-color: ${focusStrokeOuter};
-        box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
+        box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;
     }
 
     :host([appearance="filled"]) .root {