fix: remove color-context JS in favor of color-scheme and light-dark()

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));
+}

docs/styles/demo/dev-server.css

@@ -2,13 +2,15 @@
   reset,
   fonts,
   tokens,
+  color-scheme,
   typography,
   base,
   layout;
 
 @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 {

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,

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);

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>

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);
-    }
   }
 }
 

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>

elements/rh-accordion/rh-accordion-panel.css

@@ -51,16 +51,48 @@
 }
 
 #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);
-}
 
-.expanded.on.light {
-  --rh-color-surface: var(--rh-color-surface-lightest, #ffffff);
+  &.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: only light;
+  }
+
+  &:is(.palette-dark, .palette-darker, .palette-darkest) {
+    color-scheme: only dark;
+  }
 }
 
-.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 {

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>