From 155c5ce71baefa35e32101722704db0a3b6b81d6 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:19:32 -0500
Subject: [PATCH 01/33] docs: add color-scheme stylesheet

---
 docs/styles/color-scheme.css    | 170 ++++++++++++++++++++++++++++++++
 docs/styles/demo/dev-server.css |   2 +
 docs/styles/demo/styles.css     |   2 +
 docs/styles/styles.css          |   2 +
 4 files changed, 176 insertions(+)
 create mode 100644 docs/styles/color-scheme.css

diff --git a/docs/styles/color-scheme.css b/docs/styles/color-scheme.css
new file mode 100644
index 0000000000..2cf4f6ab50
--- /dev/null
+++ b/docs/styles/color-scheme.css
@@ -0,0 +1,170 @@
+:root {
+  --rh-color-surface:
+    light-dark(var(--rh-color-surface-lightest),
+      var(--rh-color-surface-darkest));
+  --rh-color-accent-base:
+    light-dark(var(--rh-color-accent-base-on-light),
+      var(--rh-color-accent-base-on-dark));
+  --rh-color-accent-brand:
+    light-dark(var(--rh-color-accent-brand-on-light),
+      var(--rh-color-accent-brand-on-dark));
+  --rh-color-border-strong:
+    light-dark(var(--rh-color-border-strong-on-light),
+      var(--rh-color-border-strong-on-dark));
+  --rh-color-border-subtle:
+    light-dark(var(--rh-color-border-subtle-on-light),
+      var(--rh-color-border-subtle-on-dark));
+  --rh-color-border-interactive:
+    light-dark(var(--rh-color-border-interactive-on-light),
+      var(--rh-color-border-interactive-on-dark));
+  --rh-color-border-destructive:
+    light-dark(var(--rh-color-border-destructive-on-light),
+      var(--rh-color-border-destructive-on-dark));
+  --rh-color-border-status-danger:
+    light-dark(var(--rh-color-border-status-danger-on-light),
+      var(--rh-color-border-status-danger-on-dark));
+  --rh-color-border-status-caution:
+    light-dark(var(--rh-color-border-status-caution-on-light),
+      var(--rh-color-border-status-caution-on-dark));
+  --rh-color-border-status-warning:
+    light-dark(var(--rh-color-border-status-warning-on-light),
+      var(--rh-color-border-status-warning-on-dark));
+  --rh-color-border-status-neutral:
+    light-dark(var(--rh-color-border-status-neutral-on-light),
+      var(--rh-color-border-status-neutral-on-dark));
+  --rh-color-border-status-info:
+    light-dark(var(--rh-color-border-status-info-on-light),
+      var(--rh-color-border-status-info-on-dark));
+  --rh-color-border-status-success:
+    light-dark(var(--rh-color-border-status-success-on-light),
+      var(--rh-color-border-status-success-on-dark));
+  --rh-color-brand-red:
+    light-dark(var(--rh-color-brand-red-on-light),
+      var(--rh-color-brand-red-on-dark));
+  --rh-color-icon-primary:
+    light-dark(var(--rh-color-icon-primary-on-light),
+      var(--rh-color-icon-primary-on-dark));
+  --rh-color-icon-secondary:
+    light-dark(var(--rh-color-icon-secondary-on-light),
+      var(--rh-color-icon-secondary-on-dark));
+  --rh-color-icon-status-danger:
+    light-dark(var(--rh-color-icon-status-danger-on-light),
+      var(--rh-color-icon-status-danger-on-dark));
+  --rh-color-icon-status-caution:
+    light-dark(var(--rh-color-icon-status-caution-on-light),
+      var(--rh-color-icon-status-caution-on-dark));
+  --rh-color-icon-status-warning:
+    light-dark(var(--rh-color-icon-status-warning-on-light),
+      var(--rh-color-icon-status-warning-on-dark));
+  --rh-color-icon-status-default:
+    light-dark(var(--rh-color-icon-status-default-on-light),
+      var(--rh-color-icon-status-default-on-dark));
+  --rh-color-icon-status-neutral:
+    light-dark(var(--rh-color-icon-status-neutral-on-light),
+      var(--rh-color-icon-status-neutral-on-dark));
+  --rh-color-icon-status-info:
+    light-dark(var(--rh-color-icon-status-info-on-light),
+      var(--rh-color-icon-status-info-on-dark));
+  --rh-color-icon-status-success:
+    light-dark(var(--rh-color-icon-status-success-on-light),
+      var(--rh-color-icon-status-success-on-dark));
+  --rh-color-interactive-primary-default:
+    light-dark(var(--rh-color-interactive-primary-default-on-light),
+      var(--rh-color-interactive-primary-default-on-dark));
+  --rh-color-interactive-primary-hover:
+    light-dark(var(--rh-color-interactive-primary-hover-on-light),
+      var(--rh-color-interactive-primary-hover-on-dark));
+  --rh-color-interactive-primary-active:
+    light-dark(var(--rh-color-interactive-primary-active-on-light),
+      var(--rh-color-interactive-primary-active-on-dark));
+  --rh-color-interactive-primary-focus:
+    light-dark(var(--rh-color-interactive-primary-focus-on-light),
+      var(--rh-color-interactive-primary-focus-on-dark));
+  --rh-color-interactive-primary-visited-default:
+    light-dark(var(--rh-color-interactive-primary-visited-default-on-light),
+      var(--rh-color-interactive-primary-visited-default-on-dark));
+  --rh-color-interactive-primary-visited-hover:
+    light-dark(var(--rh-color-interactive-primary-visited-hover-on-light),
+      var(--rh-color-interactive-primary-visited-hover-on-dark));
+  --rh-color-interactive-primary-visited-active:
+    light-dark(var(--rh-color-interactive-primary-visited-active-on-light),
+      var(--rh-color-interactive-primary-visited-active-on-dark));
+  --rh-color-interactive-primary-visited-focus:
+    light-dark(var(--rh-color-interactive-primary-visited-focus-on-light),
+      var(--rh-color-interactive-primary-visited-focus-on-dark));
+  --rh-color-interactive-secondary-default:
+    light-dark(var(--rh-color-interactive-secondary-default-on-light),
+      var(--rh-color-interactive-secondary-default-on-dark));
+  --rh-color-interactive-secondary-hover:
+    light-dark(var(--rh-color-interactive-secondary-hover-on-light),
+      var(--rh-color-interactive-secondary-hover-on-dark));
+  --rh-color-interactive-secondary-active:
+    light-dark(var(--rh-color-interactive-secondary-active-on-light),
+      var(--rh-color-interactive-secondary-active-on-dark));
+  --rh-color-interactive-secondary-focus:
+    light-dark(var(--rh-color-interactive-secondary-focus-on-light),
+      var(--rh-color-interactive-secondary-focus-on-dark));
+  --rh-color-interactive-secondary-visited-default:
+    light-dark(var(--rh-color-interactive-secondary-visited-default-on-light),
+      var(--rh-color-interactive-secondary-visited-default-on-dark));
+  --rh-color-interactive-secondary-visited-hover:
+    light-dark(var(--rh-color-interactive-secondary-visited-hover-on-light),
+      var(--rh-color-interactive-secondary-visited-hover-on-dark));
+  --rh-color-interactive-secondary-visited-active:
+    light-dark(var(--rh-color-interactive-secondary-visited-active-on-light),
+      var(--rh-color-interactive-secondary-visited-active-on-dark));
+  --rh-color-interactive-secondary-visited-focus:
+    light-dark(var(--rh-color-interactive-secondary-visited-focus-on-light),
+      var(--rh-color-interactive-secondary-visited-focus-on-dark));
+  --rh-color-status-danger:
+    light-dark(var(--rh-color-status-danger-on-light),
+      var(--rh-color-status-danger-on-dark));
+  --rh-color-status-caution:
+    light-dark(var(--rh-color-status-caution-on-light),
+      var(--rh-color-status-caution-on-dark));
+  --rh-color-status-warning:
+    light-dark(var(--rh-color-status-warning-on-light),
+      var(--rh-color-status-warning-on-dark));
+  --rh-color-status-neutral:
+    light-dark(var(--rh-color-status-neutral-on-light),
+      var(--rh-color-status-neutral-on-dark));
+  --rh-color-status-note:
+    light-dark(var(--rh-color-status-note-on-light),
+      var(--rh-color-status-note-on-dark));
+  --rh-color-status-info:
+    light-dark(var(--rh-color-status-info-on-light),
+      var(--rh-color-status-info-on-dark));
+  --rh-color-status-success:
+    light-dark(var(--rh-color-status-success-on-light),
+      var(--rh-color-status-success-on-dark));
+  --rh-color-surface-status-danger:
+    light-dark(var(--rh-color-surface-status-danger-on-light),
+      var(--rh-color-surface-status-danger-on-dark));
+  --rh-color-surface-status-caution:
+    light-dark(var(--rh-color-surface-status-caution-on-light),
+      var(--rh-color-surface-status-caution-on-dark));
+  --rh-color-surface-status-warning:
+    light-dark(var(--rh-color-surface-status-warning-on-light),
+      var(--rh-color-surface-status-warning-on-dark));
+  --rh-color-surface-status-default:
+    light-dark(var(--rh-color-surface-status-default-on-light),
+      var(--rh-color-surface-status-default-on-dark));
+  --rh-color-surface-status-neutral:
+    light-dark(var(--rh-color-surface-status-neutral-on-light),
+      var(--rh-color-surface-status-neutral-on-dark));
+  --rh-color-surface-status-info:
+    light-dark(var(--rh-color-surface-status-info-on-light),
+      var(--rh-color-surface-status-info-on-dark));
+  --rh-color-surface-status-success:
+    light-dark(var(--rh-color-surface-status-success-on-light),
+      var(--rh-color-surface-status-success-on-dark));
+  --rh-color-text-primary:
+    light-dark(var(--rh-color-text-primary-on-light),
+      var(--rh-color-text-primary-on-dark));
+  --rh-color-text-secondary:
+    light-dark(var(--rh-color-text-secondary-on-light),
+      var(--rh-color-text-secondary-on-dark));
+  --rh-color-text-brand:
+    light-dark(var(--rh-color-text-brand-on-light),
+      var(--rh-color-text-brand-on-dark));
+}
diff --git a/docs/styles/demo/dev-server.css b/docs/styles/demo/dev-server.css
index 38664427e7..5c41a730b2 100644
--- a/docs/styles/demo/dev-server.css
+++ b/docs/styles/demo/dev-server.css
@@ -2,6 +2,7 @@
   reset,
   fonts,
   tokens,
+  color-scheme,
   typography,
   base,
   layout;
@@ -9,6 +10,7 @@
 @import url('../reset.css') layer(reset);
 @import url('../fonts.css') layer(fonts);
 @import url('/node_modules/@rhds/tokens/css/global.css') layer(tokens);
+@import url('../color-scheme.css') layer(color-scheme);
 @import url('../typography.css') layer(typography);
 
 @layer base {
diff --git a/docs/styles/demo/styles.css b/docs/styles/demo/styles.css
index 7f5606a6b2..aee8462507 100644
--- a/docs/styles/demo/styles.css
+++ b/docs/styles/demo/styles.css
@@ -2,11 +2,13 @@
   reset,
   fonts,
   tokens,
+  color-scheme,
   typography;
 
 @import url('../reset.css') layer(reset);
 @import url('../fonts.css') layer(fonts);
 @import url('/assets/packages/@rhds/tokens/css/global.css') layer(tokens);
+@import url('../color-scheme.css') layer(color-scheme);
 @import url('../typography.css') layer(typography);
 
 html,
diff --git a/docs/styles/styles.css b/docs/styles/styles.css
index ddf9f956ae..6e2b7681e2 100644
--- a/docs/styles/styles.css
+++ b/docs/styles/styles.css
@@ -2,6 +2,7 @@
   reset,
   fonts,
   tokens,
+  color-scheme,
   typography,
   base,
   grid,
@@ -18,6 +19,7 @@
 @import url('reset.css') layer(reset);
 @import url('fonts.css') layer(fonts);
 @import url('/assets/packages/@rhds/tokens/css/global.css') layer(tokens);
+@import url('color-scheme.css') layer(color-scheme);
 @import url('typography.css') layer(typography);
 @import url('grid.css') layer(grid);
 @import url('lightdom.css') layer(lightdom);

From 28d5253143550907e3de2faccf0a63af5992fd2d Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:20:44 -0500
Subject: [PATCH 02/33] fix(accordion): use color-scheme

---
 elements/rh-accordion/demo/color-context.html |  6 ++--
 elements/rh-accordion/rh-accordion-header.css | 18 ++++------
 elements/rh-accordion/rh-accordion-header.ts  |  8 ++---
 elements/rh-accordion/rh-accordion-panel.css  | 34 +++++++++++++++++++
 elements/rh-accordion/rh-accordion-panel.ts   | 12 ++-----
 elements/rh-accordion/rh-accordion.css        | 32 +++++++++++++++++
 elements/rh-accordion/rh-accordion.ts         | 25 ++++++++++----
 7 files changed, 98 insertions(+), 37 deletions(-)

diff --git a/elements/rh-accordion/demo/color-context.html b/elements/rh-accordion/demo/color-context.html
index 78bbd54eae..385685e15d 100644
--- a/elements/rh-accordion/demo/color-context.html
+++ b/elements/rh-accordion/demo/color-context.html
@@ -6,10 +6,10 @@
 
       <rh-cta href="#">Call To Action</rh-cta>
 
-      <rh-accordion>
+      <rh-accordion color-palette="lightest" id="nested">
 
-        <rh-accordion-header expanded color-palette="lightest">Forced Palette</rh-accordion-header>
-        <rh-accordion-panel id="nested" color-palette="lightest">
+        <rh-accordion-header expanded>Forced Palette</rh-accordion-header>
+        <rh-accordion-panel>
           <label> No matter the parent context, this panel should always be
             <rh-context-picker target="nested" value="lightest"></rh-context-picker>
           </label>
diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css
index 6acc9ee174..b4f828cf3a 100644
--- a/elements/rh-accordion/rh-accordion-header.css
+++ b/elements/rh-accordion/rh-accordion-header.css
@@ -14,7 +14,9 @@
   padding: 0;
   margin: 0;
   color: var(--rh-color-text-primary);
-  background-color: var(--rh-color-surface);
+  background-color:
+    light-dark(var(--rh-color-surface-lightest),
+      var(--rh-color-surface-darkest));
   font-weight: var(--rh-font-weight-body-text-medium, 500);
 }
 
@@ -75,8 +77,7 @@ span {
   }
 
   &:is(:hover,:active,:focus) {
-    &.light { background-color: var(--rh-color-surface-lighter); }
-    &.dark { background-color: var(--rh-color-surface-dark-alt); }
+    background-color: light-dark(var(--rh-color-surface-lighter), var(--rh-color-surface-dark-alt));
 
     & span {
       color: var(--rh-color-text-primary);
@@ -101,18 +102,13 @@ span {
 
   &.expanded {
     --_after-background-color: var(--rh-color-accent-brand);
+    --rh-color-surface:
+      light-dark(var(--rh-color-surface-lightest, #ffffff),
+        var(--rh-color-surface-darkest, #151515));
 
     & #icon {
       rotate: calc(var(--_isRTL, -1) * 180deg);
     }
-
-    &.on.light {
-      --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-    }
-
-    &.on.dark {
-      --rh-color-surface: var(--rh-color-surface-darkest, #151515);
-    }
   }
 }
 
diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts
index b41e325297..79ec9e8f70 100644
--- a/elements/rh-accordion/rh-accordion-header.ts
+++ b/elements/rh-accordion/rh-accordion-header.ts
@@ -11,7 +11,6 @@ import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 import { DirController } from '../../lib/DirController.js';
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import { consume } from '@lit/context';
 
@@ -55,9 +54,6 @@ export class RhAccordionHeader extends LitElement {
   @property({ attribute: false })
   private ctx?: RhAccordionContext;
 
-  @colorContextConsumer()
-  private on?: ColorTheme;
-
   #dir = new DirController(this);
 
   #internals = InternalsController.of(this, {
@@ -81,12 +77,12 @@ export class RhAccordionHeader extends LitElement {
   }
 
   render() {
-    const { expanded, on = 'light' } = this;
+    const { expanded } = this;
     const { accents, large = false } = this.ctx ?? {};
     const rtl = this.#dir.dir === 'rtl';
     return html`
       <button id="button"
-              class="${classMap({ on: true, toggle: true, [on]: !!on, rtl, large, expanded })}"
+              class="${classMap({ toggle: true, rtl, large, expanded })}"
               @click="${this.#onClick}">
         <span id="header-container" class="${classMap({ [accents ?? '']: !!accents })}">
           <span id="header-text" part="text"><slot></slot></span>
diff --git a/elements/rh-accordion/rh-accordion-panel.css b/elements/rh-accordion/rh-accordion-panel.css
index 61afe418f9..017b2715d1 100644
--- a/elements/rh-accordion/rh-accordion-panel.css
+++ b/elements/rh-accordion/rh-accordion-panel.css
@@ -51,8 +51,42 @@
 }
 
 #container {
+  --rh-color-surface: light-dark(var(--rh-color-surface-lightest), var(--rh-color-surface-darkest));
+
   border-inline-end: 1px solid var(--rh-color-border-subtle);
   background-color: var(--rh-color-surface);
+
+  &.palette-light {
+    --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
+  }
+
+  &.palette-lighter {
+    --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
+  }
+
+  &.palette-lightest {
+    --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+  }
+
+  &.palette-dark {
+    --rh-color-surface: var(--rh-color-surface-dark, #383838);
+  }
+
+  &.palette-darker {
+    --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
+  }
+
+  &.palette-darkest {
+    --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+  }
+
+  &:is(.palette-light, .palette-lighter, .palette-lightest) {
+    color-scheme: light;
+  }
+
+  &:is(.palette-dark, .palette-darker, .palette-darkest) {
+    color-scheme: dark;
+  }
 }
 
 .expanded.on.light {
diff --git a/elements/rh-accordion/rh-accordion-panel.ts b/elements/rh-accordion/rh-accordion-panel.ts
index 392e4404bd..0ed2726a84 100644
--- a/elements/rh-accordion/rh-accordion-panel.ts
+++ b/elements/rh-accordion/rh-accordion-panel.ts
@@ -4,9 +4,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
-
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import styles from './rh-accordion-panel.css';
@@ -26,11 +23,6 @@ export class RhAccordionPanel extends LitElement {
 
   @property({ type: Boolean, reflect: true }) expanded = false;
 
-  @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
-
-  @colorContextConsumer() private on?: ColorTheme;
-
   @consume({ context, subscribe: true })
   @property({ attribute: false })
   private ctx?: RhAccordionContext;
@@ -42,11 +34,11 @@ export class RhAccordionPanel extends LitElement {
   }
 
   override render() {
-    const { on = '', expanded } = this;
+    const { expanded } = this;
     const { large = false } = this.ctx ?? {};
     return html`
       <div id="container"
-           class="${classMap({ on: true, [on]: !!on, large, expanded, content: true })}"
+           class="${classMap({ large, expanded, content: true })}"
            part="container"
            tabindex="-1">
         <slot class="body"></slot>
diff --git a/elements/rh-accordion/rh-accordion.css b/elements/rh-accordion/rh-accordion.css
index 2eb688c1de..ab3b7dee2d 100644
--- a/elements/rh-accordion/rh-accordion.css
+++ b/elements/rh-accordion/rh-accordion.css
@@ -5,6 +5,38 @@
   &.expanded {
     box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
   }
+
+  &.palette-light {
+    --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
+  }
+
+  &.palette-lighter {
+    --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
+  }
+
+  &.palette-lightest {
+    --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+  }
+
+  &.palette-dark {
+    --rh-color-surface: var(--rh-color-surface-dark, #383838);
+  }
+
+  &.palette-darker {
+    --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
+  }
+
+  &.palette-darkest {
+    --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+  }
+
+  &:is(.palette-light, .palette-lighter, .palette-lightest) {
+    color-scheme: light;
+  }
+
+  &:is(.palette-dark, .palette-darker, .palette-darkest) {
+    color-scheme: dark;
+  }
 }
 
 ::slotted(rh-accordion-header:first-child) {
diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts
index bf23421f7f..6311240b2f 100644
--- a/elements/rh-accordion/rh-accordion.ts
+++ b/elements/rh-accordion/rh-accordion.ts
@@ -6,8 +6,7 @@ import { property } from 'lit/decorators/property.js';
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { provide } from '@lit/context';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
+import { type ColorPalette } from '../../lib/context/color/provider.js';
 
 import { NumberListConverter, ComposedEvent } from '@patternfly/pfe-core';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
@@ -84,10 +83,8 @@ export class RhAccordion extends LitElement {
    * Color Palette for this accordion.
    * @see https://ux.redhat.com/theming/color-palettes/
    */
-  @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
-  @colorContextConsumer() private on?: ColorTheme;
 
   /**
    * Sets and reflects the currently expanded accordion 0-based indexes.
@@ -143,6 +140,21 @@ export class RhAccordion extends LitElement {
 
   #mo = new MutationObserver(() => this.updateAccessibility());
 
+
+  get #computedPalette() {
+    switch (this.colorPalette) {
+      case 'lightest':
+      case 'lighter':
+      case 'darkest':
+        return this.colorPalette;
+      case 'light':
+        return 'lighter';
+      case 'darker':
+      case 'dark':
+        return 'darkest';
+    }
+  }
+
   @provide({ context }) private ctx = this.#makeContext();
 
   connectedCallback() {
@@ -153,14 +165,13 @@ export class RhAccordion extends LitElement {
   }
 
   override render(): TemplateResult {
-    const { on } = this;
     const expanded = this.#expanded;
+    const computedPalette = this.#computedPalette;
     return html`
       <div id="container"
            class="${classMap({
-             on: true,
-             [on ?? 'light']: true,
              expanded,
+             [`palette-${computedPalette}`]: !!computedPalette,
            })}"><slot></slot></div>
     `;
   }

From d1b542d571ec8a75805f0ce21a4b6304f4d882a8 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:21:03 -0500
Subject: [PATCH 03/33] fix(alert): use color-scheme

---
 elements/rh-alert/rh-alert.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts
index 3a625469a8..3c2f1a0c81 100644
--- a/elements/rh-alert/rh-alert.ts
+++ b/elements/rh-alert/rh-alert.ts
@@ -13,7 +13,6 @@ import '@rhds/elements/rh-icon/rh-icon.js';
 
 import styles from './rh-alert.css';
 import toastStyles from './rh-alert-toast-styles.css';
-import consumerStyles from '@rhds/tokens/css/color-context-consumer.css.js';
 
 interface ToastOptions {
   id?: string;
@@ -53,7 +52,7 @@ export class AlertCloseEvent extends Event {
  */
 @customElement('rh-alert')
 export class RhAlert extends LitElement {
-  static readonly styles = [styles, consumerStyles];
+  static readonly styles = [styles];
 
   private static toaster: HTMLElement;
 
@@ -225,7 +224,6 @@ export class RhAlert extends LitElement {
       <rh-surface id="container"
                   class="${classMap({
                     hasBody,
-                    on: true,
                     light: true,
                     [state]: true,
                     [variant]: !!variant,

From 1e75a4c709a5f93e9ebff747328a3080a0e37ee8 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:21:15 -0500
Subject: [PATCH 04/33] fix(audio-player): use color-scheme

---
 .../rh-audio-player-lightdom.css              | 26 ++++++---
 ...h-audio-player-scrolling-text-overflow.css | 12 ++--
 ...rh-audio-player-scrolling-text-overflow.ts |  6 +-
 elements/rh-audio-player/rh-audio-player.css  | 57 +++++++++----------
 elements/rh-audio-player/rh-audio-player.ts   | 16 ++----
 5 files changed, 53 insertions(+), 64 deletions(-)

diff --git a/elements/rh-audio-player/rh-audio-player-lightdom.css b/elements/rh-audio-player/rh-audio-player-lightdom.css
index 7a90de921b..a25b624dbf 100644
--- a/elements/rh-audio-player/rh-audio-player-lightdom.css
+++ b/elements/rh-audio-player/rh-audio-player-lightdom.css
@@ -8,6 +8,20 @@ rh-audio-player {
   font-size: var(--rh-font-size-code-md, 1rem);
   font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
   color: var(--rh-audio-player-text-color, var(--rh-color-text-primary));
+
+  &[color-palette^='light'] {
+    color-scheme: light;
+  }
+
+  &[color-palette^='dark'] {
+    color-scheme: dark;
+
+    & > * {
+      background-color:
+        var(--rh-audio-player-background-color,
+          var(--rh-color-surface-darkest, #151515));
+    }
+  }
 }
 
 rh-audio-player:not([expanded]) rh-transcript:not(:defined) {
@@ -43,18 +57,14 @@ rh-audio-player-subscribe {
   display: block;
 }
 
-rh-audio-player[color-palette='dark'] > * {
-  background-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-darkest, #151515));
-}
-
 rh-audio-player-about,
 rh-audio-player-subscribe,
 rh-transcript {
   background-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-lightest, #ffffff));
+    light-dark(var(--rh-audio-player-background-color,
+      var(--rh-color-surface-lightest, #ffffff)),
+      var(--rh-audio-player-background-color,
+      var(--rh-color-surface-darkest, #151515)));
 }
 
 rh-audio-player > [slot='series'] {
diff --git a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css
index 8c9b2b047d..1274c9973c 100644
--- a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css
+++ b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.css
@@ -20,14 +20,10 @@
   overflow-y: visible;
 
   --_fade-color:
-    var(--rh-audio-player-scrolling-text-overflow-background-color,
-      var(--rh-color-surface-lightest, #ffffff));
-}
-
-#outer.dark {
-  --_fade-color:
-    var(--rh-audio-player-scrolling-text-overflow-background-color,
-      var(--rh-color-surface-darkest, #151515));
+    light-dark(var(--rh-audio-player-scrolling-text-overflow-background-color,
+      var(--rh-color-surface-lightest, #ffffff)),
+      var(--rh-audio-player-scrolling-text-overflow-background-color,
+      var(--rh-color-surface-darkest, #151515)));
 }
 
 #outer.rtl {
diff --git a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts
index 0821deb196..4aecaf8290 100644
--- a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts
+++ b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts
@@ -2,8 +2,6 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import styles from './rh-audio-player-scrolling-text-overflow.css';
 
 /**
@@ -16,7 +14,6 @@ import styles from './rh-audio-player-scrolling-text-overflow.css';
 export class RhAudioPlayerScrollingTextOverflow extends LitElement {
   static readonly styles = [styles];
 
-  @colorContextConsumer() private on?: ColorTheme;
 
   #scrolling = false;
 
@@ -40,11 +37,10 @@ export class RhAudioPlayerScrollingTextOverflow extends LitElement {
   }
 
   render() {
-    const { on = 'light' } = this;
     const { direction } = this.#style ?? {};
     return html`
       <div id="outer"
-           class="${classMap({ [on]: true, [direction || 'auto']: true })}"
+           class="${classMap({ [direction || 'auto']: true })}"
            @mouseover=${this.startScrolling}
            @mouseout=${this.stopScrolling}
            @focus=${this.startScrolling}
diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css
index 795344dea0..acb63fa74a 100644
--- a/elements/rh-audio-player/rh-audio-player.css
+++ b/elements/rh-audio-player/rh-audio-player.css
@@ -36,46 +36,34 @@ button {
   --_time-slider-extension: 0px;
   --_about-mediatitle-display: none;
   --_about-heading-display: flex;
-  --_box-shadow: var(--rh-box-shadow-md, 0 4px 6px 1px rgba(21, 21, 21, 0.25));
+  --_box-shadow: light-dark(var(--rh-box-shadow-md, 0 4px 6px 1px rgba(21, 21, 21, 0.25)), none);
   --_secondary-opacity: var(--rh-audio-player-secondary-opacity, 1);
   --_text-color: var(--rh-audio-player-text-color, var(--rh-color-text-primary));
   --_border-color: var(--rh-color-border-subtle);
   --_surface-color:
-    var(--rh-audio-player-background-color,
-      var(--rh-color-surface-lightest, #ffffff));
+    light-dark(var(--rh-audio-player-background-color, var(--rh-color-surface-lightest, #ffffff)),
+      var(--rh-audio-player-background-color, var(--rh-color-surface-darkest, #151515)));
   --_secondary-text-color:
     var(--rh-audio-player-secondary-text-color,
       var(--rh-color-text-secondary));
   --_static-border-color: var(--rh-color-border-subtle);
   --_static-text-color: var(--rh-color-text-primary);
-  --_static-highlight-color: var(--rh-color-interactive-primary-hover);
+  --_static-highlight-color:
+    light-dark(var(--rh-color-interactive-primary-hover),
+      var(--rh-color-surface-dark, #383838));
   --_static-undeline-color: var(--rh-color-border-subtle);
-  --_static-surface-color: var(--rh-color-surface-lightest, #ffffff);
-  --_static-surface-focus-color: var(--rh-color-surface-light, #e0e0e0);
+  --_static-surface-color:
+    light-dark(var(--rh-color-surface-lightest, #ffffff),
+      var(--rh-color-surface-darkest, #151515));
+  --_static-surface-focus-color:
+    light-dark(var(--rh-color-surface-light, #e0e0e0),
+      var(--rh-color-surface-dark, #383838));
   --rh-tooltip-content-padding-block-start: var(--rh-space-md, 8px);
   --rh-tooltip-content-padding-block-end: var(--rh-space-md, 8px);
   --rh-tooltip-content-padding-inline-start: var(--rh-space-md, 8px);
   --rh-tooltip-content-padding-inline-end: var(--rh-space-md, 8px);
   --rh-audio-player-scrolling-text-overflow-background-color: var(--_surface-color);
 
-  &.dark {
-    --_surface-color:
-      var(--rh-audio-player-background-color,
-        var(--rh-color-surface-darkest, #151515));
-    --_box-shadow: none;
-    --_static-highlight-color: var(--rh-color-surface-dark, #383838);
-    --_static-surface-color: var(--rh-color-surface-darkest, #151515);
-    --_static-surface-focus-color: var(--rh-color-surface-dark, #383838);
-
-    &.has-accent-color {
-      --_static-highlight-color: var(--rh-color-interactive-primary-hover);
-      --_static-surface-color: var(--rh-color-surface-lightest, #ffffff);
-      --_static-surface-focus-color: var(--rh-color-surface-light, #e0e0e0);
-      --_border-color: rgba(255, 255, 255, 0.5);
-      --_secondary-opacity: var(--rh-audio-player-secondary-opacity, 0.75);
-    }
-  }
-
   &.mobile-safari {
     --_time-slider-extension:
       calc(var(--_button-size, 40px) + var(--_icon-gap,
@@ -83,15 +71,26 @@ button {
   }
 
   &.has-accent-color {
-    --_border-color: rgba(0, 0, 0, 0.5);
+    --_border-color: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
     --_secondary-text-color:
       var(--rh-audio-player-secondary-text-color,
         var(--rh-color-text-primary));
     --_range-track-color: rgb(255 255 255 / 0.5);
-    --_secondary-opacity: var(--rh-audio-player-secondary-opacity, 0.75);
+    --_secondary-opacity:
+      light-dark(var(--rh-audio-player-secondary-opacity, 0.75),
+        var(--rh-audio-player-secondary-opacity, 0.75));
     --_static-border-color: transparent;
     --_static-overlay-focus-color: rgba(80, 80, 80, 0.5);
     --_static-overlay-color: rgba(0, 0, 0, 0.5);
+    --_static-highlight-color:
+      light-dark(var(--rh-color-interactive-primary-hover),
+        var(--rh-color-interactive-primary-hover));
+    --_static-surface-color:
+      light-dark(var(--rh-color-surface-lightest, #ffffff),
+        var(--rh-color-surface-lightest, #ffffff));
+    --_static-surface-focus-color:
+      light-dark(var(--rh-color-surface-light, #e0e0e0),
+        var(--rh-color-surface-light, #e0e0e0));
   }
 
   &.show-menu {
@@ -402,14 +401,10 @@ rh-menu::part(menu) {
   width: max-content;
   will-change: opacity;
   background: var(--rh-audio-player-background-color, var(--_static-surface-color));
-  border: 1px solid var(--_border-color);
+  border: light-dark(1px solid var(--_border-color), none);
   box-shadow: var(--_static-box-shadow);
 }
 
-#container.dark rh-menu::part(menu) {
-  border: none;
-}
-
 rh-menu:not([inert])::part(menu),
 rh-menu[aria-hidden='false']::part(menu) {
   opacity: 1;
diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
index 94400c495e..eebc1e4528 100644
--- a/elements/rh-audio-player/rh-audio-player.ts
+++ b/elements/rh-audio-player/rh-audio-player.ts
@@ -6,10 +6,8 @@ import { property } from 'lit/decorators/property.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
+import { type ColorPalette } from '../../lib/context/color/provider.js';
 
 import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 
@@ -114,11 +112,8 @@ export class RhAudioPlayer extends LitElement {
   @property({ attribute: false }) microcopy = {};
 
   /** Element's color palette */
-  @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   @queryAssignedElements({ slot: 'series' })
   private _mediaseries?: HTMLElement[];
 
@@ -340,7 +335,7 @@ export class RhAudioPlayer extends LitElement {
   }
 
   render() {
-    const { expanded, mediatitle, on = 'light', layout, poster } = this;
+    const { expanded, mediatitle, layout, poster } = this;
     const { dir } = this.#dir;
     const { open, styles = {} } = this.#menufloat;
     const showMenu = this.#hasMenu;
@@ -366,14 +361,11 @@ export class RhAudioPlayer extends LitElement {
     const accentColor = !!this.#styles?.getPropertyValue('--rh-audio-player-background-color');
 
     return html`
-      <rh-surface id="container"
-          color-palette="${ifDefined(this.colorPalette)}"
+      <div id="container"
           class="${classMap({
-              [on]: true,
               [dir]: true,
               [layout]: true,
               expanded,
-              'on': true,
               'mediatitle': mediatitle !== undefined,
               'poster': poster !== undefined,
               'show-menu': showMenu,
@@ -600,7 +592,7 @@ export class RhAudioPlayer extends LitElement {
                 @transcriptdownload=${this.#onTranscriptDownload}>
           </slot>
         </div>
-      </rh-surface>
+      </div>
     `;
   }
 

From 6bbde2abae9215e265e5433afca27cc30dc7aced Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:21:26 -0500
Subject: [PATCH 05/33] fix(avatar): use color-scheme

---
 elements/rh-avatar/rh-avatar.css | 69 ++++++++++++++++++++------------
 elements/rh-avatar/rh-avatar.ts  | 26 +++++-------
 2 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/elements/rh-avatar/rh-avatar.css b/elements/rh-avatar/rh-avatar.css
index 34067d8cdd..e9a24859b1 100644
--- a/elements/rh-avatar/rh-avatar.css
+++ b/elements/rh-avatar/rh-avatar.css
@@ -9,15 +9,23 @@
 
 #container {
   display: grid;
-  color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+  color:
+    light-dark(var(--rh-color-text-secondary-on-light, #4d4d4d),
+      var(--rh-color-text-secondary-on-dark, #c7c7c7));
 
   --_colors:
-    var(--rh-avatar-colors,
+    light-dark(var(--rh-avatar-colors,
       var(--rh-color-blue-30, #92c5f9)
       var(--rh-color-teal-50, #37a3a3)
       var(--rh-color-green-60, #3d7317)
       var(--rh-color-red-40, #f56e6e)
-      var(--rh-color-purple-60, #3d2785));
+      var(--rh-color-purple-60, #3d2785)),
+      var(--rh-avatar-colors,
+      var(--rh-color-blue-50, #0066cc)
+      var(--rh-color-teal-70, #004d4d)
+      var(--rh-color-green-70, #204d00)
+      var(--rh-color-red-50, #ee0000)
+      var(--rh-color-purple-70, #21134d)));
 
   column-gap: var(--rh-space-lg, 16px);
   width: min-content;
@@ -67,36 +75,23 @@ slot {
 }
 
 ::slotted(a) {
-  color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
+  color:
+    light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+      var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
   text-decoration: none;
 }
 
 ::slotted(a:visited) {
-  color: var(--rh-color-interactive-primary-visited-default-on-light, #5e40be);
+  color:
+    light-dark(var(--rh-color-interactive-primary-visited-default-on-light, #5e40be),
+      var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9));
 }
 
 ::slotted(a:active),
-::slotted(a:hover) { color: var(--rh-color-interactive-primary-hover-on-light, #003366); }
-
-.dark ::slotted(a) { color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9); }
-
-.dark ::slotted(a:visited) {
-  color: var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9);
-}
-
-.dark ::slotted(a:active),
-.dark ::slotted(a:hover) { color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc); }
-
-#container.dark {
-  color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
-
-  --_colors:
-    var(--rh-avatar-colors,
-      var(--rh-color-blue-50, #0066cc)
-      var(--rh-color-teal-70, #004d4d)
-      var(--rh-color-green-70, #204d00)
-      var(--rh-color-red-50, #ee0000)
-      var(--rh-color-purple-70, #21134d));
+::slotted(a:hover) {
+  color:
+    light-dark(var(--rh-color-interactive-primary-hover-on-light, #003366),
+      var(--rh-color-interactive-primary-hover-on-dark, #b9dafc));
 }
 
 img,
@@ -132,3 +127,25 @@ svg {
 :host([plain]) #container {
   column-gap: 0;
 }
+
+#default {
+  & .st1 {
+    fill-rule: evenodd;
+    clip-rule: evenodd;
+    fill: light-dark(#f0f0f0, #212427);
+  }
+
+  & .st2 {
+    fill: light-dark(#b8bbbe, #4f5255);
+  }
+
+  & .st3 {
+    fill-rule: evenodd;
+    clip-rule: evenodd;
+    fill: light-dark(#d2d2d2, #6a6e73);
+  }
+
+  & .st4 {
+    fill: light-dark(#d2d2d2, #6a6e73);
+  }
+}
diff --git a/elements/rh-avatar/rh-avatar.ts b/elements/rh-avatar/rh-avatar.ts
index 7b333b211a..d7db14de74 100644
--- a/elements/rh-avatar/rh-avatar.ts
+++ b/elements/rh-avatar/rh-avatar.ts
@@ -6,21 +6,9 @@ import { LitElement, html, type PropertyValues } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { ScreenSizeController } from '../../lib/ScreenSizeController.js';
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-avatar.css';
 
-const DEFAULT_AVATARS = {
-  light: html`<svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36" role="presentation" part="img">
-      <style>.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0}.st2{fill:#b8bbbe}.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2}.st4{fill:#d2d2d2}</style><path d="M0 0h36v36H0z" class="st1"/><path d="M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" class="st3"/><path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z" class="st2"/><path d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z" class="st4"/><path d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z" class="st2"/>
-    </svg>`,
-  dark: html`<svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36" role="presentation" part="img">
-    <style>.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#212427}.st2{fill:#4F5255}.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#6A6E73}.st4{fill:#6A6E73}</style><path d="M0 0h36v36H0z" class="st1"/><path d="M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" class="st3"/><path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z" class="st2"/><path d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z" class="st4"/><path d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z" class="st2"/>
-  </svg>`,
-  saturated: html``,
-};
-
-DEFAULT_AVATARS.saturated = DEFAULT_AVATARS.dark;
 
 /**
  * An avatar is a small thumbnail representation of a user.
@@ -60,8 +48,6 @@ export class RhAvatar extends LitElement {
   /** When true, hides the title and subtitle */
   @property({ reflect: true, type: Boolean }) plain = false;
 
-  @colorContextConsumer() @property() private on?: ColorTheme;
-
   #style?: CSSStyleDeclaration;
 
   #pattern?: RandomPatternController;
@@ -89,12 +75,18 @@ export class RhAvatar extends LitElement {
   }
 
   render() {
-    const { on } = this;
     const { mobile } = this.#screen;
     return html`
-      <div id="container" class="${classMap({ mobile, [on ?? 'light']: !!on })}">${this.pattern ? html`
+      <div id="container" class="${classMap({ mobile })}">${this.pattern ? html`
         <canvas part="canvas"></canvas>` : this.src ? html`
-        <img src="${this.src}" role="presentation" part="img">` : html`${DEFAULT_AVATARS[on ?? 'light']}`}
+        <img src="${this.src}" role="presentation" part="img">` : html`
+        <svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 36 36" viewBox="0 0 36 36" role="presentation" part="img" id="default">
+          <path d="M0 0h36v36H0z" class="st1"/><path d="M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z" class="st3"/>
+          <path d="M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z" class="st2"/>
+          <path d="m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z" class="st4"/>
+          <path d="m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z" class="st2"/>
+        </svg>
+        `}
         <slot id="title">${this.name}</slot>
         <slot id="subtitle" name="subtitle">${this.subtitle}</slot>
       </div>

From 8af51ed69b6d33567e96f88ddf027e95c5b445ab Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:21:35 -0500
Subject: [PATCH 06/33] fix(badge): use color-scheme

---
 elements/rh-badge/rh-badge.css | 34 ++++++++++++++++++++++------------
 elements/rh-badge/rh-badge.ts  |  7 +------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/elements/rh-badge/rh-badge.css b/elements/rh-badge/rh-badge.css
index dbe133fbfd..e5a0e33baa 100644
--- a/elements/rh-badge/rh-badge.css
+++ b/elements/rh-badge/rh-badge.css
@@ -12,19 +12,29 @@ span {
   font-weight: 700;
   line-height: var(--rh-line-height-body-text, 1.5);
   padding-inline: var(--_badge-padding, var(--rh-space-md, 8px));
-}
+  color:
+    light-dark(var(--rh-color-text-primary-on-dark, #ffffff),
+      var(--rh-color-text-primary-on-light, #151515));
+
+  &.neutral { background-color: var(--rh-color-status-neutral); }
+
+  &.info { background-color: var(--rh-color-status-info); }
+
+  &.success { background-color: var(--rh-color-status-success); }
 
-.on.dark { color: var(--rh-color-text-primary-on-light, #151515); }
-.on.light { color: var(--rh-color-text-primary-on-dark, #ffffff); }
+  &.caution {
+    background-color: var(--rh-color-status-caution);
+    color:
+      light-dark(var(--rh-color-text-primary-on-light, #151515),
+        var(--rh-color-text-primary-on-light, #151515));
+  }
 
-.on.neutral { background-color: var(--rh-color-status-neutral); }
-.on.info { background-color: var(--rh-color-status-info); }
-.on.success { background-color: var(--rh-color-status-success); }
-.on.caution { background-color: var(--rh-color-status-caution); }
-.on.warning { background-color: var(--rh-color-status-warning); }
-.on.danger { background-color: var(--rh-color-status-danger); }
+  &.warning {
+    background-color: var(--rh-color-status-warning);
+    color:
+      light-dark(var(--rh-color-text-primary-on-light, #151515),
+        var(--rh-color-text-primary-on-light, #151515));
+  }
 
-.on.light.warning,
-.on.light.caution {
-  color: var(--rh-color-text-primary-on-light, #151515);
+  &.danger { background-color: var(--rh-color-status-danger); }
 }
diff --git a/elements/rh-badge/rh-badge.ts b/elements/rh-badge/rh-badge.ts
index 2a784203ce..fadc70fcfc 100644
--- a/elements/rh-badge/rh-badge.ts
+++ b/elements/rh-badge/rh-badge.ts
@@ -4,7 +4,6 @@ import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 
-import { colorContextConsumer } from '@rhds/elements/lib/context/color/consumer.js';
 
 import styles from './rh-badge.css';
 
@@ -25,8 +24,6 @@ import styles from './rh-badge.css';
 export class RhBadge extends LitElement {
   static readonly styles = [styles];
 
-  @colorContextConsumer() private on?: string;
-
   /**
    * Denotes the state-of-affairs this badge represents
    */
@@ -80,7 +77,7 @@ export class RhBadge extends LitElement {
   }
 
   override render() {
-    const { threshold, number, textContent, on = 'light', state = 'neutral' } = this;
+    const { threshold, number, textContent, state = 'neutral' } = this;
     const displayText =
         (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
       : (number != null) ? number.toString()
@@ -88,8 +85,6 @@ export class RhBadge extends LitElement {
 
     return html`
       <span class="${classMap({
-        on: true,
-        [on]: true,
         [state]: true,
       })}">${displayText}</span>
     `;

From 5dcec2b7f07de1e316de5e453183e32596db3785 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:21:47 -0500
Subject: [PATCH 07/33] fix(blockquote): use color-scheme

---
 elements/rh-blockquote/rh-blockquote.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/elements/rh-blockquote/rh-blockquote.ts b/elements/rh-blockquote/rh-blockquote.ts
index 8ed08840e5..305e452991 100644
--- a/elements/rh-blockquote/rh-blockquote.ts
+++ b/elements/rh-blockquote/rh-blockquote.ts
@@ -3,8 +3,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
+import { type ColorPalette } from '../../lib/context/color/provider.js';
 
 import '@rhds/elements/rh-icon/rh-icon.js';
 
@@ -31,11 +30,8 @@ export class RhBlockquote extends LitElement {
    * - `lightest` (default)
    * - `darkest`
    */
-  @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   /**
    * Set the alignment of the blockquote. Possible values are:
    * - `left` (default)
@@ -54,9 +50,9 @@ export class RhBlockquote extends LitElement {
   @property({ reflect: true }) size: 'default' | 'large' = 'default';
 
   render() {
-    const { highlight, on = 'light' } = this;
+    const { highlight } = this;
     return html`
-      <figure id="container" class="${classMap({ highlight, on: true, [on]: true })}">
+      <figure id="container" class="${classMap({ highlight })}">
         <rh-icon set="standard" icon="quotemark-open"></rh-icon>
         <blockquote id="quote">
           <slot></slot>

From c45da3baad1c49ecd11cab55615443985975a4f9 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:21:58 -0500
Subject: [PATCH 08/33] fix(breadcrumb): use color-scheme

---
 .../rh-breadcrumb/rh-breadcrumb-lightdom.css  | 25 ++++---
 elements/rh-breadcrumb/rh-breadcrumb.css      | 71 ++++++++++++-------
 elements/rh-breadcrumb/rh-breadcrumb.ts       | 10 +--
 3 files changed, 63 insertions(+), 43 deletions(-)

diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css
index 653b07e976..c6a974932f 100644
--- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css
+++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css
@@ -12,18 +12,27 @@ rh-breadcrumb ol {
 }
 
 rh-breadcrumb > ol > li {
-  background-image: var(--_breadcrumb-caret-image-default);
-  background-position: calc(100% - 14px) center;
-  background-repeat: no-repeat;
-  background-size: 10px;
-  display: inline-block;
+  display: inline-flex;
   margin-block-end: var(--rh-space-md, 8px);
-  padding-inline-end: var(--rh-breadcrumb-li-padding-inline-end, 42px);
+  padding-inline-end: var(--rh-breadcrumb-li-padding-inline-end, var(--rh-space-lg, 16px));
   vertical-align: bottom;
+  align-items: center;
+  gap: var(--rh-space-lg, 16px);
+}
+
+rh-breadcrumb > ol > li:not(:first-of-type):before {
+  display: inline-block;
+  background-color: var(--rh-color-icon-secondary);
+  mask-image: var(--_breadcrumb-caret-image-default);
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  height: var(--rh-font-size-body-text-sm, 0.875rem);
+  width: var(--rh-font-size-body-text-sm, 0.875rem);
+  content: '';
 }
 
-rh-breadcrumb[variant='subtle'] > ol > li {
-  background-image: var(--_breadcrumb-caret-image-subtle);
+rh-breadcrumb[variant='subtle'] > ol > li:not(:first-of-type):before {
+  background-color: var(--rh-color-icon-subtle, #707070);
 }
 
 rh-breadcrumb > ol > li:first-child {
diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css
index e3f0dd19fe..997e9e3ca0 100644
--- a/elements/rh-breadcrumb/rh-breadcrumb.css
+++ b/elements/rh-breadcrumb/rh-breadcrumb.css
@@ -1,57 +1,76 @@
 :host {
-  /* stylelint-disable-next-line max-line-length */
-  --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23000000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
-  /* stylelint-disable-next-line max-line-length */
-  --_breadcrumb-caret-image-subtle: var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23707070'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
-  --_breadcrumb-link-color:
+  /* light context */
+  --_breadcrumb-link-color-on-light:
     var(--rh-breadcrumb-link-color,
       var(--rh-color-interactive-primary-default));
-  --_breadcrumb-link-color-current-page:
+  --_breadcrumb-link-color-current-page-on-light:
     var(--rh-breadcrumb-link-color-current-page,
       var(--rh-color-text-primary));
-  --_breadcrumb-link-color-current-page-subtle:
+  --_breadcrumb-link-color-current-page-subtle-on-light:
     var(--rh-breadcrumb-link-color-current-page-subtle,
       var(--rh-color-text-secondary));
-  --_breadcrumb-link-color-hover:
+  --_breadcrumb-link-color-hover-on-light:
     var(--rh-breadcrumb-link-color-hover,
       var(--rh-color-interactive-primary-hover));
-  --_breadcrumb-link-color-visited:
+  --_breadcrumb-link-color-visited-on-light:
     var(--rh-breadcrumb-link-color-visited,
       var(--rh-color-interactive-primary-visited-default));
-  --_breadcrumb-link-color-visited-hover:
+  --_breadcrumb-link-color-visited-hover-on-light:
     var(--rh-breadcrumb-link-color-visited-hover,
       var(--rh-color-interactive-primary-visited-hover));
-  --_breadcrumb-link-focus-outline-color:
+  --_breadcrumb-link-focus-outline-color-on-light:
     var(--rh-breadcrumb-link-focus-outline-color,
       var(--rh-color-border-interactive));
 
-  display: block;
-}
-
-#container.dark {
-  /* stylelint-disable-next-line max-line-length */
-  --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
-  /* stylelint-disable-next-line max-line-length */
-  --_breadcrumb-caret-image-subtle: var(--rh-breadcrumb-caret-image-subtle, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z' fill='%23a3a3a3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
-  --_breadcrumb-link-color:
+  /* dark context */
+  --_breadcrumb-link-color-on-dark:
     var(--rh-breadcrumb-link-color,
       var(--rh-color-interactive-primary-default));
-  --_breadcrumb-link-color-current-page:
+  --_breadcrumb-link-color-current-page-on-dark:
     var(--rh-breadcrumb-link-color-current-page,
       var(--rh-color-text-primary));
-  --_breadcrumb-link-color-current-page-subtle:
+  --_breadcrumb-link-color-current-page-subtle-on-dark:
     var(--rh-breadcrumb-link-color-current-page-subtle,
       var(--rh-color-text-secondary));
-  --_breadcrumb-link-color-hover:
+  --_breadcrumb-link-color-hover-on-dark:
     var(--rh-breadcrumb-link-color-hover,
       var(--rh-color-interactive-primary-hover));
-  --_breadcrumb-link-color-visited:
+  --_breadcrumb-link-color-visited-on-dark:
     var(--rh-breadcrumb-link-color-visited,
       var(--rh-color-interactive-primary-visited-default));
-  --_breadcrumb-link-color-visited-hover:
+  --_breadcrumb-link-color-visited-hover-on-dark:
     var(--rh-breadcrumb-link-color-visited-hover,
       var(--rh-color-interactive-primary-visited-hover));
-  --_breadcrumb-link-focus-outline-color:
+  --_breadcrumb-link-focus-outline-color-on-dark:
     var(--rh-breadcrumb-link-focus-outline-color,
       var(--rh-color-border-interactive));
+
+  /* computed context */
+  --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z'  fill='red' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
+  --_breadcrumb-caret-image-subtle:
+    light-dark(var(--_breadcrumb-caret-image-subtle-on-light),
+      var(--_breadcrumb-caret-image-subtle-on-dark));
+  --_breadcrumb-link-color:
+    light-dark(var(--_breadcrumb-link-color-on-light),
+      var(--_breadcrumb-link-color-on-dark));
+  --_breadcrumb-link-color-current-page:
+    light-dark(var(--_breadcrumb-link-color-current-page-on-light),
+      var(--_breadcrumb-link-color-current-page-on-dark));
+  --_breadcrumb-link-color-current-page-subtle:
+    light-dark(var(--_breadcrumb-link-color-current-page-subtle-on-light),
+      var(--_breadcrumb-link-color-current-page-subtle-on-dark));
+  --_breadcrumb-link-color-hover:
+    light-dark(var(--_breadcrumb-link-color-hover-on-light),
+      var(--_breadcrumb-link-color-hover-on-dark));
+  --_breadcrumb-link-color-visited:
+    light-dark(var(--_breadcrumb-link-color-visited-on-light),
+      var(--_breadcrumb-link-color-visited-on-dark));
+  --_breadcrumb-link-color-visited-hover:
+    light-dark(var(--_breadcrumb-link-color-visited-hover-on-light),
+      var(--_breadcrumb-link-color-visited-hover-on-dark));
+  --_breadcrumb-link-focus-outline-color:
+    light-dark(var(--_breadcrumb-link-focus-outline-color-on-light),
+      var(--_breadcrumb-link-focus-outline-color-on-dark));
+
+  display: block;
 }
diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts
index 3b1dcd742d..413c962016 100644
--- a/elements/rh-breadcrumb/rh-breadcrumb.ts
+++ b/elements/rh-breadcrumb/rh-breadcrumb.ts
@@ -1,9 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { classMap } from 'lit/directives/class-map.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-breadcrumb.css';
 
@@ -49,18 +47,12 @@ export class RhBreadcrumb extends LitElement {
    */
   @property({ reflect: true }) variant?: 'subtle';
 
-  /**
-   * Sets color theme based on parent context
-   */
-  @colorContextConsumer() private on?: ColorTheme;
-
   static readonly styles = [styles];
 
   render() {
-    const { on = '' } = this;
     const label = this.accessibleLabel ? this.accessibleLabel : 'Breadcrumb';
     return html`
-      <nav aria-label="${label}" part="container" id="container" class="${classMap({ on: true, [on]: !!on })}">
+      <nav aria-label="${label}" part="container" id="container">
         <slot></slot>
       </nav>
     `;

From 4dba5c471d0408363e327a2da223daa20fae1de1 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:22:09 -0500
Subject: [PATCH 09/33] fix(button): use color-scheme

---
 elements/rh-button/rh-button.css | 748 ++++++++++++-------------------
 elements/rh-button/rh-button.ts  |   8 +-
 2 files changed, 288 insertions(+), 468 deletions(-)

diff --git a/elements/rh-button/rh-button.css b/elements/rh-button/rh-button.css
index 2d4aa23bdc..0279990412 100644
--- a/elements/rh-button/rh-button.css
+++ b/elements/rh-button/rh-button.css
@@ -7,6 +7,15 @@
   display: none !important;
 }
 
+[part='icon'] {
+  display: none;
+  pointer-events: none;
+}
+
+rh-icon {
+  color: currentcolor;
+}
+
 button {
   cursor: pointer;
   position: relative;
@@ -23,469 +32,307 @@ button {
   padding-inline: var(--rh-space-lg, 16px);
   outline-offset: var(--rh-length-4xs, 1px);
 
-  --_color: var(--_default-color, var(--_primary-color));
-  --_background-color: var(--_default-background-color, var(--_primary-background-color));
-  --_border-color: var(--_default-border-color, var(--_primary-border-color));
-  --_border-width: var(--_default-border-width, var(--_primary-border-width));
-}
-
-button:after {
-  position: absolute;
-  inset: 0;
-  content: '';
-  border-style: solid;
-  border-color: var(--_border-color);
-  border-width: var(--_border-width);
-  border-radius: var(--rh-border-radius-default, 3px);
-}
-
-button > span {
-  display: contents;
-}
-
-:host(:is(:disabled, [aria-disabled='true'])),
-:host(:is(:disabled, [aria-disabled='true'])) #container,
-:host(:is(:disabled, [aria-disabled='true'])) button,
-:host(:is(:disabled, [aria-disabled='true'])[danger]) button,
-:host(:is(:disabled, [aria-disabled='true'])[variant='link']) button {
-  pointer-events: none;
-  cursor: default;
-}
-
-[part='icon'] {
-  display: none;
-  pointer-events: none;
-}
-
-.hasIcon {
-  position: relative;
-  display: flex;
-  gap: var(--rh-space-sm, 6px);
-  align-items: center;
-  padding-inline-start: calc(var(--rh-space-lg, 16px) * 0.75);
-
-  & [part='icon'] {
-    display: contents;
+  &:active {
+    --_color: var(--_active-color);
+    --_background-color: var(--_active-background-color);
+    --_border-width: var(--_active-border-width);
   }
-}
-
-[part='icon'] ::slotted(*) {
-  width: 16px;
-  max-width: 16px;
-  height: 16px;
-  max-height: 16px;
-}
-
-.light {
-  /* PRIMARY */
-  --_primary-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_primary-background-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_primary-border-color: transparent;
-  --_primary-border-width: var(--rh-border-width-sm, 1px);
-  --_primary-active-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_primary-active-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
-  --_primary-active-border-width: var(--rh-border-width-sm, 1px);
-  --_primary-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_primary-focus-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
-  --_primary-focus-border-width: var(--rh-border-width-md, 2px);
-  --_primary-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_primary-hover-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
-  --_primary-hover-border-width: var(--rh-border-width-sm, 1px);
-
-  /* DANGER */
-  --_danger-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_danger-background-color: #c9190b; /* WARNING: non-token value */
-  --_danger-border-color: transparent;
-  --_danger-border-width: var(--rh-border-width-sm, 1px);
-  --_danger-active-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_danger-active-background-color: #a30000; /* WARNING: non-token value */
-  --_danger-active-border-color: transparent;
-  --_danger-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_danger-focus-background-color: #a30000;  /* WARNING: non-token value */
-  --_danger-focus-border-color: transparent;
-  --_danger-focus-border-width: var(--rh-border-width-md, 2px);
-  --_danger-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_danger-hover-background-color: #a30000; /* WARNING: non-token value */
-  --_danger-hover-border-color: transparent;
-
-  /* SECONDARY */
-  --_secondary-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_secondary-danger-color: var(--rh-color-red-60, #a60000);
-  --_secondary-background-color: transparent;
-  --_secondary-border-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_secondary-border-width: var(--rh-border-width-sm, 1px);
-  --_secondary-active-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_secondary-active-background-color: transparent;
-  --_secondary-active-border-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_secondary-active-border-width: var(--rh-border-width-md, 2px);
-  --_secondary-focus-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_secondary-focus-background-color: transparent;
-  --_secondary-focus-border-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_secondary-focus-border-width: var(--rh-border-width-md, 2px);
-  --_secondary-hover-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_secondary-hover-background-color: transparent;
-  --_secondary-hover-border-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_secondary-hover-border-width: var(--rh-border-width-md, 2px);
-
-  /* TERTIARY */
-  --_tertiary-color: var(--rh-color-text-primary-on-light, #151515);
-  --_tertiary-background-color: transparent;
-  --_tertiary-border-color: var(--rh-color-border-strong-on-light, #151515);
-  --_tertiary-border-width: var(--rh-border-width-sm, 1px);
-  --_tertiary-active-color: var(--rh-color-text-primary-on-light, #151515);
-  --_tertiary-active-background-color: transparent;
-  --_tertiary-active-border-color: var(--rh-color-border-strong-on-light, #151515);
-  --_tertiary-active-border-width: var(--rh-border-width-md, 2px);
-  --_tertiary-focus-color: var(--rh-color-text-primary-on-light, #151515);
-  --_tertiary-focus-background-color: transparent;
-  --_tertiary-focus-border-color: var(--rh-color-border-strong-on-light, #151515);
-  --_tertiary-focus-border-width: var(--rh-border-width-md, 2px);
-  --_tertiary-hover-color: var(--rh-color-text-primary-on-light, #151515);
-  --_tertiary-hover-background-color: transparent;
-  --_tertiary-hover-border-color: var(--rh-color-border-strong-on-light, #151515);
-  --_tertiary-hover-border-width: var(--rh-border-width-md, 2px);
-
-  /* LINK */
-  --_link-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_link-background-color: transparent;
-  --_link-active-color: var(--rh-color-blue-70, #003366);
-  --_link-active-background-color: transparent;
-  --_link-focus-color: var(--rh-color-blue-70, #003366);
-  --_link-focus-background-color: transparent;
-  --_link-focus-outline-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_link-hover-color: var(--rh-color-blue-70, #003366);
-  --_link-hover-background-color: transparent;
-
-  /* CLOSE */
-  --_close-color: var(--rh-color-text-secondary-on-light, #4d4d4d);
-  --_close-background-color: transparent;
-  --_close-active-color: var(--rh-color-icon-secondary-on-light, #151515);
-  --_close-active-background-color: transparent;
-  --_close-focus-color: var(--rh-color-icon-secondary-on-light, #151515);
-  --_close-focus-background-color: transparent;
-  --_close-focus-outline-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_close-hover-color: var(--rh-color-icon-secondary-on-light, #151515);
-  --_close-hover-background-color: transparent;
-
-  /* PLAY */
-  --_gray-90-rgb: var(--rh-color-gray-90-rgb, 31 31 31);
-  --_play-color: var(--rh-color-icon-secondary-on-dark, #ffffff);
-  --_play-background-color: rgb(var(--_gray-90-rgb) / var(--rh-opacity-50, 50%));
-  --_play-active-background-color: rgb(var(--_gray-90-rgb) / var(--rh-opacity-80, 80%));
-  --_play-focus-background-color: rgb(var(--_gray-90-rgb) / var(--rh-opacity-80, 80%));
-  --_play-focus-outline-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_play-hover-background-color: rgb(var(--_gray-90-rgb) / var(--rh-opacity-80, 80%));
-}
 
-.dark {
-  --_focus-outline-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-
-  /* PRIMARY */
-  --_primary-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_primary-background-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-  --_primary-border-color: transparent;
-  --_primary-border-width: var(--rh-border-width-sm, 1px);
-  --_primary-active-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_primary-active-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
-  --_primary-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_primary-focus-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
-  --_primary-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_primary-hover-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
-
-  /* DANGER */
-  --_danger-color: var(--rh-color-text-primary-on-light, #151515);
-  --_danger-background-color: #fe5142; /* WARNING: non-token value */
-  --_danger-border-color: transparent;
-  --_danger-border-width: var(--rh-border-width-sm, 1px);
-  --_danger-active-color: var(--rh-color-text-primary-on-light, #151515);
-  --_danger-active-background-color: #ff7468; /* WARNING: non-token value */
-  --_danger-active-border-color: transparent;
-  --_danger-focus-color: var(--rh-color-text-primary-on-light, #151515);
-  --_danger-focus-background-color: #ff7468;  /* WARNING: non-token value */
-  --_danger-focus-border-color: transparent;
-  --_danger-hover-color: var(--rh-color-text-primary-on-light, #151515);
-  --_danger-hover-background-color: #ff7468; /* WARNING: non-token value */
-  --_danger-hover-border-color: transparent;
-
-  /* SECONDARY */
-  --_secondary-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_secondary-danger-color: var(--rh-color-red-30, #f9a8a8);
-  --_secondary-background-color: transparent;
-  --_secondary-border-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_secondary-border-width: var(--rh-border-width-sm, 1px);
-  --_secondary-active-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_secondary-active-background-color: transparent;
-  --_secondary-active-border-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_secondary-active-border-width: var(--rh-border-width-md, 2px);
-  --_secondary-focus-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_secondary-focus-background-color: transparent;
-  --_secondary-focus-border-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_secondary-focus-border-width: var(--rh-border-width-md, 2px);
-  --_secondary-hover-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_secondary-hover-background-color: transparent;
-  --_secondary-hover-border-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_secondary-hover-border-width: var(--rh-border-width-md, 2px);
-
-  /* TERTIARY */
-  --_tertiary-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_tertiary-background-color: transparent;
-  --_tertiary-border-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_tertiary-border-width: var(--rh-border-width-sm, 1px);
-  --_tertiary-active-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_tertiary-active-background-color: transparent;
-  --_tertiary-active-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
-  --_tertiary-active-border-width: var(--rh-border-width-md, 2px);
-  --_tertiary-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_tertiary-focus-background-color: transparent;
-  --_tertiary-focus-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
-  --_tertiary-focus-border-width: var(--rh-border-width-md, 2px);
-  --_tertiary-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_tertiary-hover-background-color: transparent;
-  --_tertiary-hover-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
-  --_tertiary-hover-border-width: var(--rh-border-width-md, 2px);
-
-  /* LINK */
-  --_link-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_link-background-color: transparent;
-  --_link-active-color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc);
-  --_link-active-background-color: transparent;
-  --_link-focus-color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc);
-  --_link-focus-background-color: transparent;
-  --_link-focus-outline-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_link-hover-color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc);
-  --_link-hover-background-color: transparent;
-
-  /* CLOSE */
-  --_close-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
-  --_close-background-color: transparent;
-  --_close-focus-background-color: transparent;
-  --_close-focus-outline-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-
-  /* PLAY */
-  --_white-rgb: 255 255 255;
-  --_play-color: var(--rh-color-icon-secondary-on-light, #151515);
-  --_play-background-color: rgb(var(--_white-rgb) / var(--rh-opacity-50, 50%));
-  --_play-active-background-color: rgb(var(--_white-rgb) / var(--rh-opacity-80, 80%));
-  --_play-focus-background-color: rgb(var(--_white-rgb) / var(--rh-opacity-80, 80%));
-  --_play-focus-outline-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  --_play-hover-background-color: rgb(var(--_white-rgb) / var(--rh-opacity-80, 80%));
-}
-
-rh-icon {
-  color: currentcolor;
-}
-
-/******************************
- *                            *
- *          PRIMARY           *
- *                            *
- ******************************/
-
-button:active {
-  --_color: var(--_active-color, var(--_primary-active-color));
-  --_background-color: var(--_active-background-color, var(--_primary-active-background-color));
-  --_border-width: var(var(--_active-border-width), var(--_primary-active-border-width));
-}
-
-button:focus {
-  --_color: var(--_focus-color, var(--_primary-focus-color));
-  --_background-color: var(--_focus-background-color, var(--_primary-focus-background-color));
-  --_border-width: var(--_focus-border-width, var(--_primary-focus-border-width));
-}
-
-button:focus:after {
-  border-width: var(--_border-width, var(--rh-border-width-md, 2px));
-}
+  &:after {
+    position: absolute;
+    inset: 0;
+    content: '';
+    border-style: solid;
+    border-color: var(--_border-color);
+    border-width: var(--_border-width);
+    border-radius: var(--rh-border-radius-default, 3px);
+  }
 
-button:active,
-button:focus {
-  outline:
-    var(--rh-border-width-md, 2px)
-    solid
-    var(--_focus-outline-color, var(--rh-color-interactive-primary-default-on-light, #0066cc));
-}
+  &:focus {
+    --_color: var(--_focus-color);
+    --_background-color: var(--_focus-background-color);
+    --_border-width: var(--_focus-border-width);
 
-button:hover {
-  --_color: var(--_hover-color, var(--_primary-hover-color));
-  --_background-color: var(--_hover-background-color, var(--_primary-hover-background-color));
-  --_border-width: var(--_hover-border-width, var(--_primary-hover-border-width));
-}
+    outline:
+      var(--rh-border-width-md, 2px)
+      solid
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
 
-/******************************
- *                            *
- *          DANGER            *
- *                            *
- ******************************/
-
-button.danger {
-  --_default-color: var(--_danger-color);
-  --_default-background-color: var(--_danger-background-color);
-  --_default-border-color: var(--_danger-border-color);
-  --_active-color: var(--_danger-active-color);
-  --_active-background-color: var(--_danger-active-background-color);
-  --_active-border-color: var(--_danger-active-border-color);
-  --_focus-color: var(--_danger-focus-color);
-  --_focus-background-color: var(--_danger-focus-background-color);
-  --_focus-border-color: var(--_danger-focus-border-color);
-  --_hover-color: var(--_danger-hover-color);
-  --_hover-background-color: var(--_danger-hover-background-color);
-  --_hover-border-color: var(--_danger-hover-border-color);
-}
+    &:after {
+      border-width: var(--_border-width, var(--rh-border-width-md, 2px));
+    }
+  }
 
-/******************************
- *                            *
- *         SECONDARY          *
- *                            *
- ******************************/
+  &:hover {
+    --_color: var(--_hover-color);
+    --_background-color: var(--_hover-background-color);
+    --_border-width: var(--_hover-border-width);
+  }
 
-button.secondary {
-  --_default-color: var(--_secondary-color);
-  --_default-background-color: var(--_secondary-background-color);
-  --_default-border-color: var(--_secondary-border-color);
-  --_default-border-width: var(--_secondary-border-width);
-  --_active-color: var(--_secondary-active-color);
-  --_active-background-color: var(--_secondary-active-background-color);
-  --_active-border-color: var(--_secondary-active-border-color);
-  --_active-border-width: var(--_secondary-active-border-width);
-  --_focus-color: var(--_secondary-focus-color);
-  --_focus-background-color: var(--_secondary-focus-background-color);
-  --_focus-border-color: var(--_secondary-focus-border-color);
-  --_hover-color: var(--_secondary-hover-color);
-  --_hover-background-color: var(--_secondary-hover-background-color);
-  --_hover-border-color: var(--_secondary-hover-border-color);
-  --_hover-border-width: var(--_secondary-hover-border-width);
-}
+  &.hasIcon {
+    position: relative;
+    display: flex;
+    gap: var(--rh-space-sm, 6px);
+    align-items: center;
+    padding-inline-start: calc(var(--rh-space-lg, 16px) * 0.75);
 
-/******************************
- *                            *
- *         TERTIARY           *
- *                            *
- ******************************/
+    & [part='icon'] {
+      display: contents;
+    }
+  }
 
-button.tertiary {
-  --_default-color: var(--_tertiary-color);
-  --_default-background-color: var(--_tertiary-background-color);
-  --_default-border-color: var(--_tertiary-border-color);
-  --_active-color: var(--_tertiary-active-color);
-  --_active-background-color: var(--_tertiary-active-background-color);
-  --_active-border-color: var(--_tertiary-active-border-color);
-  --_active-border-width: var(--_tertiary-active-border-width);
-  --_focus-color: var(--_tertiary-focus-color);
-  --_focus-background-color: var(--_tertiary-focus-background-color);
-  --_focus-border-color: var(--_tertiary-focus-border-color);
-  --_hover-color: var(--_tertiary-hover-color);
-  --_hover-background-color: var(--_tertiary-hover-background-color);
-  --_hover-border-color: var(--_tertiary-hover-border-color);
-  --_hover-border-width: var(--_tertiary-hover-border-width);
-}
+  &.primary {
+    --_color: var(--rh-color-text-primary-on-dark, #ffffff);
+    --_background-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
+    --_border-color: transparent;
+    --_border-width: var(--rh-border-width-sm, 1px);
+    --_active-color: var(--rh-color-text-primary-on-dark, #ffffff);
+    --_active-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
+    --_active-border-width: var(--rh-border-width-sm, 1px);
+    --_focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
+    --_focus-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
+    --_focus-border-width: var(--rh-border-width-md, 2px);
+    --_hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
+    --_hover-background-color: var(--rh-color-interactive-primary-hover-on-light, #003366);
+    --_hover-border-width: var(--rh-border-width-sm, 1px);
+  }
 
-/******************************
- *                            *
- *           LINK             *
- *                            *
- ******************************/
+  &.danger {
+    --_color:
+      light-dark(var(--rh-color-text-primary-on-dark, #ffffff),
+        var(--rh-color-text-primary-on-light, #151515));
+    --_background-color: light-dark(#c9190b, #fe5142); /* WARNING: non-token value */
+    --_border-color: transparent;
+    --_border-width: var(--rh-border-width-sm, 1px);
+    --_active-color:
+      light-dark(var(--rh-color-text-primary-on-dark, #ffffff),
+        var(--rh-color-text-primary-on-light, #151515));
+    --_active-background-color: light-dark(#a30000, #ff7468); /* WARNING: non-token value */
+    --_active-border-color: transparent;
+    --_focus-color:
+      light-dark(var(--rh-color-text-primary-on-dark, #ffffff),
+        var(--rh-color-text-primary-on-light, #151515));
+    --_focus-background-color: light-dark(#a30000, #ff7468);  /* WARNING: non-token value */
+    --_focus-border-color: transparent;
+    --_focus-border-width: var(--rh-border-width-md, 2px);
+    --_hover-color:
+      light-dark(var(--rh-color-text-primary-on-dark, #ffffff),
+        var(--rh-color-text-primary-on-light, #151515));
+    --_hover-background-color: light-dark(#a30000, #ff7468); /* WARNING: non-token value */
+    --_hover-border-color: transparent;
+  }
 
-button.link {
-  display: inline-flex;
+  &.secondary {
+    --_color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_background-color: transparent;
+    --_border-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_border-width: var(--rh-border-width-sm, 1px);
+    --_active-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_active-background-color: transparent;
+    --_active-border-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_active-border-width: var(--rh-border-width-md, 2px);
+    --_focus-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_focus-background-color: transparent;
+    --_focus-border-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_focus-border-width: var(--rh-border-width-md, 2px);
+    --_hover-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_hover-background-color: transparent;
+    --_hover-border-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_hover-border-width: var(--rh-border-width-md, 2px);
+
+    &.danger {
+      --_color: light-dark(var(--rh-color-red-60, #a60000), var(--rh-color-red-30, #f9a8a8));
+      --_background-color: transparent;
+      --_border-color: light-dark(#c9190b, #fe5142);
+      --_active-color: light-dark(#c9190b, #fe5142);
+      --_active-background-color: transparent;
+      --_active-border-color: transparent;
+      --_focus-color: light-dark(var(--rh-color-red-60, #a60000), var(--rh-color-red-30, #f9a8a8));
+      --_focus-background-color: transparent;
+      --_focus-border-color: transparent;
+      --_hover-color: light-dark(#c9190b, #fe5142);
+      --_hover-background-color: transparent;
+      --_hover-border-color: transparent;
+    }
+  }
 
-  & rh-icon {
-    order: 1;
+  &.tertiary {
+    --_color:
+      light-dark(var(--rh-color-text-primary-on-light, #151515),
+        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_background-color: transparent;
+    --_border-color:
+      light-dark(var(--rh-color-border-strong-on-light, #151515),
+        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_border-width: var(--rh-border-width-sm, 1px);
+    --_active-color:
+      light-dark(var(--rh-color-text-primary-on-light, #151515),
+        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_active-background-color: transparent;
+    --_active-border-color:
+      light-dark(var(--rh-color-border-strong-on-light, #151515),
+        var(--rh-color-border-strong-on-dark, #ffffff));
+    --_active-border-width: var(--rh-border-width-md, 2px);
+    --_focus-color:
+      light-dark(var(--rh-color-text-primary-on-light, #151515),
+        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_focus-background-color: transparent;
+    --_focus-border-color:
+      light-dark(var(--rh-color-border-strong-on-light, #151515),
+        var(--rh-color-border-strong-on-dark, #ffffff));
+    --_focus-border-width: var(--rh-border-width-md, 2px);
+    --_hover-color:
+      light-dark(var(--rh-color-text-primary-on-light, #151515),
+        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_hover-background-color: transparent;
+    --_hover-border-color:
+      light-dark(var(--rh-color-border-strong-on-light, #151515),
+        var(--rh-color-border-strong-on-dark, #ffffff));
+    --_hover-border-width: var(--rh-border-width-md, 2px);
   }
 
-  --_default-color: var(--_link-color);
-  --_default-background-color: var(--_link-background-color);
-  --_default-border-color: transparent;
-  --_active-color: var(--_link-active-color);
-  --_active-background-color: var(--_link-active-background-color);
-  --_active-border-color: transparent;
-  --_focus-color: var(--_link-focus-color);
-  --_focus-background-color: var(--_link-focus-background-color);
-  --_focus-border-color: transparent;
-  --_focus-outline-color: var(--_link-focus-outline-color);
-  --_hover-color: var(--_link-hover-color);
-  --_hover-background-color: var(--_link-hover-background-color);
-  --_hover-border-color: transparent;
-}
+  &.link {
+    --_color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_background-color: transparent;
+    --_border-color: transparent;
+    --_active-color:
+      light-dark(var(--rh-color-blue-70, #003366),
+        var(--rh-color-interactive-primary-hover-on-dark, #b9dafc));
+    --_active-background-color: transparent;
+    --_focus-color:
+      light-dark(var(--rh-color-blue-70, #003366),
+        var(--rh-color-interactive-primary-hover-on-dark, #b9dafc));
+    --_focus-background-color: transparent;
+    --_focus-outline-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_hover-color:
+      light-dark(var(--rh-color-blue-70, #003366),
+        var(--rh-color-interactive-primary-hover-on-dark, #b9dafc));
+    --_hover-background-color: transparent;
+
+    display: inline-flex;
+
+    & rh-icon {
+      order: 1;
+    }
+  }
 
-/******************************
- *                            *
- *          CLOSE             *
- *                            *
- ******************************/
+  &.close {
+    --_color:
+      light-dark(var(--rh-color-text-secondary-on-light, #4d4d4d),
+        var(--rh-color-text-secondary-on-dark, #c7c7c7));
+    --_background-color: transparent;
+    --_active-color: var(--rh-color-icon-secondary-on-light, #151515);
+    --_active-background-color: transparent;
+    --_focus-color: var(--rh-color-icon-secondary-on-light, #151515);
+    --_focus-background-color: transparent;
+    --_focus-outline-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_hover-color: var(--rh-color-icon-secondary-on-light, #151515);
+    --_hover-background-color: transparent;
+
+    width: var(--rh-length-lg, 16px);
+    aspect-ratio: 1;
+  }
 
-button.close {
-  --_default-color: var(--_close-color);
-  --_default-background-color: var(--_close-background-color);
-  --_active-color: var(--_close-active-color);
-  --_active-background-color: var(--_close-active-background-color);
-  --_active-border-color: transparent;
-  --_focus-color: var(--_close-focus-color);
-  --_focus-background-color: var(--_close-focus-background-color);
-  --_focus-border-color: transparent;
-  --_focus-outline-color: var(--_close-focus-outline-color);
-  --_hover-color: var(--_close-hover-color);
-  --_hover-background-color: transparent;
-  --_hover-border-color: transparent;
-
-  width: var(--rh-length-lg, 16px);
-  aspect-ratio: 1;
-}
+  &.play {
+    --_gray-90-rgb: var(--rh-color-gray-90-rgb, 31 31 31);
+    --_white-rgb: 255 255 255;
+    --_color:
+      light-dark(var(--rh-color-icon-secondary-on-dark, #ffffff),
+        var(--rh-color-icon-secondary-on-light, #151515));
+    --_background-color:
+      light-dark(rgb(var(--_gray-90-rgb) / var(--rh-opacity-50, 50%)),
+        rgb(var(--_white-rgb) / var(--rh-opacity-50, 50%)));
+    --_active-background-color:
+      light-dark(rgb(var(--_gray-90-rgb) / var(--rh-opacity-80, 80%)),
+        rgb(var(--_white-rgb) / var(--rh-opacity-80, 80%)));
+    --_focus-background-color:
+      light-dark(rgb(var(--_gray-90-rgb) / var(--rh-opacity-80, 80%)),
+        rgb(var(--_white-rgb) / var(--rh-opacity-80, 80%)));
+    --_focus-outline-color:
+      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
+        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_hover-background-color:
+      light-dark(rgb(var(--_gray-90-rgb) / var(--rh-opacity-80, 80%)),
+        rgb(var(--_white-rgb) / var(--rh-opacity-80, 80%)));
+
+    border-radius: 100%;
+    width: var(--rh-length-4xl, 64px);
+
+    & [part='icon'] {
+      display: contents;
+    }
+
+    & rh-icon {
+      translate: 10%; /* perceptually center play icon only */
+    }
+  }
 
-/******************************
- *                            *
- *           PLAY             *
- *                            *
- ******************************/
+  &:is(.play,.close) {
+    --_border-color: transparent;
+
+    aspect-ratio: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+
+    /* visually hidden */
+    & #text {
+      display: inline;
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
+    }
+  }
 
-button.play {
-  border-radius: 100%;
-  width: var(--rh-length-4xl, 64px);
-
-  --rh-icon-size: var(--rh-size-icon-02, 24px);
-  --_default-color: var(--_play-color);
-  --_default-background-color: var(--_play-background-color);
-  --_default-background-opacity: var(--_play-background-opacity);
-  --_active-color: var(--_play-color);
-  --_active-background-color: var(--_play-active-background-color);
-  --_active-background-opacity: var(--_play-active-background-opacity);
-  --_focus-color: var(--_play-color);
-  --_focus-background-color: var(--_play-focus-background-color);
-  --_focus-background-opacity: var(--_play-focus-background-opacity);
-  --_focus-outline-color: var(--_play-focus-outline-color);
-  --_hover-color: var(--_play-color);
-  --_hover-background-color: var(--_play-hover-background-color);
-  --_hover-background-opacity: var(--_play-hover-background-opacity);
-  --_icon-size: var(--rh-size-icon-02, 24px);
-
-  & [part='icon'] {
+  & > span {
     display: contents;
   }
+}
 
-  & rh-icon {
-    translate: 10%; /* perceptually center play icon only */
-  }
+:host(:is(:disabled, [aria-disabled='true'])),
+:host(:is(:disabled, [aria-disabled='true'])) #container,
+:host(:is(:disabled, [aria-disabled='true'])) button,
+:host(:is(:disabled, [aria-disabled='true'])[danger]) button,
+:host(:is(:disabled, [aria-disabled='true'])[variant='link']) button {
+  pointer-events: none;
+  cursor: default;
 }
 
-button:is(.play,.close) {
-  aspect-ratio: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-
-  /* visually hidden */
-  & #text {
-    display: inline;
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    white-space: nowrap !important;
-    border: 0 !important;
-  }
+[part='icon'] ::slotted(*) {
+  width: 16px;
+  max-width: 16px;
+  height: 16px;
+  max-height: 16px;
 }
 
 :host(:is([variant='play' i], [variant='close' i])) {
@@ -518,27 +365,6 @@ button[disabled] {
   --_border-color: transparent;
 }
 
-/******************************
- *                            *
- *     SECONDARY-DANGER       *
- *                            *
- ******************************/
-
-button.secondary.danger {
-  --_default-color: var(--_secondary-danger-color);
-  --_default-background-color: transparent;
-  --_default-border-color: var(--_danger-background-color);
-  --_active-color: var(--_danger-background-color);
-  --_active-background-color: transparent;
-  --_active-border-color: var(--_danger-active-border-color);
-  --_focus-color: var(--_secondary-danger-color);
-  --_focus-background-color: transparent;
-  --_focus-border-color: var(--_danger-focus-border-color);
-  --_hover-color: var(--_danger-background-color);
-  --_hover-background-color: transparent;
-  --_hover-border-color: var(--_danger-hover-border-color);
-}
-
 :host(:not([disabled])) .hasIcon [part='icon'] {
   cursor: pointer;
 }
diff --git a/elements/rh-button/rh-button.ts b/elements/rh-button/rh-button.ts
index f0a1b569a9..187c4410fe 100644
--- a/elements/rh-button/rh-button.ts
+++ b/elements/rh-button/rh-button.ts
@@ -7,8 +7,6 @@ import { query } from 'lit/decorators/query.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 
 import styles from './rh-button.css';
@@ -84,8 +82,6 @@ export class RhButton extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) danger = false;
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   get #hasIcon() {
     return this.variant === 'play' || this.variant === 'close' || !!this.icon;
   }
@@ -99,15 +95,13 @@ export class RhButton extends LitElement {
   }
 
   override render() {
-    const { danger, variant, on = 'light' } = this;
+    const { danger, variant } = this;
     const hasIcon = this.#hasIcon;
     return html`
       <button aria-label="${ifDefined(this.label)}"
               class="${classMap({
                 danger,
                 hasIcon,
-                on: true,
-                [on]: true,
                 [variant]: true,
               })}"
               part="button"

From e221bb6dfd1568ca4ec8cd271c8ebcb8e4724918 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:22:20 -0500
Subject: [PATCH 10/33] fix(card): use color-scheme

---
 elements/rh-card/rh-card.css | 52 +++++++++++++++++++-----------------
 elements/rh-card/rh-card.ts  | 14 +---------
 2 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index 17bc90902a..9d48eb178a 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -39,40 +39,42 @@
   border-color: var(--rh-color-border-subtle);
   width: 100%;
   height: 100%;
-  background-color: var(--rh-color-surface);
+  background-color:
+    light-dark(var(--_card-background, var(--rh-color-surface-lightest, #ffffff)),
+      var(--_card-background, var(--rh-color-surface-darkest, #151515)));
   color: var(--rh-color-text-primary);
-}
 
-.on.light {
-  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-}
+  &.palette-light {
+    --_card-background: var(--rh-color-surface-light, #e0e0e0);
+  }
 
-.on.dark {
-  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
-}
+  &.palette-lighter {
+    --_card-background: var(--rh-color-surface-lighter, #f2f2f2);
+  }
 
-#container.on.palette-light {
-  --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
-}
+  &.palette-lightest {
+    --_card-background: var(--rh-color-surface-lightest, #ffffff);
+  }
 
-#container.on.palette-lighter {
-  --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
-}
+  &.palette-dark {
+    --_card-background: var(--rh-color-surface-dark, #383838);
+  }
 
-#container.on.palette-lightest {
-  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-}
+  &.palette-darker {
+    --_card-background: var(--rh-color-surface-darker, #1f1f1f);
+  }
 
-#container.on.palette-dark {
-  --rh-color-surface: var(--rh-color-surface-dark, #383838);
-}
+  &.palette-darkest {
+    --_card-background: var(--rh-color-surface-darkest, #151515);
+  }
 
-#container.on.palette-darker {
-  --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
-}
+  &:is(.palette-light, .palette-lighter, .palette-lightest) {
+    color-scheme: light;
+  }
 
-#container.on.palette-darkest {
-  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+  &:is(.palette-dark, .palette-darker, .palette-darkest) {
+    color-scheme: dark;
+  }
 }
 
 #header,
diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts
index 4b5785f3c9..4f00439ed8 100644
--- a/elements/rh-card/rh-card.ts
+++ b/elements/rh-card/rh-card.ts
@@ -3,8 +3,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { html, LitElement } from 'lit';
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
+import { type ColorPalette } from '../../lib/context/color/provider.js';
 
 import styles from './rh-card.css';
 
@@ -51,7 +50,6 @@ export class RhCard extends LitElement {
    *
    * Card always resets its context to `base`, unless explicitly provided with a `color-palette`.
    */
-  @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
   /**
@@ -64,7 +62,6 @@ export class RhCard extends LitElement {
    */
   @property({ reflect: true, attribute: 'full-width', type: Boolean }) fullWidth? = false;
 
-  @colorContextConsumer() private on?: ColorTheme;
 
   #slots = new SlotController(this, 'header', 'image', null, 'footer');
 
@@ -100,18 +97,11 @@ export class RhCard extends LitElement {
     }
   }
 
-  get #computedContext() {
-    return this.colorPalette ?
-      this.colorPalette?.includes('light') ? 'light' : 'dark'
-      : undefined;
-  }
 
   override render() {
     const promo = this.variant === 'promo';
     const standard = this.#isStandardPromo;
     const computedPalette = this.#computedPalette;
-    const computedContext = this.#computedContext;
-    const on = computedContext ?? this.on ?? 'light';
     const { variant = '' } = this;
     const hasHeader = this.#slots.hasSlotted('header');
     const hasFooter = this.#slots.hasSlotted('footer');
@@ -134,8 +124,6 @@ export class RhCard extends LitElement {
           part="container"
           class="${classMap({
             standard,
-            'on': true,
-            [on]: true,
             [variant]: !!variant,
             [`palette-${computedPalette}`]: !!computedPalette,
             'palette': !!this.colorPalette,

From 192f4864763c1d9de40834a29a0d7bd10f9782bf Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:22:28 -0500
Subject: [PATCH 11/33] fix(code-block): use color-scheme

---
 elements/rh-code-block/rh-code-block.css | 171 +++++++++++++----------
 elements/rh-code-block/rh-code-block.ts  |   7 +-
 2 files changed, 96 insertions(+), 82 deletions(-)

diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
index b1c96de778..4b6ce55f61 100644
--- a/elements/rh-code-block/rh-code-block.css
+++ b/elements/rh-code-block/rh-code-block.css
@@ -74,8 +74,101 @@
 }
 
 #container {
-  --_code-background-color: var(--rh-color-surface-lighter, #f2f2f2);
+  --_code-background-color:
+    light-dark(var(--rh-color-surface-lighter, #f2f2f2),
+      var(--rh-color-surface-dark-alt, #292929));
   --_code-main-spacer: var(--rh-space-xl, 24px);
+  --_cdata-color: var(--rh-color-text-secondary);
+  --_comment-color: var(--rh-color-text-secondary);
+  --_comment-block-color: var(--rh-color-text-secondary);
+  --_doctype-color: var(--rh-color-text-secondary);
+  --_default-color:
+    light-dark(var(--rh-color-gray-95, #151515),
+      var(--rh-color-gray-20, #e0e0e0));
+  --_selected-text-background:
+    light-dark(var(--rh-color-blue-10, #e0f0ff),
+      var(--rh-color-gray-95, #151515));
+  --_punctuation-color:
+    light-dark(var(--rh-color-gray-40, #a3a3a3),
+      var(--rh-color-gray-20, #e0e0e0));
+  --_namespace-color:
+    light-dark(var(--rh-color-gray-95, #151515),
+      var(--rh-color-red-40, #f56e6e));
+  --_property-color:
+    light-dark(var(--rh-color-purple-50, #5e40be),
+      var(--rh-color-yellow-40, #dca614));
+  --_tag-color:
+    light-dark(var(--rh-color-purple-50, #5e40be),
+      var(--rh-color-red-10, #fce3e3));
+  --_boolean-color:
+    light-dark(var(--rh-color-purple-50, #5e40be),
+      var(--rh-color-orange-40, #f5921b));
+  --_number-color:
+    light-dark(var(--rh-color-purple-50, #5e40be),
+      var(--rh-color-orange-40, #f5921b));
+  --_constant-color:
+    light-dark(var(--rh-color-purple-50, #5e40be),
+      var(--rh-color-yellow-40, #dca614));
+  --_symbol-color:
+    light-dark(var(--rh-color-purple-50, #5e40be),
+      var(--rh-color-yellow-40, #dca614));
+  --_deleted-color:
+    light-dark(var(--rh-color-purple-50, #5e40be),
+      var(--rh-color-red-40, #f56e6e));
+  --_function-name-color:
+    light-dark(var(--rh-color-purple-50, #5e40be),
+      var(--rh-color-teal-20, #b9e5e5));
+  --_selector-color:
+    light-dark(var(--rh-color-teal-60, #147878),
+      var(--rh-color-purple-30, #b6a6e9));
+  --_attr-name-color:
+    light-dark(var(--rh-color-teal-60, #147878),
+      var(--rh-color-red-40, #f56e6e));
+  --_string-color:
+    light-dark(var(--rh-color-teal-60, #147878),
+      var(--rh-color-green-40, #87bb62));
+  --_character-color:
+    light-dark(var(--rh-color-teal-60, #147878),
+      var(--rh-color-green-40, #87bb62));
+  --_built-in-color:
+    light-dark(var(--rh-color-teal-60, #147878),
+      var(--rh-color-purple-30, #b6a6e9));
+  --_inserted-color:
+    light-dark(var(--rh-color-teal-60, #147878),
+      var(--rh-color-green-40, #87bb62));
+  --_operator-color:
+    light-dark(var(--rh-color-yellow-60, #96640f),
+      var(--rh-color-blue-40, #4394e5));
+  --_entity-color:
+    light-dark(var(--rh-color-yellow-60, #96640f),
+      var(--rh-color-blue-40, #4394e5));
+  --_url-color:
+    light-dark(var(--rh-color-yellow-60, #96640f),
+      var(--rh-color-blue-40, #4394e5));
+  --_at-rule-color:
+    light-dark(var(--rh-color-blue-60, #004d99),
+      var(--rh-color-purple-30, #b6a6e9));
+  --_attr-value-color:
+    light-dark(var(--rh-color-blue-60, #004d99),
+      var(--rh-color-green-40, #87bb62));
+  --_keyword-color:
+    light-dark(var(--rh-color-blue-60, #004d99),
+      var(--rh-color-purple-30, #b6a6e9));
+  --_function-color:
+    light-dark(var(--rh-color-red-60, #a60000),
+      var(--rh-color-orange-40, #f5921b));
+  --_class-name-color:
+    light-dark(var(--rh-color-red-60, #a60000),
+      var(--rh-color-yellow-40, #dca614));
+  --_regex-color:
+    light-dark(var(--rh-color-orange-60, #9e4a06),
+      var(--rh-color-green-40, #87bb62));
+  --_important-color:
+    light-dark(var(--rh-color-orange-60, #9e4a06),
+      var(--rh-color-purple-30, #b6a6e9));
+  --_variable-color:
+    light-dark(var(--rh-color-orange-60, #9e4a06),
+      var(--rh-color-green-40, #87bb62));
 
   display: grid;
   place-items: center;
@@ -100,10 +193,6 @@
       transparent 100%);
 }
 
-#container.dark {
-  --_code-background-color: var(--rh-color-surface-dark-alt, #292929);
-}
-
 #container.expandable {
   padding-block-end: 0;
 }
@@ -295,78 +384,6 @@
   gap: var(--rh-space-md, 8px);
 }
 
-.on {
-  --_cdata-color: var(--rh-color-text-secondary);
-  --_comment-color: var(--rh-color-text-secondary);
-  --_comment-block-color: var(--rh-color-text-secondary);
-  --_doctype-color: var(--rh-color-text-secondary);
-}
-
-.on,
-.on.light {
-  --_default-color: var(--rh-color-gray-95, #151515);
-  --_selected-text-background: var(--rh-color-blue-10, #e0f0ff);
-  --_punctuation-color: var(--rh-color-gray-40, #a3a3a3);
-  --_namespace-color: var(--rh-color-gray-95, #151515);
-  --_property-color: var(--rh-color-purple-50, #5e40be);
-  --_tag-color: var(--rh-color-purple-50, #5e40be);
-  --_boolean-color: var(--rh-color-purple-50, #5e40be);
-  --_number-color: var(--rh-color-purple-50, #5e40be);
-  --_constant-color: var(--rh-color-purple-50, #5e40be);
-  --_symbol-color: var(--rh-color-purple-50, #5e40be);
-  --_deleted-color: var(--rh-color-purple-50, #5e40be);
-  --_function-name-color: var(--rh-color-purple-50, #5e40be);
-  --_selector-color: var(--rh-color-teal-60, #147878);
-  --_attr-name-color: var(--rh-color-teal-60, #147878);
-  --_string-color: var(--rh-color-teal-60, #147878);
-  --_character-color: var(--rh-color-teal-60, #147878);
-  --_built-in-color: var(--rh-color-teal-60, #147878);
-  --_inserted-color: var(--rh-color-teal-60, #147878);
-  --_operator-color: var(--rh-color-yellow-60, #96640f);
-  --_entity-color: var(--rh-color-yellow-60, #96640f);
-  --_url-color: var(--rh-color-yellow-60, #96640f);
-  --_at-rule-color: var(--rh-color-blue-60, #004d99);
-  --_attr-value-color: var(--rh-color-blue-60, #004d99);
-  --_keyword-color: var(--rh-color-blue-60, #004d99);
-  --_function-color: var(--rh-color-red-60, #a60000);
-  --_class-name-color: var(--rh-color-red-60, #a60000);
-  --_regex-color: var(--rh-color-orange-60, #9e4a06);
-  --_important-color: var(--rh-color-orange-60, #9e4a06);
-  --_variable-color: var(--rh-color-orange-60, #9e4a06);
-}
-
-.on.dark {
-  --_default-color: var(--rh-color-gray-20, #e0e0e0);
-  --_selected-text-background: var(--rh-color-gray-95, #151515);
-  --_punctuation-color: var(--rh-color-gray-20, #e0e0e0);
-  --_namespace-color: var(--rh-color-red-40, #f56e6e);
-  --_property-color: var(--rh-color-yellow-40, #dca614);
-  --_tag-color: var(--rh-color-red-10, #fce3e3);
-  --_boolean-color: var(--rh-color-orange-40, #f5921b);
-  --_number-color: var(--rh-color-orange-40, #f5921b);
-  --_constant-color: var(--rh-color-yellow-40, #dca614);
-  --_symbol-color: var(--rh-color-yellow-40, #dca614);
-  --_deleted-color: var(--rh-color-red-40, #f56e6e);
-  --_function-name-color: var(--rh-color-teal-20, #b9e5e5);
-  --_selector-color: var(--rh-color-purple-30, #b6a6e9);
-  --_attr-name-color: var(--rh-color-red-40, #f56e6e);
-  --_string-color: var(--rh-color-green-40, #87bb62);
-  --_character-color: var(--rh-color-green-40, #87bb62);
-  --_built-in-color: var(--rh-color-purple-30, #b6a6e9);
-  --_inserted-color: var(--rh-color-green-40, #87bb62);
-  --_operator-color: var(--rh-color-blue-40, #4394e5);
-  --_entity-color: var(--rh-color-blue-40, #4394e5);
-  --_url-color: var(--rh-color-blue-40, #4394e5);
-  --_at-rule-color: var(--rh-color-purple-30, #b6a6e9);
-  --_attr-value-color: var(--rh-color-green-40, #87bb62);
-  --_keyword-color: var(--rh-color-purple-30, #b6a6e9);
-  --_function-color: var(--rh-color-orange-40, #f5921b);
-  --_class-name-color: var(--rh-color-yellow-40, #dca614);
-  --_regex-color: var(--rh-color-green-40, #87bb62);
-  --_important-color: var(--rh-color-purple-30, #b6a6e9);
-  --_variable-color: var(--rh-color-green-40, #87bb62);
-}
-
 :host([highlighting='client']) #content::slotted(:is(script, pre)) {
   display: none;
 }
diff --git a/elements/rh-code-block/rh-code-block.ts b/elements/rh-code-block/rh-code-block.ts
index ca12d5f5a2..c2f56cdd4d 100644
--- a/elements/rh-code-block/rh-code-block.ts
+++ b/elements/rh-code-block/rh-code-block.ts
@@ -8,7 +8,6 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 
-import { type ColorTheme, colorContextConsumer } from '../../lib/context/color/consumer.js';
 
 import style from './rh-code-block.css';
 
@@ -128,7 +127,6 @@ export class RhCodeBlock extends LitElement {
   /** When set, lines in the code snippet wrap */
   @property({ type: Boolean }) wrap = false;
 
-  @colorContextConsumer() private on?: ColorTheme;
 
   #slots = new SlotController(
     this,
@@ -159,14 +157,13 @@ export class RhCodeBlock extends LitElement {
   }
 
   render() {
-    const { on = '', fullHeight, wrap, resizable, compact } = this;
+    const { fullHeight, wrap, resizable, compact } = this;
     const expandable = this.#lineHeights.length > 5;
     const truncated = expandable && !fullHeight;
     const actions = !!this.actions.length;
     return html`
       <div id="container"
-           class="${classMap({ on: true, [on]: !!on,
-                               actions,
+           class="${classMap({ actions,
                                compact,
                                expandable,
                                fullHeight,

From 4b2d8983c7f45443d91f5fa75fc255f4698dc559 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:22:38 -0500
Subject: [PATCH 12/33] fix(cta): use color-scheme

---
 elements/rh-cta/rh-cta.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts
index dade2cc79f..b9badbe2fd 100644
--- a/elements/rh-cta/rh-cta.ts
+++ b/elements/rh-cta/rh-cta.ts
@@ -9,8 +9,6 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 import { DirController } from '../../lib/DirController.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import type { IconNameFor, IconSetName } from '@rhds/icons';
 
 import style from './rh-cta.css';
@@ -112,8 +110,6 @@ export class RhCta extends LitElement {
   /** Icon set */
   @property({ attribute: 'icon-set' }) iconSet: IconSetName = 'ui';
 
-  /** Sets color theme based on parent context */
-  @colorContextConsumer() @state() private on?: ColorTheme;
 
   protected override async getUpdateComplete(): Promise<boolean> {
     if (this.icon || !this.variant) {
@@ -131,7 +127,7 @@ export class RhCta extends LitElement {
     const {
       download, href, referrerpolicy, rel, target,
       icon, iconSet,
-      on = 'light', variant,
+      variant,
     } = this;
     const rtl = this.#dir.dir === 'rtl';
     const isDefault = !variant;
@@ -152,7 +148,7 @@ export class RhCta extends LitElement {
     return html`
       <span id="container"
             part="container"
-            class=${classMap({ rtl, icon: !!icon, svg, on: true, [on]: true })}
+            class=${classMap({ rtl, icon: !!icon, svg })}
             @slotchange=${this.firstUpdated}>${iconContent}${linkContent}</span>`;
   }
 

From 275c44a5c763c5789347b971d304e43ea914f745 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:22:46 -0500
Subject: [PATCH 13/33] fix(footer): use color-scheme

---
 elements/rh-footer/rh-footer-lightdom.css | 115 ++++++++++------------
 elements/rh-footer/rh-footer.css          |  19 +---
 elements/rh-footer/rh-footer.ts           |   7 +-
 3 files changed, 60 insertions(+), 81 deletions(-)

diff --git a/elements/rh-footer/rh-footer-lightdom.css b/elements/rh-footer/rh-footer-lightdom.css
index 918d806bb0..cb5d85b1f0 100644
--- a/elements/rh-footer/rh-footer-lightdom.css
+++ b/elements/rh-footer/rh-footer-lightdom.css
@@ -1,83 +1,76 @@
-:is(rh-footer, rh-footer-universal) a {
-  color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
-  text-decoration: none;
-}
+:is(rh-footer, rh-footer-universal) {
+  --rh-footer-section-side-gap: var(--rh-space-lg, 16px);
 
-:is(rh-footer, rh-footer-universal) a:hover {
-  color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc);
-  text-decoration: underline;
-}
+  color-scheme: dark;
 
-:is(rh-footer, rh-footer-universal) a:is(:focus, :focus-within) {
-  color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc);
-  text-decoration: underline;
-}
+  & a {
+    color: var(--rh-color-interactive-primary-default);
+    text-decoration: none;
 
-:is(rh-footer, rh-footer-universal) a:visited {
-  color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc);
-  text-decoration: none;
-}
+    &:hover {
+      color: var(--rh-color-interactive-primary-hover);
+      text-decoration: underline;
+    }
 
-/* ensure links fully wrap img tags */
-:is(rh-footer, rh-footer-universal) a[slot^='logo'] {
-  display: block;
-}
+    &:is(:focus, :focus-within) {
+      color: var(--rh-color-interactive-primary-hover);
+      text-decoration: underline;
+    }
 
-:is(rh-footer) a[slot^='logo'] > img {
-  display: block;
-  width: auto;
-  height: 100%;
-  height: var(--rh-size-icon-04, 40px);
-}
+    &:visited {
+      color: var(--rh-color-interactive-primary-hover);
+      text-decoration: none;
+    }
 
-:is(rh-footer, rh-footer-universal) :is(h1, h2, h3, h4, h5, h6) {
-  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
-  line-height: var(--rh-line-height-heading, 1.3);
-}
+    /* ensure links fully wrap img tags */
+    &[slot^='logo'] {
+      display: block;
+    }
+  }
 
-rh-footer [slot='links']:is(h1, h2, h3, h4, h5):nth-of-type(n+5) {
-  --_link-header-margin: calc(var(--rh-space-2xl, 32px) - var(--rh-space-lg, 16px));
-}
+  &:is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
+    line-height: var(--rh-line-height-heading, 1.3);
+  }
 
-rh-footer [slot^='links'] a {
-  gap: var(--rh-footer-links-gap, var(--rh-space-md, 8px));
-}
+  & [slot^='links'] li {
+    margin: 0;
+    padding: 0;
+    display: contents;
+  }
 
-:is(rh-footer, rh-footer-universal) [slot^='links'] li {
-  margin: 0;
-  padding: 0;
-  display: contents;
-}
+  & [slot^='links'] a {
+    display: block;
+    color: var(--rh-color-text-primary) !important;
+    font-size: var(--rh-footer-link-font-size, var(--rh-font-size-body-text-sm, 0.875rem));
+    width: fit-content;
+  }
 
-:is(rh-footer, rh-footer-universal) [slot^='links'] a {
-  display: block;
-  color: var(--rh-color-text-primary-on-dark, #ffffff) !important;
-  font-size: var(--rh-footer-link-font-size, var(--rh-font-size-body-text-sm, 0.875rem));
-  width: fit-content;
+  @media screen and (min-width: 768px) {
+    --rh-footer-section-side-gap: var(--rh-space-2xl, 32px);
+  }
+
+  @media screen and (min-width: 1440px) {
+    --rh-footer-section-side-gap: var(--rh-space-4xl, 64px);
+  }
 }
 
 rh-footer-universal [slot^='links'] a {
   font-size: inherit;
 }
 
-/**
- * Section side gap
- */
-:is(rh-footer, rh-footer-universal) {
-  --rh-footer-section-side-gap: var(--rh-space-lg, 16px);
-}
+rh-footer a[slot^='logo'] > img {
+  display: block;
+  width: auto;
+  height: 100%;
+  height: var(--rh-size-icon-04, 40px);
 
-/* (min-width: --rh-breakpoint-sm) */
-@media screen and (min-width: 768px) {
-  :is(rh-footer, rh-footer-universal) {
-    --rh-footer-section-side-gap: var(--rh-space-2xl, 32px);
+  & [slot='links']:is(h1, h2, h3, h4, h5):nth-of-type(n+5) {
+    --_link-header-margin: calc(var(--rh-space-2xl, 32px) - var(--rh-space-lg, 16px));
   }
-}
 
-/* (min-width: --rh-breakpoint-xl) */
-@media screen and (min-width: 1440px) {
-  :is(rh-footer, rh-footer-universal) {
-    --rh-footer-section-side-gap: var(--rh-space-4xl, 64px);
+  & [slot^='links'] a {
+    gap: var(--rh-footer-links-gap, var(--rh-space-md, 8px));
   }
 }
 
diff --git a/elements/rh-footer/rh-footer.css b/elements/rh-footer/rh-footer.css
index f61661104f..4b4c0efc2f 100644
--- a/elements/rh-footer/rh-footer.css
+++ b/elements/rh-footer/rh-footer.css
@@ -7,6 +7,7 @@
   font-size: initial;
   display: flex;
   flex-direction: column;
+  color-scheme: dark;
 }
 
 footer,
@@ -145,7 +146,7 @@ footer,
 
 .global-secondary {
   grid-area: secondary;
-  color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
+  color: var(--rh-color-text-secondary);
   display: flex;
   flex-direction: column;
   gap: var(--rh-space-lg, 16px);
@@ -328,21 +329,7 @@ footer,
   font-size:
     var(--rh-footer-link-header-font-size,
       var(--rh-font-size-body-text-sm, 0.875rem)) !important;
-  color: var(--rh-color-text-primary-on-dark, #ffffff) !important;
-}
-
-/* @todo We should consider rolling this into the rh-accordion design spec */
-rh-accordion-header[expanded] {
-  --_border-inline-end-color: var(--_border-color);
-}
-
-rh-accordion-header:not([expanded])::part(container) {
-  --_background-color: var(--rh-color-surface-darker, #1f1f1f);
-  --_active-background-color: var(--rh-color-surface-darker, #1f1f1f);
-}
-
-rh-accordion-header:hover {
-  --_after-background-color: var(--_accent-color);
+  color: var(--rh-color-text-primary) !important;
 }
 
 ::slotted(rh-footer-copyright) {
diff --git a/elements/rh-footer/rh-footer.ts b/elements/rh-footer/rh-footer.ts
index 89a5de60f5..9a1ced3f68 100644
--- a/elements/rh-footer/rh-footer.ts
+++ b/elements/rh-footer/rh-footer.ts
@@ -1,5 +1,4 @@
 import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators/property.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -14,7 +13,7 @@ import './rh-footer-links.js';
 import './rh-footer-block.js';
 
 import style from './rh-footer.css';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
+
 import { ScreenSizeController } from '../../lib/ScreenSizeController.js';
 
 function isHeaderTagName(tagName: string) {
@@ -79,8 +78,8 @@ export class RhFooter extends LitElement {
 
   #compact = false;
 
-  @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette: ColorPalette = 'darker';
+  // @colorContextProvider()
+  // @property({ reflect: true, attribute: 'color-palette' }) colorPalette: ColorPalette = 'darker';
 
   /**
    * ScreenSizeController effects callback to set #compact is true when viewport

From bf820aad56af9bc16afdc62e367d2cf098621283 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:22:56 -0500
Subject: [PATCH 14/33] fix(health-index): use color-scheme

---
 elements/rh-health-index/rh-health-index.css | 354 ++++++++-----------
 elements/rh-health-index/rh-health-index.ts  |  11 +-
 2 files changed, 152 insertions(+), 213 deletions(-)

diff --git a/elements/rh-health-index/rh-health-index.css b/elements/rh-health-index/rh-health-index.css
index 8528649f2f..4c219959f3 100644
--- a/elements/rh-health-index/rh-health-index.css
+++ b/elements/rh-health-index/rh-health-index.css
@@ -7,245 +7,191 @@
 }
 
 #container {
-  display: inline-flex;
-  align-items: center;
-  width: max-content;
-  font-size: var(--rh-font-size-body-text-md, 1rem);
-  font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace);
-  line-height: var(--_box-size);
-  text-transform: uppercase;
-
   /* sizing */
   --_box-size: var(--rh-space-xl, 24px);
 
   /* colors */
   --_color-text-active: var(--rh-color-gray-95, #151515);
-  --_color-text-inactive: var(--rh-color-gray-70, #383838);
-  --_color-text: var(--_color-text-inactive);
-  --_color-fill: var(--rh-color-surface-lightest, #ffffff);
+  --_color-text-inactive:
+    light-dark(var(--rh-color-gray-70, #383838),
+      var(--_color-25, var(--_color-20)));
+  --_color-text: light-dark(var(--_color-text-inactive), var(--_color-text-inactive));
+  --_color-fill:
+    light-dark(var(--rh-color-surface-lightest, #ffffff),
+      var(--rh-color-surface-darkest, #151515));
   --_color-border: var(--rh-color-border-subtle);
-}
-
-#grade {
-  margin-inline-end: var(--rh-space-lg, 16px);
-}
 
-.box {
-  background-color: var(--_color-fill, transparent);
-  color: var(--_color-text);
-  border: var(--rh-border-width-sm, 1px) solid var(--_color-border);
-  width: var(--_box-size);
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
+  display: inline-flex;
   align-items: center;
-  position: relative;
-
-  --_color-fill-active: var(--_color-10);
-  --_color-border-active: var(--_color-20);
-  --_color-text-active: var(--_color-30);
-}
-
-.box:not(:first-child) {
-  margin-inline-start: -1px;
-}
-
-.box.active {
-  color: var(--_color-text-active);
-  z-index: 10;
-}
-
-:is(.sm,.md) .box.active {
-  border-color: var(--_color-border-active);
-  background-color: var(--_color-fill-active);
-}
-
-:not(.sm) .box {
-  --_color-fill-active: var(--_color-10);
-  --_color-border-active: var(--_color-30);
-}
-
-/*****************************************************************************
- * MD Size (default)
- *****************************************************************************/
-
-.md {
-  height: var(--_box-size);
-}
-
-.md .box {
-  height: 100%;
-}
-
-.md .box:is(.b, .c, .d) {
-  --_color-border-active: var(--_color-25);
-}
-
-/*****************************************************************************
- * SM Size
- *****************************************************************************/
-
-.sm {
-  display: inline-block;
-  margin: 0;
-  border: none;
-  height: var(--_box-size);
-}
-
-/*****************************************************************************
- * LG and XL Sizes
- *****************************************************************************/
-
-:is(.lg, .xl) {
-  --_color-fill-active: var(--_color-10);
-  --_color-border-active: var(--_color-30);
-  --_color-text-active: var(--_color-30);
-
-  display: flex;
-  margin: 0;
-  border: var(--rh-border-width-sm, 1px) solid var(--_color-border);
-}
-
-#container:is(.lg, .xl) .box {
-  border: none;
-  margin: 1px;
-  display: inline-block;
+  width: max-content;
+  font-size: var(--rh-font-size-body-text-md, 1rem);
+  font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace);
   line-height: var(--_box-size);
-  width: var(--_box-size);
-  text-align: center;
-  padding-inline: 2px;
-}
-
-:is(.lg, .xl) .box:after {
-  display: block;
-  content: '';
-  min-height: var(--rh-length-xs, 4px);
-  z-index: 10;
-  background-color: var(--_color-20);
-}
-
-:is(.lg, .xl) .box.active {
-  position: relative;
-  margin: -1px;
-  font-weight: var(--rh-font-weight-code-medium, 500);
-}
+  text-transform: uppercase;
 
-:is(.lg, .xl) .box.active:before {
-  display: block;
-  content: '';
-  inset-inline: -1px;
-  inset-block: -2px;
-  z-index: -1;
-  position: absolute;
-  background-color: var(--_color-fill-active, var(--_color-10));
-  border: var(--rh-border-width-sm, 1px) solid var(--_color-border-active);
+  & .box {
+    --_color-fill-active: light-dark(var(--_color-10), var(--rh-color-surface-darkest, #151515));
+    --_color-border-active: light-dark(var(--_color-20), var(--_color-30));
+    --_color-text-active: light-dark(var(--_color-30), var(--rh-color-white, #ffffff));
+
+    background-color: var(--_color-fill, transparent);
+    border: var(--rh-border-width-sm, 1px) solid var(--_color-border);
+    width: var(--_box-size);
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    &:not(:first-child) {
+      margin-inline-start: -1px;
+    }
+
+    &.active {
+      color: var(--_color-text-active);
+      z-index: 10;
+    }
+  }
+
+  &.sm {
+    display: inline-block;
+    margin: 0;
+    border: none;
+    height: var(--_box-size);
+
+    & .box {
+      --_color-border-active: light-dark(var(--_color-30), var(--_color-20));
+    }
+  }
+
+  &.md {
+    height: var(--_box-size);
+
+    & .box {
+      --_color-fill-active: light-dark(var(--_color-20), var(--_color-10));
+
+      height: 100%;
+
+      &:is(.b, .c, .d) {
+        --_color-border-active: var(--_color-25);
+      }
+    }
+  }
+
+  &:is(.sm,.md) {
+    & .box {
+      &.active {
+        border-color: var(--_color-border-active);
+        background-color: var(--_color-fill-active);
+      }
+    }
+  }
+
+  &:is(.lg, .xl) {
+    --_color-text-active: light-dark(var(--_color-30), var(--rh-color-surface-darkest, #151515));
+    --_color-border-active: var(--_color-30);
+
+    display: flex;
+    margin: 0;
+    border: var(--rh-border-width-sm, 1px) solid var(--_color-border);
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    & .box {
+      --_color-fill-active:
+        light-dark(var(--_color-10),
+          var(--rh-color-surface-darkest, #151515));
+      --_color-fill:
+        light-dark(var(--rh-color-surface-lightest, #ffffff),
+          var(--rh-color-surface-dark-alt, #292929));
+
+      border: none;
+      margin: 1px;
+      display: inline-block;
+      line-height: var(--_box-size);
+      width: var(--_box-size);
+      text-align: center;
+      padding-inline: 2px;
+
+      &:after {
+        display: block;
+        content: '';
+        min-height: var(--rh-length-xs, 4px);
+        z-index: 10;
+        background-color: var(--_color-20);
+      }
+
+      &.active {
+        position: relative;
+        margin: -1px;
+        font-weight: var(--rh-font-weight-code-medium, 500);
+
+        &:before {
+          display: block;
+          content: '';
+          inset-inline: -1px;
+          inset-block: -2px;
+          z-index: -1;
+          position: absolute;
+          background-color: var(--_color-fill-active);
+          border: var(--rh-border-width-sm, 1px) solid var(--_color-border-active);
+        }
+      }
+    }
+  }
+
+  &.xl {
+    --_box-size: var(--rh-space-2xl, 32px);
+
+    font-size: var(--rh-font-size-body-text-xl, 1.25rem);
+  }
 }
 
-/*****************************************************************************
- * XL Size
- *****************************************************************************/
-
-#container.xl {
-  font-size: var(--rh-font-size-body-text-xl, 1.25rem);
-
-  --_box-size: var(--rh-space-2xl, 32px);
+#grade {
+  margin-inline-end: var(--rh-space-lg, 16px);
 }
 
-/*****************************************************************************
- * Light Color Theme
- *****************************************************************************/
-
 .a {
-  --_color-10: var(--rh-color-green-20, #d1f1bb);
+  --_color-10: light-dark(var(--rh-color-green-20, #d1f1bb), var(--rh-color-green-60, #3d7317));
   --_color-20: var(--rh-color-green-60, #3d7317);
-  --_color-30: var(--rh-color-green-70, #204d00);
+  --_color-25: var(--rh-color-green-10, #e9f7df);
+  --_color-30: light-dark(var(--rh-color-green-70, #204d00), var(--rh-color-green-40, #87bb62));
 }
 
 .b {
-  --_color-10: var(--rh-color-green-10, #e9f7df);
+  --_color-10: light-dark(var(--rh-color-green-10, #e9f7df), var(--rh-color-green-40, #87bb62));
   --_color-20: var(--rh-color-green-40, #87bb62);
-  --_color-25: var(--rh-color-green-60, #3d7317); /* alt */
-  --_color-30: var(--rh-color-green-70, #204d00);
+  --_color-25: light-dark(var(--rh-color-green-60, #3d7317), var(--rh-color-green-10, #e9f7df));
+  --_color-30: light-dark(var(--rh-color-green-70, #204d00), var(--rh-color-green-20, #d1f1bb));
 }
 
 .c {
-  --_color-10: var(--rh-color-yellow-10, #fff4cc);
+  --_color-10: light-dark(var(--rh-color-yellow-10, #fff4cc), var(--rh-color-yellow-30, #ffcc17));
   --_color-20: var(--rh-color-yellow-30, #ffcc17);
-  --_color-25: var(--rh-color-yellow-50, #b98412); /* alt */
-  --_color-30: var(--rh-color-yellow-70, #73480b);
+  --_color-25: light-dark(var(--rh-color-yellow-50, #b98412), var(--rh-color-yellow-10, #fff4cc));
+  --_color-30: light-dark(var(--rh-color-yellow-70, #73480b), var(--rh-color-yellow-10, #fff4cc));
 }
 
 .d {
-  --_color-10: var(--rh-color-orange-10, #ffe8cc);
+  --_color-10: light-dark(var(--rh-color-orange-10, #ffe8cc), var(--rh-color-orange-40, #f5921b));
   --_color-20: var(--rh-color-orange-40, #f5921b);
-  --_color-25: var(--rh-color-orange-60, #9e4a06); /* alt */
-  --_color-30: var(--rh-color-orange-70, #732e00);
+  --_color-25: light-dark(var(--rh-color-orange-60, #9e4a06), var(--rh-color-orange-10, #ffe8cc));
+  --_color-30: light-dark(var(--rh-color-orange-70, #732e00), var(--rh-color-orange-20, #fccb8f));
 }
 
 .e {
-  --_color-10: var(--rh-color-red-orange-10, #ffe3d9);
+  --_color-10:
+    light-dark(var(--rh-color-red-orange-10, #ffe3d9),
+      var(--rh-color-red-orange-50, #f0561d));
   --_color-20: var(--rh-color-red-orange-60, #b1380b);
-  --_color-30: var(--rh-color-red-orange-70, #731f00);
+  --_color-25: var(--rh-color-red-orange-10, #ffe3d9);
+  --_color-30:
+    light-dark(var(--rh-color-red-orange-70, #731f00),
+      var(--rh-color-red-orange-30, #f89b78));
 }
 
 .f {
-  --_color-10: var(--rh-color-red-10, #fce3e3);
+  --_color-10: light-dark(var(--rh-color-red-10, #fce3e3), var(--rh-color-red-60, #a60000));
   --_color-20: var(--rh-color-red-70, #5f0000);
-  --_color-30: var(--rh-color-red-70, #5f0000);
-}
-
-/*****************************************************************************
- * Dark Color Theme
- *****************************************************************************/
-
-#container.dark .box {
-  --_color-text-active: var(--rh-color-white, #ffffff);
-  --_color-fill: var(--rh-color-surface-darkest, #151515);
-  --_color-text: var(--_color-text-inactive);
-  --_color-text-inactive: var(--_color-25, var(--_color-20));
-}
-
-#container.dark:is(.lg, .xl) .box {
-  --_color-fill: var(--rh-color-surface-dark-alt, #292929);
-  --_color-fill-active: var(--rh-color-surface-darkest, #151515);
-}
-
-#container.dark.sm .box {
-  background-color: var(--_color-fill);
-}
-
-.dark .a {
-  --_color-10: var(--rh-color-green-60, #3d7317);
-  --_color-25: var(--rh-color-green-10, #e9f7df);
-  --_color-30: var(--rh-color-green-40, #87bb62);
-}
-
-.dark .b {
-  --_color-10: var(--rh-color-green-40, #87bb62);
-  --_color-25: var(--rh-color-green-10, #e9f7df);
-  --_color-30: var(--rh-color-green-20, #d1f1bb);
-}
-
-.dark .c {
-  --_color-10: var(--rh-color-yellow-30, #ffcc17);
-  --_color-25: var(--rh-color-yellow-10, #fff4cc);
-  --_color-30: var(--rh-color-yellow-10, #fff4cc);
-}
-
-.dark .d {
-  --_color-10: var(--rh-color-orange-40, #f5921b);
-  --_color-25: var(--rh-color-orange-10, #ffe8cc);
-  --_color-30: var(--rh-color-orange-20, #fccb8f);
-}
-
-.dark .e {
-  --_color-10: var(--rh-color-red-orange-50, #f0561d);
-  --_color-25: var(--rh-color-red-orange-10, #ffe3d9);
-  --_color-30: var(--rh-color-red-orange-30, #f89b78);
-}
-
-.dark .f {
-  --_color-10: var(--rh-color-red-60, #a60000);
   --_color-25: var(--rh-color-red-10, #fce3e3);
-  --_color-30: var(--rh-color-red-40, #f56e6e);
+  --_color-30: light-dark(var(--rh-color-red-70, #5f0000), var(--rh-color-red-40, #f56e6e));
 }
diff --git a/elements/rh-health-index/rh-health-index.ts b/elements/rh-health-index/rh-health-index.ts
index 9c6fd863fa..e3a7e1b3e3 100644
--- a/elements/rh-health-index/rh-health-index.ts
+++ b/elements/rh-health-index/rh-health-index.ts
@@ -5,8 +5,6 @@ import { classMap } from 'lit/directives/class-map.js';
 
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import styles from './rh-health-index.css';
 
 /**
@@ -31,11 +29,6 @@ export class RhHealthIndex extends LitElement {
    */
   @property({ reflect: true }) grade: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' = 'A';
 
-  /**
-   * Sets color theme based on parent context
-   */
-  @colorContextConsumer() private on?: ColorTheme;
-
   // TODO: use I18nController to support officially supported languages.
   #internals = InternalsController.of(this, {
     role: 'meter',
@@ -57,13 +50,13 @@ export class RhHealthIndex extends LitElement {
   }
 
   override render() {
-    const { on, size } = this;
+    const { size } = this;
     const grades = [...RhHealthIndex.grades].map(x => x.toLowerCase());
     const grade = this.grade.toLowerCase();
     return html`
       <div id="container"
            aria-hidden="true"
-           class="${classMap({ [size ?? '']: !!size, [on ?? '']: !!on })}">
+           class="${classMap({ [size ?? '']: !!size })}">
         <div id="grade" ?hidden="${size !== 'md'}">${grade}</div>${size === 'sm' ? html`
         <div class="box active ${grade}">${grade}</div>` : grades.map(letter => html`
         <div class="box ${classMap({ [letter]: true, active: letter === grade })}">

From 1ebbcc705ae9a6c3f246cfedc6b3f63561a974c4 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:23:07 -0500
Subject: [PATCH 15/33] fix(menu): use color-scheme

---
 elements/rh-menu/rh-menu.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/elements/rh-menu/rh-menu.ts b/elements/rh-menu/rh-menu.ts
index 138b3e525d..04514818e5 100644
--- a/elements/rh-menu/rh-menu.ts
+++ b/elements/rh-menu/rh-menu.ts
@@ -1,13 +1,10 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import styles from './rh-menu.css';
 
 export class MenuToggleEvent extends Event {
@@ -31,8 +28,6 @@ export class RhMenu extends LitElement {
 
   @queryAssignedElements() private _menuItems!: HTMLElement[];
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   #tabindex = RovingTabindexController.of<HTMLElement>(this, {
     getItems: () => this.getItems(this._menuItems),
   });
@@ -57,10 +52,8 @@ export class RhMenu extends LitElement {
   }
 
   render() {
-    const { on = 'light' } = this;
     return html`
       <slot part="menu"
-            class="${classMap({ on: true, [on]: true })}"
             @slotchange="${this.#onSlotchange}"></slot>
     `;
   }

From 46b9a84aed9319949f49044d79c955254c795322 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:23:19 -0500
Subject: [PATCH 16/33] fix(navigation-secondary): use color-scheme

---
 .../rh-navigation-secondary-lightdom.css      | 178 +++++++++---------
 .../rh-navigation-secondary-menu.css          |   1 +
 .../rh-navigation-secondary.css               |  15 +-
 .../rh-navigation-secondary.ts                |  39 ++--
 4 files changed, 119 insertions(+), 114 deletions(-)

diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
index 2333e3e5c5..84c9a4de9d 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
@@ -14,106 +14,110 @@ rh-navigation-secondary {
   height: var(--_max-height);
   min-height: var(--_min-height);
   font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
-}
-
-rh-navigation-secondary:not(:defined) {
-  display: grid;
-  position: relative;
-  gap: 0 var(--rh-space-2xl, 32px);
-  grid-template-rows: minmax(var(--_min-height), var(--_max-height)) max-content max-content;
-  grid-template-columns: 1fr max-content;
-  grid-template-areas:
-    'logo logo'
-    'nav nav'
-    'cta cta';
-}
 
-rh-navigation-secondary[color-palette='dark'] {
-  --_nav-link-color: var(--rh-color-text-primary-on-light, #151515);
-  --_logo-link-color: var(--rh-color-text-primary-on-dark, #ffffff);
+  &:not(:defined) {
+    display: grid;
+    position: relative;
+    gap: 0 var(--rh-space-2xl, 32px);
+    grid-template-rows: minmax(var(--_min-height), var(--_max-height)) max-content max-content;
+    grid-template-columns: 1fr max-content;
+    grid-template-areas:
+      'logo logo'
+      'nav nav'
+      'cta cta';
+  }
 
-  background-color: var(--rh-color-surface-dark, #383838);
-  border-block-end-color: var(--rh-color-border-subtle-on-dark, #707070);
-  box-shadow: none;
-}
+  & > [slot='logo'] {
+    grid-area: logo;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: var(--_logo-link-color);
+
+    /* TODO: remove for v2 */
+    /* stylelint-disable-next-line */
+    max-width: var(--rh-navigation-secondary-logo-max-width, 10em);
+    text-decoration: underline;
+    font-size: var(--rh-font-size-body-text-md, 1rem);
+    letter-spacing: 0.01125em;
+    margin-inline-start: var(--rh-space-lg, 16px);
+    font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
+    font-weight: var(--rh-font-weight-heading-medium, 500);
+    padding-block: var(--rh-space-lg, 16px);
+    border-block-start: var(--rh-border-width-lg, 3px) solid transparent;
+    width: max-content;
+
+    &:hover {
+      text-decoration: none;
+      color: var(--_nav-link-color);
+    }
 
-rh-navigation-secondary * {
-  box-sizing: border-box;
-}
+    &[aria-current='page'] {
+      border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
+    }
+  }
 
-rh-navigation-secondary-menu a {
-  text-decoration: underline !important;
-  color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-}
+  & > [slot='nav'] {
+    grid-area: nav;
+    display: none;
+    flex-direction: column;
+    list-style: none;
+    background-color: var(--rh-color-surface-lightest, #ffffff);
+    margin: 0;
+    padding:
+      var(--rh-space-2xl, 32px)
+      var(--rh-space-lg, 16px)
+      var(--rh-space-lg, 16px);
+  }
 
-rh-navigation-secondary-menu a:hover {
-  color: var(--rh-color-interactive-primary-hover-on-light, #003366) !important;
-}
+  & > :is([slot='logo'], [slot='nav']) {
+    line-height: var(--rh-line-height-heading, 1.3);
+  }
 
-rh-navigation-secondary > [slot='logo'] {
-  grid-area: logo;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  color: var(--_logo-link-color);
+  & > [slot='cta'] {
+    grid-area: cta;
+    display: none;
+    height: 100%;
+    align-items: center;
+    background-color: var(--rh-color-surface-lightest, #ffffff);
+    padding:
+      var(--rh-space-lg, 16px)
+      var(--rh-space-lg, 16px)
+      var(--rh-space-2xl, 32px);
+    margin: 0;
+    max-width: 100%;
+  }
 
-  /* TODO: remove for v2 */
-  /* stylelint-disable-next-line */
-  max-width: var(--rh-navigation-secondary-logo-max-width, 10em);
-  text-decoration: underline;
-  font-size: var(--rh-font-size-body-text-md, 1rem);
-  letter-spacing: 0.01125em;
-  margin-inline-start: var(--rh-space-lg, 16px);
-  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
-  font-weight: var(--rh-font-weight-heading-medium, 500);
-  padding-block: var(--rh-space-lg, 16px);
-  border-block-start: var(--rh-border-width-lg, 3px) solid transparent;
-  width: max-content;
-}
+  &[color-palette^='light'] {
+    color-scheme: light;
+  }
 
-rh-navigation-secondary > [slot='logo'][aria-current='page'] {
-  border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
-}
+  &[color-palette^='dark'] {
+    --_nav-link-color: var(--rh-color-text-primary-on-light, #151515);
+    --_logo-link-color: var(--rh-color-text-primary-on-dark, #ffffff);
 
-rh-navigation-secondary > [slot='logo']:hover {
-  text-decoration: none;
-  color: var(--_nav-link-color);
-}
+    background-color: var(--rh-color-surface-dark, #383838);
+    border-block-end-color: var(--rh-color-border-subtle-on-dark, #707070);
+    box-shadow: none;
+    color-scheme: dark;
 
-rh-navigation-secondary[color-palette='dark'] > [slot='logo']:hover {
-  color: var(--_logo-link-color);
+    & > [slot='logo']:hover {
+      color: var(--_logo-link-color);
+    }
+  }
 }
 
-rh-navigation-secondary > [slot='nav'] {
-  grid-area: nav;
-  display: none;
-  flex-direction: column;
-  list-style: none;
-  background-color: var(--rh-color-surface-lightest, #ffffff);
-  margin: 0;
-  padding:
-    var(--rh-space-2xl, 32px)
-    var(--rh-space-lg, 16px)
-    var(--rh-space-lg, 16px);
+rh-navigation-secondary * {
+  box-sizing: border-box;
 }
 
-rh-navigation-secondary > [slot='logo'],
-rh-navigation-secondary > [slot='nav'] {
-  line-height: var(--rh-line-height-heading, 1.3);
+rh-navigation-secondary-menu a {
+  text-decoration: underline !important;
+  color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
 }
 
-rh-navigation-secondary > [slot='cta'] {
-  grid-area: cta;
-  display: none;
-  height: 100%;
-  align-items: center;
-  background-color: var(--rh-color-surface-lightest, #ffffff);
-  padding:
-    var(--rh-space-lg, 16px)
-    var(--rh-space-lg, 16px)
-    var(--rh-space-2xl, 32px);
-  margin: 0;
-  max-width: 100%;
+rh-navigation-secondary-menu a:hover {
+  color: var(--rh-color-interactive-primary-hover-on-light, #003366) !important;
 }
 
 /* If the component isn't defined display top level links */
@@ -150,7 +154,7 @@ rh-navigation-secondary [slot='nav'] > li > a[aria-current='page'] {
   border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
 }
 
-rh-navigation-secondary[color-palette='dark'] [slot='nav'] li > a[aria-current='page'] {
+rh-navigation-secondary[color-palette^='dark'] [slot='nav'] li > a[aria-current='page'] {
   border-block-start-color: var(--rh-color-brand-red-on-dark, #ee0000);
 }
 
@@ -209,13 +213,13 @@ rh-navigation-secondary-menu-section > [slot='header'] {
     grid-template-columns: max-content 1fr max-content;
   }
 
-  rh-navigation-secondary[color-palette='dark'] {
+  rh-navigation-secondary[color-palette^='dark'] {
     --_nav-link-color: var(--rh-color-text-primary-on-dark, #ffffff);
     --_nav-chevron-color: var(--rh-color-text-primary-on-dark, #ffffff);
   }
 
   /* stylelint-disable-next-line @stylistic/max-line-length */
-  rh-navigation-secondary[color-palette='dark'] rh-navigation-secondary-dropdown > a[aria-expanded='true'] {
+  rh-navigation-secondary[color-palette^='dark'] rh-navigation-secondary-dropdown > a[aria-expanded='true'] {
     --_nav-link-color: var(--rh-color-text-primary-on-light, #151515);
     --_nav-chevron-color: var(--rh-color-text-primary-on-light, #151515);
 
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css b/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
index 05a166c475..f953d289c2 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
@@ -1,5 +1,6 @@
 :host {
   display: block;
+  color-scheme: light;
 }
 
 #container {
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.css b/elements/rh-navigation-secondary/rh-navigation-secondary.css
index 1c4d3fae0d..5dd14a4ea9 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary.css
@@ -15,19 +15,14 @@
   --_button-font-color: var(--rh-color-text-primary);
   --_nav-max-height: var(--_max-height, max-content);
   --_nav-min-height: var(--_min-height, 80px);
-  --_current-active-child-border-color: var(--rh-color-brand-red);
-  --_border-color: transparent;
+  --_current-active-child-border-color:
+    light-dark(var(--rh-color-brand-red),
+      var(--rh-color-brand-red));
+  --_border-color: light-dark(transparent, var(--rh-color-border-subtle));
 
   z-index: var(--rh-navigation-secondary-z-index, 102);
 }
 
-.on.dark {
-  --_current-active-child-border-color: var(--rh-color-brand-red);
-  --_border-color: var(--rh-color-border-subtle);
-  --_button-font-color: var(--rh-color-text-primary);
-  --_chevron-color: var(--rh-color-text-primary);
-}
-
 nav {
   z-index: var(--rh-navigation-secondary-z-index, 102);
 }
@@ -46,7 +41,7 @@ nav.rtl {
   position: absolute;
   width: 100%;
   z-index: var(--rh-navigation-secondary-z-index, 102);
-  background-color: var(--rh-color-surface);
+  background-color: light-dark(var(--rh-color-surface-lighter), var(--rh-color-surface-dark));
   gap: 0 var(--rh-space-lg, 16px);
   grid-template-rows:
     minmax(var(--_nav-min-height), var(--_nav-max-height))
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.ts b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
index 6514c3c47b..dcd7d7ae52 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary.ts
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
@@ -21,8 +21,9 @@ import {
 
 import { DirController } from '../../lib/DirController.js';
 import { ScreenSizeController } from '../../lib/ScreenSizeController.js';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
+
+import { type ColorPalette } from '../../lib/context/color/provider.js';
+
 export class SecondaryNavOverlayChangeEvent extends ComposedEvent {
   constructor(
     public open: boolean,
@@ -32,11 +33,6 @@ export class SecondaryNavOverlayChangeEvent extends ComposedEvent {
   }
 }
 
-export type NavPalette = Extract<ColorPalette, (
-  | 'lighter'
-  | 'dark'
-)>;
-
 import styles from './rh-navigation-secondary.css';
 
 
@@ -96,16 +92,26 @@ export class RhNavigationSecondary extends LitElement {
 
   #internals = InternalsController.of(this, { role: 'navigation' });
 
-  /**
-   * Color palette darker | lighter (default: lighter)
-   */
-  @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette: NavPalette = 'lighter';
+  get #computedPalette() {
+    switch (this.colorPalette) {
+      case 'lighter':
+      case 'dark':
+        return this.colorPalette;
+      case 'light':
+      case 'lightest':
+        return 'lighter';
+      case 'darker':
+      case 'darkest':
+        return 'dark';
+    }
+  }
 
   /**
-   * Sets color theme based on parent context
+   * Color palette dark | lighter (default: lighter)
    */
-  @colorContextConsumer() private on?: ColorTheme;
+
+  @property({ reflect: true, attribute: 'color-palette' }) colorPalette: ColorPalette = 'lighter';
+
 
   @queryAssignedElements({ slot: 'nav' }) private _nav?: HTMLElement[];
 
@@ -164,14 +170,13 @@ export class RhNavigationSecondary extends LitElement {
   }
 
   render() {
-    const { on = '' } = this;
     const expanded = this.mobileMenuExpanded;
     const rtl = this.#dir.dir === 'rtl';
     // CTA must always be 'lightest' on mobile screens
-    const dropdownPalette = this.#compact ? 'lightest' : this.colorPalette;
+    const dropdownPalette = this.#compact ? 'lightest' : this.#computedPalette;
     return html`
       <div part="nav"
-           class="${classMap({ [on]: !!on, on: true, compact: this.#compact, rtl })}">
+           class="${classMap({ compact: this.#compact, rtl })}">
         ${this.#logoCopy}
         <div id="container" part="container" class="${classMap({ expanded })}">
           <slot name="logo" id="logo"></slot>

From 57a8e42f98f111589a842e6421fba898ad3de183 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:23:30 -0500
Subject: [PATCH 17/33] fix(pagination): use color-scheme

---
 elements/rh-pagination/rh-pagination.css | 44 +++++++++++++-----------
 elements/rh-pagination/rh-pagination.ts  |  6 +---
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css
index b8b8d532d5..9f0c252da4 100644
--- a/elements/rh-pagination/rh-pagination.css
+++ b/elements/rh-pagination/rh-pagination.css
@@ -27,13 +27,29 @@
   --_numeric-a-color-focus-outline: var(--rh-pagination-accent-color);
   --_numeric-a-color-visited: var(--rh-color-interactive-primary-visited-default);
   --_numeric-a-color-visited-hover: var(--rh-color-interactive-primary-visited-hover);
-  --_list-a-bg-color: var(--rh-color-surface-lighter, #f2f2f2);
+  --_list-a-bg-color:
+    light-dark(var(--rh-color-surface-lighter, #f2f2f2),
+      var(--rh-color-surface-dark-alt, #292929));
   --_list-a-current-page-border-color: var(--rh-color-border-subtle);
-  --_list-a-current-page-bg-color: var(--rh-color-surface-lightest, #ffffff);
+  --_list-a-current-page-bg-color:
+    light-dark(var(--rh-color-surface-lightest, #ffffff),
+      var(--rh-color-surface-darkest, #151515));
   --_list-a-text-color: var(--rh-color-text-primary);
-  --_stepper-bg-color: var(--rh-color-surface-lighter, #f2f2f2);
-  --_stepper-hover-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_border-top-hover-color: var(--rh-color-gray-60, #4d4d4d);
+  --_stepper-bg-color:
+    light-dark(var(--rh-color-surface-lighter, #f2f2f2),
+      var(--rh-color-surface-dark-alt, #292929));
+  --_stepper-hover-focus-color:
+    light-dark(var(--rh-color-text-primary-on-dark, #ffffff),
+      var(--rh-color-text-primary-on-dark, #ffffff));
+  --_border-top-hover-color:
+    light-dark(var(--rh-color-gray-60, #4d4d4d),
+      var(--rh-color-border-subtle-on-light, #c7c7c7));
+  --rh-pagination-stepper-color:
+    light-dark(var(--rh-color-gray-50, #707070),
+      var(--rh-color-text-secondary-on-dark, #c7c7c7));
+  --rh-pagination-background-focused:
+    light-dark(var(--rh-color-gray-30, #c7c7c7),
+      var(--rh-color-gray-50, #707070));
 }
 
 @container pagination (min-width: 768px) {
@@ -42,16 +58,6 @@
   }
 }
 
-#container.dark {
-  --rh-pagination-stepper-color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
-  --rh-pagination-background-focused: var(--rh-color-gray-50, #707070);
-  --_list-a-bg-color: var(--rh-color-surface-dark-alt, #292929);
-  --_list-a-current-page-bg-color: var(--rh-color-surface-darkest, #151515);
-  --_border-top-hover-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
-  --_stepper-bg-color: var(--rh-color-surface-dark-alt, #292929);
-  --_stepper-hover-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
-}
-
 .visually-hidden {
   border: 0;
   clip: rect(0, 0, 0, 0);
@@ -195,17 +201,15 @@ input:focus {
 }
 
 input:invalid {
-  border-block-end-color: var(--rh-color-red-60, #a60000);
+  border-block-end-color:
+    light-dark(var(--rh-color-red-60, #a60000),
+      var(--rh-color-red-40, #f56e6e));
 }
 
 input:invalid:focus {
   border-block-end-width: var(--rh-border-width-md, 2px);
 }
 
-.dark input:invalid {
-  border-block-end-color: var(--rh-color-red-40, #f56e6e);
-}
-
 #numeric-middle {
   display: none;
 }
diff --git a/elements/rh-pagination/rh-pagination.ts b/elements/rh-pagination/rh-pagination.ts
index afc390b8f1..0db429d761 100644
--- a/elements/rh-pagination/rh-pagination.ts
+++ b/elements/rh-pagination/rh-pagination.ts
@@ -9,7 +9,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { DirController } from '../../lib/DirController.js';
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-pagination.css';
 
@@ -44,8 +43,6 @@ 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];
 
@@ -114,7 +111,6 @@ export class RhPagination extends LitElement {
   }
 
   render() {
-    const { on = '' } = this;
     const { dir } = this.#dir;
     const { label, labelFirst, labelPrevious, labelNext, labelLast } = this;
     const firstHref = this.#currentLink === this.#firstLink ? undefined : this.#firstLink?.href;
@@ -125,7 +121,7 @@ export class RhPagination extends LitElement {
 
     return html`
       <div id="container" part="container"
-           class=${classMap({ [dir]: true, [on]: !!on })}>
+           class=${classMap({ [dir]: true })}>
         <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>
         <nav aria-label=${label}>

From 9340fa2f357b66658aaf377b43a840a44065f2b0 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:23:41 -0500
Subject: [PATCH 18/33] fix(site-status): use color-scheme

---
 elements/rh-site-status/rh-site-status.css | 8 +++-----
 elements/rh-site-status/rh-site-status.ts  | 9 +--------
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/elements/rh-site-status/rh-site-status.css b/elements/rh-site-status/rh-site-status.css
index bc565dc3fc..0551f94006 100644
--- a/elements/rh-site-status/rh-site-status.css
+++ b/elements/rh-site-status/rh-site-status.css
@@ -5,15 +5,13 @@
 #container {
   display: inline-flex;
   padding: var(--rh-space-lg, 16px);
-  background: var(--rh-color-surface-light, #e0e0e0);
+  background:
+    light-dark(var(--rh-color-surface-light, #e0e0e0),
+      var(--rh-color-surface-dark, #383838));
   border-radius: var(--rh-border-radius-default, 3px);
   min-width: 150px;
 }
 
-#container.dark {
-  background: var(--rh-color-surface-dark, #383838);
-}
-
 a {
   display: inline-flex;
   font-size: var(--rh-font-size-body-text-sm, 0.875rem);
diff --git a/elements/rh-site-status/rh-site-status.ts b/elements/rh-site-status/rh-site-status.ts
index bed7492734..d6f29c8a46 100644
--- a/elements/rh-site-status/rh-site-status.ts
+++ b/elements/rh-site-status/rh-site-status.ts
@@ -4,8 +4,6 @@ import { classMap } from 'lit/directives/class-map.js';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import '@rhds/elements/rh-icon/rh-icon.js';
 import '@rhds/elements/rh-spinner/rh-spinner.js';
 
@@ -138,10 +136,6 @@ export class RhSiteStatus extends LitElement {
     },
   };
 
-  /**
-   * Sets color theme based on parent context
-   */
-  @colorContextConsumer() private on?: ColorTheme;
 
   #status: Status | null = null;
 
@@ -187,11 +181,10 @@ export class RhSiteStatus extends LitElement {
   }
 
   protected override render() {
-    const { on = 'light' } = this;
     const loading = this.#loading;
     const { icon, status } = this.#icon;
     return html`
-      <div id="container" class="${classMap({ on: true, [on]: true, loading })}">
+      <div id="container" class="${classMap({ loading })}">
         <a href="https://status.redhat.com/"
            aria-busy="${String(this.#loading) as 'true' | 'false'}"
            aria-live="polite">${this.#loading ? html`

From b2209102db3d25ef26d448d2f348838c33ad4218 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:23:51 -0500
Subject: [PATCH 19/33] fix(spinner): use color-scheme

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

diff --git a/elements/rh-spinner/rh-spinner.css b/elements/rh-spinner/rh-spinner.css
index f543ff74d3..b320ec61b7 100644
--- a/elements/rh-spinner/rh-spinner.css
+++ b/elements/rh-spinner/rh-spinner.css
@@ -34,7 +34,7 @@ circle {
 circle.dash {
   transform-origin: 50% 50%;
   animation: rh-spinner-animation-dash 1.4s ease-out infinite;
-  stroke: var(--rh-color-accent-base-on-light, #0066cc);
+  stroke: var(--rh-color-accent-base);
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
   transform: rotate(-90deg);
@@ -79,7 +79,7 @@ circle.track {
 }
 
 circle.dash.dark {
-  stroke: var(--rh-color-accent-base-on-dark, #92c5f9);
+  stroke: var(--rh-color-accent-base);
 }
 
 circle.track.dark {

From fa14484fd1b3046a8a0b78a953a2a961db5ee851 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:24:29 -0500
Subject: [PATCH 20/33] fix(stat): use color-scheme

---
 elements/rh-stat/rh-stat.css | 16 ++++++----------
 elements/rh-stat/rh-stat.ts  |  7 +------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/elements/rh-stat/rh-stat.css b/elements/rh-stat/rh-stat.css
index 5fcc48f72a..47d86ef168 100644
--- a/elements/rh-stat/rh-stat.css
+++ b/elements/rh-stat/rh-stat.css
@@ -7,17 +7,15 @@ div {
   height: 100%;
   display: flex;
 
-  --_accent-color: var(--rh-color-text-brand-on-light, #ee0000);
+  --_accent-color:
+    light-dark(var(--rh-color-text-brand-on-light, #ee0000),
+      var(--rh-color-text-primary-on-dark, #ffffff));
 
   flex-direction: column;
   align-items: center;
   place-content: center space-around;
 }
 
-.dark {
-  --_accent-color: var(--rh-color-text-primary-on-dark, #ffffff);
-}
-
 span,
 ::slotted(*) {
   display: block;
@@ -25,7 +23,9 @@ span,
 }
 
 .hasIcon #icon {
-  color: var(--rh-color-icon-secondary-on-light, #151515);
+  color:
+    light-dark(var(--rh-color-icon-secondary-on-light, #151515),
+      var(--rh-color-icon-secondary-on-dark, #ffffff));
 }
 
 .md {
@@ -55,10 +55,6 @@ span,
   margin-bottom: 16px;
 }
 
-.dark #icon {
-  color: var(--rh-color-icon-secondary-on-dark, #ffffff);
-}
-
 #title {
   order: 1;
   color: var(--_accent-color);
diff --git a/elements/rh-stat/rh-stat.ts b/elements/rh-stat/rh-stat.ts
index 824dd03eed..f2ee711634 100644
--- a/elements/rh-stat/rh-stat.ts
+++ b/elements/rh-stat/rh-stat.ts
@@ -3,8 +3,6 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { ScreenSizeController } from '../../lib/ScreenSizeController.js';
@@ -33,8 +31,6 @@ export class RhStat extends LitElement {
 
   static readonly styles = [styles];
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   /**
    * The icon to display in the statistic
    */
@@ -81,9 +77,8 @@ export class RhStat extends LitElement {
     const hasCta = this.#slots.hasSlotted('cta');
     const isMobile = !this.#screenSize.matches.has('sm');
     const iconSize = this.size === 'default' ? 'md' : 'lg';
-    const { on = '' } = this;
     return html`
-      <div class="${classMap({ isMobile, hasIcon, hasTitle, hasStatistic, hasCta, [on]: !!on })}">
+      <div class="${classMap({ isMobile, hasIcon, hasTitle, hasStatistic, hasCta })}">
         <span id="icon" class="${classMap({ [iconSize]: !!iconSize })}">
           <slot name="icon">
             ${!this.icon ? '' : html`

From 81be9f38309f6a1dcd6bb5ad57ac98025c23c1b5 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:24:37 -0500
Subject: [PATCH 21/33] fix(subnav): use color-scheme

---
 elements/rh-subnav/rh-subnav.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/elements/rh-subnav/rh-subnav.ts b/elements/rh-subnav/rh-subnav.ts
index a18cbe7b02..4b3662c745 100644
--- a/elements/rh-subnav/rh-subnav.ts
+++ b/elements/rh-subnav/rh-subnav.ts
@@ -1,5 +1,4 @@
 import { LitElement, html, isServer } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { query } from 'lit/decorators/query.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
@@ -7,8 +6,6 @@ import { property } from 'lit/decorators/property.js';
 
 import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-import { colorContextProvider } from '../../lib/context/color/provider.js';
 
 import '@rhds/elements/rh-icon/rh-icon.js';
 
@@ -51,10 +48,6 @@ export class RhSubnav extends LitElement {
     }
   }
 
-  /**
-   * Sets color theme based on parent context
-   */
-  @colorContextConsumer() private on?: ColorTheme;
 
   /**
    * Sets color palette, which affects the element's styles as well as descendants' color theme.
@@ -62,7 +55,6 @@ export class RhSubnav extends LitElement {
    * Your theme will influence these colors so check there first if you are seeing inconsistencies.
    * See [CSS Custom Properties](#css-custom-properties) for default values
    */
-  @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette = 'lighter';
 
   /**
@@ -109,9 +101,8 @@ export class RhSubnav extends LitElement {
   render() {
     const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof RhSubnav;
     const { showScrollButtons } = this.#overflow;
-    const { on = '' } = this;
     return html`
-      <nav part="container" aria-label="${this.accessibleLabel}" class="${classMap({ [on]: !!on })}">${!showScrollButtons ? '' : html`
+      <nav part="container" aria-label="${this.accessibleLabel}">${!showScrollButtons ? '' : html`
         <button id="previous" tabindex="-1" aria-hidden="true"
                 ?disabled="${!this.#overflow.overflowLeft}"
                 @click="${this.#scrollLeft}">

From 92a09dc5e99455bad06041110c3b99a68448761c Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:25:05 -0500
Subject: [PATCH 22/33] fix(surface): use color-scheme

---
 elements/rh-surface/rh-surface.css | 52 +++++++++++++++++++++++-------
 elements/rh-surface/rh-surface.ts  |  9 +-----
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/elements/rh-surface/rh-surface.css b/elements/rh-surface/rh-surface.css
index 1e6c4758ae..05a0bd5a52 100644
--- a/elements/rh-surface/rh-surface.css
+++ b/elements/rh-surface/rh-surface.css
@@ -3,18 +3,48 @@
   background-color: var(--rh-color-surface);
 }
 
-#slot {
-  color: var(--rh-color-text-primary);
+:host([color-palette^='dark']) {
+  --context: dark;
+
+  color-scheme: dark;
+}
+
+:host([color-palette^='light']) {
+  --context: light;
+
+  color-scheme: light;
+}
+
+:host([color-palette='lightest']) {
+  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+}
+
+:host([color-palette='lighter']) {
+  --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
 }
 
-.on.dark,
-.on.light {
-  --rh-color-surface: unset;
+:host([color-palette='light']) {
+  --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
 }
 
-#slot.palette-lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }
-#slot.palette-lighter { --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2); }
-#slot.palette-light { --rh-color-surface: var(--rh-color-surface-light, #e0e0e0); }
-#slot.palette-dark { --rh-color-surface: var(--rh-color-surface-dark, #383838); }
-#slot.palette-darker { --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f); }
-#slot.palette-darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); }
+:host([color-palette='dark']) {
+  --rh-color-surface: var(--rh-color-surface-dark, #383838);
+}
+
+:host([color-palette='darker']) {
+  --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
+}
+
+:host([color-palette='darkest']) {
+  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+}
+
+#slot {
+  color: var(--rh-color-text-primary);
+  &.palette-lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }
+  &.palette-lighter { --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2); }
+  &.palette-light { --rh-color-surface: var(--rh-color-surface-light, #e0e0e0); }
+  &.palette-dark { --rh-color-surface: var(--rh-color-surface-dark, #383838); }
+  &.palette-darker { --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f); }
+  &.palette-darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); }
+}
diff --git a/elements/rh-surface/rh-surface.ts b/elements/rh-surface/rh-surface.ts
index 09f95b950c..319ee17d5e 100644
--- a/elements/rh-surface/rh-surface.ts
+++ b/elements/rh-surface/rh-surface.ts
@@ -4,9 +4,6 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
-import { colorContextProvider } from '@rhds/elements/lib/context/color/provider.js';
-import consumerStyles from '@rhds/tokens/css/color-context-consumer.css.js';
-
 import styles from './rh-surface.css';
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -29,7 +26,7 @@ import { classMap } from 'lit/directives/class-map.js';
  */
 @customElement('rh-surface')
 export class RhSurface extends LitElement {
-  static readonly styles = [styles, consumerStyles];
+  static readonly styles = [styles];
 
   /**
    * Sets color palette, which affects the element's styles as well as
@@ -38,16 +35,12 @@ export class RhSurface extends LitElement {
    * Your theme will influence these colors so check there first if you are seeing inconsistencies.
    * See [CSS Custom Properties](#css-custom-properties) for default values
    */
-  @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
   render() {
     const { colorPalette = 'lightest' } = this;
-    const on = colorPalette?.replace(/e(st|r)/, '') ?? 'light';
     return html`<slot id="slot"
                       class="${classMap({
-                        on: true,
-                        [on]: true,
                         [`palette-${colorPalette}`]: true,
                       })}"
                       @slotchange=${this.#onSlotchange}></slot>`;

From c833810f446182d4b6dabc98775f323213c42bf5 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:25:13 -0500
Subject: [PATCH 23/33] fix(switch): use color-scheme

---
 elements/rh-switch/rh-switch.css | 43 +++++++++++++++-----------------
 elements/rh-switch/rh-switch.ts  |  7 ++----
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/elements/rh-switch/rh-switch.css b/elements/rh-switch/rh-switch.css
index cb782c9f86..de9cbf4f3c 100644
--- a/elements/rh-switch/rh-switch.css
+++ b/elements/rh-switch/rh-switch.css
@@ -18,8 +18,17 @@
   --_switch-width: 40px;
   --_switch-height: 24px;
   --_switch-handle-size: 14px;
-  --_switch-track-background-color: var(--rh-color-gray-60, #4d4d4d);
-  --_switch-handle-color: var(--rh-color-surface-lightest, #ffffff);
+  --_switch-track-background-color:
+
+    light-dark(var(--rh-color-gray-60, #4d4d4d),
+      var(--rh-color-gray-40, #a3a3a3));
+  --_switch-handle-color:
+    light-dark(var(--rh-color-surface-lightest, #ffffff),
+      var(--rh-color-surface-dark-alt, #292929));
+
+  &:after {
+    box-shadow: light-dark(none, var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2)));
+  }
 
   #switch {
     align-items: center;
@@ -83,19 +92,6 @@
           ));
     }
   }
-
-  &.dark {
-    --_switch-track-background-color: var(--rh-color-gray-40, #a3a3a3); /* no disabled token yet */
-    --_switch-handle-color: var(--rh-color-surface-dark-alt, #292929);
-
-    &.checked {
-      --_switch-track-background-color: var(--rh-color-accent-base);
-    }
-
-    &:after {
-      box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
-    }
-  }
 }
 
 rh-icon {
@@ -114,20 +110,21 @@ rh-icon {
   pointer-events: none;
   cursor: not-allowed;
 
-  --_switch-track-background-color: var(--rh-color-gray-30, #c7c7c7);
-
   & #container {
     & .message {
       color: var(--rh-color-gray-50, #707070);
     }
 
-    &.dark {
-      --_switch-track-background-color: var(--rh-color-gray-60, #4d4d4d);
+    & ::slotted(*),
+    & span {
+      color: light-dark(var(--rh-color-gray-60, #4d4d4d), var(--rh-color-gray-40, #a3a3a3));
+    }
 
-      & ::slotted(*),
-      & span {
-        color: var(--rh-color-gray-40, #a3a3a3);
-      }
+    &.checked,
+    &:not(.checked) {
+      --_switch-track-background-color:
+        light-dark(var(--rh-color-gray-30, #c7c7c7),
+          var(--rh-color-gray-60, #4d4d4d));
     }
   }
 }
diff --git a/elements/rh-switch/rh-switch.ts b/elements/rh-switch/rh-switch.ts
index 16520f46c0..48cb7f9c78 100644
--- a/elements/rh-switch/rh-switch.ts
+++ b/elements/rh-switch/rh-switch.ts
@@ -8,7 +8,6 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import { DirController } from '../../lib/DirController.js';
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-switch.css';
 
@@ -50,8 +49,6 @@ export class RhSwitch extends LitElement {
   /** If the switch is reversed: message first, then control */
   @property({ reflect: true, type: Boolean }) reversed = false;
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   #internals = InternalsController.of(this, { role: 'switch' });
 
   #slots = new SlotController(this, null, 'message-on', 'message-off');
@@ -107,14 +104,14 @@ export class RhSwitch extends LitElement {
 
   render() {
     const rtl = this.#dir.dir === 'rtl';
-    const { on = 'light', reversed, checked } = this;
+    const { reversed, checked } = this;
     const slots = html`
       <slot class="message" name="message-on" ?hidden="${!this.checked}"><span aria-hidden="true">${this.messageOn}</span></slot>
       <slot class="message" name="message-off" ?hidden="${this.checked}"><span aria-hidden="true">${this.messageOff}</span></slot>`;
     return html`
       <div id="container"
            part="container"
-           class="${classMap({ checked, on: true, [on]: true, rtl })}">
+           class="${classMap({ checked, rtl })}">
         ${reversed ? slots : ''}
         <div id="switch"
              part="switch">

From 945649ff571b11ccc3663a9d363e07c46f3c397d Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:25:23 -0500
Subject: [PATCH 24/33] fix(tabs): use color-scheme

---
 elements/rh-tabs/rh-tab-panel.ts | 11 +-------
 elements/rh-tabs/rh-tab.css      | 15 ++--------
 elements/rh-tabs/rh-tab.ts       |  7 +----
 elements/rh-tabs/rh-tabs.css     | 47 ++++++++++++++++++++++++++------
 elements/rh-tabs/rh-tabs.ts      | 17 ++++++------
 5 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/elements/rh-tabs/rh-tab-panel.ts b/elements/rh-tabs/rh-tab-panel.ts
index 19fd528628..c65731a56a 100644
--- a/elements/rh-tabs/rh-tab-panel.ts
+++ b/elements/rh-tabs/rh-tab-panel.ts
@@ -1,10 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import styles from './rh-tab-panel.css';
 
 /**
@@ -17,11 +14,6 @@ import styles from './rh-tab-panel.css';
 export class RhTabPanel extends LitElement {
   static readonly styles = [styles];
 
-  /**
-   * Sets color theme based on parent context
-   */
-  @colorContextConsumer() private on?: ColorTheme;
-
   #internals = this.attachInternals();
 
   connectedCallback() {
@@ -43,9 +35,8 @@ export class RhTabPanel extends LitElement {
   }
 
   render() {
-    const { on = 'light' } = this;
     return html`
-      <div id="container" class="${classMap({ on: true, [on]: true })}">
+      <div id="container">
         <slot></slot>
       </div>
     `;
diff --git a/elements/rh-tabs/rh-tab.css b/elements/rh-tabs/rh-tab.css
index fe57782f88..ef56f9afd5 100644
--- a/elements/rh-tabs/rh-tab.css
+++ b/elements/rh-tabs/rh-tab.css
@@ -86,7 +86,9 @@ slot[name='icon'] {
 
   /* When button is box */
   &.box {
-    --_inactive-tab-background-color: var(--rh-color-surface-lighter, #f2f2f2);
+    --_inactive-tab-background-color:
+      light-dark(var(--rh-color-surface-lighter, #f2f2f2),
+        var(--rh-color-surface-dark-alt, #292929));
   }
 
   /* When button is vertical format */
@@ -387,17 +389,6 @@ slot[name='icon'] {
       }
     }
   }
-
-  /* When button is in a dark context */
-  &.dark {
-    --_button-text-color: var(--rh-tabs-link-color, var(--rh-color-text-secondary));
-    --_button-focus-outline-color: var(--rh-color-border-interactive);
-    --_inactive-tab-background-color: var(--rh-color-surface-dark-alt, #292929);
-
-    &.active {
-      --_button-text-color: var(--rh-tabs-link-color, var(--rh-color-text-primary));
-    }
-  }
 }
 
 :host(:disabled) {
diff --git a/elements/rh-tabs/rh-tab.ts b/elements/rh-tabs/rh-tab.ts
index 06767c73a4..d83dfd93f3 100644
--- a/elements/rh-tabs/rh-tab.ts
+++ b/elements/rh-tabs/rh-tab.ts
@@ -12,8 +12,6 @@ import { observes } from '@patternfly/pfe-core/decorators/observes.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import { context } from './context.js';
 
 import styles from './rh-tab.css';
@@ -56,8 +54,6 @@ export class RhTab extends LitElement {
   @property({ attribute: false })
   private ctx?: RhTabsContext;
 
-  /** Sets color theme based on parent context */
-  @colorContextConsumer() private on?: ColorTheme;
 
   @queryAssignedElements({ slot: 'icon', flatten: true }) private icons!: HTMLElement[];
 
@@ -74,7 +70,6 @@ export class RhTab extends LitElement {
   }
 
   render() {
-    const { on = 'light' } = this;
     const active = this.ctx?.activeTab === this;
     const { box = false, vertical = false, firstTab, lastTab } = this.ctx ?? {};
     const first = firstTab === this;
@@ -83,7 +78,7 @@ export class RhTab extends LitElement {
       <div id="button"
            part="button"
            ?disabled="${this.disabled}"
-           class="${classMap({ active, box, vertical, first, last, on: true, [on]: true })}">
+           class="${classMap({ active, box, vertical, first, last })}">
         <slot name="icon"
               part="icon"
               ?hidden="${!this.icons.length}"
diff --git a/elements/rh-tabs/rh-tabs.css b/elements/rh-tabs/rh-tabs.css
index 68ade36d44..d1ae1be042 100644
--- a/elements/rh-tabs/rh-tabs.css
+++ b/elements/rh-tabs/rh-tabs.css
@@ -100,7 +100,9 @@ button {
   --_overflow-button-text-color: var(--rh-color-text-secondary);
 
   /* Non Standard usage of crayon token */
-  --_overflow-button-disabled-text-color: var(--rh-color-gray-40, #a3a3a3);
+  --_overflow-button-disabled-text-color:
+    light-dark(var(--rh-color-gray-40, #a3a3a3),
+      var(--rh-color-gray-50, #707070));
   --_overflow-button-hover-text-color: var(--rh-color-text-primary);
 
   @container (min-width: 768px) {
@@ -159,6 +161,41 @@ button {
     &.overflow {
       --_panel-padding: var(--rh-space-lg, 16px);
     }
+
+    background-color: var(--rh-color-surface);
+    color: var(--rh-color-text-primary);
+
+    &.palette-light {
+      --rh-color-surface: var(--rh-color-surface-light, #e0e0e0);
+    }
+
+    &.palette-lighter {
+      --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2);
+    }
+
+    &.palette-lightest {
+      --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+    }
+
+    &.palette-dark {
+      --rh-color-surface: var(--rh-color-surface-dark, #383838);
+    }
+
+    &.palette-darker {
+      --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f);
+    }
+
+    &.palette-darkest {
+      --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+    }
+
+    &:is(.palette-light, .palette-lighter, .palette-lightest) {
+      color-scheme: light;
+    }
+
+    &:is(.palette-dark, .palette-darker, .palette-darkest) {
+      color-scheme: dark;
+    }
   }
 
   &:not(.vertical) {
@@ -170,14 +207,6 @@ button {
       }
     }
   }
-
-  &.dark {
-    --_border-color: var(--rh-tabs-border-color, var(--rh-color-border-subtle));
-    --_arrow-color: var(--rh-color-accent-base);
-    --_overflow-button-text-color: var(--rh-color-text-secondary);
-    --_overflow-button-disabled-text-color: var(--rh-color-gray-50, #707070);
-    --_overflow-button-hover-text-color: var(--rh-color-text-primary);
-  }
 }
 
 /* When overflow */
diff --git a/elements/rh-tabs/rh-tabs.ts b/elements/rh-tabs/rh-tabs.ts
index 289a9dd54c..daa033f5df 100644
--- a/elements/rh-tabs/rh-tabs.ts
+++ b/elements/rh-tabs/rh-tabs.ts
@@ -18,8 +18,7 @@ import '@rhds/elements/rh-icon/rh-icon.js';
 
 import { DirController } from '../../lib/DirController.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
+import { type ColorPalette } from '../../lib/context/color/provider.js';
 
 import { context, type RhTabsContext } from './context.js';
 
@@ -83,10 +82,7 @@ export class RhTabs extends LitElement {
 
   @property({ attribute: false }) activeTab?: RhTab;
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   /** Sets color context for child components, overrides parent context */
-  @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
   /** Aligns tabs to the center */
@@ -146,6 +142,10 @@ export class RhTabs extends LitElement {
     return this.tabs.at(-1);
   }
 
+  get #computedPalette() {
+    return this.colorPalette;
+  }
+
   @provide({ context }) private ctx = this.#ctx;
 
   override connectedCallback() {
@@ -171,12 +171,13 @@ export class RhTabs extends LitElement {
   }
 
   override render() {
-    const { on = '', vertical = false, box = false, centered = false } = this;
+    const computedPalette = this.#computedPalette;
+    const { vertical = false, box = false, centered = false } = this;
     const inset = this.box === 'inset' ? 'inset' : '';
     const rtl = this.#dir.dir === 'rtl';
     return html`
-      <div id="rhds-container" class="${classMap({ on: true, [on]: !!on, rtl, vertical, box, inset, centered })}">
-        <div part="container" class="${classMap({ overflow: this.#overflow.showScrollButtons })}">
+      <div id="rhds-container" class="${classMap({ rtl, vertical, box, inset, centered })}">
+        <div part="container" class="${classMap({ overflow: this.#overflow.showScrollButtons, [`palette-${computedPalette}`]: !!computedPalette })}">
           <div part="tabs-container">${!this.#overflow.showScrollButtons ? '' : html`
             <button id="previous-tab" tabindex="-1"
                     aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll left'}"

From 0ec823b67559f1fb88c785fb5ca24a4198821c7f Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:25:31 -0500
Subject: [PATCH 25/33] fix(tag): use color-scheme

---
 elements/rh-tag/rh-tag.css | 274 +++++++++++++++----------------------
 elements/rh-tag/rh-tag.ts  |   8 +-
 2 files changed, 112 insertions(+), 170 deletions(-)

diff --git a/elements/rh-tag/rh-tag.css b/elements/rh-tag/rh-tag.css
index 30533c0545..cfe9da3c93 100644
--- a/elements/rh-tag/rh-tag.css
+++ b/elements/rh-tag/rh-tag.css
@@ -56,225 +56,173 @@ a {
   }
 
   &.red {
-    --_fill-color: var(--rh-color-red-10, #fce3e3);
-    --_border-color: var(--rh-color-red-60, #a60000);
-    --_icon-color: var(--rh-color-red-60, #a60000);
-    --_text-color: var(--rh-color-red-70, #5f0000);
+    --_fill-color: light-dark(var(--rh-color-red-10, #fce3e3), var(--rh-color-red-70, #5f0000));
+    --_border-color: light-dark(var(--rh-color-red-60, #a60000), var(--rh-color-red-50, #ee0000));
+    --_icon-color: light-dark(var(--rh-color-red-60, #a60000), var(--rh-color-red-30, #f9a8a8));
+    --_text-color: light-dark(var(--rh-color-red-70, #5f0000), var(--rh-color-red-10, #fce3e3));
 
     &.outline {
-      --_text-color: var(--rh-color-red-60, #a60000);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-red-70, #5f0000);
-      --_border-color: var(--rh-color-red-50, #ee0000);
-      --_icon-color: var(--rh-color-red-30, #f9a8a8);
-      --_text-color: var(--rh-color-red-10, #fce3e3);
-
-      &.outline {
-        --_icon-color: var(--rh-color-red-20, #fbc5c5);
-        --_text-color: var(--rh-color-red-30, #f9a8a8);
-      }
+      --_icon-color: light-dark(var(--rh-color-red-60, #a60000), var(--rh-color-red-20, #fbc5c5));
+      --_text-color: light-dark(var(--rh-color-red-60, #a60000), var(--rh-color-red-30, #f9a8a8));
     }
   }
 
   &.red-orange {
-    --_fill-color: var(--rh-color-red-orange-10, #ffe3d9);
-    --_border-color: var(--rh-color-red-orange-60, #b1380b);
-    --_icon-color: var(--rh-color-red-orange-60, #b1380b);
-    --_text-color: var(--rh-color-red-orange-70, #731f00);
+    --_fill-color:
+      light-dark(var(--rh-color-red-orange-10, #ffe3d9),
+        var(--rh-color-red-orange-70, #731f00));
+    --_border-color:
+      light-dark(var(--rh-color-red-orange-60, #b1380b),
+        var(--rh-color-red-orange-50, #f0561d));
+    --_icon-color:
+      light-dark(var(--rh-color-red-orange-60, #b1380b),
+        var(--rh-color-red-orange-30, #f89b78));
+    --_text-color:
+      light-dark(var(--rh-color-red-orange-70, #731f00),
+        var(--rh-color-red-orange-10, #ffe3d9));
 
     &.outline {
-      --_text-color: var(--rh-color-red-orange-60, #b1380b);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-red-orange-70, #731f00);
-      --_border-color: var(--rh-color-red-orange-50, #f0561d);
-      --_icon-color: var(--rh-color-red-orange-30, #f89b78);
-      --_text-color: var(--rh-color-red-orange-10, #ffe3d9);
-
-      &.outline {
-        --_icon-color: var(--rh-color-red-orange-20, #fbbea8);
-        --_text-color: var(--rh-color-red-orange-30, #f89b78);
-      }
+      --_icon-color:
+        light-dark(var(--rh-color-red-orange-60, #b1380b),
+          var(--rh-color-red-orange-20, #fbbea8));
+      --_text-color:
+        light-dark(var(--rh-color-red-orange-60, #b1380b),
+          var(--rh-color-red-orange-30, #f89b78));
     }
   }
 
   &.orange {
-    --_fill-color: var(--rh-color-orange-10, #ffe8cc);
-    --_border-color: var(--rh-color-orange-60, #9e4a06);
-    --_icon-color: var(--rh-color-orange-60, #9e4a06);
-    --_text-color: var(--rh-color-orange-70, #732e00);
+    --_fill-color:
+      light-dark(var(--rh-color-orange-10, #ffe8cc),
+        var(--rh-color-orange-70, #732e00));
+    --_border-color:
+      light-dark(var(--rh-color-orange-60, #9e4a06),
+        var(--rh-color-orange-50, #ca6c0f));
+    --_icon-color:
+      light-dark(var(--rh-color-orange-60, #9e4a06),
+        var(--rh-color-orange-30, #f8ae54));
+    --_text-color:
+      light-dark(var(--rh-color-orange-70, #732e00),
+        var(--rh-color-orange-10, #ffe8cc));
 
     &.outline {
-      --_text-color: var(--rh-color-orange-60, #9e4a06);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-orange-70, #732e00);
-      --_border-color: var(--rh-color-orange-50, #ca6c0f);
-      --_icon-color: var(--rh-color-orange-30, #f8ae54);
-      --_text-color: var(--rh-color-orange-10, #ffe8cc);
-
-      &.outline {
-        --_icon-color: var(--rh-color-orange-20, #fccb8f);
-        --_text-color: var(--rh-color-orange-30, #f8ae54);
-      }
+      --_icon-color:
+        light-dark(var(--rh-color-orange-60, #9e4a06),
+          var(--rh-color-orange-20, #fccb8f));
+      --_text-color:
+        light-dark(var(--rh-color-orange-60, #9e4a06),
+          var(--rh-color-orange-30, #f8ae54));
     }
   }
 
   &.yellow {
-    --_fill-color: var(--rh-color-yellow-10, #fff4cc);
-    --_border-color: var(--rh-color-yellow-60, #96640f);
-    --_icon-color: var(--rh-color-yellow-60, #96640f);
-    --_text-color: var(--rh-color-yellow-70, #73480b);
+    --_fill-color:
+      light-dark(var(--rh-color-yellow-10, #fff4cc),
+        var(--rh-color-yellow-70, #73480b));
+    --_border-color:
+      light-dark(var(--rh-color-yellow-60, #96640f),
+        var(--rh-color-yellow-50, #b98412));
+    --_icon-color:
+      light-dark(var(--rh-color-yellow-60, #96640f),
+        var(--rh-color-yellow-30, #ffcc17));
+    --_text-color:
+      light-dark(var(--rh-color-yellow-70, #73480b),
+        var(--rh-color-yellow-10, #fff4cc));
 
     &.outline {
-      --_text-color: var(--rh-color-yellow-60, #96640f);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-yellow-70, #73480b);
-      --_border-color: var(--rh-color-yellow-50, #b98412);
-      --_icon-color: var(--rh-color-yellow-30, #ffcc17);
-      --_text-color: var(--rh-color-yellow-10, #fff4cc);
-
-      &.outline {
-        --_icon-color: var(--rh-color-yellow-20, #ffe072);
-        --_text-color: var(--rh-color-yellow-30, #ffcc17);
-      }
+      --_icon-color:
+        light-dark(var(--rh-color-yellow-60, #96640f),
+          var(--rh-color-yellow-20, #ffe072));
+      --_text-color:
+        light-dark(var(--rh-color-yellow-60, #96640f),
+          var(--rh-color-yellow-30, #ffcc17));
     }
   }
 
   &.green {
-    --_fill-color: var(--rh-color-green-10, #e9f7df);
-    --_border-color: var(--rh-color-green-60, #3d7317);
-    --_icon-color: var(--rh-color-green-60, #3d7317);
-    --_text-color: var(--rh-color-green-70, #204d00);
+    --_fill-color: light-dark(var(--rh-color-green-10, #e9f7df), var(--rh-color-green-70, #204d00));
+    --_border-color:
+      light-dark(var(--rh-color-green-60, #3d7317),
+        var(--rh-color-green-50, #63993d));
+    --_icon-color: light-dark(var(--rh-color-green-60, #3d7317), var(--rh-color-green-30, #afdc8f));
+    --_text-color: light-dark(var(--rh-color-green-70, #204d00), var(--rh-color-green-10, #e9f7df));
 
     &.outline {
-      --_text-color: var(--rh-color-green-60, #3d7317);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-green-70, #204d00);
-      --_border-color: var(--rh-color-green-50, #63993d);
-      --_icon-color: var(--rh-color-green-30, #afdc8f);
-      --_text-color: var(--rh-color-green-10, #e9f7df);
-
-      &.outline {
-        --_icon-color: var(--rh-color-green-20, #d1f1bb);
-        --_text-color: var(--rh-color-green-30, #afdc8f);
-      }
+      --_icon-color:
+        light-dark(var(--rh-color-green-60, #3d7317),
+          var(--rh-color-green-20, #d1f1bb));
+      --_text-color:
+        light-dark(var(--rh-color-green-60, #3d7317),
+          var(--rh-color-green-30, #afdc8f));
     }
   }
 
   &.teal {
-    --_fill-color: var(--rh-color-teal-10, #daf2f2);
-    --_border-color: var(--rh-color-teal-60, #147878);
-    --_icon-color: var(--rh-color-teal-60, #147878);
-    --_text-color: var(--rh-color-teal-70, #004d4d);
+    --_fill-color: light-dark(var(--rh-color-teal-10, #daf2f2), var(--rh-color-teal-70, #004d4d));
+    --_border-color: light-dark(var(--rh-color-teal-60, #147878), var(--rh-color-teal-50, #37a3a3));
+    --_icon-color: light-dark(var(--rh-color-teal-60, #147878), var(--rh-color-teal-30, #9ad8d8));
+    --_text-color: light-dark(var(--rh-color-teal-70, #004d4d), var(--rh-color-teal-10, #daf2f2));
 
     &.outline {
-      --_text-color: var(--rh-color-teal-60, #147878);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-teal-70, #004d4d);
-      --_border-color: var(--rh-color-teal-50, #37a3a3);
-      --_icon-color: var(--rh-color-teal-30, #9ad8d8);
-      --_text-color: var(--rh-color-teal-10, #daf2f2);
-
-      &.outline {
-        --_icon-color: var(--rh-color-teal-20, #b9e5e5);
-        --_text-color: var(--rh-color-teal-30, #9ad8d8);
-      }
+      --_icon-color: light-dark(var(--rh-color-teal-60, #147878), var(--rh-color-teal-20, #b9e5e5));
+      --_text-color: light-dark(var(--rh-color-teal-60, #147878), var(--rh-color-teal-30, #9ad8d8));
     }
   }
 
   &.blue {
-    --_fill-color: var(--rh-color-blue-10, #e0f0ff);
-    --_border-color: var(--rh-color-blue-60, #004d99);
-    --_icon-color: var(--rh-color-blue-60, #004d99);
-    --_text-color: var(--rh-color-blue-70, #003366);
+    --_fill-color: light-dark(var(--rh-color-blue-10, #e0f0ff), var(--rh-color-blue-70, #003366));
+    --_border-color: light-dark(var(--rh-color-blue-60, #004d99), var(--rh-color-blue-50, #0066cc));
+    --_icon-color: light-dark(var(--rh-color-blue-60, #004d99), var(--rh-color-blue-30, #92c5f9));
+    --_text-color: light-dark(var(--rh-color-blue-70, #003366), var(--rh-color-blue-10, #e0f0ff));
 
     &.outline {
-      --_text-color: var(--rh-color-blue-60, #004d99);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-blue-70, #003366);
-      --_border-color: var(--rh-color-blue-50, #0066cc);
-      --_icon-color: var(--rh-color-blue-30, #92c5f9);
-      --_text-color: var(--rh-color-blue-10, #e0f0ff);
-
-      &.outline {
-        --_icon-color: var(--rh-color-blue-20, #b9dafc);
-        --_text-color: var(--rh-color-blue-30, #92c5f9);
-      }
+      --_icon-color: light-dark(var(--rh-color-blue-60, #004d99), var(--rh-color-blue-20, #b9dafc));
+      --_text-color: light-dark(var(--rh-color-blue-60, #004d99), var(--rh-color-blue-30, #92c5f9));
     }
   }
 
   &.purple {
-    --_fill-color: var(--rh-color-purple-10, #ece6ff);
-    --_border-color: var(--rh-color-purple-60, #3d2785);
-    --_icon-color: var(--rh-color-purple-60, #3d2785);
-    --_text-color: var(--rh-color-purple-70, #21134d);
+    --_fill-color:
+      light-dark(var(--rh-color-purple-10, #ece6ff),
+        var(--rh-color-purple-70, #21134d));
+    --_border-color:
+      light-dark(var(--rh-color-purple-60, #3d2785),
+        var(--rh-color-purple-50, #5e40be));
+    --_icon-color:
+      light-dark(var(--rh-color-purple-60, #3d2785),
+        var(--rh-color-purple-30, #b6a6e9));
+    --_text-color:
+      light-dark(var(--rh-color-purple-70, #21134d),
+        var(--rh-color-purple-10, #ece6ff));
 
     &.outline {
-      --_text-color: var(--rh-color-purple-60, #3d2785);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-purple-70, #21134d);
-      --_border-color: var(--rh-color-purple-50, #5e40be);
-      --_icon-color: var(--rh-color-purple-30, #b6a6e9);
-      --_text-color: var(--rh-color-purple-10, #ece6ff);
-
-      &.outline {
-        --_icon-color: var(--rh-color-purple-20, #d0c5f4);
-        --_text-color: var(--rh-color-purple-30, #b6a6e9);
-      }
+      --_icon-color:
+        light-dark(var(--rh-color-purple-60, #3d2785),
+          var(--rh-color-purple-20, #d0c5f4));
+      --_text-color:
+        light-dark(var(--rh-color-purple-60, #3d2785),
+          var(--rh-color-purple-30, #b6a6e9));
     }
   }
 
   &.gray {
-    --_fill-color: var(--rh-color-gray-10, #f2f2f2);
-    --_border-color: var(--rh-color-gray-60, #4d4d4d);
-    --_icon-color: var(--rh-color-gray-60, #4d4d4d);
-    --_text-color: var(--rh-color-gray-70, #383838);
+    --_fill-color: light-dark(var(--rh-color-gray-10, #f2f2f2), var(--rh-color-gray-70, #383838));
+    --_border-color: light-dark(var(--rh-color-gray-60, #4d4d4d), var(--rh-color-gray-50, #707070));
+    --_icon-color: light-dark(var(--rh-color-gray-60, #4d4d4d), var(--rh-color-gray-30, #c7c7c7));
+    --_text-color: light-dark(var(--rh-color-gray-70, #383838), var(--rh-color-gray-10, #f2f2f2));
 
     &.outline {
-      --_text-color: var(--rh-color-gray-60, #4d4d4d);
-    }
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-gray-70, #383838);
-      --_border-color: var(--rh-color-gray-50, #707070);
-      --_icon-color: var(--rh-color-gray-30, #c7c7c7);
-      --_text-color: var(--rh-color-gray-10, #f2f2f2);
-
-      &.outline {
-        --_icon-color: var(--rh-color-gray-20, #e0e0e0);
-        --_text-color: var(--rh-color-gray-30, #c7c7c7);
-      }
+      --_icon-color: light-dark(var(--rh-color-gray-60, #4d4d4d), var(--rh-color-gray-20, #e0e0e0));
+      --_text-color: light-dark(var(--rh-color-gray-60, #4d4d4d), var(--rh-color-gray-30, #c7c7c7));
     }
   }
 
   &.outline {
-    --_fill-color: var(--rh-color-white, #ffffff);
-    --_border-color: var(--rh-color-gray-30, #c7c7c7);
-
-    &.on.dark {
-      --_fill-color: var(--rh-color-gray-95, #151515);
-      --_border-color: var(--rh-color-gray-50, #707070);
-    }
+    --_fill-color: light-dark(var(--rh-color-white, #ffffff), var(--rh-color-gray-95, #151515));
+    --_border-color: light-dark(var(--rh-color-gray-30, #c7c7c7), var(--rh-color-gray-50, #707070));
   }
 
-  &.desaturated,
-  &.on.light.desaturated,
-  &.on.dark.desaturated {
+  &.desaturated {
     --_fill-color: transparent;
     --_border-color: var(--rh-color-text-primary);
     --_icon-color: var(--rh-color-text-primary);
diff --git a/elements/rh-tag/rh-tag.ts b/elements/rh-tag/rh-tag.ts
index 3baf39e67b..9e07c6bebe 100644
--- a/elements/rh-tag/rh-tag.ts
+++ b/elements/rh-tag/rh-tag.ts
@@ -3,8 +3,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 
 import type { IconNameFor, IconSetName } from '@rhds/icons';
@@ -68,13 +66,11 @@ export class RhTag extends LitElement {
     | 'purple'
     | 'gray';
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   /** Represents the state of the anonymous and icon slots */
   #slots = new SlotController(this, 'icon', null);
 
   override render() {
-    const { icon, size, variant = 'filled', color = 'gray', on = 'light' } = this;
+    const { icon, size, variant = 'filled', color = 'gray' } = this;
     const hasIcon = !!icon || this.#slots.hasSlotted('icon');
     return html`
       <span id="container"
@@ -82,8 +78,6 @@ export class RhTag extends LitElement {
               hasIcon,
               compact: size === 'compact',
               teal: color === 'cyan' || color === 'teal',
-              on: true,
-              [on]: true,
               [variant]: true,
               [color]: true })}">
         <slot name="icon" part="icon">

From 6bf86614368d30b2bc37068a0609fe41e9e75096 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:25:40 -0500
Subject: [PATCH 26/33] fix(tile): use color-scheme

---
 elements/rh-tile/rh-tile.css | 55 +++++++++++++++++++-----------------
 elements/rh-tile/rh-tile.ts  | 12 ++------
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css
index 1c59c6e251..b0aca71d6a 100644
--- a/elements/rh-tile/rh-tile.css
+++ b/elements/rh-tile/rh-tile.css
@@ -32,13 +32,6 @@
 }
 
 #outer {
-  position: relative;
-  padding: var(--_padding);
-  border-radius: var(--rh-border-radius-default, 3px);
-  border: var(--rh-border-width-sm, 1px) solid var(--_border-color);
-  background-color: var(--rh-tile-background-color, var(--rh-color-surface));
-  color: var(--rh-tile-text-color, var(--rh-color-text-primary));
-
   --_padding: var(--rh-space-2xl, 32px);
   --_margin: var(--rh-space-lg, 16px);
   --_interactive-color: var(--rh-tile-interactive-color, var(--rh-color-border-interactive));
@@ -49,20 +42,39 @@
     var(--rh-tile-text-color-secondary,
       var(--rh-color-text-secondary));
   --_focus-background-color:
-    var(--rh-tile-focus-background-color,
-      var(--rh-color-surface-lighter, #f2f2f2));
+    light-dark(var(--rh-tile-focus-background-color,
+      var(--rh-color-surface-lighter, #f2f2f2)),
+      var(--rh-tile-focus-background-color,
+      var(--rh-color-surface-darker, #1f1f1f)));
   --_disabled-background-color:
-    var(--rh-tile-disabled-background-color,
-      var(--rh-color-surface-light, #e0e0e0));
+    light-dark(var(--rh-tile-disabled-background-color,
+      var(--rh-color-surface-light, #e0e0e0)),
+      var(--rh-tile-disabled-background-color,
+      var(--rh-color-surface-dark, #383838)));
   --_border-color: var(--rh-tile-border-color, var(--rh-color-border-subtle));
   --_link-color: var(--rh-tile-link-color, var(--_interactive-color));
 
-  & .palette-lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }
-  & .palette-lighter { --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2); }
-  & .palette-light { --rh-color-surface: var(--rh-color-surface-light, #e0e0e0); }
-  & .palette-dark { --rh-color-surface: var(--rh-color-surface-dark, #383838); }
-  & .palette-darker { --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f); }
-  & .palette-darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); }
+  position: relative;
+  padding: var(--_padding);
+  border-radius: var(--rh-border-radius-default, 3px);
+  border: var(--rh-border-width-sm, 1px) solid var(--_border-color);
+  background-color: var(--rh-tile-background-color, var(--rh-color-surface));
+  color: var(--rh-tile-text-color, var(--rh-color-text-primary));
+
+  &:is(.palette-lightest, .palette-lighter, .palette-light) {
+    color-scheme: light;
+  }
+
+  &:is(.palette-darkest, .palette-darker, .palette-dark) {
+    color-scheme: dark;
+  }
+
+  &.palette-lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }
+  &.palette-lighter { --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2); }
+  &.palette-light { --rh-color-surface: var(--rh-color-surface-light, #e0e0e0); }
+  &.palette-dark { --rh-color-surface: var(--rh-color-surface-dark, #383838); }
+  &.palette-darker { --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f); }
+  &.palette-darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); }
 
   & ::slotted(*) {
     margin-top: 0;
@@ -106,15 +118,6 @@
     font-weight: var(--rh-font-weight-body-text-medium, 500) !important;
   }
 
-  &.dark {
-    --_focus-background-color:
-      var(--rh-tile-focus-background-color,
-        var(--rh-color-surface-darker, #1f1f1f));
-    --_disabled-background-color:
-      var(--rh-tile-disabled-background-color,
-        var(--rh-color-surface-dark, #383838));
-  }
-
   & #image {
     --_bleed: calc(0px - var(--_padding));
   }
diff --git a/elements/rh-tile/rh-tile.ts b/elements/rh-tile/rh-tile.ts
index e6cc5017d3..163c16ec0c 100644
--- a/elements/rh-tile/rh-tile.ts
+++ b/elements/rh-tile/rh-tile.ts
@@ -13,8 +13,7 @@ import type { IconNameFor, IconSetName } from '@rhds/icons';
 
 import '@rhds/elements/rh-icon/rh-icon.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
+import { type ColorPalette } from '../../lib/context/color/provider.js';
 
 import styles from './rh-tile.css';
 
@@ -132,15 +131,10 @@ export class RhTile extends LitElement {
    *
    * Tile always resets its context to `base`, unless explicitly provided with a `color-palette`.
    */
-  @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
   /** When set to "private", the icon representing the link changes from an arrow to a padlock */
   @property() link?: 'private' | 'public' | 'external';
-  /**
-   * Sets color theme based on parent context
-   */
-  @colorContextConsumer() private on?: ColorTheme;
 
   // TODO(bennyp): https://lit.dev/docs/data/context/#content
   @state() private disabledGroup = false;
@@ -191,7 +185,7 @@ export class RhTile extends LitElement {
   }
 
   render() {
-    const { bleed, compact, checkable, checked, colorPalette, desaturated, on = 'light' } = this;
+    const { bleed, compact, checkable, checked, colorPalette, desaturated } = this;
     const disabled = this.disabledGroup || this.disabled || this.#internals.formDisabled;
     const hasSlottedIcon = this.#slots.hasSlotted('icon');
     return html`
@@ -202,8 +196,6 @@ export class RhTile extends LitElement {
             checked,
             desaturated,
             disabled,
-            on: true,
-            [on]: true,
             [`palette-${colorPalette}`]: !!colorPalette,
           })}">
         <slot id="image"

From e22adc2b23693f3011f355ee773930ca8a1073a6 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:25:49 -0500
Subject: [PATCH 27/33] fix(tooltip): use color-scheme

---
 elements/rh-tooltip/rh-tooltip.css | 21 ++++++++++-----------
 elements/rh-tooltip/rh-tooltip.ts  |  5 -----
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/elements/rh-tooltip/rh-tooltip.css b/elements/rh-tooltip/rh-tooltip.css
index 7036b691d5..d27a3f3589 100644
--- a/elements/rh-tooltip/rh-tooltip.css
+++ b/elements/rh-tooltip/rh-tooltip.css
@@ -54,11 +54,13 @@
 
   /* WARNING: properties containing `__`are deprecated and will be removed */
   color:
-    var(--rh-tooltip-content-color,
-      var(--rh-tooltip__content--Color, var(--rh-color-text-primary-on-dark, #ffffff)));
+    light-dark(var(--rh-tooltip-content-color,
+      var(--rh-tooltip__content--Color, var(--rh-color-text-primary-on-dark, #ffffff))),
+      var(--rh-tooltip-content-color, var(--rh-color-text-primary-on-light, #151515)));
   background-color:
-    var(--rh-tooltip-content-background-color,
-      var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
+    light-dark(var(--rh-tooltip-content-background-color,
+      var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))),
+      var(--rh-tooltip-content-background-color, var(--rh-color-surface-lightest, #ffffff)));
 }
 
 .initialized #tooltip {
@@ -73,8 +75,10 @@
   height: var(--_floating-arrow-size);
   will-change: left top right bottom;
   background-color:
-    var(--rh-tooltip-content-background-color,
-      var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
+    light-dark(var(--rh-tooltip-content-background-color,
+      var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))),
+      var(--rh-tooltip-content-background-color,
+      var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-lightest, #ffffff))));
 }
 
 .open #tooltip {
@@ -109,8 +113,3 @@
 :host([position='right']) {
   --_text-alignment: 'start';
 }
-
-.dark {
-  --rh-tooltip-content-background-color: var(--rh-color-surface-lightest, #ffffff);
-  --rh-tooltip-content-color: var(--rh-color-text-primary-on-light, #151515);
-}
diff --git a/elements/rh-tooltip/rh-tooltip.ts b/elements/rh-tooltip/rh-tooltip.ts
index 5daaea516c..e92042dee9 100644
--- a/elements/rh-tooltip/rh-tooltip.ts
+++ b/elements/rh-tooltip/rh-tooltip.ts
@@ -4,7 +4,6 @@ import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import {
   FloatingDOMController,
@@ -84,8 +83,6 @@ export class RhTooltip extends LitElement {
   /** Tooltip content. Overridden by the content slot */
   @property() content?: string;
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   #float = new FloatingDOMController(this, {
     content: (): HTMLElement | undefined | null => this.shadowRoot?.querySelector('#tooltip'),
   });
@@ -111,7 +108,6 @@ export class RhTooltip extends LitElement {
   }
 
   override render() {
-    const { on = '' } = this;
     const { alignment, anchor, open, styles } = this.#float;
 
     return html`
@@ -119,7 +115,6 @@ export class RhTooltip extends LitElement {
            style="${styleMap(styles)}"
            class="${classMap({ open,
                                initialized: !!this.#initialized,
-                               [on]: !!on,
                                [anchor]: !!anchor,
                                [alignment]: !!alignment })}">
         <div id="invoker">

From 0c2f657e2ee293b31f8408725af99ca6ee87850c Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:26:03 -0500
Subject: [PATCH 28/33] fix(video-embed): use color-scheme

---
 elements/rh-video-embed/rh-video-embed.css | 21 ++++++++++-----------
 elements/rh-video-embed/rh-video-embed.ts  | 11 ++---------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/elements/rh-video-embed/rh-video-embed.css b/elements/rh-video-embed/rh-video-embed.css
index c77f323723..4a4d8fffa3 100644
--- a/elements/rh-video-embed/rh-video-embed.css
+++ b/elements/rh-video-embed/rh-video-embed.css
@@ -39,22 +39,21 @@ figure,
 }
 
 figure {
-  --_video-focus-border-color: var(--rh-color-border-interactive);
-  --_video-play-btn-bkg-color: rgb(31 31 31 / var(--rh-opacity-50, 50%));
-  --_video-play-btn-interactive-bkg-color: rgb(21 21 21 / var(--rh-opacity-80, 80%));
+  --_video-focus-border-color:
+    light-dark(var(--rh-color-border-interactive),
+      var(--rh-color-border-interactive));
+  --_video-play-btn-bkg-color:
+    light-dark(rgb(31 31 31 / var(--rh-opacity-50, 50%)),
+      rgb(255 255 255 / var(--rh-opacity-20, 20%)));
+  --_video-play-btn-interactive-bkg-color:
+    light-dark(rgb(21 21 21 / var(--rh-opacity-80, 80%)),
+      rgb(255 255 255 / var(--rh-opacity-50, 50%)));
 
   display: flex;
   flex-direction: column;
   margin: 0;
 }
 
-figure.dark {
-  --_video-focus-border-color: var(--rh-color-border-interactive);
-  --_video-play-btn-bkg-color: rgb(255 255 255 / var(--rh-opacity-20, 20%));
-  --_video-play-btn-interactive-bkg-color: rgb(255 255 255 / var(--rh-opacity-50, 50%));
-  --_caption-text-color: var(--rh-color-text-secondary);
-}
-
 figcaption {
   margin-block-start: var(--rh-space-lg, 16px);
 }
@@ -64,7 +63,7 @@ figcaption ::slotted(p) {
 }
 
 ::slotted([slot='caption']) {
-  color: var(--_caption-text-color, var(--rh-color-text-secondary));
+  color: var(--rh-color-text-secondary);
   font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important;
   line-height: var(--rh-line-height-body-text, 1.5);
 }
diff --git a/elements/rh-video-embed/rh-video-embed.ts b/elements/rh-video-embed/rh-video-embed.ts
index 9ffb0fe87c..398c3ea732 100644
--- a/elements/rh-video-embed/rh-video-embed.ts
+++ b/elements/rh-video-embed/rh-video-embed.ts
@@ -8,8 +8,6 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller
 import '@rhds/elements/rh-button/rh-button.js';
 import '@rhds/elements/rh-surface/rh-surface.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
-
 import styles from './rh-video-embed.css';
 
 export class ConsentClickEvent extends Event {
@@ -72,11 +70,6 @@ export class RhVideoEmbed extends LitElement {
    */
   @property({ type: Boolean }) consented = false;
 
-  /**
-   * Sets color theme based on parent context
-   */
-  @colorContextConsumer() private on?: ColorTheme;
-
   // TODO(bennyp): https://lit.dev/docs/data/context/#content
   @state() private _consentClicked = false;
   @state() private _playClicked = false;
@@ -126,7 +119,7 @@ export class RhVideoEmbed extends LitElement {
   }
 
   render() {
-    const { playClicked, on = '' } = this;
+    const { playClicked } = this;
     const hasCaption = this.#slots.hasSlotted('caption');
     const hasThumbnail = this.#slots.hasSlotted('thumbnail');
     const playLabel = this.iframeElement && this.iframeElement.title ? `${this.iframeElement.title} (play video)` : 'Play video';
@@ -134,7 +127,7 @@ export class RhVideoEmbed extends LitElement {
       'video' : 'thumbnail';
 
     return html`
-      <figure part="figure" class="${classMap({ on: true, [show]: !!show, [on]: !!on })}">
+      <figure part="figure" class="${classMap({ [show]: !!show })}">
         <div part="video" id="video">
           <div aria-hidden="${show !== 'thumbnail'}">
             <slot id="thumbnail" name="thumbnail"></slot>

From cb0b85921d633a435bc5ce517922ceacd62158bc Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Wed, 22 Jan 2025 15:26:25 -0500
Subject: [PATCH 29/33] fix(context-demo): use color-scheme

---
 lib/elements/rh-context-demo/rh-context-demo.css    |  3 ---
 lib/elements/rh-context-demo/rh-context-demo.ts     | 10 ++++------
 lib/elements/rh-context-picker/rh-context-picker.ts |  9 ++-------
 3 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/lib/elements/rh-context-demo/rh-context-demo.css b/lib/elements/rh-context-demo/rh-context-demo.css
index 41513da610..390286b596 100644
--- a/lib/elements/rh-context-demo/rh-context-demo.css
+++ b/lib/elements/rh-context-demo/rh-context-demo.css
@@ -5,9 +5,6 @@
   position: relative;
 }
 
-rh-surface,
-.on { color: var(--rh-color-text-primary); }
-
 #picker-container {
   display: flex;
   align-items: center;
diff --git a/lib/elements/rh-context-demo/rh-context-demo.ts b/lib/elements/rh-context-demo/rh-context-demo.ts
index a859d945a3..4347ee4f73 100644
--- a/lib/elements/rh-context-demo/rh-context-demo.ts
+++ b/lib/elements/rh-context-demo/rh-context-demo.ts
@@ -1,11 +1,10 @@
 import { LitElement, type PropertyValues, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { classMap } from 'lit-html/directives/class-map.js';
-
-import { colorContextProvider, type ColorPalette } from '../../context/color/provider.js';
 import { ContextChangeEvent } from '../rh-context-picker/rh-context-picker.js';
 
+import { type ColorPalette } from '../../context/color/provider.js';
+
 import '@rhds/elements/rh-surface/rh-surface.js';
 
 import style from './rh-context-demo.css';
@@ -22,7 +21,6 @@ export class RhContextDemo extends LitElement {
 
   @property() label = 'Color Palette';
 
-  @colorContextProvider()
   @property({ attribute: 'color-palette', reflect: true })
   colorPalette = this.value;
 
@@ -35,14 +33,14 @@ export class RhContextDemo extends LitElement {
       <rh-surface id="provider"
                   color-palette="${value}"
                   @change="${this.#onChange}">
-          <div id="picker-container" class="${classMap({ on: true, [on]: true })}">
+          <div id="picker-container">
             <rh-context-picker id="picker"
                                .value="${this.value}"
                                target="provider"></rh-context-picker>
             <label for="picker">${this.label}</label>
             <slot name="controls"></slot>
           </div>
-        <slot part="demo" class="${classMap({ on: true, [on]: true })}"></slot>
+        <slot part="demo"></slot>
       </rh-surface>
     `;
   }
diff --git a/lib/elements/rh-context-picker/rh-context-picker.ts b/lib/elements/rh-context-picker/rh-context-picker.ts
index aa260aee60..e08737bd14 100644
--- a/lib/elements/rh-context-picker/rh-context-picker.ts
+++ b/lib/elements/rh-context-picker/rh-context-picker.ts
@@ -1,13 +1,11 @@
 import type { ColorPalette } from '@rhds/elements/lib/context/color/provider.js';
 import type { Color } from '@rhds/tokens';
-import type { ColorTheme } from '@rhds/elements/lib/context/color/consumer.js';
 
 import { html, LitElement, type ComplexAttributeConverter } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { colorContextConsumer } from '@rhds/elements/lib/context/color/consumer.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 
 import {
@@ -68,8 +66,6 @@ export class RhContextPicker extends LitElement {
 
   @property() value: ColorPalette = 'darkest';
 
-  @colorContextConsumer() private on?: ColorTheme;
-
   @property({ converter: ColorPaletteListConverter })
   allow = paletteNames;
 
@@ -78,13 +74,12 @@ export class RhContextPicker extends LitElement {
   #target: HTMLElement | null = null;
 
   render() {
-    const { allow, on = 'dark', value } = this;
+    const { allow, value } = this;
     return html`
       <div id="host-label"
            class="visually-hidden">${this.#internals.computedLabelText}</div>
       <div id="container"
-           @input="${this.#onInput}"
-           class="${classMap({ on: true, [on]: true })}">
+           @input="${this.#onInput}">
         ${allow.map(palette => html`
         <label for="radio-${palette}" class="visually-hidden">${palette}</label>
         <rh-tooltip>

From 874962fce4c943da4d0575dd4824bd340e744804 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Thu, 23 Jan 2025 09:07:21 -0500
Subject: [PATCH 30/33] fix: apply only keyword to color-scheme

---
 elements/rh-accordion/rh-accordion-panel.css                  | 4 ++--
 elements/rh-accordion/rh-accordion.css                        | 4 ++--
 elements/rh-audio-player/rh-audio-player-lightdom.css         | 4 ++--
 elements/rh-card/rh-card.css                                  | 4 ++--
 elements/rh-footer/rh-footer-lightdom.css                     | 2 +-
 elements/rh-footer/rh-footer.css                              | 2 +-
 .../rh-navigation-secondary-lightdom.css                      | 4 ++--
 .../rh-navigation-secondary/rh-navigation-secondary-menu.css  | 2 +-
 elements/rh-surface/rh-surface.css                            | 4 ++--
 elements/rh-tabs/rh-tabs.css                                  | 4 ++--
 elements/rh-tile/rh-tile.css                                  | 4 ++--
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/elements/rh-accordion/rh-accordion-panel.css b/elements/rh-accordion/rh-accordion-panel.css
index 017b2715d1..9c32440a1f 100644
--- a/elements/rh-accordion/rh-accordion-panel.css
+++ b/elements/rh-accordion/rh-accordion-panel.css
@@ -81,11 +81,11 @@
   }
 
   &:is(.palette-light, .palette-lighter, .palette-lightest) {
-    color-scheme: light;
+    color-scheme: only light;
   }
 
   &:is(.palette-dark, .palette-darker, .palette-darkest) {
-    color-scheme: dark;
+    color-scheme: only dark;
   }
 }
 
diff --git a/elements/rh-accordion/rh-accordion.css b/elements/rh-accordion/rh-accordion.css
index ab3b7dee2d..0d76aa9df9 100644
--- a/elements/rh-accordion/rh-accordion.css
+++ b/elements/rh-accordion/rh-accordion.css
@@ -31,11 +31,11 @@
   }
 
   &:is(.palette-light, .palette-lighter, .palette-lightest) {
-    color-scheme: light;
+    color-scheme: only light;
   }
 
   &:is(.palette-dark, .palette-darker, .palette-darkest) {
-    color-scheme: dark;
+    color-scheme: only dark;
   }
 }
 
diff --git a/elements/rh-audio-player/rh-audio-player-lightdom.css b/elements/rh-audio-player/rh-audio-player-lightdom.css
index a25b624dbf..4033c4b5e9 100644
--- a/elements/rh-audio-player/rh-audio-player-lightdom.css
+++ b/elements/rh-audio-player/rh-audio-player-lightdom.css
@@ -10,11 +10,11 @@ rh-audio-player {
   color: var(--rh-audio-player-text-color, var(--rh-color-text-primary));
 
   &[color-palette^='light'] {
-    color-scheme: light;
+    color-scheme: only light;
   }
 
   &[color-palette^='dark'] {
-    color-scheme: dark;
+    color-scheme: only dark;
 
     & > * {
       background-color:
diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index 9d48eb178a..04666e81aa 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -69,11 +69,11 @@
   }
 
   &:is(.palette-light, .palette-lighter, .palette-lightest) {
-    color-scheme: light;
+    color-scheme: only light;
   }
 
   &:is(.palette-dark, .palette-darker, .palette-darkest) {
-    color-scheme: dark;
+    color-scheme: only dark;
   }
 }
 
diff --git a/elements/rh-footer/rh-footer-lightdom.css b/elements/rh-footer/rh-footer-lightdom.css
index cb5d85b1f0..3763a0c6d4 100644
--- a/elements/rh-footer/rh-footer-lightdom.css
+++ b/elements/rh-footer/rh-footer-lightdom.css
@@ -1,7 +1,7 @@
 :is(rh-footer, rh-footer-universal) {
   --rh-footer-section-side-gap: var(--rh-space-lg, 16px);
 
-  color-scheme: dark;
+  color-scheme: only dark;
 
   & a {
     color: var(--rh-color-interactive-primary-default);
diff --git a/elements/rh-footer/rh-footer.css b/elements/rh-footer/rh-footer.css
index 4b4c0efc2f..8402fbde26 100644
--- a/elements/rh-footer/rh-footer.css
+++ b/elements/rh-footer/rh-footer.css
@@ -7,7 +7,7 @@
   font-size: initial;
   display: flex;
   flex-direction: column;
-  color-scheme: dark;
+  color-scheme: only dark;
 }
 
 footer,
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
index 84c9a4de9d..e02de316f2 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
@@ -89,7 +89,7 @@ rh-navigation-secondary {
   }
 
   &[color-palette^='light'] {
-    color-scheme: light;
+    color-scheme: only light;
   }
 
   &[color-palette^='dark'] {
@@ -99,7 +99,7 @@ rh-navigation-secondary {
     background-color: var(--rh-color-surface-dark, #383838);
     border-block-end-color: var(--rh-color-border-subtle-on-dark, #707070);
     box-shadow: none;
-    color-scheme: dark;
+    color-scheme: only dark;
 
     & > [slot='logo']:hover {
       color: var(--_logo-link-color);
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css b/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
index f953d289c2..d6adb8f6e4 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-menu.css
@@ -1,6 +1,6 @@
 :host {
   display: block;
-  color-scheme: light;
+  color-scheme: only light;
 }
 
 #container {
diff --git a/elements/rh-surface/rh-surface.css b/elements/rh-surface/rh-surface.css
index 05a0bd5a52..729a9d6bd6 100644
--- a/elements/rh-surface/rh-surface.css
+++ b/elements/rh-surface/rh-surface.css
@@ -6,13 +6,13 @@
 :host([color-palette^='dark']) {
   --context: dark;
 
-  color-scheme: dark;
+  color-scheme: only dark;
 }
 
 :host([color-palette^='light']) {
   --context: light;
 
-  color-scheme: light;
+  color-scheme: only light;
 }
 
 :host([color-palette='lightest']) {
diff --git a/elements/rh-tabs/rh-tabs.css b/elements/rh-tabs/rh-tabs.css
index d1ae1be042..e8ef17556c 100644
--- a/elements/rh-tabs/rh-tabs.css
+++ b/elements/rh-tabs/rh-tabs.css
@@ -190,11 +190,11 @@ button {
     }
 
     &:is(.palette-light, .palette-lighter, .palette-lightest) {
-      color-scheme: light;
+      color-scheme: only light;
     }
 
     &:is(.palette-dark, .palette-darker, .palette-darkest) {
-      color-scheme: dark;
+      color-scheme: only dark;
     }
   }
 
diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css
index b0aca71d6a..cad58a0075 100644
--- a/elements/rh-tile/rh-tile.css
+++ b/elements/rh-tile/rh-tile.css
@@ -62,11 +62,11 @@
   color: var(--rh-tile-text-color, var(--rh-color-text-primary));
 
   &:is(.palette-lightest, .palette-lighter, .palette-light) {
-    color-scheme: light;
+    color-scheme: only light;
   }
 
   &:is(.palette-darkest, .palette-darker, .palette-dark) {
-    color-scheme: dark;
+    color-scheme: only dark;
   }
 
   &.palette-lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); }

From 328b057b0a87bd39aef80ca5f2b6f9cd682984e3 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Thu, 23 Jan 2025 11:01:53 -0500
Subject: [PATCH 31/33] fix(cta): update cta variants

---
 elements/rh-cta/rh-cta.css | 136 +++++++++++++++----------------------
 1 file changed, 53 insertions(+), 83 deletions(-)

diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css
index 3130f14c66..01b545145a 100644
--- a/elements/rh-cta/rh-cta.css
+++ b/elements/rh-cta/rh-cta.css
@@ -236,32 +236,30 @@ a:focus-within,
   --_focus-background-color: var(--rh-cta-focus-background-color, transparent);
 
   /* --rh-color-border-interactive-on-light with 10% opacity */
-  --_focus-container-background-color: var(--rh-cta-focus-container-background-color, #0066cc1a);
-  --_focus-border-color: var(--rh-cta-focus-border-color, transparent);
+  --_focus-container-background-color:
+    light-dark(var(--rh-cta-focus-container-background-color, #0066cc1a),
+      var(--rh-cta-focus-container-background-color, #73bcf740));
+  --_focus-border-color:
+    light-dark(var(--rh-cta-focus-border-color, transparent),
+      var(--rh-cta-focus-border-color, transparent));
   --_focus-color:
     var(--rh-cta-focus-color,
       var(--rh-color-interactive-primary-default));
-  --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, transparent);
-  --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none);
+  --_focus-inner-border-color:
+    light-dark(var(--rh-cta-focus-inner-border-color, transparent),
+      var(--rh-cta-focus-inner-border-color, transparent));
+  --_focus-text-decoration:
+    light-dark(var(--rh-cta-focus-text-decoration, none),
+      var(--rh-cta-focus-text-decoration, none));
 
   /* --rh-color-border-interactive-on-light with 10% opacity */
-  --_active-container-background-color: var(--rh-cta-active-container-background-color, #0066cc1a);
+  --_active-container-background-color:
+    light-dark(var(--rh-cta-active-container-background-color, #0066cc1a),
+      var(--rh-cta-active-container-background-color, #73bcf740));
   --_active-inner-border-color: var(--rh-cta-active-inner-border-color, transparent);
-  --_active-text-decoration: var(--rh-cta-active-text-decoration, none);
-
-  &.dark {
-    /* --rh-color-interactive-blue-lighter with 25% opacity */
-    --_focus-container-background-color: var(--rh-cta-focus-container-background-color, #73bcf740);
-    --_focus-border-color: var(--rh-cta-focus-border-color, transparent);
-    --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, transparent);
-    --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none);
-
-    /* --rh-color-interactive-blue-lighter with 25% opacity */
-    --_active-container-background-color:
-      var(--rh-cta-active-container-background-color,
-        #73bcf740);
-    --_active-text-decoration: var(--rh-cta-active-text-decoration, none);
-  }
+  --_active-text-decoration:
+    light-dark(var(--rh-cta-active-text-decoration, none),
+      var(--rh-cta-active-text-decoration, none));
 }
 
 /*****************************************************************************
@@ -307,54 +305,35 @@ a:focus-within,
 
   --_background-color: var(--rh-cta-background-color, transparent);
   --_border-color: var(--rh-cta-border-color, var(--rh-color-border-strong));
-  --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-light, #151515));
+  --_color:
+    light-dark(var(--rh-cta-color, var(--rh-color-text-primary-on-light, #151515)),
+      var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff)));
   --_hover-background-color:
-    var(--rh-cta-hover-background-color,
-      var(--rh-color-surface-darkest,
-      #151515));
+    light-dark(var(--rh-cta-hover-background-color, var(--rh-color-surface-darkest, #151515)),
+      var(--rh-cta-hover-background-color, var(--rh-color-surface-lightest, #ffffff)));
   --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-strong));
-  --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-dark, #ffffff));
+  --_hover-color:
+    light-dark(var(--rh-cta-hover-color, var(--rh-color-text-primary-on-dark, #ffffff)),
+      var(--rh-cta-hover-color, var(--rh-color-text-primary-on-light, #151515)));
   --_focus-background-color:
-    var(--rh-cta-focus-background-color,
-      var(--rh-color-surface-lighter,
-      #f2f2f2));
+    light-dark(var(--rh-cta-focus-background-color, var(--rh-color-surface-lighter, #f2f2f2)),
+      var(--rh-cta-focus-background-color, var(--rh-color-surface-dark, #383838)));
   --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-strong));
   --_focus-color:
-    var(--rh-cta-focus-color,
-      var(--rh-color-surface-darkest,
-      #151515));
+    light-dark(var(--rh-cta-focus-color, var(--rh-color-surface-darkest, #151515)),
+      var(--rh-cta-focus-color, var(--rh-color-text-primary-on-light, #151515)));
   --_focus-inner-border-color:
     var(--rh-cta-focus-inner-border-color,
       var(--rh-color-border-strong));
-  --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary-on-light, #151515));
-  --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-border-strong));
+  --_active-color:
+    light-dark(var(--rh-cta-active-color, var(--rh-color-text-primary-on-light, #151515)),
+      var(--rh-cta-active-color, var(--rh-color-text-primary-on-dark, #ffffff)));
+  --_active-background-color:
+    light-dark(var(--rh-cta-active-background-color, var(--rh-color-border-strong)),
+      var(--rh-cta-active-background-color, var(--rh-color-surface-lightest, #ffffff)));
   --_active-inner-border-color:
-    var(--rh-cta-active-inner-border-color,
-      var(--rh-color-surface-light,
-      #e0e0e0));
-
-  &.dark {
-    --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff));
-    --_hover-background-color:
-      var(--rh-cta-hover-background-color,
-        var(--rh-color-surface-lightest,
-        #ffffff));
-    --_focus-background-color:
-      var(--rh-cta-focus-background-color,
-        var(--rh-color-surface-dark,
-        #383838));
-    --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-light, #151515));
-    --_focus-color: var(--rh-cta-focus-color, var(--rh-color-text-primary-on-light, #151515));
-    --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary-on-dark, #ffffff));
-    --_active-background-color:
-      var(--rh-cta-active-background-color,
-        var(--rh-color-surface-lightest,
-        #ffffff));
-    --_active-inner-border-color:
-      var(--rh-cta-active-inner-border-color,
-        var(--rh-color-border-strong-on-light,
-        #151515));
-  }
+    light-dark(var(--rh-cta-active-inner-border-color, var(--rh-color-surface-light, #e0e0e0)),
+      var(--rh-cta-active-inner-border-color, var(--rh-color-border-strong-on-light, #151515)));
 }
 
 /*****************************************************************************
@@ -376,44 +355,35 @@ a:focus-within,
     justify-content: center;
     align-items: center;
 
-    --_background-color: var(--rh-cta-background-color, transparent);
+    --_background-color: var(--rh-cta-background-color, transparent));
     --_border-color: var(--rh-cta-border-color, var(--rh-color-border-subtle));
     --_color: var(--rh-cta-color, var(--rh-color-interactive-primary-default));
     --_hover-background-color:
-      var(--rh-cta-hover-background-color,
-        var(--rh-color-surface-lighter,
-        #f2f2f2));
+      light-dark(var(--rh-cta-hover-background-color, var(--rh-color-surface-lighter, #f2f2f2)),
+        var(--rh-cta-hover-background-color, var(--rh-color-surface-darker, #1f1f1f)));
     --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-subtle));
     --_hover-color: var(--rh-cta-hover-color, var(--rh-color-interactive-primary-hover));
-    --_hover-text-decoration: var(--rh-cta-hover-text-decoration, none);
+    --_hover-text-decoration:
+      light-dark(var(--rh-cta-hover-text-decoration, none),
+        var(--rh-cta-hover-text-decoration, underline));
     --_focus-color: var(--rh-cta-focus-color, var(--rh-color-interactive-primary-default));
     --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-subtle));
     --_focus-inner-border-color:
       var(--rh-cta-focus-inner-border-color,
         var(--rh-color-border-subtle));
-    --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none);
+    --_focus-text-decoration:
+      light-dark(var(--rh-cta-focus-text-decoration, none),
+        var(--rh-cta-focus-text-decoration, none));
     --_active-background-color:
-      var(--rh-cta-active-background-color,
-        var(--rh-color-surface-lighter,
-        #f2f2f2));
+      light-dark(var(--rh-cta-active-background-color,
+        var(--rh-color-surface-lighter, #f2f2f2)),
+        var(--rh-cta-active-background-color, var(--rh-color-surface-darker, #1f1f1f)));
     --_active-inner-border-color:
       var(--rh-cta-active-inner-border-color,
         var(--rh-color-border-subtle));
-    --_active-text-decoration: var(--rh-cta-active-text-decoration, none);
-
-    &.dark {
-      --_hover-background-color:
-        var(--rh-cta-hover-background-color,
-          var(--rh-color-surface-darker,
-          #1f1f1f));
-      --_hover-text-decoration: var(--rh-cta-hover-text-decoration, underline);
-      --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none);
-      --_active-background-color:
-        var(--rh-cta-active-background-color,
-          var(--rh-color-surface-darker,
-          #1f1f1f));
-      --_active-text-decoration: var(--rh-cta-active-text-decoration, underline);
-    }
+    --_active-text-decoration:
+      light-dark(var(--rh-cta-active-text-decoration, none),
+        var(--rh-cta-active-text-decoration, underline));
 
     &.icon rh-icon {
       margin-inline: 0;

From 497043bae50c08331e38cb6236bae20136ce0deb Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Thu, 23 Jan 2025 11:19:23 -0500
Subject: [PATCH 32/33] fix: clean up missed dark classes

---
 elements/rh-accordion/rh-accordion-panel.css    | 10 ++++------
 .../rh-audio-player-range-styles.css            | 17 ++++++-----------
 elements/rh-button/rh-button.css                | 13 ++++++-------
 elements/rh-card/rh-card.css                    | 16 ++++------------
 elements/rh-code-block/rh-code-block.css        |  8 +-------
 elements/rh-menu/rh-menu.css                    | 17 +++++++----------
 elements/rh-spinner/rh-spinner.css              | 10 +---------
 elements/rh-table/rh-sort-button.css            |  7 ++-----
 elements/rh-table/rh-table.css                  |  9 ++-------
 elements/rh-video-embed/rh-video-embed.css      |  4 ++--
 .../rh-context-picker/rh-context-picker.css     |  6 +-----
 11 files changed, 36 insertions(+), 81 deletions(-)

diff --git a/elements/rh-accordion/rh-accordion-panel.css b/elements/rh-accordion/rh-accordion-panel.css
index 9c32440a1f..56df74b710 100644
--- a/elements/rh-accordion/rh-accordion-panel.css
+++ b/elements/rh-accordion/rh-accordion-panel.css
@@ -89,12 +89,10 @@
   }
 }
 
-.expanded.on.light {
-  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
-}
-
-.expanded.on.dark {
-  --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+.expanded {
+  --rh-color-surface:
+    light-dark(var(--rh-color-surface-lightest, #ffffff),
+      var(--rh-color-surface-darkest, #151515));
 }
 
 .body:after {
diff --git a/elements/rh-audio-player/rh-audio-player-range-styles.css b/elements/rh-audio-player/rh-audio-player-range-styles.css
index 730c77133c..5b5ebd4101 100644
--- a/elements/rh-audio-player/rh-audio-player-range-styles.css
+++ b/elements/rh-audio-player/rh-audio-player-range-styles.css
@@ -39,10 +39,12 @@ input[type='range'] {
   --_thumb-radius: calc((var(--_thumb-height, 16px) * 0.5) - 1px);
   --_clip-edges: 0.125em;
   --_track-height: var(--rh-length-xs, 4px);
-  --_thumb-disabled-color: rgb(0 0 0 / 0.5);
-  --_track-color: rgb(0 0 0 / 0.5);
-  --_interactive-color: var(--rh-color-border-interactive);
-  --_accent-color: var(--rh-color-accent-brand);
+  --_thumb-disabled-color: light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / 0.5));
+  --_track-color: light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / 0.5));
+  --_interactive-color:
+    light-dark(var(--rh-color-border-interactive),
+      var(--rh-color-border-interactive));
+  --_accent-color: light-dark(var(--rh-color-accent-brand), var(--rh-color-accent-brand));
   --_outline: var(--rh-border-width-md, 2px) solid var(--_interactive-color);
   --_thumb-color: var(--rh-audio-player-range-thumb-color, var(--_accent-color));
   --_progress-color: var(--rh-audio-player-range-progress-color, var(--_accent-color));
@@ -57,13 +59,6 @@ input[type='range'][hidden] {
   --_track-fill-color: var(--_progress-color);
 }
 
-.dark input[type='range'] {
-  --_thumb-disabled-color: rgb(255 255 255 / 0.5);
-  --_track-color: rgb(255 255 255 / 0.5);
-  --_interactive-color: var(--rh-color-border-interactive);
-  --_accent-color: var(--rh-color-accent-brand);
-}
-
 input[type='range']:focus {
   outline: var(--_outline);
 }
diff --git a/elements/rh-button/rh-button.css b/elements/rh-button/rh-button.css
index 0279990412..c7f9c6b86c 100644
--- a/elements/rh-button/rh-button.css
+++ b/elements/rh-button/rh-button.css
@@ -352,13 +352,12 @@ button[disabled] {
   pointer-events: none;
   cursor: default;
 
-  --_color: var(--rh-color-text-secondary-on-light, #4d4d4d);
-  --_background-color: var(--rh-color-surface-light, #e0e0e0);
-
-  &.dark {
-    --_color: var(--rh-color-gray-40, #a3a3a3);
-    --_background-color: var(--rh-color-surface-dark, #383838);
-  }
+  --_color:
+    light-dark(var(--rh-color-text-secondary-on-light, #4d4d4d),
+      var(--rh-color-gray-40, #a3a3a3));
+  --_background-color:
+    light-dark(var(--rh-color-surface-light, #e0e0e0),
+      var(--rh-color-surface-dark, #383838));
 }
 
 :host(:disabled) button:after {
diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index 04666e81aa..de687369cb 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -26,6 +26,10 @@
 ::slotted(a:visited:active) { color: var(--rh-color-interactive-primary-visited-active); }
 
 #container {
+  --_header-bg:
+    light-dark(var(--rh-card-header-background-on-light, transparent),
+      var(--rh-card-header-background-on-dark, transparent));
+
   align-self: stretch;
   display: flex;
   flex-direction: column;
@@ -107,14 +111,6 @@
   background-color: var(--_header-bg, transparent);
 }
 
-:is(#container, #container.light, #container.lighter, #container.lightest) {
-  --_header-bg: var(--rh-card-header-background-on-light, transparent);
-}
-
-:is(#container.dark, #container.darker, #container.darkest) {
-  --_header-bg: var(--rh-card-header-background-on-dark, transparent);
-}
-
 #body {
   margin-block: var(--rh-space-2xl, 32px) var(--rh-space-xl, 24px);
 }
@@ -228,10 +224,6 @@
   width: auto;
 }
 
-#container.promo.standard.dark {
-  background-color: var(--rh-color-surface-darker, #1f1f1f);
-}
-
 .promo.standard #body {
   display: contents;
 }
diff --git a/elements/rh-code-block/rh-code-block.css b/elements/rh-code-block/rh-code-block.css
index 4b6ce55f61..cf92212238 100644
--- a/elements/rh-code-block/rh-code-block.css
+++ b/elements/rh-code-block/rh-code-block.css
@@ -39,9 +39,7 @@
 }
 
 .shadow-fab:is(:hover, :focus, :active) {
-  background:
-    var(--_code-action-hover-focus-active-background,
-      var(--rh-color-surface-light, #e0e0e0));
+  background: var(--rh-color-surface);
 }
 
 .shadow-fab svg {
@@ -50,10 +48,6 @@
   color: var(--rh-color-text-primary);
 }
 
-.dark .shadow-fab {
-  --_code-action-hover-focus-active-background: var(--rh-color-surface-dark, #383838);
-}
-
 #container,
 #content-lines,
 #content,
diff --git a/elements/rh-menu/rh-menu.css b/elements/rh-menu/rh-menu.css
index 3ce85ab31a..240d844014 100644
--- a/elements/rh-menu/rh-menu.css
+++ b/elements/rh-menu/rh-menu.css
@@ -11,20 +11,17 @@ slot {
 
 ::slotted(a) {
   padding: 5px !important; /* WARNING: not a token value */
+  color: var(--rh-color-interactive-primary-default);
 }
 
-.dark::slotted(a) {
-  color: var(--rh-color-interactive-primary-hover-on-dark, #b9dafc) !important;
+::slotted(a:hover) {
+  color: var(--rh-color-interactive-primary-hover) !important;
 }
 
-.dark::slotted(a:hover) {
-  color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
+::slotted(a:visited) {
+  color: var(--rh-color-interactive-primary-visited-default) !important;
 }
 
-.dark::slotted(a:visited) {
-  color: var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9) !important;
-}
-
-.dark::slotted(a:visited:hover) {
-  color: var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9) !important;
+::slotted(a:visited:hover) {
+  color: var(--rh-color-interactive-primary-visited-default) !important;
 }
diff --git a/elements/rh-spinner/rh-spinner.css b/elements/rh-spinner/rh-spinner.css
index b320ec61b7..4f51f87836 100644
--- a/elements/rh-spinner/rh-spinner.css
+++ b/elements/rh-spinner/rh-spinner.css
@@ -41,7 +41,7 @@ circle.dash {
 }
 
 circle.track {
-  stroke: var(--rh-color-gray-10, #f2f2f2);
+  stroke: light-dark(var(--rh-color-gray-10, #f2f2f2), var(--rh-color-gray-70, #383838));
   animation-duration: 0;
 }
 
@@ -78,14 +78,6 @@ circle.track {
   font-size: var(--rh-font-size-body-text-sm, 0.875rem);
 }
 
-circle.dash.dark {
-  stroke: var(--rh-color-accent-base);
-}
-
-circle.track.dark {
-  stroke: var(--rh-color-gray-70, #383838);
-}
-
 @keyframes rh-spinner-animation-dash {
   50% {
     stroke-dashoffset: 0;
diff --git a/elements/rh-table/rh-sort-button.css b/elements/rh-table/rh-sort-button.css
index 7e2c6c7059..f18e7922a1 100644
--- a/elements/rh-table/rh-sort-button.css
+++ b/elements/rh-table/rh-sort-button.css
@@ -1,12 +1,9 @@
 #sort-button {
   background-color: transparent;
   border: 0;
-  color: var(--rh-color-text-primary-on-light, #151515);
-}
-
-#sort-button.dark {
-  color: var(--rh-color-text-primary-on-dark, #ffffff);
+  color: var(--rh-color-text-primary);
 }
+=
 
 #sort-button:after {
   content: '';
diff --git a/elements/rh-table/rh-table.css b/elements/rh-table/rh-table.css
index d66e951eee..8ee9d7cc85 100644
--- a/elements/rh-table/rh-table.css
+++ b/elements/rh-table/rh-table.css
@@ -47,8 +47,7 @@
 
 .color-palette-dark,
 .color-palette-darker,
-.color-palette-darkest,
-.dark {
+.color-palette-darkest {
   --_row-background-hover-color: rgba(from var(--rh-color-white, #ffffff) r g b / 0.1);
   --_column-background-hover-color: rgba(from var(--rh-color-blue-70, #003366) r g b / 0.3);
 }
@@ -57,14 +56,10 @@
 ::slotted([slot='summary']) {
   display: block;
   padding: var(--rh-space-xl, 24px) var(--rh-space-lg, 16px) 0 var(--rh-space-lg, 16px);
-  color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+  color: var(--rh-color-text-secondary);
   font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif);
   font-size: var(--rh-font-size-body-text-md, 1rem);
   font-style: italic;
   font-weight: var(--rh-font-weight-body-text-regular, 400);
   line-height: var(--rh-line-height-body-text, 1.5);
 }
-
-.dark ::slotted([slot='summary']) {
-  color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
-}
diff --git a/elements/rh-video-embed/rh-video-embed.css b/elements/rh-video-embed/rh-video-embed.css
index 4a4d8fffa3..e9dd9998f4 100644
--- a/elements/rh-video-embed/rh-video-embed.css
+++ b/elements/rh-video-embed/rh-video-embed.css
@@ -146,8 +146,8 @@ figcaption ::slotted(p) {
   background-color: var(--_video-play-btn-interactive-bkg-color);
 }
 
-.dark #play::part(icon) {
-  color: var(--rh-color-surface-lightest, #ffffff);
+#play::part(icon) {
+  color: var(--rh-color-surface);
 }
 
 #play[hidden],
diff --git a/lib/elements/rh-context-picker/rh-context-picker.css b/lib/elements/rh-context-picker/rh-context-picker.css
index e57c1d479b..3cae6b6b9f 100644
--- a/lib/elements/rh-context-picker/rh-context-picker.css
+++ b/lib/elements/rh-context-picker/rh-context-picker.css
@@ -10,11 +10,7 @@
 #container {
   display: contents;
 
-  --thumb-color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
-}
-
-#container.on.dark {
-  --thumb-color: var(--rh-color-interactive-primary-default-on-dark, #92c5f9);
+  --thumb-color: var(--rh-color-interactive-primary-default);
 }
 
 .darkest { --c: var(--rh-color-surface-darkest, #151515); }

From 172911a5b597085de4ce7f1fb6a067fd0b87307e Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Thu, 23 Jan 2025 12:27:26 -0500
Subject: [PATCH 33/33] fix: simplify css use computed values where optimal

---
 elements/rh-avatar/rh-avatar.css              | 16 +---
 elements/rh-badge/rh-badge.css                |  8 +-
 .../rh-breadcrumb/rh-breadcrumb-lightdom.css  | 13 +++
 elements/rh-breadcrumb/rh-breadcrumb.css      | 73 ----------------
 elements/rh-button/rh-button.css              | 87 +++++--------------
 elements/rh-cta/rh-cta.css                    |  8 +-
 .../rh-navigation-secondary-lightdom.css      | 34 ++------
 .../rh-navigation-secondary.css               |  2 +-
 .../rh-navigation-secondary.ts                |  3 +-
 elements/rh-table/rh-sort-button.css          |  1 -
 10 files changed, 54 insertions(+), 191 deletions(-)

diff --git a/elements/rh-avatar/rh-avatar.css b/elements/rh-avatar/rh-avatar.css
index e9a24859b1..d30b1c00dc 100644
--- a/elements/rh-avatar/rh-avatar.css
+++ b/elements/rh-avatar/rh-avatar.css
@@ -9,9 +9,7 @@
 
 #container {
   display: grid;
-  color:
-    light-dark(var(--rh-color-text-secondary-on-light, #4d4d4d),
-      var(--rh-color-text-secondary-on-dark, #c7c7c7));
+  color: var(--rh-color-text-secondary);
 
   --_colors:
     light-dark(var(--rh-avatar-colors,
@@ -75,23 +73,17 @@ slot {
 }
 
 ::slotted(a) {
-  color:
-    light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-      var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+  color: var(--rh-color-interactive-primary-default);
   text-decoration: none;
 }
 
 ::slotted(a:visited) {
-  color:
-    light-dark(var(--rh-color-interactive-primary-visited-default-on-light, #5e40be),
-      var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9));
+  color: var(--rh-color-interactive-primary-visited-default);
 }
 
 ::slotted(a:active),
 ::slotted(a:hover) {
-  color:
-    light-dark(var(--rh-color-interactive-primary-hover-on-light, #003366),
-      var(--rh-color-interactive-primary-hover-on-dark, #b9dafc));
+  color: var(--rh-color-interactive-primary-hover);
 }
 
 img,
diff --git a/elements/rh-badge/rh-badge.css b/elements/rh-badge/rh-badge.css
index e5a0e33baa..24c7370da0 100644
--- a/elements/rh-badge/rh-badge.css
+++ b/elements/rh-badge/rh-badge.css
@@ -24,16 +24,12 @@ span {
 
   &.caution {
     background-color: var(--rh-color-status-caution);
-    color:
-      light-dark(var(--rh-color-text-primary-on-light, #151515),
-        var(--rh-color-text-primary-on-light, #151515));
+    color: var(--rh-color-text-primary-on-light, #151515);
   }
 
   &.warning {
     background-color: var(--rh-color-status-warning);
-    color:
-      light-dark(var(--rh-color-text-primary-on-light, #151515),
-        var(--rh-color-text-primary-on-light, #151515));
+    color: var(--rh-color-text-primary-on-light, #151515);
   }
 
   &.danger { background-color: var(--rh-color-status-danger); }
diff --git a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css
index c6a974932f..736aebc32d 100644
--- a/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css
+++ b/elements/rh-breadcrumb/rh-breadcrumb-lightdom.css
@@ -1,4 +1,17 @@
 rh-breadcrumb {
+  --_breadcrumb-caret-image-default:
+    var(--rh-breadcrumb-caret-image,
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z'  fill='red' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
+  --_breadcrumb-link-color:
+    var(--rh-breadcrumb-link-color,
+      var(--rh-color-interactive-primary-default));
+  --_breadcrumb-link-color-current-page: var(--rh-color-text-primary);
+  --_breadcrumb-link-color-current-page-subtle: var(--rh-color-text-secondary);
+  --_breadcrumb-link-color-hover: var(--rh-color-interactive-primary-hover);
+  --_breadcrumb-link-color-visited: var(--rh-color-interactive-primary-visited-hover);
+  --_breadcrumb-link-color-visited-hover: var(--rh-color-interactive-primary-visited-hover);
+  --_breadcrumb-link-focus-outline-color: var(--rh-color-border-interactive);
+
   display: block;
 }
 
diff --git a/elements/rh-breadcrumb/rh-breadcrumb.css b/elements/rh-breadcrumb/rh-breadcrumb.css
index 997e9e3ca0..5d4e87f30f 100644
--- a/elements/rh-breadcrumb/rh-breadcrumb.css
+++ b/elements/rh-breadcrumb/rh-breadcrumb.css
@@ -1,76 +1,3 @@
 :host {
-  /* light context */
-  --_breadcrumb-link-color-on-light:
-    var(--rh-breadcrumb-link-color,
-      var(--rh-color-interactive-primary-default));
-  --_breadcrumb-link-color-current-page-on-light:
-    var(--rh-breadcrumb-link-color-current-page,
-      var(--rh-color-text-primary));
-  --_breadcrumb-link-color-current-page-subtle-on-light:
-    var(--rh-breadcrumb-link-color-current-page-subtle,
-      var(--rh-color-text-secondary));
-  --_breadcrumb-link-color-hover-on-light:
-    var(--rh-breadcrumb-link-color-hover,
-      var(--rh-color-interactive-primary-hover));
-  --_breadcrumb-link-color-visited-on-light:
-    var(--rh-breadcrumb-link-color-visited,
-      var(--rh-color-interactive-primary-visited-default));
-  --_breadcrumb-link-color-visited-hover-on-light:
-    var(--rh-breadcrumb-link-color-visited-hover,
-      var(--rh-color-interactive-primary-visited-hover));
-  --_breadcrumb-link-focus-outline-color-on-light:
-    var(--rh-breadcrumb-link-focus-outline-color,
-      var(--rh-color-border-interactive));
-
-  /* dark context */
-  --_breadcrumb-link-color-on-dark:
-    var(--rh-breadcrumb-link-color,
-      var(--rh-color-interactive-primary-default));
-  --_breadcrumb-link-color-current-page-on-dark:
-    var(--rh-breadcrumb-link-color-current-page,
-      var(--rh-color-text-primary));
-  --_breadcrumb-link-color-current-page-subtle-on-dark:
-    var(--rh-breadcrumb-link-color-current-page-subtle,
-      var(--rh-color-text-secondary));
-  --_breadcrumb-link-color-hover-on-dark:
-    var(--rh-breadcrumb-link-color-hover,
-      var(--rh-color-interactive-primary-hover));
-  --_breadcrumb-link-color-visited-on-dark:
-    var(--rh-breadcrumb-link-color-visited,
-      var(--rh-color-interactive-primary-visited-default));
-  --_breadcrumb-link-color-visited-hover-on-dark:
-    var(--rh-breadcrumb-link-color-visited-hover,
-      var(--rh-color-interactive-primary-visited-hover));
-  --_breadcrumb-link-focus-outline-color-on-dark:
-    var(--rh-breadcrumb-link-focus-outline-color,
-      var(--rh-color-border-interactive));
-
-  /* computed context */
-  --_breadcrumb-caret-image-default: var(--rh-breadcrumb-caret-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15' viewBox='0 0 10 15' fill='none'%3E%3Cg clip-path='url(%23clip0_232_19576)'%3E%3Cpath d='M2.5 14.5L0.5 12.5L5.5 7.5L0.5 2.5L2.5 0.5L9.5 7.5L2.5 14.5Z'  fill='red' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_232_19576'%3E%3Crect width='10' height='14' fill='white' transform='matrix(-1 0 0 1 10 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"));
-  --_breadcrumb-caret-image-subtle:
-    light-dark(var(--_breadcrumb-caret-image-subtle-on-light),
-      var(--_breadcrumb-caret-image-subtle-on-dark));
-  --_breadcrumb-link-color:
-    light-dark(var(--_breadcrumb-link-color-on-light),
-      var(--_breadcrumb-link-color-on-dark));
-  --_breadcrumb-link-color-current-page:
-    light-dark(var(--_breadcrumb-link-color-current-page-on-light),
-      var(--_breadcrumb-link-color-current-page-on-dark));
-  --_breadcrumb-link-color-current-page-subtle:
-    light-dark(var(--_breadcrumb-link-color-current-page-subtle-on-light),
-      var(--_breadcrumb-link-color-current-page-subtle-on-dark));
-  --_breadcrumb-link-color-hover:
-    light-dark(var(--_breadcrumb-link-color-hover-on-light),
-      var(--_breadcrumb-link-color-hover-on-dark));
-  --_breadcrumb-link-color-visited:
-    light-dark(var(--_breadcrumb-link-color-visited-on-light),
-      var(--_breadcrumb-link-color-visited-on-dark));
-  --_breadcrumb-link-color-visited-hover:
-    light-dark(var(--_breadcrumb-link-color-visited-hover-on-light),
-      var(--_breadcrumb-link-color-visited-hover-on-dark));
-  --_breadcrumb-link-focus-outline-color:
-    light-dark(var(--_breadcrumb-link-focus-outline-color-on-light),
-      var(--_breadcrumb-link-focus-outline-color-on-dark));
-
   display: block;
 }
diff --git a/elements/rh-button/rh-button.css b/elements/rh-button/rh-button.css
index c7f9c6b86c..aa6876bbfe 100644
--- a/elements/rh-button/rh-button.css
+++ b/elements/rh-button/rh-button.css
@@ -56,8 +56,7 @@ button {
     outline:
       var(--rh-border-width-md, 2px)
       solid
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+      var(--rh-color-interactive-primary-default);
 
     &:after {
       border-width: var(--_border-width, var(--rh-border-width-md, 2px));
@@ -124,37 +123,21 @@ button {
   }
 
   &.secondary {
-    --_color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_color: var(--rh-color-interactive-primary-default);
     --_background-color: transparent;
-    --_border-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_border-color: var(--rh-color-interactive-primary-default);
     --_border-width: var(--rh-border-width-sm, 1px);
-    --_active-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_active-color: var(--rh-color-interactive-primary-default);
     --_active-background-color: transparent;
-    --_active-border-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_active-border-color: var(--rh-color-interactive-primary-default);
     --_active-border-width: var(--rh-border-width-md, 2px);
-    --_focus-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_focus-color: var(--rh-color-interactive-primary-default);
     --_focus-background-color: transparent;
-    --_focus-border-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_focus-border-color: var(--rh-color-interactive-primary-default);
     --_focus-border-width: var(--rh-border-width-md, 2px);
-    --_hover-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_hover-color: var(--rh-color-interactive-primary-default);
     --_hover-background-color: transparent;
-    --_hover-border-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_hover-border-color: var(--rh-color-interactive-primary-default);
     --_hover-border-width: var(--rh-border-width-md, 2px);
 
     &.danger {
@@ -174,44 +157,26 @@ button {
   }
 
   &.tertiary {
-    --_color:
-      light-dark(var(--rh-color-text-primary-on-light, #151515),
-        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_color: var(--rh-color-text-primary);
     --_background-color: transparent;
-    --_border-color:
-      light-dark(var(--rh-color-border-strong-on-light, #151515),
-        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_border-color: var(--rh-color-border-strong);
     --_border-width: var(--rh-border-width-sm, 1px);
-    --_active-color:
-      light-dark(var(--rh-color-text-primary-on-light, #151515),
-        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_active-color: var(--rh-color-text-primary);
     --_active-background-color: transparent;
-    --_active-border-color:
-      light-dark(var(--rh-color-border-strong-on-light, #151515),
-        var(--rh-color-border-strong-on-dark, #ffffff));
+    --_active-border-color: var(--rh-color-border-strong);
     --_active-border-width: var(--rh-border-width-md, 2px);
-    --_focus-color:
-      light-dark(var(--rh-color-text-primary-on-light, #151515),
-        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_focus-color: var(--rh-color-text-primary);
     --_focus-background-color: transparent;
-    --_focus-border-color:
-      light-dark(var(--rh-color-border-strong-on-light, #151515),
-        var(--rh-color-border-strong-on-dark, #ffffff));
+    --_focus-border-color: var(--rh-color-border-strong);
     --_focus-border-width: var(--rh-border-width-md, 2px);
-    --_hover-color:
-      light-dark(var(--rh-color-text-primary-on-light, #151515),
-        var(--rh-color-text-primary-on-dark, #ffffff));
+    --_hover-color: var(--rh-color-text-primary);
     --_hover-background-color: transparent;
-    --_hover-border-color:
-      light-dark(var(--rh-color-border-strong-on-light, #151515),
-        var(--rh-color-border-strong-on-dark, #ffffff));
+    --_hover-border-color: var(--rh-color-border-strong);
     --_hover-border-width: var(--rh-border-width-md, 2px);
   }
 
   &.link {
-    --_color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_color: var(--rh-color-interactive-primary-default);
     --_background-color: transparent;
     --_border-color: transparent;
     --_active-color:
@@ -222,9 +187,7 @@ button {
       light-dark(var(--rh-color-blue-70, #003366),
         var(--rh-color-interactive-primary-hover-on-dark, #b9dafc));
     --_focus-background-color: transparent;
-    --_focus-outline-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_focus-outline-color: var(--rh-color-interactive-primary-default);
     --_hover-color:
       light-dark(var(--rh-color-blue-70, #003366),
         var(--rh-color-interactive-primary-hover-on-dark, #b9dafc));
@@ -238,9 +201,7 @@ button {
   }
 
   &.close {
-    --_color:
-      light-dark(var(--rh-color-text-secondary-on-light, #4d4d4d),
-        var(--rh-color-text-secondary-on-dark, #c7c7c7));
+    --_color: var(--rh-color-text-secondary);
     --_background-color: transparent;
     --_active-color: var(--rh-color-icon-secondary-on-light, #151515);
     --_active-background-color: transparent;
@@ -259,9 +220,7 @@ button {
   &.play {
     --_gray-90-rgb: var(--rh-color-gray-90-rgb, 31 31 31);
     --_white-rgb: 255 255 255;
-    --_color:
-      light-dark(var(--rh-color-icon-secondary-on-dark, #ffffff),
-        var(--rh-color-icon-secondary-on-light, #151515));
+    --_color: var(--rh-color-icon-secondary-on-dark);
     --_background-color:
       light-dark(rgb(var(--_gray-90-rgb) / var(--rh-opacity-50, 50%)),
         rgb(var(--_white-rgb) / var(--rh-opacity-50, 50%)));
@@ -271,9 +230,7 @@ button {
     --_focus-background-color:
       light-dark(rgb(var(--_gray-90-rgb) / var(--rh-opacity-80, 80%)),
         rgb(var(--_white-rgb) / var(--rh-opacity-80, 80%)));
-    --_focus-outline-color:
-      light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc),
-        var(--rh-color-interactive-primary-default-on-dark, #92c5f9));
+    --_focus-outline-color: var(--rh-color-interactive-primary-default);
     --_hover-background-color:
       light-dark(rgb(var(--_gray-90-rgb) / var(--rh-opacity-80, 80%)),
         rgb(var(--_white-rgb) / var(--rh-opacity-80, 80%)));
diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css
index 01b545145a..a37de53429 100644
--- a/elements/rh-cta/rh-cta.css
+++ b/elements/rh-cta/rh-cta.css
@@ -319,15 +319,11 @@ a:focus-within,
     light-dark(var(--rh-cta-focus-background-color, var(--rh-color-surface-lighter, #f2f2f2)),
       var(--rh-cta-focus-background-color, var(--rh-color-surface-dark, #383838)));
   --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-strong));
-  --_focus-color:
-    light-dark(var(--rh-cta-focus-color, var(--rh-color-surface-darkest, #151515)),
-      var(--rh-cta-focus-color, var(--rh-color-text-primary-on-light, #151515)));
+  --_focus-color: var(--rh-color-text-primary);
   --_focus-inner-border-color:
     var(--rh-cta-focus-inner-border-color,
       var(--rh-color-border-strong));
-  --_active-color:
-    light-dark(var(--rh-cta-active-color, var(--rh-color-text-primary-on-light, #151515)),
-      var(--rh-cta-active-color, var(--rh-color-text-primary-on-dark, #ffffff)));
+  --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary));
   --_active-background-color:
     light-dark(var(--rh-cta-active-background-color, var(--rh-color-border-strong)),
       var(--rh-cta-active-background-color, var(--rh-color-surface-lightest, #ffffff)));
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
index e02de316f2..9a64b1c238 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
@@ -1,14 +1,15 @@
 rh-navigation-secondary {
   --_max-height: max-content;
   --_min-height: 80px;
-  --_nav-link-color: var(--rh-color-text-primary-on-light, #151515);
-  --_logo-link-color: var(--rh-color-text-primary-on-light, #151515);
-  --_nav-chevron-color: var(--rh-color-text-primary-on-light, #151515);
+  --_nav-link-color: var(--rh-color-text-primary);
+  --_logo-link-color: var(--rh-color-text-primary);
+  --_nav-chevron-color: var(--rh-color-text-primary);
+  --rh-color-surface: light-dark(var(--rh-color-surface-lighter), var(--rh-color-surface-dark));
 
   display: block;
   position: sticky;
   top: 0;
-  background-color: var(--rh-color-surface-lighter, #f2f2f2);
+  background-color: var(--rh-color-surface);
   border-block-end: var(--rh-border-width-sm, 1px) solid transparent;
   box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
   height: var(--_max-height);
@@ -53,7 +54,7 @@ rh-navigation-secondary {
     }
 
     &[aria-current='page'] {
-      border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
+      border-block-start-color: var(--rh-color-brand-red);
     }
   }
 
@@ -93,10 +94,6 @@ rh-navigation-secondary {
   }
 
   &[color-palette^='dark'] {
-    --_nav-link-color: var(--rh-color-text-primary-on-light, #151515);
-    --_logo-link-color: var(--rh-color-text-primary-on-dark, #ffffff);
-
-    background-color: var(--rh-color-surface-dark, #383838);
     border-block-end-color: var(--rh-color-border-subtle-on-dark, #707070);
     box-shadow: none;
     color-scheme: only dark;
@@ -151,11 +148,7 @@ rh-navigation-secondary-dropdown > a {
 }
 
 rh-navigation-secondary [slot='nav'] > li > a[aria-current='page'] {
-  border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
-}
-
-rh-navigation-secondary[color-palette^='dark'] [slot='nav'] li > a[aria-current='page'] {
-  border-block-start-color: var(--rh-color-brand-red-on-dark, #ee0000);
+  border-block-start-color: var(--rh-color-brand-red);
 }
 
 rh-navigation-secondary > [slot='nav'] > li > a:hover,
@@ -213,17 +206,8 @@ rh-navigation-secondary-menu-section > [slot='header'] {
     grid-template-columns: max-content 1fr max-content;
   }
 
-  rh-navigation-secondary[color-palette^='dark'] {
-    --_nav-link-color: var(--rh-color-text-primary-on-dark, #ffffff);
-    --_nav-chevron-color: var(--rh-color-text-primary-on-dark, #ffffff);
-  }
-
-  /* stylelint-disable-next-line @stylistic/max-line-length */
-  rh-navigation-secondary[color-palette^='dark'] rh-navigation-secondary-dropdown > a[aria-expanded='true'] {
-    --_nav-link-color: var(--rh-color-text-primary-on-light, #151515);
-    --_nav-chevron-color: var(--rh-color-text-primary-on-light, #151515);
-
-    color: var(--_nav-link-color);
+  rh-navigation-secondary-dropdown > a[aria-expanded='true'] {
+    color-scheme: only light;
   }
 
   rh-navigation-secondary > [slot='logo'] {
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.css b/elements/rh-navigation-secondary/rh-navigation-secondary.css
index 5dd14a4ea9..e560fc32ce 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary.css
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary.css
@@ -104,7 +104,7 @@ button {
   border-block-start: var(--rh-border-width-lg, 3px) solid transparent;
   margin-inline-end: var(--rh-space-lg, 16px);
   color: var(--_button-font-color);
-  background-color: var(--rh-color-surface-lighter, #f2f2f2);
+  background-color: var(--rh-color-surface);
   gap: var(--rh-space-md, 8px);
 }
 
diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.ts b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
index dcd7d7ae52..df68559dbe 100644
--- a/elements/rh-navigation-secondary/rh-navigation-secondary.ts
+++ b/elements/rh-navigation-secondary/rh-navigation-secondary.ts
@@ -35,7 +35,6 @@ export class SecondaryNavOverlayChangeEvent extends ComposedEvent {
 
 import styles from './rh-navigation-secondary.css';
 
-
 /* TODO: Abstract this out to a shareable function, should RTI handle something similar? */
 function focusableChildElements(parent: HTMLElement): NodeListOf<HTMLElement> {
   return parent.querySelectorAll(`a,
@@ -183,7 +182,7 @@ export class RhNavigationSecondary extends LitElement {
           <button aria-controls="container"
                   aria-expanded="${String(expanded) as 'true' | 'false'}"
                   @click="${this.#toggleMobileMenu}"><slot name="mobile-menu">Menu</slot></button>
-          <rh-surface color-palette="${dropdownPalette}">
+          <rh-surface color-palette="${dropdownPalette ?? 'lightest'}">
             <slot name="nav"></slot>
             <div id="cta" part="cta">
               <slot name="cta"></slot>
diff --git a/elements/rh-table/rh-sort-button.css b/elements/rh-table/rh-sort-button.css
index f18e7922a1..273740a480 100644
--- a/elements/rh-table/rh-sort-button.css
+++ b/elements/rh-table/rh-sort-button.css
@@ -3,7 +3,6 @@
   border: 0;
   color: var(--rh-color-text-primary);
 }
-=
 
 #sort-button:after {
   content: '';