feat(breadcrumb): add dark variant (#1430)

Co-authored-by: Julien Déramond <[email protected]>

.bundlewatch.config.json

@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "33.5 kB"
+      "maxSize": "33.75 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_breadcrumb.scss

@@ -5,6 +5,7 @@
   --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
   @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
   --#{$prefix}breadcrumb-font-weight: #{$breadcrumb-font-weight}; // Boosted mod
+  --#{$prefix}breadcrumb-color: #{$breadcrumb-color}; // Boosted mod
   --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
   --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
   --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
@@ -18,6 +19,7 @@
   margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
   @include font-size(var(--#{$prefix}breadcrumb-font-size));
   font-weight: var(--#{$prefix}breadcrumb-font-weight); // Boosted mod
+  color: var(--#{$prefix}breadcrumb-color); // Boosted mod
   list-style: none;
   background-color: var(--#{$prefix}breadcrumb-bg);
   @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
@@ -46,3 +48,18 @@
     color: var(--#{$prefix}breadcrumb-item-active-color);
   }
 }
+
+// Boosted mod
+.breadcrumb-dark {
+  // scss-docs-start breadcrumb-dark-css-vars
+  --#{$prefix}breadcrumb-color: #{$breadcrumb-dark-color}; // Boosted mod
+  --#{$prefix}breadcrumb-bg: #{$breadcrumb-dark-bg}; // Boosted mod
+  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-dark-divider-color}; // Boosted mod
+  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-dark-active-color}; // Boosted mod
+  // scss-docs-end breadcrumb-dark-css-vars
+
+  .breadcrumb-item::before {
+    filter: $invert-filter;
+  }
+}
+// End mod

scss/_pagination.scss

@@ -211,23 +211,23 @@
 // Boosted mod: dark variant
 .pagination-dark {
   // scss-docs-start pagination-dark-css-vars
-  --#{$prefix}pagination-color: #{$pagination-dark-color};
-  --#{$prefix}pagination-bg: #{$pagination-dark-bg};
-  --#{$prefix}pagination-border-color: #{$pagination-dark-border-color};
-  --#{$prefix}pagination-hover-color: #{$pagination-dark-hover-color};
-  --#{$prefix}pagination-hover-bg: #{$pagination-dark-hover-bg};
-  --#{$prefix}pagination-hover-border-color: #{$pagination-dark-hover-border-color};
-  --#{$prefix}pagination-focus-color: #{$pagination-dark-focus-color};
-  --#{$prefix}pagination-focus-bg: #{$pagination-dark-focus-bg};
-  --#{$prefix}pagination-active-color: #{$pagination-dark-active-color};
-  --#{$prefix}pagination-active-bg: #{$pagination-dark-active-bg};
-  --#{$prefix}pagination-active-border-color: #{$pagination-dark-active-border-color};
-  --#{$prefix}pagination-active-item-color: #{$pagination-dark-active-item-color};
-  --#{$prefix}pagination-active-item-bg: #{$pagination-dark-active-item-bg};
-  --#{$prefix}pagination-active-item-border-color: #{$pagination-dark-active-item-border-color};
-  --#{$prefix}pagination-disabled-color: #{$pagination-dark-disabled-color};
-  --#{$prefix}pagination-disabled-bg: #{$pagination-dark-disabled-bg};
-  --#{$prefix}pagination-disabled-border-color: #{$pagination-dark-disabled-border-color};
+  --#{$prefix}pagination-color: #{$pagination-dark-color}; // Boosted mod
+  --#{$prefix}pagination-bg: #{$pagination-dark-bg}; // Boosted mod
+  --#{$prefix}pagination-border-color: #{$pagination-dark-border-color}; // Boosted mod
+  --#{$prefix}pagination-hover-color: #{$pagination-dark-hover-color}; // Boosted mod
+  --#{$prefix}pagination-hover-bg: #{$pagination-dark-hover-bg}; // Boosted mod
+  --#{$prefix}pagination-hover-border-color: #{$pagination-dark-hover-border-color}; // Boosted mod
+  --#{$prefix}pagination-focus-color: #{$pagination-dark-focus-color}; // Boosted mod
+  --#{$prefix}pagination-focus-bg: #{$pagination-dark-focus-bg}; // Boosted mod
+  --#{$prefix}pagination-active-color: #{$pagination-dark-active-color}; // Boosted mod
+  --#{$prefix}pagination-active-bg: #{$pagination-dark-active-bg}; // Boosted mod
+  --#{$prefix}pagination-active-border-color: #{$pagination-dark-active-border-color}; // Boosted mod
+  --#{$prefix}pagination-active-item-color: #{$pagination-dark-active-item-color}; // Boosted mod
+  --#{$prefix}pagination-active-item-bg: #{$pagination-dark-active-item-bg}; // Boosted mod
+  --#{$prefix}pagination-active-item-border-color: #{$pagination-dark-active-item-border-color}; // Boosted mod
+  --#{$prefix}pagination-disabled-color: #{$pagination-dark-disabled-color}; // Boosted mod
+  --#{$prefix}pagination-disabled-bg: #{$pagination-dark-disabled-bg}; // Boosted mod
+  --#{$prefix}pagination-disabled-border-color: #{$pagination-dark-disabled-border-color}; // Boosted mod
   // scss-docs-end pagination-dark-css-vars
 }
 // End mod

scss/_variables.scss

@@ -1835,6 +1835,7 @@ $breadcrumb-padding-y:              .5rem !default;
 $breadcrumb-padding-x:              0 !default;
 $breadcrumb-item-padding-x:         $spacer * .5 !default;
 $breadcrumb-margin-bottom:          1rem !default;
+$breadcrumb-color:                  $black !default; // Boosted mod
 $breadcrumb-bg:                     null !default;
 $breadcrumb-divider-color:          null !default;
 $breadcrumb-active-color:           null !default;
@@ -1843,6 +1844,13 @@ $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;
 // scss-docs-end breadcrumb-variables
 
+// scss-docs-start breadcrumb-dark-variables
+$breadcrumb-dark-color:             $white !default; // Boosted mod
+$breadcrumb-dark-bg:                null !default; // Boosted mod
+$breadcrumb-dark-divider-color:     $black !default; // Boosted mod: since the divider is inverted for SVG reasons
+$breadcrumb-dark-active-color:      null !default; // Boosted mod
+// scss-docs-end breadcrumb-dark-variables
+
 
 // Carousel
 

site/content/docs/5.2/components/breadcrumb.md

@@ -90,6 +90,24 @@ You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty st
 $breadcrumb-divider: none;
 ```
 
+<!-- Boosted mod: Dark variant -->
+## Dark variant
+
+{{< added-in "5.2.1" >}}
+
+Add `.breadcrumb-dark` to the `.breadcrumb` for a dark variant.
+
+{{< example class="bg-dark" >}}
+<nav aria-label="dark breadcrumb">
+  <ol class="breadcrumb breadcrumb-dark">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    <li class="breadcrumb-item"><a href="#">Library</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Data</li>
+  </ol>
+</nav>
+{{< /example >}}
+<!-- End mod -->
+
 ## Accessibility
 
 Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
@@ -106,6 +124,20 @@ As part of Boosted's evolving CSS variables approach, breadcrumbs now use local
 
 {{< scss-docs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" >}}
 
+<!-- Boosted mod: Dark variant -->
+Customization through CSS variables can be seen on the `.breadcrumb-dark` modifier class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="breadcrumb-dark-css-vars" file="scss/_breadcrumb.scss" >}}
+<!-- End mod -->
+
 ### Sass variables
 
+Variables for all breadcrumbs:
+
 {{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}
+
+<!-- Boosted mod: Dark variant -->
+Variables for [dark breadcrumb](#dark-variant):
+
+{{< scss-docs name="breadcrumb-dark-variables" file="scss/_variables.scss" >}}
+<!-- End mod -->