Reboot & Type cleanup (#28698)

- Line height & font family from html were directly overridden by body, so they were redundant thus removed
- The remaining properties are moved to body
- Shim for IE10 tags removed
- hr cleanup
  - Combined styles from reboot & type
  - Changed from borders to background
    - This allows us to keep the color inherited.
    - Opacity can be used to change the intensity
    - Size attribute will not change the height instead of making the hr look like an input field
  - Better variable names
- headings cleanup
  - Moved all element styling to reboot
  - Type will now extend the element styling. This way we will save some redundant code
- small & mark are also moved to reboot. type does not contain any element styling anymore
- font weight removed from small, this did not really made sense

3 files changed, 92 insertions, 67 deletions

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 4955f7fe8f..30666a67e3 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -10,39 +10,26 @@
 
 // Document
 //
-// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
-// 2. Change the default font family in all browsers.
-// 3. Correct the line height in all browsers.
-// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
-// 5. Change the default tap highlight to be completely transparent in iOS.
-
+// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
 *,
 *::before,
 *::after {
-  box-sizing: border-box; // 1
-}
-
-html {
-  font-family: sans-serif; // 2
-  line-height: 1.15; // 3
-  -webkit-text-size-adjust: 100%; // 4
-  -webkit-tap-highlight-color: rgba($black, 0); // 5
+  box-sizing: border-box;
 }
 
-// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
-// TODO: remove in v5
-// stylelint-disable-next-line selector-list-comma-newline-after
-article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+// Shim for IE11
+main {
   display: block;
 }
 
 // Body
 //
 // 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Set an explicit initial text-align value so that we can later use
+// 2. Set an explicit initial text-align value so that we can later use
 //    the `inherit` value on things like `<th>` elements.
-
+// 3. As a best practice, apply a default `background-color`.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Change the default tap highlight to be completely transparent in iOS.
 body {
   margin: 0; // 1
   font-family: $font-family-base;
@@ -50,8 +37,10 @@ body {
   font-weight: $font-weight-base;
   line-height: $line-height-base;
   color: $body-color;
-  text-align: left; // 3
-  background-color: $body-bg; // 2
+  text-align: left; // 2
+  background-color: $body-bg; // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -webkit-tap-highlight-color: rgba($black, 0); // 5
 }
 
 // Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
@@ -70,13 +59,20 @@ body {
 
 // Content grouping
 //
-// 1. Add the correct box sizing in Firefox.
-// 2. Show the overflow in Edge and IE.
+// 1. Reset Firefox's gray color
+// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
+//    See https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_size
 
 hr {
-  box-sizing: content-box; // 1
-  height: 0; // 1
-  overflow: visible; // 2
+  margin: $hr-margin-y 0;
+  color: $hr-color; // 1
+  background-color: currentColor;
+  border: 0;
+  opacity: $hr-opacity;
+}
+
+hr:not([size]) {
+  height: $hr-height; // 2
 }
 
 
@@ -88,12 +84,46 @@ hr {
 //
 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
 // margin for easier control within type scales as it avoids margin collapsing.
-// stylelint-disable-next-line selector-list-comma-newline-after
-h1, h2, h3, h4, h5, h6 {
+%heading {
   margin-top: 0;
   margin-bottom: $headings-margin-bottom;
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
 }
 
+h1 {
+  @extend %heading;
+  @include font-size($h1-font-size);
+}
+
+h2 {
+  @extend %heading;
+  @include font-size($h2-font-size);
+}
+
+h3 {
+  @extend %heading;
+  @include font-size($h3-font-size);
+}
+
+h4 {
+  @extend %heading;
+  @include font-size($h4-font-size);
+}
+
+h5 {
+  @extend %heading;
+  @include font-size($h5-font-size);
+}
+
+h6 {
+  @extend %heading;
+  @include font-size($h6-font-size);
+}
+
+
 // Reset margins on paragraphs
 //
 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
@@ -159,7 +189,7 @@ strong {
 }
 
 small {
-  @include font-size(80%); // Add the correct font size in all browsers
+  @include font-size($small-font-size); // Add the correct font size in all browsers
 }
 
 //
@@ -426,6 +456,11 @@ legend {
   white-space: normal; // 1
 }
 
+mark {
+  padding: $mark-padding;
+  background-color: $mark-bg;
+}
+
 progress {
   vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
 }
diff --git a/scss/_type.scss b/scss/_type.scss
index f8ed09065e..bc8249f438 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -3,22 +3,30 @@
 //
 // Headings
 //
+.h1 {
+  @extend h1;
+}
+
+.h2 {
+  @extend h2;
+}
+
+.h3 {
+  @extend h3;
+}
+
+.h4 {
+  @extend h4;
+}
+
+.h5 {
+  @extend h5;
+}
 
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-bottom: $headings-margin-bottom;
-  font-family: $headings-font-family;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
+.h6 {
+  @extend h6;
 }
 
-h1, .h1 { @include font-size($h1-font-size); }
-h2, .h2 { @include font-size($h2-font-size); }
-h3, .h3 { @include font-size($h3-font-size); }
-h4, .h4 { @include font-size($h4-font-size); }
-h5, .h5 { @include font-size($h5-font-size); }
-h6, .h6 { @include font-size($h6-font-size); }
 
 .lead {
   @include font-size($lead-font-size);
@@ -47,36 +55,17 @@ h6, .h6 { @include font-size($h6-font-size); }
   line-height: $display-line-height;
 }
 
-
-//
-// Horizontal rules
-//
-
-hr {
-  margin-top: $hr-margin-y;
-  margin-bottom: $hr-margin-y;
-  border: 0;
-  border-top: $hr-border-width solid $hr-border-color;
-}
-
-
 //
 // Emphasis
 //
-
-small,
 .small {
-  @include font-size($small-font-size);
-  font-weight: $font-weight-normal;
+  @extend small;
 }
 
-mark,
 .mark {
-  padding: $mark-padding;
-  background-color: $mark-bg;
+  @extend mark;
 }
 
-
 //
 // Lists
 //
diff --git a/scss/_variables.scss b/scss/_variables.scss
index aea16fc644..bfa5e385f8 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -323,8 +323,9 @@ $blockquote-small-color:      $gray-600 !default;
 $blockquote-small-font-size:  $small-font-size !default;
 $blockquote-font-size:        $font-size-base * 1.25 !default;
 
-$hr-border-color:             rgba($black, .1) !default;
-$hr-border-width:             $border-width !default;
+$hr-color:                    inherit !default;
+$hr-height:                   $border-width !default;
+$hr-opacity:                  .25 !default;
 
 $mark-padding:                .2em !default;