Sass docs updates (#37897)

* Add maps

* Redesign scss-docs rendering

* Update other CSS sections

* Fix linter

site/content/docs/5.3/utilities/background.md

@@ -83,11 +83,11 @@ Or, choose from any of the `.bg-opacity` utilities:
 <div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
 
-### Variables
+### Sass variables
 
 Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
@@ -101,7 +101,13 @@ Grayscale colors are also available, but only a subset are used to generate any
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
 
-### Map
+Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
+
+{{< scss-docs name="theme-bg-subtle-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
 
@@ -115,11 +121,17 @@ RGB colors are generated from a separate Sass map:
 
 {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
-And background color opacities build on that with their own map that's consumed by the utilities API:
+Background color opacities build on that with their own map that's consumed by the utilities API:
 
 {{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}}
 
-### Mixins
+Color mode background colors are also available as a Sass map:
+
+{{< scss-docs name="theme-bg-subtle-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" >}}
+
+### Sass mixins
 
 **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
 
@@ -127,7 +139,7 @@ And background color opacities build on that with their own map that's consumed
 
 {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}}
 
-### Utilities API
+## Utilities API
 
 Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 

site/content/docs/5.3/utilities/borders.md

@@ -166,6 +166,20 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 
 {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
 
+Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
+
+{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
+
+Color mode adaptive border colors are also available as a Sass map:
+
+{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}}
+
 ### Sass mixins
 
 {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}

site/content/docs/5.3/utilities/colors.md

@@ -87,11 +87,11 @@ Or, choose from any of the `.text-opacity` utilities:
 
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class.
 
-## Sass
+## CSS
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
 
-### Variables
+### Sass variables
 
 Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
@@ -103,7 +103,15 @@ Grayscale colors are also available, but only a subset are used to generate any
 
 {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
 
-### Map
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
+
+{{< scss-docs name="theme-text-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="theme-text-dark-variables" file="scss/_variables-dark.scss" >}}
+
+### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
 
@@ -117,10 +125,16 @@ RGB colors are generated from a separate Sass map:
 
 {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
-And color opacities build on that with their own map that's consumed by the utilities API:
+Color opacities build on that with their own map that's consumed by the utilities API:
 
 {{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
 
+Color mode adaptive text colors are also available as a Sass map:
+
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}}
+
 ### Utilities API
 
 Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

site/content/docs/5.3/utilities/text.md

@@ -137,19 +137,23 @@ Decorate text in components with text decoration classes.
 <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
 {{< /example >}}
 
-## Sass
+## CSS
 
-### Variables
+### Sass variables
+
+Default type and font related Sass variables:
 
 {{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
 
-### Maps
+### Sass maps
 
 Font-size utilities are generated from this map, in combination with our utilities API.
 
 {{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
 
-### Utilities API
+{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
+
+## Utilities API
 
 Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})