fix(mosaic): use the neutral color for menus, close buttons and the You badge (#10494)

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>

Author: prestonwebdev

.changeset/mosaic-neutral-defaults.md

@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+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.

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
                 >

packages/mosaic/src/blocks/destructive/destructive.tsx

@@ -86,6 +86,7 @@ function DestructiveStep<Payload>({
         <Dialog.Close
           render={
             <Button
+              color='neutral'
               variant='outline'
               fullWidth
             >

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'

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'

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: {

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'],

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,

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'}

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: {