From 4d075c9a6eb0d6340fc21c9cd2e02d78160c97b1 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Thu, 19 Feb 2026 08:30:59 +0200
Subject: [PATCH 1/3] fix(number-field): fix variables #516

---
 .../number-field/number-field.module.scss     | 44 ++++++-------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/src/tedi/components/form/number-field/number-field.module.scss b/src/tedi/components/form/number-field/number-field.module.scss
index dea9571e..06bd7a28 100644
--- a/src/tedi/components/form/number-field/number-field.module.scss
+++ b/src/tedi/components/form/number-field/number-field.module.scss
@@ -1,11 +1,5 @@
 @use '@tedi-design-system/core/bootstrap-utility/breakpoints';
 
-$input-height: 2.5rem;
-$small-input-height: 2rem;
-$input-height-mobile: 2.75rem;
-$border-radius: 0.25rem;
-$border-width: 1px;
-
 .tedi-number-field {
   display: flex;
 
@@ -17,30 +11,28 @@ $border-width: 1px;
   }
 
   .tedi-number-field__button {
-    width: $input-height;
-    border: $border-width solid var(--form-input-border-default);
+    width: var(--form-field-height);
+    border: 1px solid var(--form-input-border-default);
 
     &__disabled,
     &:disabled {
       background-color: var(--form-input-background-disabled);
-      border: $border-width solid var(--form-input-border-disabled);
+      border: 1px solid var(--form-input-border-disabled);
       opacity: 0.5;
     }
 
     &--decrement {
-      margin-right: -$border-width;
-      border-radius: $border-radius 0 0 $border-radius;
+      margin-right: -1px;
+      border-radius: var(--button-radius-sm) 0 0 var(--button-radius-sm);
     }
 
     &--increment {
-      margin-left: -$border-width;
-      border-radius: 0 $border-radius $border-radius 0;
+      margin-left: -1px;
+      border-radius: 0 var(--button-radius-sm) var(--button-radius-sm) 0;
     }
 
     @include breakpoints.media-breakpoint-down(md) {
       flex: none;
-      width: $input-height-mobile;
-      height: $input-height-mobile;
     }
   }
 
@@ -64,10 +56,6 @@ $border-width: 1px;
         outline: none;
       }
     }
-
-    @include breakpoints.media-breakpoint-down(md) {
-      height: $input-height-mobile;
-    }
   }
 
   &--disabled {
@@ -91,11 +79,7 @@ $border-width: 1px;
   &--small {
     .tedi-number-field__input-wrapper,
     .tedi-number-field__button {
-      height: $small-input-height;
-
-      @include breakpoints.media-breakpoint-down(md) {
-        height: $input-height-mobile;
-      }
+      height: var(--form-field-height-sm);
     }
 
     @include breakpoints.media-breakpoint-down(md) {
@@ -110,18 +94,18 @@ $border-width: 1px;
   gap: var(--form-field-inner-spacing-sm);
   align-items: stretch;
   width: 5rem;
-  height: $input-height;
+  height: var(--form-field-height);
   padding-right: var(--form-field-padding-y-3-default);
   padding-left: var(--form-field-padding-y-3-default);
   background-color: var(--form-input-background-default);
-  border: $border-width solid var(--form-input-border-default);
+  border: 1px solid var(--form-input-border-default);
 
   &:focus-within {
     z-index: 1;
     border-color: var(--form-input-border-active);
-    border-radius: $border-radius;
-    outline: calc(2 * $border-width) solid var(--form-input-border-active);
-    outline-offset: -$border-width;
+    border-radius: var(--button-radius-sm);
+    outline: calc(2 * 1px) solid var(--form-input-border-active);
+    outline-offset: -1px;
   }
 
   &:active {
@@ -150,7 +134,6 @@ $border-width: 1px;
 
   @include breakpoints.media-breakpoint-down(md) {
     width: 100%;
-    height: $input-height-mobile;
   }
 }
 
@@ -159,6 +142,7 @@ $border-width: 1px;
   width: 100%;
   min-width: 2rem;
   font-size: var(--heading-h6-size);
+  color: var(--form-input-text-filled);
   text-align: center;
   background-color: var(--form-input-background-default);
   border: 0;

From b16f599011e4929d1c53c58d0da65f21f4124913 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Thu, 19 Feb 2026 13:51:55 +0200
Subject: [PATCH 2/3] fix(number-field): button variable fixes #516

---
 .../form/number-field/number-field.module.scss        | 11 +++++++++--
 .../components/form/number-field/number-field.tsx     |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/tedi/components/form/number-field/number-field.module.scss b/src/tedi/components/form/number-field/number-field.module.scss
index 06bd7a28..d839e1c1 100644
--- a/src/tedi/components/form/number-field/number-field.module.scss
+++ b/src/tedi/components/form/number-field/number-field.module.scss
@@ -11,7 +11,9 @@
   }
 
   .tedi-number-field__button {
-    width: var(--form-field-height);
+    width: var(--button-md-icon-size);
+    height: var(--button-md-icon-size);
+    min-height: var(--button-md-height);
     border: 1px solid var(--form-input-border-default);
 
     &__disabled,
@@ -79,7 +81,8 @@
   &--small {
     .tedi-number-field__input-wrapper,
     .tedi-number-field__button {
-      height: var(--form-field-height-sm);
+      height: var(--button-sm-height);
+      min-height: var(--form-field-height-sm);
     }
 
     @include breakpoints.media-breakpoint-down(md) {
@@ -132,6 +135,10 @@
     }
   }
 
+  &__feedback {
+    margin-top: var(--form-field-outer-spacing);
+  }
+
   @include breakpoints.media-breakpoint-down(md) {
     width: 100%;
   }
diff --git a/src/tedi/components/form/number-field/number-field.tsx b/src/tedi/components/form/number-field/number-field.tsx
index c9d79fd2..a9778b38 100644
--- a/src/tedi/components/form/number-field/number-field.tsx
+++ b/src/tedi/components/form/number-field/number-field.tsx
@@ -244,7 +244,7 @@ export const NumberField = (props: NumberFieldProps) => {
         {renderInputElement()}
         {renderButton('increment')}
       </div>
-      {helper && <FeedbackText {...helper} id={helperId} />}
+      {helper && <FeedbackText className={styles['tedi-number-field__feedback']} {...helper} id={helperId} />}
       {inputUpdated && (
         <div aria-live="polite" className="sr-only">
           {inputUpdated}

From 8320c0d7e3306151eb899f6e2a6a65b3bc151783 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Thu, 19 Feb 2026 16:49:36 +0200
Subject: [PATCH 3/3] fix(number-field): replace number field button border
 color with right variable #516

---
 src/tedi/components/form/number-field/number-field.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tedi/components/form/number-field/number-field.module.scss b/src/tedi/components/form/number-field/number-field.module.scss
index d839e1c1..2e5ebd7e 100644
--- a/src/tedi/components/form/number-field/number-field.module.scss
+++ b/src/tedi/components/form/number-field/number-field.module.scss
@@ -14,7 +14,7 @@
     width: var(--button-md-icon-size);
     height: var(--button-md-icon-size);
     min-height: var(--button-md-height);
-    border: 1px solid var(--form-input-border-default);
+    border: 1px solid var(--button-main-secondary-border-default);
 
     &__disabled,
     &:disabled {