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

@@ -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;

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)));

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;

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;