From 59c85b3eebd15035f1026b88cf1c22112c2cfedc Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Thu, 25 Mar 2021 12:57:16 -0700
Subject: [PATCH 1/2] correct outline color for number field to ensure
 alignment w/ other inputs

---
 .../src/number-field/number-field.styles.ts      | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/web-components/src/number-field/number-field.styles.ts b/packages/web-components/src/number-field/number-field.styles.ts
index bde8054c039fa7..0fb53047e0e4e8 100644
--- a/packages/web-components/src/number-field/number-field.styles.ts
+++ b/packages/web-components/src/number-field/number-field.styles.ts
@@ -2,9 +2,6 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
-  accentFillActiveBehavior,
-  accentFillHoverBehavior,
-  accentFillRestBehavior,
   heightNumber,
   neutralFillHoverBehavior,
   neutralFillInputHoverBehavior,
@@ -12,6 +9,8 @@ import {
   neutralFillRestBehavior,
   neutralFocusBehavior,
   neutralForegroundRestBehavior,
+  neutralOutlineActiveBehavior,
+  neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,
 } from '../styles/index';
 import { appearanceBehavior } from '../utilities/behaviors';
@@ -60,7 +59,7 @@ export const NumberFieldStyles = css`
         color: ${neutralForegroundRestBehavior.var};
         background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
-        border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
+        border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
         height: calc(${heightNumber} * 1px);
     }
 
@@ -152,12 +151,12 @@ export const NumberFieldStyles = css`
 
     :host(:hover:not([disabled])) .root {
         background: ${neutralFillInputHoverBehavior.var};
-        border-color: ${accentFillHoverBehavior.var};
+        border-color: ${neutralOutlineHoverBehavior.var};
     }
 
     :host(:active:not([disabled])) .root {
         background: ${neutralFillInputHoverBehavior.var};
-        border-color: ${accentFillActiveBehavior.var};
+        border-color: ${neutralOutlineActiveBehavior.var};
     }
 
     :host(:focus-within:not([disabled])) .root {
@@ -186,15 +185,14 @@ export const NumberFieldStyles = css`
     }
 `.withBehaviors(
   appearanceBehavior('filled', NumberFieldFilledStyles),
-  accentFillActiveBehavior,
-  accentFillHoverBehavior,
-  accentFillRestBehavior,
   neutralFillHoverBehavior,
   neutralFillInputHoverBehavior,
   neutralFillInputRestBehavior,
   neutralFillRestBehavior,
   neutralFocusBehavior,
   neutralForegroundRestBehavior,
+  neutralOutlineActiveBehavior,
+  neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,
   forcedColorsStylesheetBehavior(
     css`

From 83ef7bdc6bdac216d52ddf8540ea27c075c62a65 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Thu, 25 Mar 2021 15:52:30 -0700
Subject: [PATCH 2/2] Change files

---
 ...eb-components-4d049dd9-298f-4ff2-a526-906f0d233cb2.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-4d049dd9-298f-4ff2-a526-906f0d233cb2.json

diff --git a/change/@fluentui-web-components-4d049dd9-298f-4ff2-a526-906f0d233cb2.json b/change/@fluentui-web-components-4d049dd9-298f-4ff2-a526-906f0d233cb2.json
new file mode 100644
index 00000000000000..c6f5c0c0387762
--- /dev/null
+++ b/change/@fluentui-web-components-4d049dd9-298f-4ff2-a526-906f0d233cb2.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "correct outline color for number field to ensure alignment w/ other inputs",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}