Semantic tokens should be type checked

[jagregory]

Description

When I create a semantic token which references another token, I expect to have some kind of checking to prevent me from referencing tokens which don't exist when I have strictTokens: true,

  theme: {
    tokens: {
      colors: {
        myColor: { value: 'red' }
      }
    },

    semanticTokens: {
      colors: {
        mySemanticToken: { value: '{colors.myColor}' },
        mySemanticTokenTypo: { value: '{colors.invalid}' }
      }
    }
  },

In this example I can reference mySemanticTokenTypo in my code and I won't get any type errors (that makes sense, it's a valid token!) but the underlying CSS references a variable which doesn't exist:

--colors-my-semantic-token-typo: var(--colors-invalid);

.text_mySemanticTokenTypo {
  color: var(--colors-my-semantic-token-typo);
}

and I get no warning about this anywhere.

Link to Reproduction

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

Steps to reproduce

No response

JS Framework

React (TS)

Panda CSS Version

0.27.3

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

I don't mind where I get an error, I would just like one somewhere so I know I've made a mistake.

At a minimum I think it would make sense for the compiler to report an error if it encounters the {} syntax inside a token which references something that doesn't exist.

[astahmer]

regarding type-safety with TS, this is not really possible, see #1776 (reply in thread)

we will add warnings logs for these

[jagregory]

Understandable, thanks! A warning would be helpful.