Redo display headings (#30568)

- Convert to Sass map
- Consolidate font-weights into single option (matching line-height for them)
- Add two new sizes and create a new scale
- Update migration docs

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>

site/content/docs/4.3/content/typography.md

@@ -108,7 +108,9 @@ Traditional heading elements are designed to work best in the meat of your page
   <div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
   <div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
   <div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
-  <div class="display-4">Display 4</div>
+  <div class="display-4 pb-3 mb-3 border-bottom">Display 4</div>
+  <div class="display-5 pb-3 mb-3 border-bottom">Display 5</div>
+  <div class="display-6">Display 6</div>
 </div>
 
 {{< highlight html >}}
@@ -116,8 +118,14 @@ Traditional heading elements are designed to work best in the meat of your page
 <h1 class="display-2">Display 2</h1>
 <h1 class="display-3">Display 3</h1>
 <h1 class="display-4">Display 4</h1>
+<h1 class="display-5">Display 5</h1>
+<h1 class="display-6">Display 6</h1>
 {{< /highlight >}}
 
+Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
+
+{{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
+
 ## Lead
 
 Make a paragraph stand out by adding `.lead`.

site/content/docs/4.3/migration.md

@@ -77,6 +77,13 @@ Changes to Reboot, typography, tables, and more.
 - `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
 - Drop `.text-justify` class. [See #229793](https://github.com/twbs/bootstrap/pull/29793)
 
+## Typography
+
+- Removed `$display-*` variables for a new `$display-font-sizes` Sass map.
+- Removed individiual `$display-*-weight` variables for a single `$display-font-weight`.
+- Added two new `.display-*` heading styles, `.display-5` and `.display-6`.
+- Resized existing display headings for a slightly more consistent set of `font-size`s.
+
 ## Forms
 
 - Rearranged form documentation under its own top-level section.