fix(pagination): add dark theme support

.changeset/nice-kangaroos-kiss.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-pagination>`: Added dark mode support

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>

elements/rh-pagination/rh-pagination-lightdom.css

@@ -17,24 +17,28 @@ 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 +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(--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 {
+  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) {

elements/rh-pagination/rh-pagination.css

@@ -13,6 +13,33 @@
   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 +54,21 @@ 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 +134,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:focus {
+  text-decoration: underline;
+  outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
 }
 
 #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));
 }
 
 @media (min-width: 700px) {

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>