From f0b909d3007f2d487d2bb1c3580ba990a32398ae Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Thu, 30 Jul 2026 19:50:19 +0200
Subject: [PATCH] Fix `sm` and `lg` height consistency for form controls and
 buttons (#2648)

Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
---
 .../fix-input-button-size-consistency.md      |   5 +
 core/scss/_variables.scss                     | 241 ++++++++++--------
 core/scss/bootstrap/forms/_form-control.scss  |   9 +-
 core/scss/bootstrap/forms/_input-group.scss   |  56 ++--
 core/scss/ui/_buttons.scss                    |  24 +-
 5 files changed, 195 insertions(+), 140 deletions(-)
 create mode 100644 .changeset/fix-input-button-size-consistency.md

diff --git a/.changeset/fix-input-button-size-consistency.md b/.changeset/fix-input-button-size-consistency.md
new file mode 100644
index 000000000..027728cc8
--- /dev/null
+++ b/.changeset/fix-input-button-size-consistency.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `sm` and `lg` size consistency for form controls, buttons, and input groups by aligning `line-height` and computed height variables to resolve [#2456](https://github.com/tabler/tabler/issues/2456).
\ No newline at end of file
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index 6ff88c3da..3fa7ed254 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -68,7 +68,7 @@ $grays: (
   '700': $gray-700,
   '800': $gray-800,
   '900': $gray-900,
-) !default;
+  ) !default;
 
 $blue: #066fd1 !default;
 $azure: #4299e1 !default;
@@ -100,7 +100,7 @@ $colors: (
   'white': $white,
   'gray': $gray-600,
   'gray-dark': $gray-800,
-) !default;
+  ) !default;
 
 // $min-contrast-ratio, $color-contrast-dark and $color-contrast-light moved to `_settings.scss`
 
@@ -214,7 +214,7 @@ $blues: (
   'blue-700': $blue-700,
   'blue-800': $blue-800,
   'blue-900': $blue-900,
-) !default;
+  ) !default;
 
 $indigos: (
   'indigo-100': $indigo-100,
@@ -226,7 +226,7 @@ $indigos: (
   'indigo-700': $indigo-700,
   'indigo-800': $indigo-800,
   'indigo-900': $indigo-900,
-) !default;
+  ) !default;
 
 $purples: (
   'purple-100': $purple-100,
@@ -238,7 +238,7 @@ $purples: (
   'purple-700': $purple-700,
   'purple-800': $purple-800,
   'purple-900': $purple-900,
-) !default;
+  ) !default;
 
 $pinks: (
   'pink-100': $pink-100,
@@ -250,7 +250,7 @@ $pinks: (
   'pink-700': $pink-700,
   'pink-800': $pink-800,
   'pink-900': $pink-900,
-) !default;
+  ) !default;
 
 $reds: (
   'red-100': $red-100,
@@ -262,7 +262,7 @@ $reds: (
   'red-700': $red-700,
   'red-800': $red-800,
   'red-900': $red-900,
-) !default;
+  ) !default;
 
 $oranges: (
   'orange-100': $orange-100,
@@ -274,7 +274,7 @@ $oranges: (
   'orange-700': $orange-700,
   'orange-800': $orange-800,
   'orange-900': $orange-900,
-) !default;
+  ) !default;
 
 $yellows: (
   'yellow-100': $yellow-100,
@@ -286,7 +286,7 @@ $yellows: (
   'yellow-700': $yellow-700,
   'yellow-800': $yellow-800,
   'yellow-900': $yellow-900,
-) !default;
+  ) !default;
 
 $greens: (
   'green-100': $green-100,
@@ -298,7 +298,7 @@ $greens: (
   'green-700': $green-700,
   'green-800': $green-800,
   'green-900': $green-900,
-) !default;
+  ) !default;
 
 $teals: (
   'teal-100': $teal-100,
@@ -310,7 +310,7 @@ $teals: (
   'teal-700': $teal-700,
   'teal-800': $teal-800,
   'teal-900': $teal-900,
-) !default;
+  ) !default;
 
 $cyans: (
   'cyan-100': $cyan-100,
@@ -322,7 +322,7 @@ $cyans: (
   'cyan-700': $cyan-700,
   'cyan-800': $cyan-800,
   'cyan-900': $cyan-900,
-) !default;
+  ) !default;
 
 // Spacers
 $spacer-0: 0 !default;
@@ -350,7 +350,7 @@ $spacers: (
   4: $spacer-4,
   5: $spacer-5,
   6: $spacer-6,
-) !default;
+  ) !default;
 
 $spacers-extra: (
   7: $spacer-7,
@@ -359,7 +359,7 @@ $spacers-extra: (
   10: $spacer-10,
   11: $spacer-11,
   12: $spacer-12,
-) !default;
+  ) !default;
 
 $negative-spacers: null !default;
 
@@ -381,12 +381,35 @@ $body-emphasis-color: $black !default;
 $font-google: null !default;
 $font-google-monospaced: null !default;
 $font-local: null !default;
-$font-icons: () !default;
+$font-icons: (
+  ) !default;
 
-$font-family-sans-serif: ('Geist', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
-$font-family-monospace: ('Geist Mono', Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
-$font-family-serif: 'Georgia', 'Times New Roman', times, serif !default;
-$font-family-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
+$font-family-sans-serif: (
+  'Geist',
+  -apple-system,
+  BlinkMacSystemFont,
+  San Francisco,
+  Segoe UI,
+  Roboto,
+  Helvetica Neue,
+  sans-serif) !default;
+$font-family-monospace: (
+  'Geist Mono',
+  Monaco,
+  Consolas,
+  Liberation Mono,
+  Courier New,
+  monospace) !default;
+$font-family-serif: 'Georgia',
+  'Times New Roman',
+  times,
+  serif !default;
+$font-family-comic: 'Comic Sans MS',
+  'Comic Sans',
+  'Chalkboard SE',
+  'Comic Neue',
+  sans-serif,
+  cursive !default;
 
 $font-family-base: var(--#{$prefix}font-sans-serif) !default;
 $font-family-code: var(--#{$prefix}font-monospace) !default;
@@ -447,7 +470,7 @@ $font-weights: (
   'semibold': $font-weight-semibold,
   'bold': $font-weight-bold,
   'headings': $headings-font-weight,
-) !default;
+  ) !default;
 
 $line-height-base: divide(1.25rem, $font-size-base) !default;
 $line-height-sm: divide(1rem, $font-size-base) !default;
@@ -485,7 +508,7 @@ $font-sizes: (
   4: $h4-font-size,
   5: $h5-font-size,
   6: $h6-font-size,
-) !default;
+  ) !default;
 
 $line-heights: (
   h1: $h1-line-height,
@@ -499,7 +522,7 @@ $line-heights: (
   sm: $line-height-sm,
   lg: $line-height-lg,
   xl: $line-height-xl,
-) !default;
+  ) !default;
 
 $display-font-sizes: (
   1: 5rem,
@@ -508,7 +531,7 @@ $display-font-sizes: (
   4: 3.5rem,
   5: 3rem,
   6: 2rem,
-) !default;
+  ) !default;
 
 $display-font-family: null !default;
 $display-font-style: null !default;
@@ -553,7 +576,7 @@ $zindex-levels: (
   1: 1,
   2: 2,
   3: 3,
-) !default;
+  ) !default;
 
 $text-secondary-opacity: 0.7 !default;
 $text-secondary-light-opacity: 0.4 !default;
@@ -640,7 +663,7 @@ $theme-colors: (
   'light': $light,
   'dark': $dark,
   'muted': $muted,
-) !default;
+  ) !default;
 
 $extra-colors: (
   'blue': $blue,
@@ -655,7 +678,7 @@ $extra-colors: (
   'green': $green,
   'teal': $teal,
   'cyan': $cyan,
-) !default;
+  ) !default;
 
 $social-colors: (
   'x': #000000,
@@ -674,7 +697,7 @@ $social-colors: (
   'flickr': #0063dc,
   'bitbucket': #0052cc,
   'tabler': #066fd1,
-) !default;
+  ) !default;
 
 $gray-colors: (
   gray-50: $gray-50,
@@ -688,9 +711,10 @@ $gray-colors: (
   gray-800: $gray-800,
   gray-900: $gray-900,
   gray-950: $gray-950,
-) !default;
+  ) !default;
 
-$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ()));
+$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ())
+);
 
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
 $grays: (
@@ -703,7 +727,7 @@ $grays: (
   '700': $gray-700,
   '800': $gray-800,
   '900': $gray-900,
-) !default;
+  ) !default;
 
 $colors: (
   'blue': $blue,
@@ -720,7 +744,7 @@ $colors: (
   'white': $white,
   'gray': $gray-600,
   'gray-dark': $gray-800,
-) !default;
+  ) !default;
 
 // Theme color emphasis
 $primary-text-emphasis: shade-color($primary, 60%) !default;
@@ -759,7 +783,7 @@ $backdrop-bg: light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}black)) !def
 $backdrops: (
   dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
   light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
-) !default;
+  ) !default;
 
 // Gradient
 $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0)) !default;
@@ -773,7 +797,7 @@ $border-widths: (
   3: 3px,
   4: 4px,
   5: 5px,
-) !default;
+  ) !default;
 $border-style: solid !default;
 
 $border-radius-xs: 2px !default;
@@ -793,7 +817,7 @@ $border-radiuses: (
   lg: $border-radius-lg,
   pill: $border-radius-pill,
   null: var(--#{$prefix}border-radius-md),
-) !default;
+  ) !default;
 
 $border-values: (
   null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
@@ -831,57 +855,50 @@ $avatar-icon-size: 1.5rem !default;
 $avatar-brand-size: 1.25rem !default;
 $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $avatar-sizes: (
-  'xxs': (
-    size: 1rem,
+  'xxs': (size: 1rem,
     font-size: 0.5rem,
     icon-size: 0.5rem,
     status-size: 0.25rem,
     brand-size: 0.5rem,
   ),
-  'xs': (
-    size: 1.25rem,
+  'xs': (size: 1.25rem,
     font-size: $h6-font-size,
     icon-size: 0.75rem,
     status-size: 0.375rem,
     brand-size: 0.75rem,
     border-radius: $border-radius-xs,
   ),
-  'sm': (
-    size: 2rem,
+  'sm': (size: 2rem,
     font-size: $h5-font-size,
     icon-size: 1.5rem,
     status-size: 0.5rem,
     brand-size: 1rem,
   ),
-  'md': (
-    size: 2.5rem,
+  'md': (size: 2.5rem,
     font-size: $h4-font-size,
     icon-size: 1.5rem,
     status-size: 0.75rem,
     brand-size: 1.25rem,
   ),
-  'lg': (
-    size: 3rem,
+  'lg': (size: 3rem,
     font-size: $h2-font-size,
     icon-size: 2rem,
     status-size: 0.75rem,
     brand-size: 1.25rem,
   ),
-  'xl': (
-    size: 5rem,
+  'xl': (size: 5rem,
     font-size: 2rem,
     icon-size: 3rem,
     status-size: 1rem,
     brand-size: 1.25rem,
   ),
-  '2xl': (
-    size: 7rem,
+  '2xl': (size: 7rem,
     font-size: 3rem,
     icon-size: 5rem,
     status-size: 1rem,
     brand-size: 2rem,
   ),
-) !default;
+  ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $avatar-font-size: $h4-font-size !default;
 $avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
@@ -918,7 +935,7 @@ $position-values: (
   0: 0,
   50: 50%,
   100: 100%,
-) !default;
+  ) !default;
 
 // Grid breakpoints
 // $grid-breakpoints moved to `_settings.scss`
@@ -930,7 +947,7 @@ $container-max-widths: (
   lg: 960px,
   xl: 1140px,
   xxl: 1320px,
-) !default;
+  ) !default;
 
 // Grid columns
 $grid-columns: 12 !default;
@@ -943,27 +960,24 @@ $container-variations: (
   slim: 16rem,
   tight: 32rem,
   narrow: 61.875rem,
-) !default;
+  ) !default;
 
 // Sizes
 $size-spacers: (
   auto: auto,
   px: 1px,
   full: 100%,
-) !default;
+  ) !default;
 
-$size-values: map.merge(
-  $spacers,
-  (
-    25: 25%,
-    33: 33.33333%,
-    50: 50%,
-    66: 66.66666%,
-    75: 75%,
-    100: 100%,
-    auto: auto,
-  )
-) !default;
+$size-values: map.merge($spacers,
+    (25: 25%,
+      33: 33.33333%,
+      50: 50%,
+      66: 66.66666%,
+      75: 75%,
+      100: 100%,
+      auto: auto,
+    )) !default;
 
 // Aspect ratios
 $aspect-ratios: (
@@ -980,7 +994,7 @@ $aspect-ratios: (
   '9x16': calc(16 / 9 * 100%),
   '21x9': calc(9 / 21 * 100%),
   '9x21': calc(21 / 9 * 100%),
-) !default;
+  ) !default;
 
 // Shadows
 $box-shadow-xs: 0 1px 2px 0 rgba(18, 18, 23, 0.05) !default;
@@ -997,8 +1011,7 @@ $box-shadow-xl:
   0px 10px 10px -5px rgba(18, 18, 23, 0.04),
   0px 20px 25px -5px rgba(18, 18, 23, 0.1) !default;
 $box-shadow-2xl: 0px 25px 50px -12px rgba(18, 18, 23, 0.25) !default;
-$box-shadow-overlay:
-  0px 2px 4px 0px rgba(18, 18, 23, 0.04),
+$box-shadow-overlay: 0px 2px 4px 0px rgba(18, 18, 23, 0.04),
   0px 5px 8px 0px rgba(18, 18, 23, 0.04),
   0px 10px 18px 0px rgba(18, 18, 23, 0.03),
   0px 24px 48px 0px rgba(18, 18, 23, 0.03),
@@ -1027,7 +1040,7 @@ $box-shadows: (
   card: $box-shadow-card,
   card-hover: $box-shadow-card-hover,
   dropdown: $box-shadow-dropdown,
-) !default;
+  ) !default;
 
 $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
 
@@ -1086,7 +1099,7 @@ $breadcrumb-variants: (
   dots: '·',
   arrows: '›',
   bullets: '\02022',
-) !default;
+  ) !default;
 
 // Badges
 $badge-font-size: $font-size-reative-sm !default;
@@ -1152,8 +1165,7 @@ $btn-border-radius: var(--#{$prefix}border-radius) !default;
 $btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
 
-$btn-transition:
-  color 0.15s ease-in-out,
+$btn-transition: color 0.15s ease-in-out,
   background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out,
   box-shadow 0.15s ease-in-out !default;
@@ -1210,12 +1222,13 @@ $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
 $input-focus-color: var(--#{$prefix}body-color) !default;
 $input-focus-width: $input-btn-focus-width !default;
 $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$input-transition:
-  border-color 0.15s ease-in-out,
+$input-transition: border-color 0.15s ease-in-out,
   box-shadow 0.15s ease-in-out !default;
 
 $input-border-width: $input-btn-border-width !default;
 $input-line-height: $input-btn-line-height !default;
+$input-line-height-lg: $input-btn-line-height-lg !default;
+$input-line-height-sm: $input-btn-line-height-sm !default;
 $input-height-border: calc(#{$input-border-width} * 2) !default;
 
 $input-padding-y-sm: $input-btn-padding-y-sm !default;
@@ -1231,8 +1244,8 @@ $input-height-inner-half: add($input-line-height, $input-padding-y) !default;
 $input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5)) !default;
 
 $input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default;
-$input-height-sm: add($input-line-height, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
-$input-height-lg: add($input-line-height, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height-sm, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height-lg, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
 
 // Cards
 $card-spacer-y: 1.25rem !default;
@@ -1288,8 +1301,7 @@ $accordion-button-padding-y: $accordion-padding-y !default;
 $accordion-button-padding-x: $accordion-padding-x !default;
 $accordion-button-color: var(--#{$prefix}body-color) !default;
 $accordion-button-bg: transparent !default;
-$accordion-transition:
-  $btn-transition,
+$accordion-transition: $btn-transition,
   border-radius 0.15s ease !default;
 $accordion-button-active-bg: transparent !default;
 $accordion-button-active-color: inherit !default;
@@ -1483,8 +1495,7 @@ $nav-link-font-size: null !default;
 $nav-link-font-weight: null !default;
 $nav-link-color: var(--#{$prefix}gray-500) !default;
 $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
-$nav-link-transition:
-  color 0.15s ease-in-out,
+$nav-link-transition: color 0.15s ease-in-out,
   background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out !default;
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
@@ -1646,8 +1657,7 @@ $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-border-color: var(--#{$prefix}pagination-border-color) !default;
 
-$pagination-transition:
-  color 0.15s ease-in-out,
+$pagination-transition: color 0.15s ease-in-out,
   background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out,
   box-shadow 0.15s ease-in-out !default;
@@ -1728,7 +1738,7 @@ $table-variants: (
   'danger': shift-color($danger, $table-bg-scale),
   'light': $light,
   'dark': $dark,
-) !default;
+  ) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
@@ -1910,14 +1920,12 @@ $form-range-thumb-bg: var(--#{$prefix}primary) !default;
 $form-range-thumb-border: 2px var(--#{$prefix}border-style) $white !default;
 $form-range-thumb-border-radius: 1rem !default;
 $form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
-$form-range-thumb-focus-box-shadow:
-  0 0 0 1px $body-bg,
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,
   $input-focus-box-shadow !default;
 $form-range-thumb-focus-box-shadow-width: 0.125rem !default;
 $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
 $form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
-$form-range-thumb-transition:
-  background-color 0.15s ease-in-out,
+$form-range-thumb-transition: background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out,
   box-shadow 0.15s ease-in-out !default;
 
@@ -1932,8 +1940,7 @@ $form-floating-label-height: 1.5em !default;
 $form-floating-label-opacity: 0.65 !default;
 $form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
 $form-floating-label-disabled-color: $gray-600 !default;
-$form-floating-transition:
-  opacity 0.1s ease-in-out,
+$form-floating-transition: opacity 0.1s ease-in-out,
   transform 0.1s ease-in-out !default;
 
 // Form text
@@ -1960,35 +1967,31 @@ $form-feedback-invalid-color: $danger !default;
 
 $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
 $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
-$form-feedback-icon-valid: str-replace(
-  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"),
-  '#',
-  '%23'
-) !default;
-$form-feedback-icon-invalid: str-replace(
-  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"),
-  '#',
-  '%23'
-) !default;
+$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"),
+    '#',
+    '%23'
+  ) !default;
+$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"),
+    '#',
+    '%23'
+  ) !default;
 // Form validation states
 $form-validation-states: (
-  'valid': (
-    'color': var(--#{$prefix}form-valid-color),
+  'valid': ('color': var(--#{$prefix}form-valid-color),
     'icon': $form-feedback-icon-valid,
     'tooltip-color': #fff,
     'tooltip-bg-color': var(--#{$prefix}success),
     'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--#{$prefix}success) #{math.percentage($input-btn-focus-color-opacity)}, transparent),
     'border-color': var(--#{$prefix}form-valid-border-color),
   ),
-  'invalid': (
-    'color': var(--#{$prefix}form-invalid-color),
+  'invalid': ('color': var(--#{$prefix}form-invalid-color),
     'icon': $form-feedback-icon-invalid,
     'tooltip-color': #fff,
     'tooltip-bg-color': var(--#{$prefix}danger),
     'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--#{$prefix}danger) #{math.percentage($input-btn-focus-color-opacity)}, transparent),
     'border-color': var(--#{$prefix}form-invalid-border-color),
   ),
-) !default;
+  ) !default;
 
 // Form feedback tooltip
 $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
@@ -2050,7 +2053,33 @@ $figure-caption-font-size: $small-font-size !default;
 $figure-caption-color: var(--#{$prefix}secondary-color) !default;
 
 // Tabler Plugins
-$social-apps: ('apple', 'discord', 'dribbble', 'facebook', 'figma', 'github', 'google', 'instagram', 'linkedin', 'medium', 'meta', 'metamask', 'pinterest', 'reddit', 'signal', 'skype', 'snapchat', 'spotify', 'telegram', 'tiktok', 'tumblr', 'twitch', 'vk', 'x', 'youtube');
+$social-apps: (
+  'apple',
+  'discord',
+  'dribbble',
+  'facebook',
+  'figma',
+  'github',
+  'google',
+  'instagram',
+  'linkedin',
+  'medium',
+  'meta',
+  'metamask',
+  'pinterest',
+  'reddit',
+  'signal',
+  'skype',
+  'snapchat',
+  'spotify',
+  'telegram',
+  'tiktok',
+  'tumblr',
+  'twitch',
+  'vk',
+  'x',
+  'youtube'
+);
 
 // Payments
 $payment-sizes: $avatar-sizes !default;
@@ -2426,4 +2455,4 @@ $flag-countries: (
   'za',
   'zm',
   'zw'
-);
+);
\ No newline at end of file
diff --git a/core/scss/bootstrap/forms/_form-control.scss b/core/scss/bootstrap/forms/_form-control.scss
index 9001ffe4a..c1df1b8cf 100644
--- a/core/scss/bootstrap/forms/_form-control.scss
+++ b/core/scss/bootstrap/forms/_form-control.scss
@@ -40,9 +40,12 @@
     background-color: $input-focus-bg;
     border-color: $input-focus-border-color;
     outline: 0;
+
     @if $enable-shadows {
       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-    } @else {
+    }
+
+    @else {
       // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: $input-focus-box-shadow;
     }
@@ -151,6 +154,7 @@
 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 
 .form-control-sm {
+  line-height: $input-line-height-sm;
   min-height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm;
   @include font-size($input-font-size-sm);
@@ -164,6 +168,7 @@
 }
 
 .form-control-lg {
+  line-height: $input-line-height-lg;
   min-height: $input-height-lg;
   padding: $input-padding-y-lg $input-padding-x-lg;
   @include font-size($input-font-size-lg);
@@ -192,6 +197,7 @@ textarea {
     min-height: $input-height-lg;
   }
 }
+
 // stylelint-enable selector-no-qualifying-type
 
 .form-control-color {
@@ -216,6 +222,7 @@ textarea {
   &.form-control-sm {
     height: $input-height-sm;
   }
+
   &.form-control-lg {
     height: $input-height-lg;
   }
diff --git a/core/scss/bootstrap/forms/_input-group.scss b/core/scss/bootstrap/forms/_input-group.scss
index bcb8e70fa..a12fe1a08 100644
--- a/core/scss/bootstrap/forms/_input-group.scss
+++ b/core/scss/bootstrap/forms/_input-group.scss
@@ -14,9 +14,9 @@
   align-items: stretch;
   width: 100%;
 
-  > .form-control,
-  > .form-select,
-  > .form-floating {
+  >.form-control,
+  >.form-select,
+  >.form-floating {
     position: relative; // For focus state's z-index
     flex: 1 1 auto;
     width: 1%;
@@ -24,9 +24,9 @@
   }
 
   // Bring the "active" form control to the top of surrounding elements
-  > .form-control:focus,
-  > .form-select:focus,
-  > .form-floating:focus-within {
+  >.form-control:focus,
+  >.form-select:focus,
+  >.form-floating:focus-within {
     z-index: 5;
   }
 
@@ -68,26 +68,30 @@
 // Remix the default form control sizing classes into new ones for easier
 // manipulation.
 
-.input-group-lg > .form-control,
-.input-group-lg > .form-select,
-.input-group-lg > .input-group-text,
-.input-group-lg > .btn {
+.input-group-lg>.form-control,
+.input-group-lg>.form-select,
+.input-group-lg>.input-group-text,
+.input-group-lg>.btn {
+  line-height: $input-line-height-lg;
+  min-height: $input-height-lg;
   padding: $input-padding-y-lg $input-padding-x-lg;
   @include font-size($input-font-size-lg);
   @include border-radius($input-border-radius-lg);
 }
 
-.input-group-sm > .form-control,
-.input-group-sm > .form-select,
-.input-group-sm > .input-group-text,
-.input-group-sm > .btn {
+.input-group-sm>.form-control,
+.input-group-sm>.form-select,
+.input-group-sm>.input-group-text,
+.input-group-sm>.btn {
+  line-height: $input-line-height-sm;
+  min-height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm;
   @include font-size($input-font-size-sm);
   @include border-radius($input-border-radius-sm);
 }
 
-.input-group-lg > .form-select,
-.input-group-sm > .form-select {
+.input-group-lg>.form-select,
+.input-group-sm>.form-select {
   padding-right: $form-select-padding-x + $form-select-indicator-padding;
 }
 
@@ -100,19 +104,21 @@
 // stylelint-disable-next-line no-duplicate-selectors
 .input-group {
   &:not(.has-validation) {
+
     > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
-    > .dropdown-toggle:nth-last-child(n + 3),
-    > .form-floating:not(:last-child) > .form-control,
-    > .form-floating:not(:last-child) > .form-select {
+    >.dropdown-toggle:nth-last-child(n + 3),
+    >.form-floating:not(:last-child)>.form-control,
+    >.form-floating:not(:last-child)>.form-select {
       @include border-end-radius(0);
     }
   }
 
   &.has-validation {
+
     > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
-    > .dropdown-toggle:nth-last-child(n + 4),
-    > .form-floating:nth-last-child(n + 3) > .form-control,
-    > .form-floating:nth-last-child(n + 3) > .form-select {
+    >.dropdown-toggle:nth-last-child(n + 4),
+    >.form-floating:nth-last-child(n + 3)>.form-control,
+    >.form-floating:nth-last-child(n + 3)>.form-select {
       @include border-end-radius(0);
     }
   }
@@ -127,8 +133,8 @@
     @include border-start-radius(0);
   }
 
-  > .form-floating:not(:first-child) > .form-control,
-  > .form-floating:not(:first-child) > .form-select {
+  >.form-floating:not(:first-child)>.form-control,
+  >.form-floating:not(:first-child)>.form-select {
     @include border-start-radius(0);
   }
-}
+}
\ No newline at end of file
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 4e5f06456..217623d65 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -54,7 +54,7 @@
     top: auto;
   }
 
-  .btn-check + &:hover {
+  .btn-check+&:hover {
     color: var(--#{$prefix}btn-hover-color);
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
@@ -91,11 +91,13 @@
 
 @each $color, $value in map.merge($theme-colors, $social-colors) {
   .btn-#{$color} {
-    @if $color == 'dark' {
+    @if $color =='dark' {
       --#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
       --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
       --#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
-    } @else {
+    }
+
+    @else {
       --#{$prefix}btn-border-color: transparent;
       --#{$prefix}btn-hover-border-color: transparent;
       --#{$prefix}btn-active-border-color: transparent;
@@ -151,19 +153,19 @@
 // Button sizes
 //
 .btn-sm,
-.btn-group-sm > .btn {
+.btn-group-sm>.btn {
   --#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
   --#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
 }
 
 .btn-lg,
-.btn-group-lg > .btn {
+.btn-group-lg>.btn {
   --#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
   --#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
 }
 
 .btn-xl,
-.btn-group-xl > .btn {
+.btn-group-xl>.btn {
   --#{$prefix}btn-line-height: #{$input-btn-line-height-xl};
   --#{$prefix}btn-icon-size: #{$input-btn-icon-size-xl};
   --#{$prefix}btn-padding-y: #{$input-btn-padding-y-xl};
@@ -199,6 +201,7 @@
   .icon {
     margin: calc(-1 * var(--#{$prefix}btn-padding-x));
   }
+
   //[BUG] btn-sm and btn-xl with an icon looks broken
   //issue #2470 fixed
   min-width: calc(var(--#{$prefix}btn-line-height) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
@@ -239,7 +242,7 @@
   text-shadow: none !important;
   pointer-events: none;
 
-  > * {
+  >* {
     opacity: 0;
   }
 
@@ -316,6 +319,7 @@
   }
 
   &.btn-animate-icon-rotate {
+
     &:hover,
     &:focus-visible {
       .icon {
@@ -325,6 +329,7 @@
   }
 
   &.btn-animate-icon-move-start {
+
     &:hover,
     &:focus-visible {
       .icon {
@@ -334,6 +339,7 @@
   }
 
   &.btn-animate-icon-pulse {
+
     &:hover,
     &:focus-visible {
       .icon {
@@ -344,6 +350,7 @@
   }
 
   &.btn-animate-icon-shake {
+
     &:hover,
     &:focus-visible {
       .icon {
@@ -354,6 +361,7 @@
   }
 
   &.btn-animate-icon-tada {
+
     &:hover,
     &:focus-visible {
       .icon {
@@ -362,4 +370,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file