Clean up line heights & add line height utilities (#29271)

10 files changed, 26 insertions, 31 deletions

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 52e6b195a..a12bb0e99 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -8,6 +8,7 @@
   display: inline-block;
   font-family: $btn-font-family;
   font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
   color: $body-color;
   text-align: center;
   vertical-align: middle;
@@ -15,7 +16,7 @@
   user-select: none;
   background-color: transparent;
   border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
   @include transition($btn-transition);
 
   &:hover {
@@ -106,11 +107,11 @@ fieldset:disabled a.btn {
 //
 
 .btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
 }
 
 .btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
 }
 
 
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index c51272dd7..67d27176a 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -51,12 +51,12 @@
 //
 // Sizing
 //
-@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-line-height, $pagination-border-radius);
+@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
 
 .pagination-lg {
-  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $border-radius-lg);
 }
 
 .pagination-sm {
-  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $border-radius-sm);
 }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 823000c03..4864ec664 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -394,6 +394,16 @@ $utilities: map-merge(
         )
       )
     ),
+    "line-height": (
+      property: line-height,
+      class: lh,
+      values: (
+        1: 1,
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+      )
+    ),
     "background-color": (
       property: background-color,
       class: bg,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ed2755901..850344aac 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -226,8 +226,8 @@ $container-padding-x: $grid-gutter-width / 2 !default;
 //
 // Define common padding and border radius sizes and more.
 
-$line-height-lg:              1.5 !default;
-$line-height-sm:              1.5 !default;
+$line-height-sm:              1.25 !default;
+$line-height-lg:              2 !default;
 
 $border-width:                1px !default;
 $border-color:                $gray-300 !default;
@@ -420,12 +420,10 @@ $input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-colo
 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;
 $input-btn-font-size-sm:      $font-size-sm !default;
-$input-btn-line-height-sm:    $line-height-sm !default;
 
 $input-btn-padding-y-lg:      .5rem !default;
 $input-btn-padding-x-lg:      1rem !default;
 $input-btn-font-size-lg:      $font-size-lg !default;
-$input-btn-line-height-lg:    $line-height-lg !default;
 
 $input-btn-border-width:      $border-width !default;
 
@@ -443,12 +441,10 @@ $btn-line-height:             $input-btn-line-height !default;
 $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
 $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
 $btn-font-size-sm:            $input-btn-font-size-sm !default;
-$btn-line-height-sm:          $input-btn-line-height-sm !default;
 
 $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
 $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
 $btn-font-size-lg:            $input-btn-font-size-lg !default;
-$btn-line-height-lg:          $input-btn-line-height-lg !default;
 
 $btn-border-width:            $input-btn-border-width !default;
 
@@ -487,12 +483,10 @@ $input-line-height:                     $input-btn-line-height !default;
 $input-padding-y-sm:                    $input-btn-padding-y-sm !default;
 $input-padding-x-sm:                    $input-btn-padding-x-sm !default;
 $input-font-size-sm:                    $input-btn-font-size-sm !default;
-$input-line-height-sm:                  $input-btn-line-height-sm !default;
 
 $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
-$input-line-height-lg:                  $input-btn-line-height-lg !default;
 
 $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-200 !default;
@@ -523,8 +517,8 @@ $input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$i
 $input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
 
 $input-height:                          calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
-$input-height-sm:                       calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
-$input-height-lg:                       calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
+$input-height-sm:                       calc(#{$input-line-height * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
+$input-height-lg:                       calc(#{$input-line-height * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
@@ -805,13 +799,12 @@ $dropdown-header-color:             $gray-600 !default;
 
 // Pagination
 
-$pagination-padding-y:              .5rem !default;
+$pagination-padding-y:              .375rem !default;
 $pagination-padding-x:              .75rem !default;
 $pagination-padding-y-sm:           .25rem !default;
 $pagination-padding-x-sm:           .5rem !default;
 $pagination-padding-y-lg:           .75rem !default;
 $pagination-padding-x-lg:           1.5rem !default;
-$pagination-line-height:            1.25 !default;
 
 $pagination-color:                  $link-color !default;
 $pagination-bg:                     $white !default;
@@ -875,7 +868,7 @@ $tooltip-arrow-color:               $tooltip-bg !default;
 $form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
 $form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
 $form-feedback-tooltip-font-size:     $tooltip-font-size !default;
-$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-line-height:   null !default;
 $form-feedback-tooltip-opacity:       $tooltip-opacity !default;
 $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index b5dffa04e..bd35b6b04 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -13,8 +13,7 @@
   float: left;
   width: $form-check-input-width;
   height: $form-check-input-width;
-  // Todo: Change static value to base line-height?
-  margin-top: calc((1.5em - #{$form-check-input-width}) / 2); // line-height minus check height
+  margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
   margin-left: $form-check-padding-left * -1;
   background-color: $form-check-input-bg;
   border: $form-check-input-border;
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 209b6a56e..a9f534f03 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -99,7 +99,6 @@
   min-height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm;
   @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
@@ -107,7 +106,6 @@
   min-height: $input-height-lg;
   padding: $input-padding-y-lg $input-padding-x-lg;
   @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 05eae6a49..b965f394f 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -139,7 +139,6 @@
 .input-group-lg > .input-group-append > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
   @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
@@ -159,7 +158,6 @@
 .input-group-sm > .input-group-append > .btn {
   padding: $input-padding-y-sm $input-padding-x-sm;
   @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index 1a4ea8c5c..b4ccfa804 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -16,12 +16,10 @@
   padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
   @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
 }
 
 .col-form-label-sm {
   padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
   @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 1c51765d2..de9c6e9b9 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -101,10 +101,9 @@
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   @include font-size($font-size);
-  line-height: $line-height;
   // Manually declare to provide an override to the browser default
   @include border-radius($border-radius, 0);
 }
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 2c31a8cc5..52ad1e121 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -1,10 +1,9 @@
 // Pagination
 
-@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
   .page-link {
     padding: $padding-y $padding-x;
     @include font-size($font-size);
-    line-height: $line-height;
   }
 
   .page-item {