Convert pagination component to CSS variables (#35399)

* Convert pagination component to CSS variables

* Use RFS mixin

* Remove the useless fallback

3 files changed, 72 insertions, 43 deletions

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 9c466662e0..240d201529 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -1,4 +1,26 @@
 .pagination {
+  // scss-docs-start pagination-css-vars
+  --#{$variable-prefix}pagination-padding-x: #{$pagination-padding-x};
+  --#{$variable-prefix}pagination-padding-y: #{$pagination-padding-y};
+  --#{$variable-prefix}pagination-color: #{$pagination-color};
+  --#{$variable-prefix}pagination-bg: #{$pagination-bg};
+  --#{$variable-prefix}pagination-border-width: #{$pagination-border-width};
+  --#{$variable-prefix}pagination-border-color: #{$pagination-border-color};
+  --#{$variable-prefix}pagination-border-radius: #{$pagination-border-radius};
+  --#{$variable-prefix}pagination-hover-color: #{$pagination-hover-color};
+  --#{$variable-prefix}pagination-hover-bg: #{$pagination-hover-bg};
+  --#{$variable-prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
+  --#{$variable-prefix}pagination-focus-color: #{$pagination-focus-color};
+  --#{$variable-prefix}pagination-focus-bg: #{$pagination-focus-bg};
+  --#{$variable-prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+  --#{$variable-prefix}pagination-active-color: #{$pagination-active-color};
+  --#{$variable-prefix}pagination-active-bg: #{$pagination-active-bg};
+  --#{$variable-prefix}pagination-active-border-color: #{$pagination-active-border-color};
+  --#{$variable-prefix}pagination-disabled-color: #{$pagination-disabled-color};
+  --#{$variable-prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
+  --#{$variable-prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
+  // scss-docs-end pagination-css-vars
+
   display: flex;
   @include list-unstyled();
 }
@@ -6,26 +28,28 @@
 .page-link {
   position: relative;
   display: block;
-  color: $pagination-color;
+  padding: var(--#{$variable-prefix}pagination-padding-y) var(--#{$variable-prefix}pagination-padding-x);
+  font-size: var(--#{$variable-prefix}pagination-font-size);
+  color: var(--#{$variable-prefix}pagination-color);
   text-decoration: if($link-decoration == none, null, none);
-  background-color: $pagination-bg;
-  border: $pagination-border-width solid $pagination-border-color;
+  background-color: var(--#{$variable-prefix}pagination-bg);
+  border: var(--#{$variable-prefix}pagination-border-width) solid var(--#{$variable-prefix}pagination-border-color);
   @include transition($pagination-transition);
 
   &:hover {
     z-index: 2;
-    color: $pagination-hover-color;
+    color: var(--#{$variable-prefix}pagination-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border-color;
+    background-color: var(--#{$variable-prefix}pagination-hover-bg);
+    border-color: var(--#{$variable-prefix}pagination-hover-border-color);
   }
 
   &:focus {
     z-index: 3;
-    color: $pagination-focus-color;
-    background-color: $pagination-focus-bg;
+    color: var(--#{$variable-prefix}pagination-focus-color);
+    background-color: var(--#{$variable-prefix}pagination-focus-bg);
     outline: $pagination-focus-outline;
-    box-shadow: $pagination-focus-box-shadow;
+    box-shadow: var(--#{$variable-prefix}pagination-focus-box-shadow);
   }
 }
 
@@ -34,18 +58,37 @@
     margin-left: $pagination-margin-start;
   }
 
+  @if $pagination-margin-start == (-$pagination-border-width) {
+    &:first-child {
+      .page-link {
+        @include border-start-radius(var(--#{$variable-prefix}pagination-border-radius));
+      }
+    }
+
+    &:last-child {
+      .page-link {
+        @include border-end-radius(var(--#{$variable-prefix}pagination-border-radius));
+      }
+    }
+  } @else {
+    // Add border-radius to all pageLinks in case they have left margin
+    .page-link {
+      @include border-radius(var(--#{$variable-prefix}pagination-border-radius));
+    }
+  }
+
   &.active .page-link {
     z-index: 3;
-    color: $pagination-active-color;
-    @include gradient-bg($pagination-active-bg);
-    border-color: $pagination-active-border-color;
+    color: var(--#{$variable-prefix}pagination-active-color);
+    @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg));
+    border-color: var(--#{$variable-prefix}pagination-active-border-color);
   }
 
   &.disabled .page-link {
-    color: $pagination-disabled-color;
+    color: var(--#{$variable-prefix}pagination-disabled-color);
     pointer-events: none;
-    background-color: $pagination-disabled-bg;
-    border-color: $pagination-disabled-border-color;
+    background-color: var(--#{$variable-prefix}pagination-disabled-bg);
+    border-color: var(--#{$variable-prefix}pagination-disabled-border-color);
   }
 }
 
@@ -53,7 +96,6 @@
 //
 // Sizing
 //
-@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);
 
 .pagination-lg {
   @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 3101b380da..6738dc2a8b 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -2,30 +2,9 @@
 
 // scss-docs-start pagination-mixin
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
-  .page-link {
-    padding: $padding-y $padding-x;
-    @include font-size($font-size);
-  }
-
-  .page-item {
-    @if $pagination-margin-start == (-$pagination-border-width) {
-      &:first-child {
-        .page-link {
-          @include border-start-radius($border-radius);
-        }
-      }
-
-      &:last-child {
-        .page-link {
-          @include border-end-radius($border-radius);
-        }
-      }
-    } @else {
-      //Add border-radius to all pageLinks in case they have left margin
-      .page-link {
-        @include border-radius($border-radius);
-      }
-    }
-  }
+  --#{$variable-prefix}pagination-padding-x: #{$padding-x};
+  --#{$variable-prefix}pagination-padding-y: #{$padding-y};
+  @include rfs($font-size, --#{$variable-prefix}pagination-font-size);
+  --#{$variable-prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before
 }
 // scss-docs-end pagination-mixin
diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.1/components/pagination.md
index 7e70a77e14..58f3fab638 100644
--- a/site/content/docs/5.1/components/pagination.md
+++ b/site/content/docs/5.1/components/pagination.md
@@ -156,12 +156,20 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
 </nav>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}