From 83b49aa688e30f0d2af22110b94c7d8b3deffcf0 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 6 Apr 2020 20:13:35 +0200
Subject: =?UTF-8?q?Create=20`scss-docs`=20shortcode=20to=20get=20some=20sn?=
 =?UTF-8?q?ippets=20from=20the=20Scs=E2=80=A6=20(#30502)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 site/content/docs/4.3/getting-started/theming.md | 39 ++++--------------------
 1 file changed, 6 insertions(+), 33 deletions(-)

(limited to 'site/content/docs/4.3/getting-started')

diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index e6ed6c198..7e5b984b8 100644
--- a/site/content/docs/4.3/getting-started/theming.md
+++ b/site/content/docs/4.3/getting-started/theming.md
@@ -172,14 +172,7 @@ In Bootstrap 5, we've dropped the `color()`, `theme-color()` and `gray()` functi
 
 We also have a function for getting a particular _level_ of color. Negative level values will lighten the color, while higher levels will darken.
 
-{{< highlight scss >}}
-@function color-level($color: $primary, $level: 0) {
-  $color-base: if($level > 0, #000, #fff);
-  $level: abs($level);
-
-  @return mix($color-base, $color, $level * $theme-color-interval);
-}
-{{< /highlight >}}
+{{< scss-docs name="color-level" file="scss/_functions.scss" >}}
 
 In practice, you'd call the function and pass in two parameters: the name of the color from `$theme-colors` (e.g., primary or danger) and a numeric level.
 
@@ -389,37 +382,17 @@ Many of Bootstrap's components and utilities are built with `@each` loops that i
 
 Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes.
 
-Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` component and all our `.bg-*` background utilities.
+Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` and `.list-group` components.
 
-{{< highlight scss >}}
-// Generate alert modifier classes
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    @include alert-variant(color-level($color, -10), color-level($color, -9), color-level($color, 6));
-  }
-}
+{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
 
-// Generate `.bg-*` color utilities
-@each $color, $value in $theme-colors {
-  @include bg-variant('.bg-#{$color}', $value);
-}
-{{< /highlight >}}
+{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
 
 ### Responsive
 
-These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include.
-
-{{< highlight scss >}}
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include.
 
-    .text#{$infix}-left   { text-align: left !important; }
-    .text#{$infix}-right  { text-align: right !important; }
-    .text#{$infix}-center { text-align: center !important; }
-  }
-}
-{{< /highlight >}}
+{{< scss-docs name="responsive-breakpoints" file="scss/_dropdown.scss" >}}
 
 Should you need to modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map.
 
-- 
cgit v1.2.3


From bfbf265a50a7ffe252324ea53272090ec12ae933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <ffoodd@users.noreply.github.com>
Date: Wed, 8 Apr 2020 12:50:57 +0200
Subject: Use correct hex color code(#30533)

---
 site/content/docs/4.3/getting-started/theming.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/content/docs/4.3/getting-started')

diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index 7e5b984b8..ff50369f2 100644
--- a/site/content/docs/4.3/getting-started/theming.md
+++ b/site/content/docs/4.3/getting-started/theming.md
@@ -122,7 +122,7 @@ $theme-colors: (
 To add a new color to `$theme-colors`, add the new key and value. Keep in mind not to remove the existing colors:
 
 {{< highlight scss >}}
-$my-custom-color: #ffoodd;
+$my-custom-color: #ff00dd;
 
 // Make sure to define `$primary`, `$secondary`, ect.. first
 $theme-colors: (
-- 
cgit v1.2.3