From bf8d630349a6d6db8c18a824db8699ef3a7b77ac Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Fri, 3 May 2024 15:08:38 -0400
Subject: [PATCH 01/15] feat(pagination): add support for dark theme

---
 .changeset/nice-kangaroos-kiss.md             |  5 +++
 .../rh-pagination/demo/color-context.html     | 17 ++++++++
 .../rh-pagination/rh-pagination-lightdom.css  | 17 ++++----
 elements/rh-pagination/rh-pagination.css      | 39 ++++++++++++++++---
 elements/rh-pagination/rh-pagination.ts       |  9 ++++-
 5 files changed, 72 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/nice-kangaroos-kiss.md
 create mode 100644 elements/rh-pagination/demo/color-context.html

diff --git a/.changeset/nice-kangaroos-kiss.md b/.changeset/nice-kangaroos-kiss.md
new file mode 100644
index 0000000000..8a7d8f5c2b
--- /dev/null
+++ b/.changeset/nice-kangaroos-kiss.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-pagination>`: Added dark mode support
diff --git a/elements/rh-pagination/demo/color-context.html b/elements/rh-pagination/demo/color-context.html
new file mode 100644
index 0000000000..31f9d60f1e
--- /dev/null
+++ b/elements/rh-pagination/demo/color-context.html
@@ -0,0 +1,17 @@
+<rh-context-demo>
+  <rh-pagination>
+    <ol>
+      <li><a href="#">1</a></li>
+      <li><a href="#2">2</a></li>
+      <li><a href="#3">3</a></li>
+      <li><a href="#4">4</a></li>
+      <li><a href="#5">5</a></li>
+    </ol>
+  </rh-pagination>
+  <link rel="stylesheet" href="../rh-pagination-lightdom.css">
+</rh-context-demo>
+
+<script type="module">
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+  import '@rhds/elements/rh-pagination/rh-pagination.js';
+</script>
diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css
index bcc60ab111..ba35fb9609 100644
--- a/elements/rh-pagination/rh-pagination-lightdom.css
+++ b/elements/rh-pagination/rh-pagination-lightdom.css
@@ -17,24 +17,24 @@ rh-pagination li {
 
 rh-pagination li > a {
   text-decoration: none;
-  color: var(--rh-color-text-primary-on-light, #151515);
+  color: var(--_list-anchor-text-color, var(--rh-color-text-primary-on-light, #151515));
   font-weight: var(--rh-font-weight-body-text-medium, 500);
   outline: none;
   width: var(--_link-size);
   height: var(--_link-size);
   display: grid;
   place-content: center;
-  background: var(--rh-color-surface-lighter, #f2f2f2);
+  background: var(--_list-anchor-bg-color, var(--rh-color-surface-lighter, #f2f2f2));
   box-sizing: border-box;
 }
 
 rh-pagination li a[aria-current="page"] {
-  background: var(--rh-color-surface-lightest, #ffffff);
+  background: var(--_list-anchor-current-page-bg-color, var(--rh-color-surface-lightest, #ffffff));
   position: relative;
 
-  --_border-color: #b8bbbe;
+  --_border-color: var(--_list-anchor-current-page-border-color, #b8bbbe);
   --_border-width: 1px;
-  --_border-accent-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  --_border-accent-color: var(--_list-anchor-current-page-border-color-accent, var(--rh-color-interactive-blue-darker, #0066cc));
 }
 
 rh-pagination li a {
@@ -72,12 +72,13 @@ rh-pagination li a:is(:focus, :focus-within, :focus-visible) {
 
 rh-pagination li a[aria-current="page"]:is(:focus, :focus-within, :focus-visible) {
   --_border-width: 2px;
-  --_border-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  --_border-color: var(--_list-anchor-current-page-border-color-focus, var(--rh-color-interactive-blue-darker, #0066cc));
   --_border-accent-width: 3px;
 }
 
-rh-pagination li a:hover {
-  --_border-accent-color: var(--rh-color-gray-50, #707070);
+rh-pagination li a:hover::after {
+  --_border-accent-color: var(--_list-anchor-border-color-hover, var(--rh-color-border-status-default-on-light, #4d4d4d));
+  content: '';
 }
 
 rh-pagination li a:is([aria-current="page"], :hover) {
diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index b10084a75e..3f9da378de 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -13,6 +13,25 @@
   flex-wrap: wrap;
 }
 
+#container.dark {
+  --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
+  --rh-pagination-accent-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --rh-pagination-stepper-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
+  --_stepper-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
+  --_list-anchor-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --_list-anchor-bg-color: var(--rh-color-surface-dark-alt, #292929);
+  --_list-anchor-border-color-hover: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --_list-anchor-current-page-bg-color: var(--rh-color-canvas-black, #151515);
+  --_list-anchor-current-page-border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  --_list-anchor-current-page-border-color-accent: var(--rh-color-border-interactive-on-dark, #92c5f9);
+  --_list-anchor-current-page-border-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --_numeric-link: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --_numeric-link-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --_numeric-link-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
+  --_numeric-link-visited-hover: var(--rh-color-interactive-purple-lightest, #ece6ff);
+}
+
 nav {
   display: contents;
 }
@@ -27,14 +46,16 @@ svg {
   justify-content: center;
   height: 50px;
   width: 50px;
-  background: var(--rh-color-surface-lighter, #f2f2f2);
+  background: var(--_stepper-bg-color, var(--rh-color-surface-lighter, #f2f2f2));
   outline: none;
   color: var(--rh-pagination-stepper-color, var(--rh-color-icon-subtle, #707070));
   box-sizing: border-box;
+  position: relative;
 }
 
 .stepper:focus {
-  border: 2px solid var(--rh-color-border-interactive-on-light, #0066cc);
+  border: 2px solid var(--_stepper-color-focus, var(--rh-color-border-interactive-on-light, #0066cc));
+  border-radius: var(--rh-border-radius-default, 3px);
 }
 
 .stepper svg {
@@ -100,19 +121,25 @@ input:invalid {
 
 #numeric a {
   text-decoration: none;
-  color: var(--rh-color-interactive-blue-darker, #0066cc);
+  color: var(--_numeric-link, var(--rh-color-interactive-blue-darker, #0066cc));
 }
 
 #numeric a:hover {
-  color: var(--rh-color-interactive-blue-darkest, #003366);
+  color: var(--_numeric-link-hover, var(--rh-color-interactive-blue-darkest, #003366));
+  text-decoration: underline;
 }
 
 #numeric a:visited {
-  color: var(--rh-color-interactive-purple-darker, #5e40be);
+  color: var(--_numeric-link-visited, var(--rh-color-interactive-purple-darker, #5e40be));
 }
 
 #numeric a:visited:hover {
-  color: var(--rh-color-interactive-purple-darkest, #21134d);
+  color: var(--_numeric-link-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
+}
+
+#numeric a:focus {
+  text-decoration: underline;
+  outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
 }
 
 @media (min-width: 700px) {
diff --git a/elements/rh-pagination/rh-pagination.ts b/elements/rh-pagination/rh-pagination.ts
index 557b00135e..bba086202b 100644
--- a/elements/rh-pagination/rh-pagination.ts
+++ b/elements/rh-pagination/rh-pagination.ts
@@ -10,6 +10,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { ScreenSizeController } from '../../lib/ScreenSizeController.js';
 import { DirController } from '../../lib/DirController.js';
+import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-pagination.css';
 
@@ -46,6 +47,11 @@ const L2 = html`
 export class RhPagination extends LitElement {
   static readonly version = '{{version}}';
 
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer() private on?: ColorTheme;
+
   static readonly styles = [styles];
 
   /**
@@ -108,6 +114,7 @@ export class RhPagination extends LitElement {
   }
 
   render() {
+    const { on = '' } = this;
     const { mobile, size } = this.#screen;
     const { dir } = this.#dir;
     const { label, labelFirst, labelPrevious, labelNext, labelLast } = this;
@@ -117,7 +124,7 @@ export class RhPagination extends LitElement {
     const lastHref = this.#currentLink === this.#lastLink ? undefined : this.#lastLink?.href;
     const currentPage = this.#currentPage.toString();
     return html`
-      <div id="container" class=${classMap({ mobile, [size as string]: true, [dir]: true })}>
+      <div id="container" class=${classMap({ mobile, [size as string]: true, [dir]: true, [on]: !!on })}>
         <a id="first" class="stepper" href=${ifDefined(firstHref)} ?inert=${!firstHref} aria-label=${labelFirst}>${L2}</a>
         <a id="prev" class="stepper" href=${ifDefined(prevHref)} ?inert=${!prevHref} aria-label=${labelPrevious}>${L1}</a>
 

From 435b798c277886172e40495783cbb23b8e14c742 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Fri, 3 May 2024 15:43:42 -0400
Subject: [PATCH 02/15] chore(pagination): lint CSS

---
 .../rh-pagination/rh-pagination-lightdom.css  | 23 ++++++++++++----
 elements/rh-pagination/rh-pagination.css      | 27 ++++++++++++++-----
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css
index ba35fb9609..48723da20f 100644
--- a/elements/rh-pagination/rh-pagination-lightdom.css
+++ b/elements/rh-pagination/rh-pagination-lightdom.css
@@ -34,7 +34,11 @@ rh-pagination li a[aria-current="page"] {
 
   --_border-color: var(--_list-anchor-current-page-border-color, #b8bbbe);
   --_border-width: 1px;
-  --_border-accent-color: var(--_list-anchor-current-page-border-color-accent, var(--rh-color-interactive-blue-darker, #0066cc));
+  --_border-accent-color:
+    var(
+        --_list-anchor-current-page-border-color-accent,
+        var(--rh-color-interactive-blue-darker, #0066cc)
+      );
 }
 
 rh-pagination li a {
@@ -72,13 +76,22 @@ rh-pagination li a:is(:focus, :focus-within, :focus-visible) {
 
 rh-pagination li a[aria-current="page"]:is(:focus, :focus-within, :focus-visible) {
   --_border-width: 2px;
-  --_border-color: var(--_list-anchor-current-page-border-color-focus, var(--rh-color-interactive-blue-darker, #0066cc));
+  --_border-color:
+    var(
+        --_list-anchor-current-page-border-color-focus,
+        var(--rh-color-interactive-blue-darker, #0066cc)
+      );
   --_border-accent-width: 3px;
 }
 
-rh-pagination li a:hover::after {
-  --_border-accent-color: var(--_list-anchor-border-color-hover, var(--rh-color-border-status-default-on-light, #4d4d4d));
-  content: '';
+rh-pagination li a:hover:after {
+  content: "";
+
+  --_border-accent-color:
+    var(
+        --_list-anchor-border-color-hover,
+        var(--rh-color-gray-60, #4d4d4d)
+      );
 }
 
 rh-pagination li a:is([aria-current="page"], :hover) {
diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index 3f9da378de..2de4673ded 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -24,8 +24,16 @@
   --_list-anchor-border-color-hover: var(--rh-color-border-subtle-on-light, #c7c7c7);
   --_list-anchor-current-page-bg-color: var(--rh-color-canvas-black, #151515);
   --_list-anchor-current-page-border-color: var(--rh-color-border-subtle-on-dark, #707070);
-  --_list-anchor-current-page-border-color-accent: var(--rh-color-border-interactive-on-dark, #92c5f9);
-  --_list-anchor-current-page-border-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --_list-anchor-current-page-border-color-accent:
+    var(
+        --rh-color-border-interactive-on-dark,
+        #92c5f9
+      );
+  --_list-anchor-current-page-border-color-focus:
+    var(
+        --rh-color-interactive-blue-lightest,
+        #b9dafc
+      );
   --_numeric-link: var(--rh-color-interactive-blue-lighter, #92c5f9);
   --_numeric-link-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
   --_numeric-link-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
@@ -54,7 +62,12 @@ svg {
 }
 
 .stepper:focus {
-  border: 2px solid var(--_stepper-color-focus, var(--rh-color-border-interactive-on-light, #0066cc));
+  border:
+    2px solid
+    var(
+        --_stepper-color-focus,
+        var(--rh-color-border-interactive-on-light, #0066cc)
+      );
   border-radius: var(--rh-border-radius-default, 3px);
 }
 
@@ -133,15 +146,15 @@ input:invalid {
   color: var(--_numeric-link-visited, var(--rh-color-interactive-purple-darker, #5e40be));
 }
 
-#numeric a:visited:hover {
-  color: var(--_numeric-link-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
-}
-
 #numeric a:focus {
   text-decoration: underline;
   outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
 }
 
+#numeric a:visited:hover {
+  color: var(--_numeric-link-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
+}
+
 @media (min-width: 700px) {
   #numeric {
     margin-block-start: 0;

From 2839b2f47f91b4d03805d0515e93c2a6f4fac532 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Mon, 6 May 2024 13:41:46 -0400
Subject: [PATCH 03/15] docs(pagination): fix changeset color palette
 terminology
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
---
 .changeset/nice-kangaroos-kiss.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/nice-kangaroos-kiss.md b/.changeset/nice-kangaroos-kiss.md
index 8a7d8f5c2b..ff6dce425e 100644
--- a/.changeset/nice-kangaroos-kiss.md
+++ b/.changeset/nice-kangaroos-kiss.md
@@ -2,4 +2,4 @@
 "@rhds/elements": minor
 ---
 
-`<rh-pagination>`: Added dark mode support
+`<rh-pagination>`: Added dark color palette

From 9f8357a49ffdddfc9174e069b450ab8cedaece30 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Mon, 6 May 2024 13:43:10 -0400
Subject: [PATCH 04/15] refactor(pagination): organize CSS variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
---
 elements/rh-pagination/rh-pagination.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index 2de4673ded..a32d4250e6 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -14,11 +14,11 @@
 }
 
 #container.dark {
-  --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
   --rh-pagination-accent-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
   --rh-pagination-stepper-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
+  --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
   --_stepper-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
-  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
   --_list-anchor-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
   --_list-anchor-bg-color: var(--rh-color-surface-dark-alt, #292929);
   --_list-anchor-border-color-hover: var(--rh-color-border-subtle-on-light, #c7c7c7);

From d9af5192d47e03c08bb8a07db25e90e72a2c3aa4 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Fri, 3 May 2024 15:08:38 -0400
Subject: [PATCH 05/15] feat(pagination): add support for dark theme

---
 .changeset/nice-kangaroos-kiss.md             |  5 +++
 .../rh-pagination/demo/color-context.html     | 17 ++++++++
 .../rh-pagination/rh-pagination-lightdom.css  | 17 ++++----
 elements/rh-pagination/rh-pagination.css      | 39 ++++++++++++++++---
 elements/rh-pagination/rh-pagination.ts       |  9 ++++-
 5 files changed, 72 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/nice-kangaroos-kiss.md
 create mode 100644 elements/rh-pagination/demo/color-context.html

diff --git a/.changeset/nice-kangaroos-kiss.md b/.changeset/nice-kangaroos-kiss.md
new file mode 100644
index 0000000000..8a7d8f5c2b
--- /dev/null
+++ b/.changeset/nice-kangaroos-kiss.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-pagination>`: Added dark mode support
diff --git a/elements/rh-pagination/demo/color-context.html b/elements/rh-pagination/demo/color-context.html
new file mode 100644
index 0000000000..31f9d60f1e
--- /dev/null
+++ b/elements/rh-pagination/demo/color-context.html
@@ -0,0 +1,17 @@
+<rh-context-demo>
+  <rh-pagination>
+    <ol>
+      <li><a href="#">1</a></li>
+      <li><a href="#2">2</a></li>
+      <li><a href="#3">3</a></li>
+      <li><a href="#4">4</a></li>
+      <li><a href="#5">5</a></li>
+    </ol>
+  </rh-pagination>
+  <link rel="stylesheet" href="../rh-pagination-lightdom.css">
+</rh-context-demo>
+
+<script type="module">
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+  import '@rhds/elements/rh-pagination/rh-pagination.js';
+</script>
diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css
index bcc60ab111..ba35fb9609 100644
--- a/elements/rh-pagination/rh-pagination-lightdom.css
+++ b/elements/rh-pagination/rh-pagination-lightdom.css
@@ -17,24 +17,24 @@ rh-pagination li {
 
 rh-pagination li > a {
   text-decoration: none;
-  color: var(--rh-color-text-primary-on-light, #151515);
+  color: var(--_list-anchor-text-color, var(--rh-color-text-primary-on-light, #151515));
   font-weight: var(--rh-font-weight-body-text-medium, 500);
   outline: none;
   width: var(--_link-size);
   height: var(--_link-size);
   display: grid;
   place-content: center;
-  background: var(--rh-color-surface-lighter, #f2f2f2);
+  background: var(--_list-anchor-bg-color, var(--rh-color-surface-lighter, #f2f2f2));
   box-sizing: border-box;
 }
 
 rh-pagination li a[aria-current="page"] {
-  background: var(--rh-color-surface-lightest, #ffffff);
+  background: var(--_list-anchor-current-page-bg-color, var(--rh-color-surface-lightest, #ffffff));
   position: relative;
 
-  --_border-color: #b8bbbe;
+  --_border-color: var(--_list-anchor-current-page-border-color, #b8bbbe);
   --_border-width: 1px;
-  --_border-accent-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  --_border-accent-color: var(--_list-anchor-current-page-border-color-accent, var(--rh-color-interactive-blue-darker, #0066cc));
 }
 
 rh-pagination li a {
@@ -72,12 +72,13 @@ rh-pagination li a:is(:focus, :focus-within, :focus-visible) {
 
 rh-pagination li a[aria-current="page"]:is(:focus, :focus-within, :focus-visible) {
   --_border-width: 2px;
-  --_border-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  --_border-color: var(--_list-anchor-current-page-border-color-focus, var(--rh-color-interactive-blue-darker, #0066cc));
   --_border-accent-width: 3px;
 }
 
-rh-pagination li a:hover {
-  --_border-accent-color: var(--rh-color-gray-50, #707070);
+rh-pagination li a:hover::after {
+  --_border-accent-color: var(--_list-anchor-border-color-hover, var(--rh-color-border-status-default-on-light, #4d4d4d));
+  content: '';
 }
 
 rh-pagination li a:is([aria-current="page"], :hover) {
diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index b10084a75e..3f9da378de 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -13,6 +13,25 @@
   flex-wrap: wrap;
 }
 
+#container.dark {
+  --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
+  --rh-pagination-accent-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --rh-pagination-stepper-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
+  --_stepper-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
+  --_list-anchor-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --_list-anchor-bg-color: var(--rh-color-surface-dark-alt, #292929);
+  --_list-anchor-border-color-hover: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --_list-anchor-current-page-bg-color: var(--rh-color-canvas-black, #151515);
+  --_list-anchor-current-page-border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  --_list-anchor-current-page-border-color-accent: var(--rh-color-border-interactive-on-dark, #92c5f9);
+  --_list-anchor-current-page-border-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --_numeric-link: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --_numeric-link-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --_numeric-link-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
+  --_numeric-link-visited-hover: var(--rh-color-interactive-purple-lightest, #ece6ff);
+}
+
 nav {
   display: contents;
 }
@@ -27,14 +46,16 @@ svg {
   justify-content: center;
   height: 50px;
   width: 50px;
-  background: var(--rh-color-surface-lighter, #f2f2f2);
+  background: var(--_stepper-bg-color, var(--rh-color-surface-lighter, #f2f2f2));
   outline: none;
   color: var(--rh-pagination-stepper-color, var(--rh-color-icon-subtle, #707070));
   box-sizing: border-box;
+  position: relative;
 }
 
 .stepper:focus {
-  border: 2px solid var(--rh-color-border-interactive-on-light, #0066cc);
+  border: 2px solid var(--_stepper-color-focus, var(--rh-color-border-interactive-on-light, #0066cc));
+  border-radius: var(--rh-border-radius-default, 3px);
 }
 
 .stepper svg {
@@ -100,19 +121,25 @@ input:invalid {
 
 #numeric a {
   text-decoration: none;
-  color: var(--rh-color-interactive-blue-darker, #0066cc);
+  color: var(--_numeric-link, var(--rh-color-interactive-blue-darker, #0066cc));
 }
 
 #numeric a:hover {
-  color: var(--rh-color-interactive-blue-darkest, #003366);
+  color: var(--_numeric-link-hover, var(--rh-color-interactive-blue-darkest, #003366));
+  text-decoration: underline;
 }
 
 #numeric a:visited {
-  color: var(--rh-color-interactive-purple-darker, #5e40be);
+  color: var(--_numeric-link-visited, var(--rh-color-interactive-purple-darker, #5e40be));
 }
 
 #numeric a:visited:hover {
-  color: var(--rh-color-interactive-purple-darkest, #21134d);
+  color: var(--_numeric-link-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
+}
+
+#numeric a:focus {
+  text-decoration: underline;
+  outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
 }
 
 @media (min-width: 700px) {
diff --git a/elements/rh-pagination/rh-pagination.ts b/elements/rh-pagination/rh-pagination.ts
index 557b00135e..bba086202b 100644
--- a/elements/rh-pagination/rh-pagination.ts
+++ b/elements/rh-pagination/rh-pagination.ts
@@ -10,6 +10,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { ScreenSizeController } from '../../lib/ScreenSizeController.js';
 import { DirController } from '../../lib/DirController.js';
+import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-pagination.css';
 
@@ -46,6 +47,11 @@ const L2 = html`
 export class RhPagination extends LitElement {
   static readonly version = '{{version}}';
 
+  /**
+   * Sets color theme based on parent context
+   */
+  @colorContextConsumer() private on?: ColorTheme;
+
   static readonly styles = [styles];
 
   /**
@@ -108,6 +114,7 @@ export class RhPagination extends LitElement {
   }
 
   render() {
+    const { on = '' } = this;
     const { mobile, size } = this.#screen;
     const { dir } = this.#dir;
     const { label, labelFirst, labelPrevious, labelNext, labelLast } = this;
@@ -117,7 +124,7 @@ export class RhPagination extends LitElement {
     const lastHref = this.#currentLink === this.#lastLink ? undefined : this.#lastLink?.href;
     const currentPage = this.#currentPage.toString();
     return html`
-      <div id="container" class=${classMap({ mobile, [size as string]: true, [dir]: true })}>
+      <div id="container" class=${classMap({ mobile, [size as string]: true, [dir]: true, [on]: !!on })}>
         <a id="first" class="stepper" href=${ifDefined(firstHref)} ?inert=${!firstHref} aria-label=${labelFirst}>${L2}</a>
         <a id="prev" class="stepper" href=${ifDefined(prevHref)} ?inert=${!prevHref} aria-label=${labelPrevious}>${L1}</a>
 

From 72ee4853b1a0c0e7a813763c536b13a8ee9d4b07 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Fri, 3 May 2024 15:43:42 -0400
Subject: [PATCH 06/15] chore(pagination): lint CSS

---
 .../rh-pagination/rh-pagination-lightdom.css  | 23 ++++++++++++----
 elements/rh-pagination/rh-pagination.css      | 27 ++++++++++++++-----
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css
index ba35fb9609..48723da20f 100644
--- a/elements/rh-pagination/rh-pagination-lightdom.css
+++ b/elements/rh-pagination/rh-pagination-lightdom.css
@@ -34,7 +34,11 @@ rh-pagination li a[aria-current="page"] {
 
   --_border-color: var(--_list-anchor-current-page-border-color, #b8bbbe);
   --_border-width: 1px;
-  --_border-accent-color: var(--_list-anchor-current-page-border-color-accent, var(--rh-color-interactive-blue-darker, #0066cc));
+  --_border-accent-color:
+    var(
+        --_list-anchor-current-page-border-color-accent,
+        var(--rh-color-interactive-blue-darker, #0066cc)
+      );
 }
 
 rh-pagination li a {
@@ -72,13 +76,22 @@ rh-pagination li a:is(:focus, :focus-within, :focus-visible) {
 
 rh-pagination li a[aria-current="page"]:is(:focus, :focus-within, :focus-visible) {
   --_border-width: 2px;
-  --_border-color: var(--_list-anchor-current-page-border-color-focus, var(--rh-color-interactive-blue-darker, #0066cc));
+  --_border-color:
+    var(
+        --_list-anchor-current-page-border-color-focus,
+        var(--rh-color-interactive-blue-darker, #0066cc)
+      );
   --_border-accent-width: 3px;
 }
 
-rh-pagination li a:hover::after {
-  --_border-accent-color: var(--_list-anchor-border-color-hover, var(--rh-color-border-status-default-on-light, #4d4d4d));
-  content: '';
+rh-pagination li a:hover:after {
+  content: "";
+
+  --_border-accent-color:
+    var(
+        --_list-anchor-border-color-hover,
+        var(--rh-color-gray-60, #4d4d4d)
+      );
 }
 
 rh-pagination li a:is([aria-current="page"], :hover) {
diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index 3f9da378de..2de4673ded 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -24,8 +24,16 @@
   --_list-anchor-border-color-hover: var(--rh-color-border-subtle-on-light, #c7c7c7);
   --_list-anchor-current-page-bg-color: var(--rh-color-canvas-black, #151515);
   --_list-anchor-current-page-border-color: var(--rh-color-border-subtle-on-dark, #707070);
-  --_list-anchor-current-page-border-color-accent: var(--rh-color-border-interactive-on-dark, #92c5f9);
-  --_list-anchor-current-page-border-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --_list-anchor-current-page-border-color-accent:
+    var(
+        --rh-color-border-interactive-on-dark,
+        #92c5f9
+      );
+  --_list-anchor-current-page-border-color-focus:
+    var(
+        --rh-color-interactive-blue-lightest,
+        #b9dafc
+      );
   --_numeric-link: var(--rh-color-interactive-blue-lighter, #92c5f9);
   --_numeric-link-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
   --_numeric-link-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
@@ -54,7 +62,12 @@ svg {
 }
 
 .stepper:focus {
-  border: 2px solid var(--_stepper-color-focus, var(--rh-color-border-interactive-on-light, #0066cc));
+  border:
+    2px solid
+    var(
+        --_stepper-color-focus,
+        var(--rh-color-border-interactive-on-light, #0066cc)
+      );
   border-radius: var(--rh-border-radius-default, 3px);
 }
 
@@ -133,15 +146,15 @@ input:invalid {
   color: var(--_numeric-link-visited, var(--rh-color-interactive-purple-darker, #5e40be));
 }
 
-#numeric a:visited:hover {
-  color: var(--_numeric-link-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
-}
-
 #numeric a:focus {
   text-decoration: underline;
   outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
 }
 
+#numeric a:visited:hover {
+  color: var(--_numeric-link-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
+}
+
 @media (min-width: 700px) {
   #numeric {
     margin-block-start: 0;

From deafd5ebc254fb51d26ceb52fbeed2bf16bdcfcc Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Mon, 6 May 2024 13:41:46 -0400
Subject: [PATCH 07/15] docs(pagination): fix changeset color palette
 terminology
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
---
 .changeset/nice-kangaroos-kiss.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/nice-kangaroos-kiss.md b/.changeset/nice-kangaroos-kiss.md
index 8a7d8f5c2b..ff6dce425e 100644
--- a/.changeset/nice-kangaroos-kiss.md
+++ b/.changeset/nice-kangaroos-kiss.md
@@ -2,4 +2,4 @@
 "@rhds/elements": minor
 ---
 
-`<rh-pagination>`: Added dark mode support
+`<rh-pagination>`: Added dark color palette

From 51f9793c5c2a94f001c01dc22485d430fd5bdc0b Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Mon, 6 May 2024 13:43:10 -0400
Subject: [PATCH 08/15] refactor(pagination): organize CSS variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
---
 elements/rh-pagination/rh-pagination.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index 2de4673ded..a32d4250e6 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -14,11 +14,11 @@
 }
 
 #container.dark {
-  --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
   --rh-pagination-accent-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
   --rh-pagination-stepper-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
+  --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
   --_stepper-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
-  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
   --_list-anchor-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
   --_list-anchor-bg-color: var(--rh-color-surface-dark-alt, #292929);
   --_list-anchor-border-color-hover: var(--rh-color-border-subtle-on-light, #c7c7c7);

From db56e8a00a0ff6f5e66a7f0747206b10882d8499 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Tue, 7 May 2024 16:09:32 -0400
Subject: [PATCH 09/15] fix(pagination): make border color a token

---
 elements/rh-pagination/rh-pagination-lightdom.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css
index 48723da20f..1e3305cb5d 100644
--- a/elements/rh-pagination/rh-pagination-lightdom.css
+++ b/elements/rh-pagination/rh-pagination-lightdom.css
@@ -32,7 +32,7 @@ rh-pagination li a[aria-current="page"] {
   background: var(--_list-anchor-current-page-bg-color, var(--rh-color-surface-lightest, #ffffff));
   position: relative;
 
-  --_border-color: var(--_list-anchor-current-page-border-color, #b8bbbe);
+  --_border-color: var(--_list-anchor-current-page-border-color, var(--rh-color-border-subtle-on-dark, #707070));
   --_border-width: 1px;
   --_border-accent-color:
     var(

From e4d6cb26c736744967fcf4350bfbc141a3ca5f9a Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Thu, 9 May 2024 10:46:07 -0400
Subject: [PATCH 10/15] fix(pagination): set font-size and family to numbers

---
 elements/rh-pagination/rh-pagination-lightdom.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css
index 1e3305cb5d..385b8487ca 100644
--- a/elements/rh-pagination/rh-pagination-lightdom.css
+++ b/elements/rh-pagination/rh-pagination-lightdom.css
@@ -19,6 +19,8 @@ rh-pagination li > a {
   text-decoration: none;
   color: var(--_list-anchor-text-color, var(--rh-color-text-primary-on-light, #151515));
   font-weight: var(--rh-font-weight-body-text-medium, 500);
+  font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+  font-size: var(--rh-font-size-heading-xs, 1.25rem);
   outline: none;
   width: var(--_link-size);
   height: var(--_link-size);

From 46e1448de4154422ae1fc5909699d3c2d983f1e9 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Thu, 9 May 2024 11:01:11 -0400
Subject: [PATCH 11/15] fix(pagination): update dark theme focus border color

---
 elements/rh-pagination/rh-pagination.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index a32d4250e6..e1f25aa40a 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -14,7 +14,7 @@
 }
 
 #container.dark {
-  --rh-pagination-accent-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --rh-pagination-accent-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
   --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
   --rh-pagination-stepper-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
   --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);

From fc35b42acccaab3ad1b27578a8e8e95d6f296cea Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Thu, 9 May 2024 11:21:27 -0400
Subject: [PATCH 12/15] fix(pagination): numeric link focus outline color

---
 elements/rh-pagination/rh-pagination.css | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index e1f25aa40a..4d3b199993 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -38,6 +38,7 @@
   --_numeric-link-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
   --_numeric-link-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
   --_numeric-link-visited-hover: var(--rh-color-interactive-purple-lightest, #ece6ff);
+  --_numeric-link-focus-outline-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
 }
 
 nav {
@@ -146,15 +147,18 @@ input:invalid {
   color: var(--_numeric-link-visited, var(--rh-color-interactive-purple-darker, #5e40be));
 }
 
-#numeric a:focus {
-  text-decoration: underline;
-  outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
-}
-
 #numeric a:visited:hover {
   color: var(--_numeric-link-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
 }
 
+#numeric a:focus {
+  border-radius: var(--rh-border-radius-default, 3px);
+  outline-color: var(--_numeric-link-focus-outline-color, var(--rh-color-border-interactive-on-light, #0066cc));
+  outline-style: solid;
+  outline-width: var(--rh-border-width-md, 2px);
+  text-decoration: underline;
+}
+
 @media (min-width: 700px) {
   #numeric {
     margin-block-start: 0;

From 496814a04aaaee0103528886b7e0a48c59fb68a0 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Thu, 9 May 2024 11:27:40 -0400
Subject: [PATCH 13/15] refactor(pagination): rename numeric variables

---
 elements/rh-pagination/rh-pagination.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index 4d3b199993..d6e5050ae0 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -34,10 +34,10 @@
         --rh-color-interactive-blue-lightest,
         #b9dafc
       );
-  --_numeric-link: var(--rh-color-interactive-blue-lighter, #92c5f9);
-  --_numeric-link-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
-  --_numeric-link-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
-  --_numeric-link-visited-hover: var(--rh-color-interactive-purple-lightest, #ece6ff);
+  --_numeric-link-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --_numeric-link-color-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --_numeric-link-color-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
+  --_numeric-link-color-visited-hover: var(--rh-color-interactive-purple-lightest, #ece6ff);
   --_numeric-link-focus-outline-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
 }
 
@@ -135,20 +135,20 @@ input:invalid {
 
 #numeric a {
   text-decoration: none;
-  color: var(--_numeric-link, var(--rh-color-interactive-blue-darker, #0066cc));
+  color: var(--_numeric-link-color, var(--rh-color-interactive-blue-darker, #0066cc));
 }
 
 #numeric a:hover {
-  color: var(--_numeric-link-hover, var(--rh-color-interactive-blue-darkest, #003366));
+  color: var(--_numeric-link-color-hover, var(--rh-color-interactive-blue-darkest, #003366));
   text-decoration: underline;
 }
 
 #numeric a:visited {
-  color: var(--_numeric-link-visited, var(--rh-color-interactive-purple-darker, #5e40be));
+  color: var(--_numeric-link-color-visited, var(--rh-color-interactive-purple-darker, #5e40be));
 }
 
 #numeric a:visited:hover {
-  color: var(--_numeric-link-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
+  color: var(--_numeric-link-color-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
 }
 
 #numeric a:focus {

From be7516872d97435b2f1154fe7db633d45c763f91 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Thu, 9 May 2024 11:35:04 -0400
Subject: [PATCH 14/15] fix(pagination): fix dark theme numeric focus color

---
 elements/rh-pagination/rh-pagination.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index d6e5050ae0..22e9260e1a 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -38,6 +38,7 @@
   --_numeric-link-color-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
   --_numeric-link-color-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
   --_numeric-link-color-visited-hover: var(--rh-color-interactive-purple-lightest, #ece6ff);
+  --_numeric-link-focus-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
   --_numeric-link-focus-outline-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
 }
 
@@ -153,6 +154,7 @@ input:invalid {
 
 #numeric a:focus {
   border-radius: var(--rh-border-radius-default, 3px);
+  color: var(--_numeric-link-focus-color, var(--rh-color-interactive-blue-darker, #0066cc));
   outline-color: var(--_numeric-link-focus-outline-color, var(--rh-color-border-interactive-on-light, #0066cc));
   outline-style: solid;
   outline-width: var(--rh-border-width-md, 2px);

From 0b4d74ca395d01ab996deedd64b4e65f3ba4d45c Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Fri, 10 May 2024 16:16:07 -0400
Subject: [PATCH 15/15] fix(pagination): focus state

---
 .../rh-pagination/rh-pagination-lightdom.css  | 113 +++++++--------
 elements/rh-pagination/rh-pagination.css      | 133 +++++++++++-------
 2 files changed, 134 insertions(+), 112 deletions(-)

diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css
index 385b8487ca..36952ed224 100644
--- a/elements/rh-pagination/rh-pagination-lightdom.css
+++ b/elements/rh-pagination/rh-pagination-lightdom.css
@@ -1,9 +1,5 @@
 rh-pagination {
   --_link-size: 50px;
-  --_border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
-  --_border-width: 0;
-  --_border-radius: 0;
-  --_border-accent-width: 0;
 }
 
 rh-pagination > ol {
@@ -16,93 +12,82 @@ rh-pagination li {
 }
 
 rh-pagination li > a {
-  text-decoration: none;
-  color: var(--_list-anchor-text-color, var(--rh-color-text-primary-on-light, #151515));
-  font-weight: var(--rh-font-weight-body-text-medium, 500);
+  background-color: var(--_rh-pagination-list-a-bg-color, var(--rh-color-surface-lighter, #f2f2f2));
+  border: var(--rh-border-width-sm, 1px) solid transparent;
+  color: var(--_rh-pagination-list-a-text-color, var(--rh-color-text-primary-on-light, #151515));
+  display: grid;
   font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
   font-size: var(--rh-font-size-heading-xs, 1.25rem);
-  outline: none;
-  width: var(--_link-size);
   height: var(--_link-size);
-  display: grid;
   place-content: center;
-  background: var(--_list-anchor-bg-color, var(--rh-color-surface-lighter, #f2f2f2));
-  box-sizing: border-box;
-}
-
-rh-pagination li a[aria-current="page"] {
-  background: var(--_list-anchor-current-page-bg-color, var(--rh-color-surface-lightest, #ffffff));
   position: relative;
+  text-decoration: none;
+  width: var(--_link-size);
+}
 
-  --_border-color: var(--_list-anchor-current-page-border-color, var(--rh-color-border-subtle-on-dark, #707070));
-  --_border-width: 1px;
-  --_border-accent-color:
+rh-pagination li > a:focus {
+  border-radius: var(--rh-border-radius-default, 3px);
+  outline-offset: -2px;
+  outline: var(--rh-border-width-md, 2px) solid transparent;
+  outline-color:
     var(
-        --_list-anchor-current-page-border-color-accent,
+        --rh-pagination-accent-color,
         var(--rh-color-interactive-blue-darker, #0066cc)
       );
 }
 
-rh-pagination li a {
-  border-radius: var(--_border-radius, 0);
-}
-
-rh-pagination li a:after {
-  display: var(--_border-display, none);
+rh-pagination li > a:hover:after,
+rh-pagination li > a:focus:before,
+rh-pagination li > a:focus:after,
+rh-pagination li > a[aria-current]:after {
+  border-block-start-style: solid;
   content: "";
+  left: -1px;
   position: absolute;
-  width: var(--_link-size);
-  height: var(--_link-size);
-  border-width: var(--_border-width);
-  border-style: solid;
-  border-color: var(--_border-color);
-  border-radius: var(--_border-radius);
-  border-block-start-color: var(--_border-accent-color, var(--_border-color));
-  border-block-start-width: var(--_border-accent-width);
+  top: -1px;
+  width: 104%;
 }
 
-rh-pagination li a:is(:focus, :focus-within, :focus-visible, :hover, [aria-current="page"]) {
-  --_border-display: block;
+rh-pagination li > a:hover:after,
+rh-pagination li > a:focus:before,
+rh-pagination li > a[aria-current]:after {
+  border-block-start-width: var(--rh-border-width-lg, 3px);
 }
 
-rh-pagination li a:is(:focus, :focus-within, :focus-visible) {
-  --_border-radius: var(--rh-border-radius-default, 3px);
-  --_border-width: 2px;
-  --_border-color:
+rh-pagination li > a:focus:before,
+rh-pagination li > a:hover:after {
+  border-block-start-color:
     var(
-        --rh-pagination-accent-color,
-        var(--rh-color-interactive-blue-darker, #0066cc)
+        --_rh-pagination-border-top-hover-color,
+        var(--rh-color-gray-60, #4d4d4d)
       );
-  --_border-accent-width: 2px;
 }
 
-rh-pagination li a[aria-current="page"]:is(:focus, :focus-within, :focus-visible) {
-  --_border-width: 2px;
-  --_border-color:
-    var(
-        --_list-anchor-current-page-border-color-focus,
-        var(--rh-color-interactive-blue-darker, #0066cc)
-      );
-  --_border-accent-width: 3px;
+rh-pagination li > a:focus:after {
+  border-block-start-width: var(--rh-border-width-md, 2px);
 }
 
-rh-pagination li a:hover:after {
-  content: "";
-
-  --_border-accent-color:
+rh-pagination li > a[aria-current] {
+  background-color:
     var(
-        --_list-anchor-border-color-hover,
-        var(--rh-color-gray-60, #4d4d4d)
+        --_rh-pagination-list-a-current-page-bg-color,
+        var(--rh-color-surface-lightest, #ffffff)
       );
+  border-color:
+    var(
+        --_rh-pagination-list-a-current-page-border-color,
+        var(--rh-color-border-subtle-on-light, #c7c7c7)
+      );
+  border-top: 0;
 }
 
-rh-pagination li a:is([aria-current="page"], :hover) {
-  --_border-accent-width: 3px;
-}
-
-rh-pagination li a[aria-current="page"]:is(:focus, :focus-within, :focus-visible):after {
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
+rh-pagination li > a:focus:after,
+rh-pagination li > a[aria-current]:after {
+  border-block-start-color:
+    var(
+        --rh-pagination-accent-color,
+        var(--rh-color-border-interactive-on-light, #0066cc)
+      );
 }
 
 rh-pagination[overflow="start"] li:nth-last-child(n+6):not(:first-child),
diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index 22e9260e1a..e13ee68889 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -15,31 +15,21 @@
 
 #container.dark {
   --rh-pagination-accent-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
-  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
   --rh-pagination-stepper-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
-  --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
-  --_stepper-color-focus: var(--rh-color-interactive-blue-lightest, #b9dafc);
-  --_list-anchor-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_list-anchor-bg-color: var(--rh-color-surface-dark-alt, #292929);
-  --_list-anchor-border-color-hover: var(--rh-color-border-subtle-on-light, #c7c7c7);
-  --_list-anchor-current-page-bg-color: var(--rh-color-canvas-black, #151515);
-  --_list-anchor-current-page-border-color: var(--rh-color-border-subtle-on-dark, #707070);
-  --_list-anchor-current-page-border-color-accent:
-    var(
-        --rh-color-border-interactive-on-dark,
-        #92c5f9
-      );
-  --_list-anchor-current-page-border-color-focus:
-    var(
-        --rh-color-interactive-blue-lightest,
-        #b9dafc
-      );
-  --_numeric-link-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
-  --_numeric-link-color-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
-  --_numeric-link-color-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
-  --_numeric-link-color-visited-hover: var(--rh-color-interactive-purple-lightest, #ece6ff);
-  --_numeric-link-focus-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
-  --_numeric-link-focus-outline-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
+  --_rh-pagination-list-a-text-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --_rh-pagination-list-a-bg-color: var(--rh-color-surface-dark-alt, #292929);
+  --_rh-pagination-list-a-current-page-bg-color: var(--rh-color-surface-darkest, #151515);
+  --_rh-pagination-list-a-current-page-border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  --_rh-pagination-border-top-hover-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
+  --_rh-pagination-stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
+  --_rh-pagination-stepper-hover-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  --_numeric-a-color: var(--rh-pagination-accent-color);
+  --_numeric-a-color-hover: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  --_numeric-a-color-visited: var(--rh-color-interactive-purple-lighter, #b6a6e9);
+  --_numeric-a-color-visited-hover: var(--rh-color-interactive-purple-lightest, #ece6ff);
+  --_numeric-a-focus-color: var(--rh-pagination-accent-color);
+  --_numeric-a-focus-outline-color: var(--rh-pagination-accent-color);
 }
 
 nav {
@@ -51,26 +41,70 @@ svg {
 }
 
 .stepper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  width: 50px;
-  background: var(--_stepper-bg-color, var(--rh-color-surface-lighter, #f2f2f2));
-  outline: none;
-  color: var(--rh-pagination-stepper-color, var(--rh-color-icon-subtle, #707070));
-  box-sizing: border-box;
+  background-color:
+    var(
+        --_rh-pagination-stepper-bg-color,
+        var(--rh-color-surface-lighter, #f2f2f2)
+      );
+  border: var(--rh-border-width-sm, 1px) solid transparent;
+  color: var(--rh-pagination-stepper-color, var(--rh-color-text-secondary-on-light, #4d4d4d));
+  display: grid;
+  font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+  font-size: var(--rh-font-size-heading-xs, 1.25rem);
+  height: 48px;
+  place-content: center;
   position: relative;
+  text-decoration: none;
+  width: 48px;
+}
+
+.stepper:is(:hover, :focus) {
+  color:
+    var(
+        --_rh-pagination-stepper-hover-focus-color,
+        var(--rh-color-text-primary-on-light, #151515)
+      );
 }
 
 .stepper:focus {
-  border:
-    2px solid
+  border-radius: var(--rh-border-radius-default, 3px);
+  outline-offset: -2px;
+  outline: var(--rh-border-width-md, 2px) solid transparent;
+  outline-color:
     var(
-        --_stepper-color-focus,
+        --rh-pagination-accent-color,
+        var(--rh-color-interactive-blue-darker, #0066cc)
+      );
+}
+
+.stepper:hover:after,
+.stepper:focus:before,
+.stepper:focus:after {
+  border-block-start-style: solid;
+  content: "";
+  left: -1px;
+  position: absolute;
+  top: -1px;
+  width: 104%;
+}
+
+.stepper:hover:after,
+.stepper:focus:before {
+  border-block-start-color:
+    var(
+        --_rh-pagination-border-top-hover-color,
+        var(--rh-color-gray-60, #4d4d4d)
+      );
+  border-block-start-width: var(--rh-border-width-lg, 3px);
+}
+
+.stepper:focus:after {
+  border-block-start-color:
+    var(
+        --rh-pagination-accent-color,
         var(--rh-color-border-interactive-on-light, #0066cc)
       );
-  border-radius: var(--rh-border-radius-default, 3px);
+  border-block-start-width: var(--rh-border-width-md, 2px);
 }
 
 .stepper svg {
@@ -136,31 +170,34 @@ input:invalid {
 
 #numeric a {
   text-decoration: none;
-  color: var(--_numeric-link-color, var(--rh-color-interactive-blue-darker, #0066cc));
+  color: var(--_numeric-a-color, var(--rh-color-interactive-blue-darker, #0066cc));
 }
 
 #numeric a:hover {
-  color: var(--_numeric-link-color-hover, var(--rh-color-interactive-blue-darkest, #003366));
+  color: var(--_numeric-a-color-hover, var(--rh-color-interactive-blue-darkest, #003366));
   text-decoration: underline;
 }
 
 #numeric a:visited {
-  color: var(--_numeric-link-color-visited, var(--rh-color-interactive-purple-darker, #5e40be));
-}
-
-#numeric a:visited:hover {
-  color: var(--_numeric-link-color-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
+  color: var(--_numeric-a-color-visited, var(--rh-color-interactive-purple-darker, #5e40be));
 }
 
 #numeric a:focus {
   border-radius: var(--rh-border-radius-default, 3px);
-  color: var(--_numeric-link-focus-color, var(--rh-color-interactive-blue-darker, #0066cc));
-  outline-color: var(--_numeric-link-focus-outline-color, var(--rh-color-border-interactive-on-light, #0066cc));
-  outline-style: solid;
-  outline-width: var(--rh-border-width-md, 2px);
+  color: var(--_numeric-a-focus-color, var(--rh-color-interactive-blue-darker, #0066cc));
+  outline: var(--rh-border-width-md, 2px) solid transparent;
+  outline-color:
+    var(
+        --_numeric-a-focus-outline-color,
+        var(--rh-color-border-interactive-on-light, #0066cc)
+      );
   text-decoration: underline;
 }
 
+#numeric a:visited:hover {
+  color: var(--_numeric-a-color-visited-hover, var(--rh-color-interactive-purple-darkest, #21134d));
+}
+
 @media (min-width: 700px) {
   #numeric {
     margin-block-start: 0;