From e432dabefea736a6b2ed487f8c4c2c88c7ce6417 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 16 Oct 2026 14:38:08 -0400
Subject: [PATCH 1/2] fix(mosaic): match menu item idle and hover colors to
 UserButton rows

---
 .changeset/mosaic-menu-item-color.md              |  5 +++++
 .../mosaic/src/components/menu/menu.styles.ts     | 15 +++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 .changeset/mosaic-menu-item-color.md

diff --git a/.changeset/mosaic-menu-item-color.md b/.changeset/mosaic-menu-item-color.md
new file mode 100644
index 00000000000..7f749129636
--- /dev/null
+++ b/.changeset/mosaic-menu-item-color.md
@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Menu items now use the secondary foreground color at rest and the primary foreground color on hover, matching the `UserButton` menu rows.
diff --git a/packages/mosaic/src/components/menu/menu.styles.ts b/packages/mosaic/src/components/menu/menu.styles.ts
index fe23ca7bd38..3ee44ff8df6 100644
--- a/packages/mosaic/src/components/menu/menu.styles.ts
+++ b/packages/mosaic/src/components/menu/menu.styles.ts
@@ -82,6 +82,13 @@ export const viewport = stylex.create({
 
 export const item = stylex.create({
   base: {
+    '--_cl-icon-color': {
+      default: colorVars['--cl-color-foreground-secondary'],
+      ':is([data-active])': colorVars['--cl-color-foreground'],
+      '@media (hover: hover)': {
+        ':hover': colorVars['--cl-color-foreground'],
+      },
+    },
     borderRadius: '0.375rem',
     borderStyle: 'none',
     gap: space['0.5'],
@@ -95,6 +102,13 @@ export const item = stylex.create({
         ':hover': colorVars['--cl-color-neutral-alpha-100'],
       },
     },
+    color: {
+      default: colorVars['--cl-color-foreground-secondary'],
+      ':is([data-active])': colorVars['--cl-color-foreground'],
+      '@media (hover: hover)': {
+        ':hover': colorVars['--cl-color-foreground'],
+      },
+    },
     cursor: { default: 'pointer', ':is([data-disabled])': 'not-allowed' },
     display: 'flex',
     // The viewport is a height-capped flex column: without this the rows squash to fit the cap
@@ -119,6 +133,7 @@ export const item = stylex.create({
   },
 
   negative: {
+    '--_cl-icon-color': colorVars['--cl-color-negative'],
     backgroundColor: {
       default: 'transparent',
       ':is([data-active])': colorVars['--cl-color-negative-alpha-200'],

From 7a29af3ff26bf813f07d216e7ac4ad5176b2f377 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 16 Oct 2026 14:40:20 -0400
Subject: [PATCH 2/2] fix(mosaic): let menu item icons inherit currentColor

---
 packages/mosaic/src/components/menu/menu.styles.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/mosaic/src/components/menu/menu.styles.ts b/packages/mosaic/src/components/menu/menu.styles.ts
index 3ee44ff8df6..11ec39b5c9a 100644
--- a/packages/mosaic/src/components/menu/menu.styles.ts
+++ b/packages/mosaic/src/components/menu/menu.styles.ts
@@ -82,13 +82,6 @@ export const viewport = stylex.create({
 
 export const item = stylex.create({
   base: {
-    '--_cl-icon-color': {
-      default: colorVars['--cl-color-foreground-secondary'],
-      ':is([data-active])': colorVars['--cl-color-foreground'],
-      '@media (hover: hover)': {
-        ':hover': colorVars['--cl-color-foreground'],
-      },
-    },
     borderRadius: '0.375rem',
     borderStyle: 'none',
     gap: space['0.5'],
@@ -133,7 +126,6 @@ export const item = stylex.create({
   },
 
   negative: {
-    '--_cl-icon-color': colorVars['--cl-color-negative'],
     backgroundColor: {
       default: 'transparent',
       ':is([data-active])': colorVars['--cl-color-negative-alpha-200'],