From 78211ca79d33f316815a660be4ff91089fef40d3 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <83575+bartaz@users.noreply.github.com>
Date: Wed, 23 Oct 2024 17:18:38 +0200
Subject: [PATCH] Fix input padding alignment (#5389)

* Fix input padding alignment

* Let search box inherit input colors

* Move input spacing variables to spacing settings
---
 scss/_base_forms.scss            | 1 +
 scss/_patterns_search-box.scss   | 5 -----
 scss/_settings_placeholders.scss | 1 -
 scss/_settings_spacing.scss      | 5 ++++-
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
index a0703be03..63d37e36d 100644
--- a/scss/_base_forms.scss
+++ b/scss/_base_forms.scss
@@ -25,6 +25,7 @@
     border: 0 solid transparent;
     border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
     border-radius: 0;
+    border-top: $input-border-thickness solid transparent;
     color: $colors--theme--text-default;
     font-family: unquote($font-base-family);
     font-size: 1rem;
diff --git a/scss/_patterns_search-box.scss b/scss/_patterns_search-box.scss
index 5dac0668d..eb6874845 100644
--- a/scss/_patterns_search-box.scss
+++ b/scss/_patterns_search-box.scss
@@ -34,12 +34,7 @@
       @extend %transparent-button;
     }
 
-    // Theme set on body element
     .p-search-box__input {
-      background-color: $colors--theme--background-inputs;
-      border-color: $colors--theme--border-high-contrast;
-
-      color: $colors--theme--text-default;
       flex: 1 1 100%;
       margin-bottom: 0;
       padding-right: calc(2 * (2 * $spv-nudge + map-get($line-heights, default-text)));
diff --git a/scss/_settings_placeholders.scss b/scss/_settings_placeholders.scss
index 32ab19f63..1453fecff 100644
--- a/scss/_settings_placeholders.scss
+++ b/scss/_settings_placeholders.scss
@@ -3,7 +3,6 @@
 @import 'settings_colors';
 
 // Global placeholder settings
-$input-border-thickness: 1.5px;
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $colors--theme--border-default !default;
diff --git a/scss/_settings_spacing.scss b/scss/_settings_spacing.scss
index e09f333c6..7565af49f 100644
--- a/scss/_settings_spacing.scss
+++ b/scss/_settings_spacing.scss
@@ -117,8 +117,11 @@ $sp-after: (
 // commonly occuring calculations available as variables
 $spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
+
+// form input spacing variables
 $input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
-$input-vertical-padding: calc($spv-nudge - 1px);
+$input-border-thickness: 1.5px;
+$input-vertical-padding: calc($spv-nudge - $input-border-thickness);
 
 // tick element variables
 $form-tick-box-size: 1rem;