Get a token inside framer-motion variants

[vhorzinek]

Formerly I used styled-components in combination with framer-motion and now migrated to panda.

With styled-components I could use the useTheme hook to get the theme and pass my theme colors prop to my variants for my framer path element.

const theme = useTheme();
  return (
    <svg className={svgStyles} width='23' height='23' viewBox='0 0 23 23'>
      <Path
        variants={{
          closed: { d: 'M 3 2.5 L 20 2.5', stroke: theme.colors.red },
          open: { d: 'M 3 16.5 L 17 2.5', stroke: '#fff' },
        }}
      />
      <Path
        d='M 2.5 9.423 L 12.5 9.423'
        variants={{
          closed: { opacity: 1, stroke: theme.colors.red },
          open: { opacity: 0, stroke: '#fff' },
        }}
        transition={{ duration: 0.1 }}
      />
      <Path
        variants={{
          closed: { d: 'M 2 16.346 L 5 16.346', stroke: theme.colors.red },
          open: { d: 'M 3 2.5 L 17 16.346', stroke: '#fff' },
        }}
      />
    </svg>
  );

I checked some panda docs but couldn't find a page describing this need, I probably overlooked it, but is there a similiar way to pass my colors from my panda-css to the framer variants object, therefore my question if someone had a similar problem before and found a solution? My first thought was to export a theme object and pass that into my panda config and also import the same object inside my framer component and use it from there, but that got me wondering if there was a better solution out of the box?

Thanks in advance for any input!

[vhorzinek]

Nevermind, I just now learned of the token() function, closing this.