Is there a way to merge CSS in template literal styles?

[pharma-bros-lucas]

Hi

Is there a way to merge css into code written in template literal style?

I need help.

styled

const TriggerAnchor = styled.a`
  display: flex;
  align-items: center;
  gap: 4px;

  
  color: var(--colors-neutral-neutral8) !important;

  &.is-active {
    color: var(--colors-pink-pink500) !important;
  }
`

css

css`
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
    `

merge example

const SignDividerContainer = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  ${({ theme }) => theme.exampl.typography.body.r16};
`

[anubra266]

@pharma-bros-lucas Not totally sure what you're looking for but maybe this helps

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

[pharma-bros-lucas]

@anubra266

Thanks for your answer.
The example you provided is correct.
But can I use the following syntax as a design token?

  /* Use textstyles (can be defined in config) */
  textStyle: typography.body.r16;
  
  /* Is this possible? */
  textStyle: token(example.typography.body.r16)

[anubra266]

@pharma-bros-lucas Textstyles are not tokens though, so you can't