diff options
| -rw-r--r-- | scss/_variables.scss | 4 | ||||
| -rw-r--r-- | 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 a3d1df747..bef7c3841 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 bf04525f1..9e36bc976 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. |