From e440657a1db8d63400f972b6492896aa985febd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Collonval?=
 <frederic.collonval@webscit.com>
Date: Tue, 30 Jul 2024 09:04:50 +0200
Subject: [PATCH] Scale number field step glyph (#122)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>
---
 .../src/number-field/number-field.styles.ts   | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/number-field/number-field.styles.ts b/packages/components/src/number-field/number-field.styles.ts
index a3a84dfd..3ecde730 100644
--- a/packages/components/src/number-field/number-field.styles.ts
+++ b/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,12 +29,16 @@ 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;
   }
 
@@ -35,7 +46,18 @@ export const numberFieldStyles: FoundationElementTemplate<
   .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 {