fix: semantic tokens color hints

Author: astahmer

packages/language-server/src/features/color-hints.ts

@@ -33,7 +33,7 @@ export function registerColorHints(extension: PandaExtension) {
         const isColor = match.kind === 'token' && match.token.extensions?.vscodeColor
         if (!isColor) return
 
-        // Add 1 color hint for each condition
+        // Add 1 color hint for each root condition
         if (match.token.extensions.conditions) {
           if (settings['color-hints.semantic-tokens.enabled']) {
             Object.entries(match.token.extensions.conditions).forEach(([cond, value]) => {

packages/language-server/src/tokens/setup-tokens-helpers.ts

@@ -573,8 +573,19 @@ const getTokenFromPropValue = (ctx: PandaContext, prop: string, value: string):
   // known theme token
   // px: "2", fontSize: "xl", ...
   // color: "blue.300"
-  if (isColor(token.value)) {
-    const extensions = getColorExtensions(token.value, 'color')
+
+  let color = token.value
+  // could be a semantic token, so the token.value wouldn't be a color directly, it's actually a CSS variable
+  if (!isColor(color) && token.value.startsWith('var(--')) {
+    const [tokenRef] = ctx.tokens.getReferences(token.originalValue)
+    if (tokenRef?.value) {
+      color = tokenRef.value
+    }
+  }
+
+  // now it could be a color
+  if (isColor(color)) {
+    const extensions = getColorExtensions(color, 'color')
     if (!extensions) return
 
     return token.setExtensions(extensions)