feat(pagination): add dark variant (#1433)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

.bundlewatch.config.json

@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "36.5 kB"
+      "maxSize": "36.75 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

.cspell.json

@@ -85,6 +85,7 @@
     "offcanvas",
     "offcanvases",
     "opensource",
+    "paginations",
     "Packagist",
     "pinterest",
     "popperjs",

scss/_pagination.scss

@@ -21,6 +21,7 @@
   --#{$prefix}pagination-active-color: #{$pagination-active-color};
   --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
   --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
+  --#{$prefix}pagination-active-item-color: #{$pagination-active-item-color}; // Boosted mod
   --#{$prefix}pagination-active-item-bg: #{$pagination-active-item-bg}; // Boosted mod
   --#{$prefix}pagination-active-item-border-color: #{$pagination-active-item-border}; // Boosted mod
   --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
@@ -82,7 +83,7 @@
   // Boosted mod
   &:active,
   &:active > & {
-    color: color-contrast($pagination-active-item-bg);
+    color: var(--#{$prefix}pagination-active-item-color);
     background-color: var(--#{$prefix}pagination-active-item-bg);
     border-color: var(--#{$prefix}pagination-active-item-border-color);
     outline-color: var(--#{$prefix}pagination-active-item-border-color);
@@ -148,7 +149,7 @@
     }
 
     &:active {
-      color: color-contrast($pagination-active-item-bg);
+      color: var(--#{$prefix}pagination-active-item-color);
       background-color: var(--#{$prefix}pagination-active-item-bg);
       border-color: var(--#{$prefix}pagination-active-item-border-color);
       outline-color: var(--#{$prefix}pagination-active-item-border-color);
@@ -206,3 +207,27 @@
 //
 
 // Boosted mod: no pagination sizes
+
+// 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};
+  // scss-docs-end pagination-dark-css-vars
+}
+// End mod

scss/_variables.scss

@@ -1432,11 +1432,40 @@ $pagination-icon:                   var(--#{$boosted-prefix}chevron-icon) !defau
 $pagination-icon-size:              subtract($spacer * 2, $border-width * 2) !default;
 $pagination-icon-width:             add(.5rem, 1px) !default;
 $pagination-icon-height:            subtract(1rem, 1px) !default;
+
 $pagination-active-item-bg:         $primary !default;
+$pagination-active-item-color:      color-contrast($pagination-active-item-bg) !default;
 $pagination-active-item-border:     $pagination-active-item-bg !default;
 // End mod
 // scss-docs-end pagination-variables
 
+// scss-docs-start pagination-dark-variables
+// Boosted mod
+$pagination-dark-bg:                        $black !default;
+$pagination-dark-color:                     color-contrast($pagination-dark-bg) !default;
+$pagination-dark-border-color:              transparent !default;
+
+$pagination-dark-hover-bg:                  $black !default;
+$pagination-dark-hover-color:               color-contrast($pagination-dark-hover-bg) !default;
+$pagination-dark-hover-border-color:        $gray-700 !default;
+
+$pagination-dark-focus-bg:                  $black !default;
+$pagination-dark-focus-color:               color-contrast($pagination-dark-focus-bg) !default;
+
+$pagination-dark-active-bg:                 $white !default;
+$pagination-dark-active-color:              color-contrast($pagination-dark-active-bg) !default;
+$pagination-dark-active-border-color:       $white !default;
+
+$pagination-dark-active-item-bg:            $brand-orange !default;
+$pagination-dark-active-item-color:         color-contrast($pagination-dark-active-item-bg) !default;
+$pagination-dark-active-item-border-color:  $brand-orange !default;
+
+$pagination-dark-disabled-bg:               $black !default;
+$pagination-dark-disabled-color:            $gray-700 !default;
+$pagination-dark-disabled-border-color:     $gray-700 !default;
+// End mod
+// scss-docs-end pagination-dark-variables
+
 
 // Placeholders
 

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

@@ -141,6 +141,30 @@ To avoid pagination wrapping or overflowing, we limit the number or pagination i
   </ul>
 </nav>
 {{< /example >}}
+
+## Dark variant
+
+{{< added-in "5.2.1" >}}
+
+Add `.pagination-dark` to the `.pagination` for a dark variant.
+
+{{< example class="bg-dark" >}}
+<nav aria-label="Dark page navigation example">
+  <ul class="pagination pagination-dark">
+    <li class="page-item disabled">
+      <a class="page-link">Previous</a>
+    </li>
+    <li class="page-item active" aria-current="page">
+      <a class="page-link" href="#">1</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</nav>
+{{< /example >}}
 <!-- End mod -->
 
 ## CSS
@@ -153,10 +177,20 @@ As part of Boosted's evolving CSS variables approach, pagination now uses local
 
 {{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
 
+Customization through CSS variables can be seen on the `.pagination-dark` modifier class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="pagination-dark-css-vars" file="scss/_pagination.scss" >}}
+
 ### Sass variables
 
+Variables for all paginations:
+
 {{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
 
+Variables for the [dark pagination](#dark-variant):
+
+{{< scss-docs name="pagination-dark-variables" file="scss/_variables.scss" >}}
+
 ### Sass mixins
 
 {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}

site/content/docs/5.2/components/stepped-process.md

@@ -41,6 +41,8 @@ Add `.active` to a `.stepped-process-item` to indicate the current step, alongsi
 
 ## Dark variant
 
+{{< added-in "5.2.1" >}}
+
 Stepped process comes with a dark variant: `.stepped-process-dark`.
 
 {{< example class="bg-dark" >}}