From c0e7b2a77b13fdbc15470077d6bd54329425103e Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 22 Oct 2023 17:28:17 +0300
Subject: [PATCH] fix(menu): support context

---
 .changeset/menu-context.md   |  4 ++++
 elements/rh-menu/rh-menu.css | 19 ++++++++++++++++++-
 elements/rh-menu/rh-menu.ts  | 16 +++++++++++-----
 3 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/menu-context.md

diff --git a/.changeset/menu-context.md b/.changeset/menu-context.md
new file mode 100644
index 0000000000..53df8e393d
--- /dev/null
+++ b/.changeset/menu-context.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-menu>`: support color context
diff --git a/elements/rh-menu/rh-menu.css b/elements/rh-menu/rh-menu.css
index 2f9740c56e..f23666070b 100644
--- a/elements/rh-menu/rh-menu.css
+++ b/elements/rh-menu/rh-menu.css
@@ -7,4 +7,21 @@ slot {
   align-items: stretch;
   flex-direction: column;
   width: max-content;
-}
\ No newline at end of file
+}
+
+.dark::slotted(a) {
+  color: var(--rh-color-interactive-blue-lightest, #bee1f4) !important;
+  padding: 5px !important; /* WARNING: not a token value */
+}
+
+.dark::slotted(a:hover) {
+  color: var(--rh-color-interactive-blue-lighter, #73bcf7);
+}
+
+.dark::slotted(a:visited) {
+  color: var(--rh-color-interactive-purple-lighter, #a18fff) !important;
+}
+
+.dark::slotted(a:visited:hover) {
+  color: var(--rh-color-interactive-purple-lighter, #a18fff) !important;
+}
diff --git a/elements/rh-menu/rh-menu.ts b/elements/rh-menu/rh-menu.ts
index 7c41bd3f1f..c7a3b9673a 100644
--- a/elements/rh-menu/rh-menu.ts
+++ b/elements/rh-menu/rh-menu.ts
@@ -1,17 +1,20 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { classMap } from 'lit/directives/class-map.js';
+
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
-import { ComposedEvent } from '@patternfly/pfe-core';
+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 ComposedEvent {
+export class MenuToggleEvent extends Event {
   constructor(
     public open: boolean,
     public menu: HTMLElement
   ) {
-    super('toggle');
+    super('toggle', { bubbles: true });
   }
 }
 
@@ -23,6 +26,8 @@ export class MenuToggleEvent extends ComposedEvent {
 export class RhMenu extends LitElement {
   static readonly styles = [styles];
 
+  @colorContextConsumer() private on?: ColorTheme;
+
   #tabindex = new RovingTabindexController(this);
 
   get activeItem() {
@@ -37,8 +42,9 @@ export class RhMenu extends LitElement {
   }
 
   render() {
+    const { on = '' } = this;
     return html`
-      <slot part="menu"></slot>
+      <slot part="menu" class="${classMap({ [on]: !!on })}"></slot>
     `;
   }