focusStrokeWidth not applied on text-field and number-field

Fixes microsoft#5565
fcollonval · Feb 7, 2022 · 64645f6 · 64645f6
1 parent 3337629
commit 64645f6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
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
@@ -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
@@ -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 {