Component level themes and container query support

Thoughts on supporting an API something like:

/** @jsx jsx */
import { jsx, useTheme } from 'theme-ui'

function SomeText (props) {
  const defaultTheme = {
    breakpoints: ['40em', '56em'],
    fontWeight: 'bold',
    fontSize: [ 4, 3 ],
    color: 'primary'
    backgroundColor: 'lightgray',
    margin: [ 1, 3 ]
  }
   // this would allow setting a component theme via a theme prop or via context
  const theme = useTheme(defaultTheme, props.theme)
  return (
    <div
      css={{
        fontWeight: theme.fontWeight,
        fontSize: theme.fontSize,
        color: theme.color,
        backgroundColor: theme.backgroundColor,
        margin: theme.margin
      }}
      {...props}
    />
  )
}

Where the breakpoint theme values are computed using a container query using the component root element instead of a media query? This would better support themes for reusable components that adjust based on container size. FWIW ResizeObserver has pretty decent support now.

[jxnblk]

Sorry for the slow response! Using ResizeObserver for “responsive” values is an interesting idea! I think to keep inline with the current API, the responsive values should probably be defined at the component level rather than the theme level though. If you’d like to add an optional package to support something like this, feel free to open a PR

[jxnblk]

@alexpermyakov thanks for the PR! I don’t think the Box component’s implementation should change at all for what I mentioned above. Instead, I’d suggest a separate/optional package that is a theme-aware resize observer hook. I’d suggest starting with either a README or failing unit tests to document the API