Theme redirect

[atanasster]

Great to see the discussions added, so first question :)

Is it possible to redirect in the theme definitions for example, I wanted to do something like:

theme: Theme = {
  text: {
    title: 'styles.h1`
  },
...

and use it

<Heading
    as="h1"
    variant="title"
/>

Thanks for the great work on system-ui/theme-ui, really enjoying it.

[hasparus]

AFAIK this exact syntax is not supported, but you can always move styles to a separate variable and write the same thing without quotes:

import { Theme, ThemeStyles } from '@theme-ui/css';

const styles: ThemeStyles = {
  h1: { color: "hotpink" }
}

const theme: Theme = {
  text: {
    title: styles.h1
  }
}

[atanasster]

Cool, thanks