From f7433fa8b377a12997ed4e337ddb0ade77e2ed4d Mon Sep 17 00:00:00 2001
From: Preston Booth <preston@clerk.dev>
Date: Wed, 28 Oct 2026 10:24:13 -0600
Subject: [PATCH 1/2] fix(mosaic): use the neutral color for menus, close
 buttons and the You badge

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .changeset/mosaic-neutral-defaults.md                |  5 +++++
 packages/mosaic/src/components/card/card.tsx         |  1 +
 packages/mosaic/src/components/dialog/dialog.tsx     |  1 +
 packages/mosaic/src/components/item/item.styles.ts   | 12 +++++++++++-
 packages/mosaic/src/components/item/item.tsx         |  1 +
 packages/mosaic/src/components/menu/menu.tsx         |  1 +
 .../members-table-tab.view.tsx                       |  2 +-
 .../user-profile-profile-panel.styles.ts             |  3 ++-
 8 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/mosaic-neutral-defaults.md

diff --git a/.changeset/mosaic-neutral-defaults.md b/.changeset/mosaic-neutral-defaults.md
new file mode 100644
index 00000000000..3202997743c
--- /dev/null
+++ b/.changeset/mosaic-neutral-defaults.md
@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Ellipsis menus and the dialog and card close buttons use the neutral color instead of the brand color, and the "You" badge in the members table is neutral. Email and phone values in the user profile use the primary text color. An interactive row's icon darkens fully on hover, and an outlined interactive row firms up its border on hover.
diff --git a/packages/mosaic/src/components/card/card.tsx b/packages/mosaic/src/components/card/card.tsx
index 08ed713c237..631b12ab3c6 100644
--- a/packages/mosaic/src/components/card/card.tsx
+++ b/packages/mosaic/src/components/card/card.tsx
@@ -99,6 +99,7 @@ function HeaderCloseButton() {
       aria-label='Close'
       render={props => (
         <Button
+          color='neutral'
           variant='ghost'
           shape='circle'
           size='sm'
diff --git a/packages/mosaic/src/components/dialog/dialog.tsx b/packages/mosaic/src/components/dialog/dialog.tsx
index 32646f80cc6..9ef61a4566a 100644
--- a/packages/mosaic/src/components/dialog/dialog.tsx
+++ b/packages/mosaic/src/components/dialog/dialog.tsx
@@ -264,6 +264,7 @@ const CloseButton = React.forwardRef<HTMLButtonElement, DialogCloseButtonProps>(
         aria-label={ariaLabel}
         render={props => (
           <Button
+            color='neutral'
             variant='ghost'
             shape='circle'
             size='sm'
diff --git a/packages/mosaic/src/components/item/item.styles.ts b/packages/mosaic/src/components/item/item.styles.ts
index 899ecdfb531..337e00123f0 100644
--- a/packages/mosaic/src/components/item/item.styles.ts
+++ b/packages/mosaic/src/components/item/item.styles.ts
@@ -34,7 +34,7 @@ export const item = stylex.create({
       default: colorVars['--cl-color-foreground-secondary'],
       '@media (hover: hover)': {
         default: null,
-        ':hover:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-foreground'],
+        ':hover:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-neutral'],
       },
     },
     backgroundColor: {
@@ -63,6 +63,16 @@ export const item = stylex.create({
     borderWidth: '1px',
   },
 
+  interactiveOutline: {
+    borderColor: {
+      default: null,
+      '@media (hover: hover)': {
+        default: null,
+        ':hover:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-border'],
+      },
+    },
+  },
+
   xs: {
     gap: space['1.5'],
     height: space['8'],
diff --git a/packages/mosaic/src/components/item/item.tsx b/packages/mosaic/src/components/item/item.tsx
index 2229d2889e0..f93abe92e5e 100644
--- a/packages/mosaic/src/components/item/item.tsx
+++ b/packages/mosaic/src/components/item/item.tsx
@@ -80,6 +80,7 @@ const Root = React.forwardRef<HTMLDivElement, ItemProps>(function MosaicItem(
           slots.item[size],
           variant === 'outline' && slots.item.outline,
           interactive && slots.item.interactive,
+          interactive && variant === 'outline' && slots.item.interactiveOutline,
           xstyle,
         ),
         rest,
diff --git a/packages/mosaic/src/components/menu/menu.tsx b/packages/mosaic/src/components/menu/menu.tsx
index 9fa8081b4a0..657720a2146 100644
--- a/packages/mosaic/src/components/menu/menu.tsx
+++ b/packages/mosaic/src/components/menu/menu.tsx
@@ -45,6 +45,7 @@ export const MenuTrigger = React.forwardRef<HTMLButtonElement, MenuTriggerProps>
     render ??
     (props => (
       <Button
+        color='neutral'
         variant='ghost'
         size='sm'
         shape={children ? 'default' : 'square'}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-members-panel/members-table-tab.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-members-panel/members-table-tab.view.tsx
index b03344c1354..2f178ba598f 100644
--- a/packages/mosaic/src/features/organization-profile/organization-profile-members-panel/members-table-tab.view.tsx
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-members-panel/members-table-tab.view.tsx
@@ -281,7 +281,7 @@ function MemberRow({
             <Entity.Label>
               {member.name}
               {member.isCurrentUser ? (
-                <Badge>{m.you}</Badge>
+                <Badge color='neutral'>{m.you}</Badge>
               ) : member.isDeprovisioned ? (
                 <Badge>{m.deprovisioned}</Badge>
               ) : member.isBanned ? (
diff --git a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
index 1fcba8de2c0..87e325ce0ca 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
@@ -1,11 +1,12 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { space } from '../../tokens.stylex';
+import { colorVars, space } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   contactValue: {
     gap: space['2'],
     alignItems: 'center',
+    color: colorVars['--cl-color-foreground'],
     display: 'flex',
     minWidth: 0,
   },

From e95ac4fd2668fcbdbf33c3eb9b509ed9668c16f0 Mon Sep 17 00:00:00 2001
From: Preston Booth <preston@clerk.dev>
Date: Thu, 29 Oct 2026 15:55:49 -0600
Subject: [PATCH 2/2] fix(mosaic): use the neutral color for field labels,
 cancel buttons and reverification links

Field labels, the Cancel buttons in the confirmation, delete and rename-passkey dialogs, and the reverification Back button and resend and help links no longer take the brand color. Disabled inputs and tag inputs are tinted with the neutral color.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .changeset/mosaic-neutral-defaults.md                           | 2 +-
 packages/mosaic/src/blocks/confirmation/confirmation.tsx        | 1 +
 packages/mosaic/src/blocks/destructive/destructive.tsx          | 1 +
 packages/mosaic/src/components/field/field.styles.ts            | 2 +-
 packages/mosaic/src/components/tag-input/tag-input.styles.ts    | 2 +-
 .../reverification/steps/reverification-method-picker.tsx       | 2 ++
 .../src/features/reverification/steps/reverification-otp.tsx    | 1 +
 .../user-profile-rename-passkey.dialog.tsx                      | 1 +
 packages/mosaic/src/styles/input.styles.ts                      | 2 +-
 9 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/.changeset/mosaic-neutral-defaults.md b/.changeset/mosaic-neutral-defaults.md
index 3202997743c..bc21e81de4e 100644
--- a/.changeset/mosaic-neutral-defaults.md
+++ b/.changeset/mosaic-neutral-defaults.md
@@ -2,4 +2,4 @@
 '@clerk/mosaic': patch
 ---
 
-Ellipsis menus and the dialog and card close buttons use the neutral color instead of the brand color, and the "You" badge in the members table is neutral. Email and phone values in the user profile use the primary text color. An interactive row's icon darkens fully on hover, and an outlined interactive row firms up its border on hover.
+Ellipsis menus, the dialog and card close buttons, the Cancel buttons in the confirmation, delete and rename dialogs, and the reverification Back button and resend and help links use the neutral color instead of the brand color, and the "You" badge in the members table is neutral. Field labels use the neutral text color, and disabled inputs and tag inputs are tinted with the neutral color. Email and phone values in the user profile use the primary text color. An interactive row's icon darkens fully on hover, and an outlined interactive row firms up its border on hover.
diff --git a/packages/mosaic/src/blocks/confirmation/confirmation.tsx b/packages/mosaic/src/blocks/confirmation/confirmation.tsx
index 02dd5b79491..b7e91ce72de 100644
--- a/packages/mosaic/src/blocks/confirmation/confirmation.tsx
+++ b/packages/mosaic/src/blocks/confirmation/confirmation.tsx
@@ -55,6 +55,7 @@ export function Confirmation<Payload = void>({ color = 'negative', ...props }: C
             <Dialog.Close
               render={
                 <Button
+                  color='neutral'
                   variant='outline'
                   fullWidth
                 >
diff --git a/packages/mosaic/src/blocks/destructive/destructive.tsx b/packages/mosaic/src/blocks/destructive/destructive.tsx
index 494a2d96fad..057bb973466 100644
--- a/packages/mosaic/src/blocks/destructive/destructive.tsx
+++ b/packages/mosaic/src/blocks/destructive/destructive.tsx
@@ -86,6 +86,7 @@ function DestructiveStep<Payload>({
         <Dialog.Close
           render={
             <Button
+              color='neutral'
               variant='outline'
               fullWidth
             >
diff --git a/packages/mosaic/src/components/field/field.styles.ts b/packages/mosaic/src/components/field/field.styles.ts
index 83d2023ea7e..088766a8c43 100644
--- a/packages/mosaic/src/components/field/field.styles.ts
+++ b/packages/mosaic/src/components/field/field.styles.ts
@@ -22,7 +22,7 @@ export const styles = stylex.create({
     minWidth: 0,
   },
   label: {
-    color: colorVars['--cl-color-brand'],
+    color: colorVars['--cl-color-foreground'],
     fontWeight: fontWeightVars['--cl-font-medium'],
   },
   message: {
diff --git a/packages/mosaic/src/components/tag-input/tag-input.styles.ts b/packages/mosaic/src/components/tag-input/tag-input.styles.ts
index 14414358c3c..203b3394dd2 100644
--- a/packages/mosaic/src/components/tag-input/tag-input.styles.ts
+++ b/packages/mosaic/src/components/tag-input/tag-input.styles.ts
@@ -21,7 +21,7 @@ export const styles = stylex.create({
   },
   disabled: {
     borderColor: colorVars['--cl-color-border'],
-    backgroundColor: `color-mix(in oklab, ${colorVars['--cl-color-brand']} 5%, transparent)`,
+    backgroundColor: `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 5%, transparent)`,
     cursor: 'not-allowed',
   },
   list: {
diff --git a/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx b/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx
index d45b3440885..97076446acc 100644
--- a/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx
+++ b/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx
@@ -106,6 +106,7 @@ export function ReverificationMethodPicker({
           {onBack ? (
             <Button
               type='button'
+              color='neutral'
               variant='ghost'
               disabled={Boolean(pendingMethodId)}
               onClick={onBack}
@@ -122,6 +123,7 @@ export function ReverificationMethodPicker({
           <Button
             type='button'
             size='sm'
+            color='neutral'
             variant='link'
             disabled={Boolean(pendingMethodId)}
             onClick={() => {
diff --git a/packages/mosaic/src/features/reverification/steps/reverification-otp.tsx b/packages/mosaic/src/features/reverification/steps/reverification-otp.tsx
index 381fbcdff0c..ec7d1c5b124 100644
--- a/packages/mosaic/src/features/reverification/steps/reverification-otp.tsx
+++ b/packages/mosaic/src/features/reverification/steps/reverification-otp.tsx
@@ -102,6 +102,7 @@ export function ReverificationOTP({
                 <Button
                   type='button'
                   size='sm'
+                  color='neutral'
                   variant='link'
                   disabled={resend.disabled || isPending}
                   onClick={resend.onClick}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-rename-passkey.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-rename-passkey.dialog.tsx
index 1914ffee571..2c77df838e5 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-rename-passkey.dialog.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-rename-passkey.dialog.tsx
@@ -80,6 +80,7 @@ export function UserProfileRenamePasskeyDialog({
             <Dialog.Close
               render={
                 <Button
+                  color='neutral'
                   variant='outline'
                   fullWidth
                   disabled={form.isSubmitting}
diff --git a/packages/mosaic/src/styles/input.styles.ts b/packages/mosaic/src/styles/input.styles.ts
index 39d27821218..3a499676c4d 100644
--- a/packages/mosaic/src/styles/input.styles.ts
+++ b/packages/mosaic/src/styles/input.styles.ts
@@ -7,7 +7,7 @@ import { colorVars, durationVars, easingVars } from '../tokens.stylex';
 const hoverBorderColor = 'light-dark(#bebebe, #525252)';
 const focusShadow = '0 0 0 3px light-dark(rgb(23 23 23 / 8%), rgb(255 255 255 / 8%))';
 const invalidFocusShadow = `0 0 0 3px ${colorVars['--cl-color-negative-alpha-300']}`;
-const disabledBackgroundColor = `color-mix(in oklab, ${colorVars['--cl-color-brand']} 5%, transparent)`;
+const disabledBackgroundColor = `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 5%, transparent)`;
 
 export const inputStyles = stylex.create({
   base: {