Scale number field step glyph (#122)

Co-authored-by: Frédéric Collonval <[email protected]>

Author: fcollonval

packages/components/src/number-field/number-field.styles.ts

@@ -7,7 +7,14 @@ import {
   FoundationElementTemplate,
   NumberFieldOptions
 } from '@microsoft/fast-foundation';
-import { neutralForegroundRest } from '../design-tokens.js';
+import {
+  density,
+  designUnit,
+  elementScale,
+  neutralFillActive,
+  neutralFillHover,
+  neutralForegroundRest
+} from '../design-tokens.js';
 import { BaseFieldStyles } from '../styles/index.js';
 
 /**
@@ -22,20 +29,35 @@ export const numberFieldStyles: FoundationElementTemplate<
 
   .controls {
     opacity: 0;
+    margin: auto 0;
   }
 
   .step-up-glyph,
   .step-down-glyph {
     display: block;
-    padding: 4px 10px;
+    padding: calc(
+        (${designUnit} + 0.5 * ${density} + 0.5 * ${elementScale}) * 1px
+      )
+      calc((2 + 2 * ${designUnit} + ${density} + ${elementScale}) * 1px);
     cursor: pointer;
   }
 
   .step-up-glyph:before,
   .step-down-glyph:before {
     content: '';
     display: block;
-    border: solid transparent 6px;
+    border: solid transparent
+      calc((2 + ${designUnit} + 0.5 * ${density} + 0.5 * ${elementScale}) * 1px);
+  }
+
+  .step-up-glyph:hover:before,
+  .step-down-glyph:hover:before {
+    background-color: ${neutralFillHover};
+  }
+
+  .step-up-glyph:active:before,
+  .step-down-glyph:active:before {
+    background-color: ${neutralFillActive};
   }
 
   .step-up-glyph:before {