Dark mode: pagination (#2314)

Orange-OpenSource · Dec 21, 2023 · 4854b4c · 4854b4c
1 parent b96c87f
commit 4854b4c
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 24 deletions.
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -15,9 +15,9 @@
   --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
   --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
   --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
-  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
-  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
-  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+  // Boosted mod: no --#{$prefix}pagination-focus-color
+  // Boosted mod: no --#{$prefix}pagination-focus-bg
+  // Boosted mod: no --#{$prefix}pagination-focus-box-shadow
   --#{$prefix}pagination-active-color: #{$pagination-active-color};
   --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
   --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
@@ -71,13 +71,7 @@
     border-color: var(--#{$prefix}pagination-hover-border-color);
   }
 
-  &:focus {
-    z-index: 5; // Boosted mod
-    color: var(--#{$prefix}pagination-focus-color);
-    background-color: var(--#{$prefix}pagination-focus-bg);
-    outline: $pagination-focus-outline;
-    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
-  }
+  // Boosted mod: no focus
 
   // Boosted mod
   &:active,

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1627,38 +1627,45 @@ $dropdown-dark-header-color:        $white !default; // Boosted mod
 // Pagination
 
 // scss-docs-start pagination-variables
-$pagination-padding-y:              null !default;
-$pagination-padding-x:              null !default;
+$pagination-padding-y:              null !default; // Boosted mod: instead of `.375rem`
+$pagination-padding-x:              null !default; // Boosted mod: instead of `.75rem`
+// Boosted mod: no $pagination-padding-y-sm
+// Boosted mod: no $pagination-padding-x-sm
+// Boosted mod: no $pagination-padding-y-lg
+// Boosted mod: no $pagination-padding-x-lg
 
 $pagination-font-size:              $font-size-base !default;
 
-$pagination-color:                  null !default;
-$pagination-bg:                     var(--#{$prefix}body-bg) !default;
+$pagination-color:                  var(--#{$prefix}link-color) !default;
+$pagination-bg:                     transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
 $pagination-margin-y:               $spacer !default; // Boosted mod
 $pagination-margin-start:           0 !default; // Boosted mod: instead of `calc($pagination-border-width * -1)`
 $pagination-margin-x-first-last:    $spacer * .5 !default; // Boosted mod
 $pagination-border-color:           transparent !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
+// Deprecated in v5.3.3
+// fusv-disable
 $pagination-focus-color:            null !default; // Boosted mod
 $pagination-focus-bg:               null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
 $pagination-focus-box-shadow:       0 0 0 $focus-visible-inner-width var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod: no `$focus-ring-box-shadow`
 $pagination-focus-outline:          null !default; // Boosted mod
+// fusv-enable
 
-$pagination-hover-color:            var(--#{$prefix}link-color) !default; // Boosted mod
-$pagination-hover-bg:               null !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
-$pagination-hover-border-color:     $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
+$pagination-hover-color:            var(--#{$prefix}link-color) !default; // Boosted mod: instead of `var(--#{$prefix}link-hover-color)`
+$pagination-hover-bg:               var(--#{$prefix}active-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
+$pagination-hover-border-color:     $pagination-hover-bg !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
-$pagination-active-color:           $white !default;
-$pagination-active-bg:              $black !default;
+$pagination-active-color:           var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
+$pagination-active-bg:              var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `$component-active-bg`
 $pagination-active-border-color:    $pagination-active-bg !default; // Boosted mod: instead of `$component-active-bg`
 
-$pagination-disabled-color:         $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$pagination-disabled-bg:            $white !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
-$pagination-disabled-border-color:  $pagination-disabled-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
+$pagination-disabled-color:         var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
+$pagination-disabled-bg:            transparent !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
+$pagination-disabled-border-color:  transparent !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
-$pagination-transition:             $transition-focus !default;
+$pagination-transition:             $transition-focus !default; // Boosted mod: no color, bg-color, border-color, box-shadow
 
 // Boosted mod: no $pagination-border-radius-sm
 // Boosted mod: no $pagination-border-radius-lg
@@ -1671,7 +1678,7 @@ $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-color:      $black !default;
 $pagination-active-item-border:     $pagination-active-item-bg !default;
 // End mod
 // scss-docs-end pagination-variables

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -1821,6 +1821,163 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Pagination
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3">
+  <nav aria-label="Page navigation example">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete">
+    <ul class="pagination mb-0">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav aria-label="Page navigation example2">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons2">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete2">
+    <ul class="pagination mb-0">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav aria-label="Page navigation example3">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons3">
+    <ul class="pagination mb-0">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete3">
+    <ul class="pagination mb-0">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #282d55;">
+  <nav aria-label="Page navigation example4">
+    <ul class="pagination mb-0" data-bs-theme="dark">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons4">
+    <ul class="pagination mb-0" data-bs-theme="dark">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete4">
+    <ul class="pagination mb-0" data-bs-theme="dark">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column gap-2 border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav aria-label="Page navigation example5">
+    <ul class="pagination mb-0" data-bs-theme="light">
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true">Previous</a></li>
+      <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example icons5">
+    <ul class="pagination mb-0" data-bs-theme="light">
+      <li class="page-item"><a class="page-link" href="#" aria-label="Previous"></a></li>
+      <li class="page-item"><a class="page-link disabled" aria-label="Next" aria-disabled="true"></a></li>
+    </ul>
+  </nav>
+  <nav aria-label="Page navigation example complete5">
+    <ul class="pagination mb-0" data-bs-theme="light">
+      <li class="page-item disabled">
+        <a class="page-link">Previous</a>
+      </li>
+      <li class="page-item"><a class="page-link" href="#">1</a></li>
+      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link disabled">3</a></li>
+      <li class="page-item disabled"><a class="page-link">4</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next"></a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
 ### Popovers
 
 <h4 class="mt-3">No theme</h4>