Add dark mode support (#35857)

* Add dark mode to docs

* Minor fix: missing space indentation

* Minor fix: revert utilities/z-index added-in modification

* Remove prev: and next: from doc because extracted to another PR

* Use .bg-body-tertiary in all Utilities > Overflow examples

* fix example

* Fix up spacing examples

* Update box-shadow Sass variables and utilities to auto-adjust to color modes

* Remove unused docs class

* Refactor form styles to use CSS variable for background images on .form-check and .form-switch

* Fix docs selector

* Rename shortcut for clarity

* Heading consistency

* Reintroduce missing 4th grid item in Utilities > Spacing example

* Fix bundlewatch

* .bd-callout* rendering is OK so removing comments in the code

* Update scss/_utilities.scss

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* Fix gutters example styling

* Fix text colors on background utils docs

* redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken

* fix some color utils examples

* Deprecate mixin notice

* Deprecate notice for list-group-item-variant() mixin

* Revamp new link CSS vars

* Use map-keys in some each Sass files

* Remove list-group-item-variant mixin ref in sass loop desc

* Display CSS vars scoped to our built-in dark mode

* Revert previous commit

* Fix list group variant link

* Fix typo

* Remove imports of alert/list-group mixins in scss/_mixins.scss

* Small formatting + comments removal in scss/_content.scss

* Fix alert links colors

* fix dropdown border-radius mixin

* fix link color and underline again, this time using CSS var override for color var and fallback value for the underline

* fix colors on docs navbar for dark mode

* remove two changes

* missing ref

* another link underline fix, just use sass vars for link decoration for now

* missing color bg docs, plus move dropdown override to scss

* more changes from review

* fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin

* Few fixes around type

- Restored CSS variable for color on headings, this time with a fallback value
- In conjunction, restored and wrapped the default CSS var with a null value check
- Split headings and paragraphs docs in Reboot, elaborated on them

* Restyle custom details > summary element in docs

* Rewrite some migration docs

* fix form checks

* Fix up some navbar styling, tweak docs callout

* Fix select images, mostly for validation styling

* Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs

* Update site/content/docs/5.2/components/scrollspy.md

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* Apply suggestions from code review

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* mention form control css vars in migration guide

* Tweak grid and flex docs background examples

* clarify some docs

* fix some more things

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>

site/content/docs/5.2/layout/columns.md

@@ -24,6 +24,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Vertical alignment
 
+Change the vertical alignment with any of the responsive `align-items-*` classes.
+
 {{< example class="bd-example-row bd-example-row-flex-cols" >}}
 <div class="container text-center">
   <div class="row align-items-start">
@@ -37,6 +39,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
   <div class="row align-items-center">
     <div class="col">
       One of three columns
@@ -48,6 +55,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
   <div class="row align-items-end">
     <div class="col">
       One of three columns
@@ -62,6 +74,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 </div>
 {{< /example >}}
 
+Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes.
+
 {{< example class="bd-example-row bd-example-row-flex-cols" >}}
 <div class="container text-center">
   <div class="row">
@@ -187,7 +201,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 ### Order classes
 
-Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
+Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
 
 {{< example class="bd-example-row" >}}
 <div class="container text-center">
@@ -287,11 +301,12 @@ With the move to flexbox in v4, you can use margin utilities like `.me-auto` to
 
 The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.
 
-{{< example >}}
-<div class="col-3 bg-light p-3 border">
+{{< example class="bd-example-row" >}}
+<div class="col-3 p-3 mb-2">
   .col-3: width of 25%
 </div>
-<div class="col-sm-9 bg-light p-3 border">
+
+<div class="col-sm-9 p-3">
   .col-sm-9: width of 75% above sm breakpoint
 </div>
 {{< /example >}}

site/content/docs/5.2/layout/gutters.md

@@ -18,14 +18,14 @@ toc: true
 
 `.gx-*` classes can be used to control the horizontal gutter widths. The `.container` or `.container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container px-4 text-center">
   <div class="row gx-5">
     <div class="col">
-     <div class="p-3 border bg-light">Custom column padding</div>
+     <div class="p-3">Custom column padding</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -33,14 +33,14 @@ toc: true
 
 An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container overflow-hidden text-center">
   <div class="row gx-5">
     <div class="col">
-     <div class="p-3 border bg-light">Custom column padding</div>
+     <div class="p-3">Custom column padding</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -50,20 +50,20 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 `.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container overflow-hidden text-center">
   <div class="row gy-5">
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -73,20 +73,20 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 `.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container text-center">
   <div class="row g-2">
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
     <div class="col-6">
-      <div class="p-3 border bg-light">Custom column padding</div>
+      <div class="p-3">Custom column padding</div>
     </div>
   </div>
 </div>
@@ -96,38 +96,38 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
 
 Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
 
-{{< example >}}
+{{< example class="bd-example-cols" >}}
 <div class="container text-center">
   <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
     <div class="col">
-      <div class="p-3 border bg-light">Row column</div>
+      <div class="p-3">Row column</div>
     </div>
   </div>
 </div>