Function BaseStyles

packages/react/src/BaseStyles.tsx:39–65

(props: BaseStylesProps)

export type BaseStylesProps = ComponentProps<typeof Base>

function BaseStyles(props: BaseStylesProps) {
  const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', ...rest} = props

  const {colorScheme, dayScheme, nightScheme} = useTheme()

  /**
   * We need to map valid primer/react color modes onto valid color modes for primer/primitives
   * valid color modes for primer/primitives: auto | light | dark
   * valid color modes for primer/primer: auto | day | night | light | dark
   */

  return (
    <Base
      {...rest}
      color={color}
      fontFamily={fontFamily}
      lineHeight={lineHeight}
      data-portal-root
      data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'}
      data-light-theme={dayScheme}
      data-dark-theme={nightScheme}
    >
      <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
      {children}
    </Base>
  )
}

export default BaseStyles