diff --git a/.changeset/nice-kangaroos-kiss.md b/.changeset/nice-kangaroos-kiss.md new file mode 100644 index 0000000000..ff6dce425e --- /dev/null +++ b/.changeset/nice-kangaroos-kiss.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": minor +--- + +``: Added dark color palette 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 @@ + + +
    +
  1. 1
    2. +
  2. 2
    3. +
  3. 3
    4. +
  4. 4
    5. +
  5. 5
    6. +
+ + + + + diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css index bcc60ab111..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,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), diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css index b10084a75e..e13ee68889 100644 --- a/elements/rh-pagination/rh-pagination.css +++ b/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) { 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` -
+