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] 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 bde8054c039fa..0fb53047e0e4e 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`