Sass docs updates (#37897)

* Add maps

* Redesign scss-docs rendering

* Update other CSS sections

* Fix linter

3 files changed, 24 insertions, 0 deletions

diff --git a/scss/_maps.scss b/scss/_maps.scss
index 46952baa1..d299452a8 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -6,6 +6,7 @@
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
+// scss-docs-start theme-text-map
 $theme-colors-text: (
   "primary": $primary-text,
   "secondary": $secondary-text,
@@ -16,7 +17,9 @@ $theme-colors-text: (
   "light": $light-text,
   "dark": $dark-text,
 ) !default;
+// scss-docs-end theme-text-map
 
+// scss-docs-start theme-bg-subtle-map
 $theme-colors-bg-subtle: (
   "primary": $primary-bg-subtle,
   "secondary": $secondary-bg-subtle,
@@ -27,7 +30,9 @@ $theme-colors-bg-subtle: (
   "light": $light-bg-subtle,
   "dark": $dark-bg-subtle,
 ) !default;
+// scss-docs-end theme-bg-subtle-map
 
+// scss-docs-start theme-border-subtle-map
 $theme-colors-border-subtle: (
   "primary": $primary-border-subtle,
   "secondary": $secondary-border-subtle,
@@ -38,12 +43,14 @@ $theme-colors-border-subtle: (
   "light": $light-border-subtle,
   "dark": $dark-border-subtle,
 ) !default;
+// scss-docs-end theme-border-subtle-map
 
 $theme-colors-text-dark: null !default;
 $theme-colors-bg-subtle-dark: null !default;
 $theme-colors-border-subtle-dark: null !default;
 
 @if $enable-dark-mode {
+  // scss-docs-start theme-text-dark-map
   $theme-colors-text-dark: (
     "primary": $primary-text-dark,
     "secondary": $secondary-text-dark,
@@ -54,7 +61,9 @@ $theme-colors-border-subtle-dark: null !default;
     "light": $light-text-dark,
     "dark": $dark-text-dark,
   ) !default;
+  // scss-docs-end theme-text-dark-map
 
+  // scss-docs-start theme-bg-subtle-dark-map
   $theme-colors-bg-subtle-dark: (
     "primary": $primary-bg-subtle-dark,
     "secondary": $secondary-bg-subtle-dark,
@@ -65,7 +74,9 @@ $theme-colors-border-subtle-dark: null !default;
     "light": $light-bg-subtle-dark,
     "dark": $dark-bg-subtle-dark,
   ) !default;
+  // scss-docs-end theme-bg-subtle-dark-map
 
+  // scss-docs-start theme-border-subtle-dark-map
   $theme-colors-border-subtle-dark: (
     "primary": $primary-border-subtle-dark,
     "secondary": $secondary-border-subtle-dark,
@@ -76,6 +87,7 @@ $theme-colors-border-subtle-dark: null !default;
     "light": $light-border-subtle-dark,
     "dark": $dark-border-subtle-dark,
   ) !default;
+  // scss-docs-end theme-border-subtle-dark-map
 }
 
 // Utilities maps
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index c3b4640a4..88256a1c3 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -7,6 +7,7 @@
 //
 
 // scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
 $primary-text-dark:                 $blue-300 !default;
 $secondary-text-dark:               $gray-300 !default;
 $success-text-dark:                 $green-300 !default;
@@ -15,7 +16,9 @@ $warning-text-dark:                 $yellow-300 !default;
 $danger-text-dark:                  $red-300 !default;
 $light-text-dark:                   $gray-100 !default;
 $dark-text-dark:                    $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
 
+// scss-docs-start theme-bg-subtle-dark-variables
 $primary-bg-subtle-dark:            $blue-900 !default;
 $secondary-bg-subtle-dark:          $gray-900 !default;
 $success-bg-subtle-dark:            $green-900 !default;
@@ -24,7 +27,9 @@ $warning-bg-subtle-dark:            $yellow-900 !default;
 $danger-bg-subtle-dark:             $red-900 !default;
 $light-bg-subtle-dark:              $gray-800 !default;
 $dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
 
+// scss-docs-start theme-border-subtle-dark-variables
 $primary-border-subtle-dark:        $blue-700 !default;
 $secondary-border-subtle-dark:      $gray-700 !default;
 $success-border-subtle-dark:        $green-700 !default;
@@ -33,6 +38,7 @@ $warning-border-subtle-dark:        $yellow-800 !default;
 $danger-border-subtle-dark:         $red-700 !default;
 $light-border-subtle-dark:          $gray-700 !default;
 $dark-border-subtle-dark:           $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
 
 $body-color-dark:                   $gray-500 !default;
 $body-bg-dark:                      $gray-900 !default;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7db6e4aa0..ddd7e5c38 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -321,6 +321,7 @@ $theme-colors: (
 ) !default;
 // scss-docs-end theme-colors-map
 
+// scss-docs-start theme-text-variables
 $primary-text:            $blue-700 !default;
 $secondary-text:          $gray-700 !default;
 $success-text:            $green-700 !default;
@@ -329,7 +330,9 @@ $warning-text:            $yellow-800 !default;
 $danger-text:             $red-700 !default;
 $light-text:              $gray-700 !default;
 $dark-text:               $gray-700 !default;
+// scss-docs-end theme-text-variables
 
+// scss-docs-start theme-bg-subtle-variables
 $primary-bg-subtle:       $blue-100 !default;
 $secondary-bg-subtle:     $gray-100 !default;
 $success-bg-subtle:       $green-100 !default;
@@ -338,7 +341,9 @@ $warning-bg-subtle:       $yellow-100 !default;
 $danger-bg-subtle:        $red-100 !default;
 $light-bg-subtle:         mix($gray-100, $white) !default;
 $dark-bg-subtle:          $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
 
+// scss-docs-start theme-border-subtle-variables
 $primary-border-subtle:   $blue-200 !default;
 $secondary-border-subtle: $gray-200 !default;
 $success-border-subtle:   $green-200 !default;
@@ -347,6 +352,7 @@ $warning-border-subtle:   $yellow-200 !default;
 $danger-border-subtle:    $red-200 !default;
 $light-border-subtle:     $gray-200 !default;
 $dark-border-subtle:      $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
 
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (