correct outline color for number field to ensure alignment w/ other i…

…nputs
microsoft · Mar 25, 2021 · 59c85b3 · 59c85b3
1 parent 0f3e58b
commit 59c85b3
Showing 1 changed file with 7 additions and 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
@@ -2,16 +2,15 @@ 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,
   neutralFillInputRestBehavior,
   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`