add 'lighter' and 'bolder' font weight classes (#26580)

* add 'lighter' and 'bolder' font weight classes

these are 2 special values for font weight, that will give their content a font-weight value of 100 more or less than their inherited font-weight.

probably doesn't fully fulfill this issue, https://github.com/twbs/bootstrap/issues/23969, but it's a start

* Update .stylelintrc

* add 'lighter' and 'bolder' variables per @mdo 's request.

diff --git a/.stylelintrc b/.stylelintrc
index 3d86d2ac7535dc832fec1d9bb6455b55ae077387..520451b321b532a0344c9d0b934f0cd82a435ccb 100644 (file)
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -18,7 +18,10 @@
     "declaration-empty-line-before": null,
     "declaration-no-important": true,
     "font-family-name-quotes": "always-where-recommended",
-    "font-weight-notation": "numeric",
+    "font-weight-notation": [
+      "numeric", {
+        "ignore": ["relative"]
+    }],
     "function-url-no-scheme-relative": true,
     "function-url-quotes": "always",
     "length-zero-no-unit": true,

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5cf118f033963045d2bc02b9a5646c22321dae7e..b5ef7a45a90bfeeff97f98833c2786482c29d63d 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -257,9 +257,11 @@ $font-size-base:              1rem !default; // Assumes the browser default, typ
 $font-size-lg:                ($font-size-base * 1.25) !default;
 $font-size-sm:                ($font-size-base * .875) !default;
 
+$font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
 $font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
 
 $font-weight-base:            $font-weight-normal !default;
 $line-height-base:            1.5 !default;

diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 9d96c46562ef4d943836b4ac5e73dd18f838b288..9140910c5d33c175aef36d96855f0fe3c40884bf 100644 (file)
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -32,10 +32,12 @@
 
 // Weight and italics
 
-.font-weight-light  { font-weight: $font-weight-light !important; }
-.font-weight-normal { font-weight: $font-weight-normal !important; }
-.font-weight-bold   { font-weight: $font-weight-bold !important; }
-.font-italic        { font-style: italic !important; }
+.font-weight-light   { font-weight: $font-weight-light !important; }
+.font-weight-lighter { font-weight: $font-weight-lighter !important; }
+.font-weight-normal  { font-weight: $font-weight-normal !important; }
+.font-weight-bold    { font-weight: $font-weight-bold !important; }
+.font-weight-bolder  { font-weight: $font-weight-bolder !important; }
+.font-italic         { font-style: italic !important; }
 
 // Contextual colors