Text Styles missing when using themes

[cgatian]

I've created two themes primary and secondary, the tokens for both those themes seem to be getting merged to produce valid TypeScript variables to use in recipes. However, textStyles doesn't seem to be available unless it's declared on the default theme. I'm trying to avoid producing a default theme and using static themes.

The workaround seems to be adding textStyles to the theme, but I'm wondering if I'm doing something wrong.

export const textStyles = defineTextStyles({
  body: {
    description: 'The body text style - used in paragraphs',
    value: {
      fontFamily: 'Inter',
      fontWeight: '500',
      fontSize: '16px',
      lineHeight: '24px',
      letterSpacing: '0',
      textDecoration: 'None',
      textTransform: 'None'
    }
  }
})

const demoPreset = definePreset({
  name: 'demo',
  theme: {},
  themes: {
    primary: {
      tokens: {
        colors: {
          blue: {
            value: 'blue'
          }
        }
      },
      textStyles
    },
    secondary: {
      tokens: {
        colors: {
          blue: {
            value: 'blue'
          }
        }
      },
      textStyles
    },
  },
  staticCss: {
    themes: ['primary', 'secondary']
  }
});

 <div
        className={css({
          textStyle: 'body' // ❌ Error
        })}
      >

https://play.panda-css.com/bhoffmZca0

[jimmymorris]

@cgatian were you able to solve this issue or find a work around?

[jimmymorris]

I also opened a bug ticket: #3228

[cgatian]

I mentioned my workaround in the initial post.

[jimmymorris]

Apologies, missed that part. This seems to be the only work around I've been able to use different textStyles with different themes. It required adding a "copy cat" condition for the data-panda-theme attribute in the playground. The need for creating the copy cat condition may not be needed when using the styled-system

https://play.panda-css.com/jnjPG5u4D3