Drop dark pagination

Orange-OpenSource · Sep 27, 2023 · 26699d0 · 26699d0
1 parent 2ad7cf6
commit 26699d0
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 78 deletions.
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -211,26 +211,4 @@
 
 // Boosted mod: no pagination sizes
 
-// Boosted mod: dark variant
-.pagination-dark {
-  // scss-docs-start pagination-dark-css-vars
-  --#{$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
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1634,33 +1634,6 @@ $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
 

diff --git a/site/content/docs/5.3/components/pagination.md b/site/content/docs/5.3/components/pagination.md
@@ -146,27 +146,13 @@ To avoid pagination wrapping or overflowing, we limit the number or pagination i
 
 ## Dark variant
 
-{{< added-in "5.2.1" >}}
+{{< deprecated-in "5.3.3" >}}
 
-Add `.pagination-dark` to the `.pagination` for a dark variant.
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< 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 >}}
+Add `data-bs-theme="dark"` to the `.pagination` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 <!-- End mod -->
 
 ## CSS
@@ -179,20 +165,10 @@ 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" >}}