diff --git a/.changeset/mosaic-switcher-row-button-reset.md b/.changeset/mosaic-switcher-row-button-reset.md new file mode 100644 index 00000000000..30c74ce88f3 --- /dev/null +++ b/.changeset/mosaic-switcher-row-button-reset.md @@ -0,0 +1,5 @@ +--- +'@clerk/mosaic': patch +--- + +Fix menu rows in `` and `` showing the browser's default button border and background on pages without a CSS reset. diff --git a/packages/mosaic/src/features/switcher/switcher-item.styles.ts b/packages/mosaic/src/features/switcher/switcher-item.styles.ts index 519519dcc5b..214181015e3 100644 --- a/packages/mosaic/src/features/switcher/switcher-item.styles.ts +++ b/packages/mosaic/src/features/switcher/switcher-item.styles.ts @@ -38,8 +38,10 @@ export const styles = stylex.create({ ':hover:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-foreground'], }, }, + borderStyle: 'none', + appearance: 'none', backgroundColor: { - default: null, + default: 'transparent', ':active:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-neutral-alpha-200'], '@media (hover: hover)': { ':hover:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-neutral-alpha-100'],