From 7662b8f56708a19841858a59615f6ea120879117 Mon Sep 17 00:00:00 2001
From: Mark Caron <mark.caron@gmail.com>
Date: Thu, 27 Feb 2025 14:26:43 -0500
Subject: [PATCH] bug(subnav): fixing color-context inheritance

---
 elements/rh-subnav/rh-subnav.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/elements/rh-subnav/rh-subnav.ts b/elements/rh-subnav/rh-subnav.ts
index a18cbe7b02..0b6903d8a1 100644
--- a/elements/rh-subnav/rh-subnav.ts
+++ b/elements/rh-subnav/rh-subnav.ts
@@ -8,7 +8,7 @@ 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 { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
 
 import '@rhds/elements/rh-icon/rh-icon.js';
 
@@ -63,7 +63,7 @@ export class RhSubnav extends LitElement {
    * See [CSS Custom Properties](#css-custom-properties) for default values
    */
   @colorContextProvider()
-  @property({ reflect: true, attribute: 'color-palette' }) colorPalette = 'lighter';
+  @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
   /**
    * Customize the default `aria-label` on the `<nav>` container.
@@ -109,9 +109,9 @@ export class RhSubnav extends LitElement {
   render() {
     const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof RhSubnav;
     const { showScrollButtons } = this.#overflow;
-    const { on = '' } = this;
+    const { on = 'light' } = this;
     return html`
-      <nav part="container" aria-label="${this.accessibleLabel}" class="${classMap({ [on]: !!on })}">${!showScrollButtons ? '' : html`
+      <nav part="container" aria-label="${this.accessibleLabel}" class="${classMap({ on: true, [on]: !!on })}">${!showScrollButtons ? '' : html`
         <button id="previous" tabindex="-1" aria-hidden="true"
                 ?disabled="${!this.#overflow.overflowLeft}"
                 @click="${this.#scrollLeft}">