fix(ui): Give each Mosaic component a minimal CSS reset

.changeset/mosaic-component-reset.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/mosaic/components/avatar/avatar.styles.ts

@@ -8,10 +8,8 @@ export const styles = stylex.create({
     overflow: 'hidden',
     alignItems: 'center',
     aspectRatio: '1 / 1',
-    boxSizing: 'border-box',
     display: 'inline-flex',
     flexShrink: 0,
-    fontFamily: 'inherit',
     fontWeight: fontWeightVars['--cl-font-medium'],
     justifyContent: 'center',
     lineHeight: 1,
@@ -36,7 +34,6 @@ export const styles = stylex.create({
     backgroundColor: `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 8%, transparent)`,
     color: colorVars['--cl-color-neutral'],
     display: 'flex',
-    fontSize: 'inherit',
     justifyContent: 'center',
     height: '100%',
     width: '100%',

packages/ui/src/mosaic/components/avatar/avatar.tsx

@@ -2,6 +2,7 @@ import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
 import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../reset.styles';
 import { shapes, sizes, styles } from './avatar.styles';
 
 type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
@@ -39,7 +40,7 @@ const AvatarRoot = React.forwardRef<HTMLSpanElement, AvatarProps>(function Mosai
         ref={ref}
         {...mergeStyleProps(
           themeProps('avatar', { shape, size }),
-          stylex.props(styles.base, shapes[shape], sizes[size]),
+          stylex.props(reset.base, styles.base, shapes[shape], sizes[size]),
           className,
           style,
         )}
@@ -87,7 +88,7 @@ const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(functio
       ref={ref}
       src={src}
       alt={alt}
-      {...mergeStyleProps(themeProps('avatar-image'), stylex.props(styles.image), className, style)}
+      {...mergeStyleProps(themeProps('avatar-image'), stylex.props(reset.base, styles.image), className, style)}
       {...rest}
     />
   );
@@ -120,7 +121,7 @@ const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(fu
   return (
     <span
       ref={ref}
-      {...mergeStyleProps(themeProps('avatar-fallback'), stylex.props(styles.fallback), className, style)}
+      {...mergeStyleProps(themeProps('avatar-fallback'), stylex.props(reset.base, styles.fallback), className, style)}
       {...rest}
     >
       {children}

packages/ui/src/mosaic/components/badge/badge.styles.ts

@@ -10,9 +10,7 @@ export const styles = stylex.create({
     gap: space['1'],
     paddingInline: space['2'],
     alignItems: 'center',
-    boxSizing: 'border-box',
     display: 'inline-flex',
-    fontFamily: 'inherit',
     fontSize: typeScaleVars['--cl-text-xs-size'],
     fontWeight: fontWeightVars['--cl-font-medium'],
     justifyContent: 'center',

packages/ui/src/mosaic/components/badge/badge.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../reset.styles';
 import { colors, styles } from './badge.styles';
 
 export type BadgeProps = MosaicComponentProps<'span'> & {
@@ -37,7 +38,12 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Mosa
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('badge', { color }), stylex.props(styles.base, colors[color]), className, style),
+      ...mergeStyleProps(
+        themeProps('badge', { color }),
+        stylex.props(reset.base, styles.base, colors[color]),
+        className,
+        style,
+      ),
       ...rest,
     },
   });

packages/ui/src/mosaic/components/button/button.styles.ts

@@ -84,12 +84,10 @@ export const styles = stylex.create({
     alignItems: 'center',
     // Strips UA control styling so what's below is the whole appearance, not an override.
     appearance: 'none',
-    boxSizing: 'border-box',
     cursor: 'pointer',
     display: 'inline-flex',
     // A button is sized by its own axis, not by whatever row it lands in.
     flexShrink: 0,
-    fontFamily: 'inherit',
     fontWeight: fontWeightVars['--cl-font-medium'],
     justifyContent: 'center',
     outlineOffset: '2px',

packages/ui/src/mosaic/components/button/button.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { MosaicElementProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../reset.styles';
 import { truncationStyles } from '../typography.styles';
 import { iconSizes, sizes, styles, variants } from './button.styles';
 
@@ -59,7 +60,7 @@ function withTruncatableLabel(children: React.ReactNode): React.ReactNode {
     result.push(
       <span
         key={`label-${result.length}`}
-        {...stylex.props(truncationStyles.singleLine, styles.label)}
+        {...stylex.props(reset.base, truncationStyles.singleLine, styles.label)}
       >
         {run}
       </span>,
@@ -108,6 +109,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
       {...mergeStyleProps(
         themeProps('button', { color, variant, size, shape, fullWidth, disabled }),
         stylex.props(
+          reset.base,
           styles.base,
           sizes[size],
           variants[`${variant}-${color}`],

packages/ui/src/mosaic/components/card/card.styles.ts

@@ -27,7 +27,6 @@ export const styles = stylex.create({
     paddingBlock: space['4'],
     paddingInline: space['6'],
     alignItems: 'center',
-    boxSizing: 'border-box',
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'space-between',

packages/ui/src/mosaic/components/card/card.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../reset.styles';
 import { TextContext } from '../text';
 import { elevations, headerAlignments, styles } from './card.styles';
 
@@ -37,7 +38,7 @@ const Root = React.forwardRef<HTMLDivElement, CardProps>(function CardRoot(
     props: {
       ...mergeStyleProps(
         themeProps('card-root', { alignment, elevation }),
-        stylex.props(styles.root, elevations[elevation]),
+        stylex.props(reset.base, styles.root, elevations[elevation]),
         className,
         style,
       ),
@@ -60,7 +61,7 @@ const Header = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fun
     props: {
       ...mergeStyleProps(
         themeProps('card-header', { alignment }),
-        stylex.props(styles.header, headerAlignments[alignment]),
+        stylex.props(reset.base, styles.header, headerAlignments[alignment]),
         className,
         style,
       ),
@@ -80,7 +81,7 @@ const Content = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fu
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('card-content'), stylex.props(styles.content), className, style),
+      ...mergeStyleProps(themeProps('card-content'), stylex.props(reset.base, styles.content), className, style),
       ...rest,
     },
   });
@@ -96,7 +97,12 @@ const Footer = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fun
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('card-footer', { elevation }), stylex.props(styles.footer), className, style),
+      ...mergeStyleProps(
+        themeProps('card-footer', { elevation }),
+        stylex.props(reset.base, styles.footer),
+        className,
+        style,
+      ),
       ...rest,
     },
   });

packages/ui/src/mosaic/components/heading/heading.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { useContextProps } from '../../utils/context';
+import { reset } from '../reset.styles';
 import type { TypographyColor, TypographySize } from '../typography.styles';
 import { colors, sizes } from '../typography.styles';
 import { styles } from './heading.styles';
@@ -33,7 +34,7 @@ export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(functi
   const props = {
     ...mergeStyleProps(
       themeProps('heading', { size, color }),
-      stylex.props(styles.base, sizes[size], colors[color]),
+      stylex.props(reset.base, styles.base, sizes[size], colors[color]),
       className,
       style,
     ),

packages/ui/src/mosaic/components/icon/icon.tsx

@@ -5,6 +5,7 @@ import { useMosaicIcons } from '../../appearance';
 import type { IconName } from '../../icons/registry';
 import { iconRegistry } from '../../icons/registry';
 import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../reset.styles';
 import { iconScope } from './icon.markers.stylex';
 import { sizes, styles } from './icon.styles';
 
@@ -33,7 +34,7 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(function MosaicIc
   // child by what it is: `:has([data-icon='inline-end'])` can't match some other placed descendant.
   const props = mergeStyleProps(
     themeProps('icon', { size, icon: placement }),
-    stylex.props(styles.base, sizes[size], iconScope),
+    stylex.props(reset.base, styles.base, sizes[size], iconScope),
     className,
     style,
   );

packages/ui/src/mosaic/components/item/item.styles.ts

@@ -5,19 +5,15 @@ import { itemScope } from './item.markers.stylex';
 
 export const item = stylex.create({
   base: {
-    margin: 0,
-    padding: 0,
     borderRadius: radiusVars['--cl-radius-element'],
     outline: {
       default: 'none',
       ':focus-visible': `2px solid ${colorVars['--cl-color-primary']}`,
     },
     paddingInline: space['2'],
     alignItems: 'center',
-    boxSizing: 'border-box',
     color: colorVars['--cl-color-card-foreground'],
     display: 'flex',
-    fontFamily: 'inherit',
     fontSize: typeScaleVars['--cl-text-sm-size'],
     lineHeight: typeScaleVars['--cl-text-sm-leading'],
     outlineOffset: '2px',

packages/ui/src/mosaic/components/item/item.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../reset.styles';
 import { truncationStyles } from '../typography.styles';
 import { itemScope } from './item.markers.stylex';
 import * as slots from './item.styles';
@@ -50,7 +51,7 @@ const Root = React.forwardRef<HTMLDivElement, ItemProps>(function MosaicItem(
     props: {
       ...mergeStyleProps(
         themeProps('item', { interactive, size }),
-        stylex.props(itemScope, slots.item.base, slots.item[size], interactive && slots.item.interactive),
+        stylex.props(reset.base, itemScope, slots.item.base, slots.item[size], interactive && slots.item.interactive),
         className,
         style,
       ),
@@ -78,7 +79,7 @@ const Media = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(func
     props: {
       ...mergeStyleProps(
         themeProps('item-media', { size }),
-        stylex.props(slots.media.base, slots.media[size]),
+        stylex.props(reset.base, slots.media.base, slots.media[size]),
         className,
         style,
       ),
@@ -97,7 +98,7 @@ const Content = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fu
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('item-content'), stylex.props(slots.content.base), className, style),
+      ...mergeStyleProps(themeProps('item-content'), stylex.props(reset.base, slots.content.base), className, style),
       ...rest,
     },
   });
@@ -115,7 +116,7 @@ const Title = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(func
     props: {
       ...mergeStyleProps(
         themeProps('item-title'),
-        stylex.props(slots.title.base, truncationStyles.singleLine),
+        stylex.props(reset.base, slots.title.base, truncationStyles.singleLine),
         className,
         style,
       ),
@@ -136,7 +137,7 @@ const Description = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>
     props: {
       ...mergeStyleProps(
         themeProps('item-description'),
-        stylex.props(slots.description.base, truncationStyles.singleLine),
+        stylex.props(reset.base, slots.description.base, truncationStyles.singleLine),
         className,
         style,
       ),
@@ -161,7 +162,7 @@ const Label = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(func
     props: {
       ...mergeStyleProps(
         themeProps('item-label'),
-        stylex.props(slots.label.base, truncationStyles.singleLine),
+        stylex.props(reset.base, slots.label.base, truncationStyles.singleLine),
         className,
         style,
       ),
@@ -180,7 +181,7 @@ const Actions = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fu
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('item-actions'), stylex.props(slots.actions.base), className, style),
+      ...mergeStyleProps(themeProps('item-actions'), stylex.props(reset.base, slots.actions.base), className, style),
       ...rest,
     },
   });
@@ -196,7 +197,7 @@ const Group = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(func
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('item-group'), stylex.props(slots.group.base), className, style),
+      ...mergeStyleProps(themeProps('item-group'), stylex.props(reset.base, slots.group.base), className, style),
       ...rest,
     },
   });
@@ -212,7 +213,12 @@ const Separator = React.forwardRef<HTMLHRElement, MosaicComponentProps<'hr'>>(fu
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('item-separator'), stylex.props(slots.separator.base), className, style),
+      ...mergeStyleProps(
+        themeProps('item-separator'),
+        stylex.props(reset.base, slots.separator.base),
+        className,
+        style,
+      ),
       ...rest,
     },
   });

packages/ui/src/mosaic/components/menu/menu.styles.ts

@@ -20,7 +20,6 @@ export const styles = stylex.create({
     boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
                 0 24px 24px -10px oklch(0.2046 0 0 / 4%),
                 0 0 0 1px oklch(0.2046 0 0 / 4%)`,
-    boxSizing: 'border-box',
     color: colorVars['--cl-color-card-foreground'],
     display: 'flex',
     flexDirection: 'column',
@@ -63,11 +62,8 @@ export const styles = stylex.create({
         ':hover': `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 4%, transparent)`,
       },
     },
-    boxSizing: 'border-box',
-    color: 'inherit',
     cursor: { default: 'pointer', ':is([data-disabled])': 'not-allowed' },
     display: 'flex',
-    fontFamily: 'inherit',
     fontSize: typeScaleVars['--cl-text-sm-size'],
     fontWeight: fontWeightVars['--cl-font-medium'],
     lineHeight: typeScaleVars['--cl-text-sm-leading'],

packages/ui/src/mosaic/components/menu/menu.tsx

@@ -13,6 +13,7 @@ import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { Button } from '../button';
 import { Icon } from '../icon';
+import { reset } from '../reset.styles';
 import { styles } from './menu.styles';
 
 export type { MenuProps, MenuSeparatorProps };
@@ -62,10 +63,12 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
 ) {
   return (
     <Primitive.Portal root={portalRoot}>
-      <Primitive.Positioner {...mergeStyleProps(themeProps('menu-positioner'), stylex.props(styles.positioner))}>
+      <Primitive.Positioner
+        {...mergeStyleProps(themeProps('menu-positioner'), stylex.props(reset.base, styles.positioner))}
+      >
         <Primitive.Popup
           ref={ref}
-          {...mergeStyleProps(themeProps('menu-popup'), stylex.props(styles.popup), className, style)}
+          {...mergeStyleProps(themeProps('menu-popup'), stylex.props(reset.base, styles.popup), className, style)}
           {...rest}
         >
           {children}
@@ -91,7 +94,7 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(funct
       label={label}
       {...mergeStyleProps(
         themeProps('menu-item', { color }),
-        stylex.props(styles.item, color === 'negative' && styles.itemNegative),
+        stylex.props(reset.base, styles.item, color === 'negative' && styles.itemNegative),
         className,
         style,
       )}
@@ -106,7 +109,7 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(funct
 export function MenuSeparator({ className, style, ...rest }: MenuSeparatorProps): React.ReactElement {
   return (
     <Primitive.Separator
-      {...mergeStyleProps(themeProps('menu-separator'), stylex.props(styles.separator), className, style)}
+      {...mergeStyleProps(themeProps('menu-separator'), stylex.props(reset.base, styles.separator), className, style)}
       {...rest}
     />
   );