fix(pagination): add dark theme support

.changeset/nice-kangaroos-kiss.md

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

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

@@ -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,77 +12,82 @@ rh-pagination li {
 }
 
 rh-pagination li > a {
-  text-decoration: none;
-  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);
+  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);
+  height: var(--_link-size);
   place-content: center;
-  background: var(--rh-color-surface-lighter, #f2f2f2);
-  box-sizing: border-box;
-}
-
-rh-pagination li a[aria-current="page"] {
-  background: var(--rh-color-surface-lightest, #ffffff);
   position: relative;
-
-  --_border-color: #b8bbbe;
-  --_border-width: 1px;
-  --_border-accent-color: var(--rh-color-interactive-blue-darker, #0066cc);
+  text-decoration: none;
+  width: var(--_link-size);
 }
 
-rh-pagination li a {
-  border-radius: var(--_border-radius, 0);
+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(
+        --rh-pagination-accent-color,
+        var(--rh-color-interactive-blue-darker, #0066cc)
+      );
 }
 
-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(--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 {
-  --_border-accent-color: var(--rh-color-gray-50, #707070);
-}
-
-rh-pagination li a:is([aria-current="page"], :hover) {
-  --_border-accent-width: 3px;
+rh-pagination li > a[aria-current] {
+  background-color:
+    var(
+        --_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[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),

elements/rh-pagination/rh-pagination.css

@@ -13,6 +13,25 @@
   flex-wrap: wrap;
 }
 
+#container.dark {
+  --rh-pagination-accent-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
+  --rh-pagination-stepper-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
+  --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 {
   display: contents;
 }
@@ -22,19 +41,70 @@ svg {
 }
 
 .stepper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  width: 50px;
-  background: 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 var(--rh-color-border-interactive-on-light, #0066cc);
+  border-radius: var(--rh-border-radius-default, 3px);
+  outline-offset: -2px;
+  outline: var(--rh-border-width-md, 2px) solid transparent;
+  outline-color:
+    var(
+        --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-block-start-width: var(--rh-border-width-md, 2px);
 }
 
 .stepper svg {
@@ -100,19 +170,32 @@ input:invalid {
 
 #numeric a {
   text-decoration: none;
-  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(--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(--rh-color-interactive-purple-darker, #5e40be);
+  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-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(--rh-color-interactive-purple-darkest, #21134d);
+  color: var(--_numeric-a-color-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>