Theme-ui: Variants working differently, __themeKey not exported

[RobIsHere]

Variants are working differently in different cases

import { css } from '@theme-ui/css';
css({ backgroundColor: 'textLink', fontFamily: 'body', height: 100, width: 100, variant: 'card.box' })

// Here the variant has different name, you need theme key (that is btw. missing in typescript definitions, so you can't build your own components in ts that use box like you do with buttons etc)

But not only the naming is different. At the upper case variant is overwriting e.g. backgroundColor because its defined later.
At box a custom css would never be overwritten by the variant.

[hasparus]

AFAIK __themeKey is not public API.

[RobIsHere]

It's been a quite confusing journey for me to really get to know system-ui with variants. I don't know what to do about it, but maybe more documentation could help. I had the impression variants is documented on 3 Pages but nowhere really into depth. The way to use variants without the theme-ui components in theme-ui/css was missing.

The Problem with the privacy of __themeKey is that the whole system-ui/components package becomes useless in typescript because you cannot reuse and customize the components there. It simply is absurd to have to use the same theme keys on any derived components:

import React from 'react'
import Box from './Box'

export const MySuperFancyButton = React.forwardRef((props, ref) => (
  <Box
    ref={ref}
    as="button"
    variant="primary"
    {...props}
    __themeKey="mysuperfancybuttons"              /// <<< In typescript this doesn't compile!!! Error!
    __css={{
      appearance: 'none',
      display: 'inline-block',
      textAlign: 'center',
      lineHeight: 'inherit',
      textDecoration: 'none',
      fontSize: 'inherit',
      px: 3,
      py: 2,
      color: 'white',
      bg: 'primary',
      border: 0,
      borderRadius: 4,
    }}
  />
))

[atanasster]

I will add my vote that keeping __themeKey internal is making it harder than needed to create custom theme-ui components.
Also when converting theme-ui/componnets to typescript and using its own api - this will not work either.

[deckchairlabs]

The components package could probably benefit from a useVariant hook.

import { useVariant, Button, PropsWithVariant } from 'theme-ui'

type AwesomeButtonProps = {
  somethingAwesome?: string
}

export const AwesomeButton = ({ variant, ...props }: PropsWithVariant<AwesomeButtonProps>) => {
  variant = useVariant('buttons', variant || 'awesome')
  return <Button sx={{...variant}} {...props} />
}

Ideally the internal API should be removed completely __css, __themeKey and just resort to using the hook for the base styles and any variants required.