Use a variable for the default font weights. Fixes #20741

Websites might use different weights such as medium or thin or use light as default weight instead of normal.
Also referenced: #18605 and #16170.

8 files changed, 17 insertions, 14 deletions

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 119cf1c05..3d5089c4f 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -105,7 +105,7 @@ fieldset[disabled] a.btn {
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   color: $link-color;
   border-radius: 0;
 
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 47702e795..1f57955bc 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -68,7 +68,7 @@
   width: 100%; // For `<button>`s
   padding: 3px $dropdown-item-padding-x;
   clear: both;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   color: $dropdown-link-color;
   text-align: inherit; // For `<button>`s
   white-space: nowrap; // prevent links from randomly breaking onto new lines
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index b447a3282..a33f2d303 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -84,7 +84,7 @@
   padding: $input-padding-y $input-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   font-size: $font-size-base;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   line-height: $input-line-height;
   color: $input-color;
   text-align: center;
diff --git a/scss/_normalize.scss b/scss/_normalize.scss
index 827b7f31a..c4df66618 100644
--- a/scss/_normalize.scss
+++ b/scss/_normalize.scss
@@ -270,7 +270,7 @@ textarea {
 //
 
 optgroup {
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 //
diff --git a/scss/_type.scss b/scss/_type.scss
index ff7114074..0880145e0 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -61,7 +61,7 @@ hr {
 small,
 .small {
   font-size: $small-font-size;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }
 
 mark,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 13432f2f3..f5b4dc014 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -177,6 +177,9 @@ $font-size-lg:   1.25rem !default;
 $font-size-sm:   .875rem !default;
 $font-size-xs:   .75rem !default;
 
+$font-weight-normal: normal !default;
+$font-weight-bold: bold !default;
+
 $line-height-base: 1.5 !default;
 
 $font-size-h1: 2.5rem !default;
@@ -221,10 +224,10 @@ $hr-border-width: $border-width !default;
 
 $mark-padding: .2em !default;
 
-$dt-font-weight: bold !default;
+$dt-font-weight: $font-weight-bold !default;
 
 $kbd-box-shadow:         inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
-$nested-kbd-font-weight: bold !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
 
 $list-inline-padding: 5px !default;
 
@@ -270,7 +273,7 @@ $table-border-color:            $gray-lighter !default;
 $btn-padding-x:                  1rem !default;
 $btn-padding-y:                  .5rem !default;
 $btn-line-height:                1.25 !default;
-$btn-font-weight:                normal !default;
+$btn-font-weight:                $font-weight-normal !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
 
@@ -670,7 +673,7 @@ $tag-danger-bg:             $brand-danger !default;
 $tag-color:                 #fff !default;
 $tag-link-hover-color:      #fff !default;
 $tag-font-size:             75% !default;
-$tag-font-weight:           bold !default;
+$tag-font-weight:           $font-weight-bold !default;
 $tag-padding-x:             .4em !default;
 $tag-padding-y:             .25em !default;
 
@@ -715,7 +718,7 @@ $modal-sm:                    300px !default;
 $alert-padding-x:             1.25rem !default;
 $alert-padding-y:             .75rem !default;
 $alert-border-radius:         $border-radius !default;
-$alert-link-font-weight:      bold !default;
+$alert-link-font-weight:      $font-weight-bold !default;
 $alert-border-width:          $border-width !default;
 
 $alert-success-bg:            $state-success-bg !default;
@@ -835,7 +838,7 @@ $carousel-icon-width:                         20px !default;
 
 // Close
 
-$close-font-weight:           bold !default;
+$close-font-weight:           $font-weight-bold !default;
 $close-color:                 #000 !default;
 $close-text-shadow:           0 1px 0 #fff !default;
 
diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index bb882f2ac..b95273097 100644
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -2,7 +2,7 @@
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   letter-spacing: normal;
   line-break: auto;
   line-height: $line-height-base;
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index b4468e98d..5ad2ee9b3 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -26,8 +26,8 @@
 
 // Weight and italics
 
-.font-weight-normal  { font-weight: normal; }
-.font-weight-bold    { font-weight: bold; }
+.font-weight-normal  { font-weight: $font-weight-normal; }
+.font-weight-bold    { font-weight: $font-weight-bold; }
 .font-italic         { font-style: italic; }
 
 // Contextual colors