From 88490fe81d1cc7b9da16c2a60405f8c86c19d2f1 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 14 Apr 2020 11:04:16 -0700
Subject: [PATCH] Use scss-docs for color maps

---
 scss/_variables.scss                     |  4 +++
 site/content/docs/4.3/customize/color.md | 31 ++----------------------
 2 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index a3d1df747b..bef7c38410 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -42,6 +42,7 @@ $green:   #28a745 !default;
 $teal:    #20c997 !default;
 $cyan:    #17a2b8 !default;
 
+// scss-docs-start colors-map
 $colors: (
   "blue":       $blue,
   "indigo":     $indigo,
@@ -57,6 +58,7 @@ $colors: (
   "gray":       $gray-600,
   "gray-dark":  $gray-800
 ) !default;
+// scss-docs-end colors-map
 
 $primary:       $blue !default;
 $secondary:     $gray-600 !default;
@@ -67,6 +69,7 @@ $danger:        $red !default;
 $light:         $gray-100 !default;
 $dark:          $gray-800 !default;
 
+// scss-docs-start theme-colors-map
 $theme-colors: (
   "primary":    $primary,
   "secondary":  $secondary,
@@ -77,6 +80,7 @@ $theme-colors: (
   "light":      $light,
   "dark":       $dark
 ) !default;
+// scss-docs-end theme-colors-map
 
 // Set a specific jump point for requesting color jumps
 $theme-color-interval: 8% !default;
diff --git a/site/content/docs/4.3/customize/color.md b/site/content/docs/4.3/customize/color.md
index bf04525f1b..9e36bc9760 100644
--- a/site/content/docs/4.3/customize/color.md
+++ b/site/content/docs/4.3/customize/color.md
@@ -22,18 +22,7 @@ We use a subset of all colors to create a smaller color palette for generating c
 
 All these colors are available as a Sass map, `$theme-colors`.
 
-{{< highlight scss >}}
-$theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark
-) !default;
-{{< /highlight >}}
+{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
 
 Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
 
@@ -98,23 +87,7 @@ Bootstrap's source Sass files include three maps to help you quickly and easily
 
 Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
 
-{{< highlight scss >}}
-$colors: (
-  "blue": $blue,
-  "indigo": $indigo,
-  "purple": $purple,
-  "pink": $pink,
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "green": $green,
-  "teal": $teal,
-  "cyan": $cyan,
-  "white": $white,
-  "gray": $gray-600,
-  "gray-dark": $gray-800
-) !default;
-{{< /highlight >}}
+{{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
 
 Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.