Allow CSS variables in no-hardcoded-color rule

Co-authored-by: anubra266 <30869823+anubra266@users.noreply.github.com>

Author: Copilot

plugin/src/rules/no-hardcoded-color.ts

@@ -82,6 +82,11 @@ const rule: Rule = createRule({
       return tokens.length > 0
     }
 
+    const isCssVariable = (value: string): boolean => {
+      if (!value) return false
+      return value.trim().startsWith('var(')
+    }
+
     const isValidColorToken = (value: string): boolean => {
       if (!value) return false
       const [colorToken, opacity] = value.split('/')
@@ -104,6 +109,7 @@ const rule: Rule = createRule({
     const checkColorValue = (node: TSESTree.Node, value: string, attributeName: string) => {
       if (!isColorAttribute(attributeName)) return
       if (isTokenFunctionUsed(value)) return
+      if (isCssVariable(value)) return
       if (isValidColorToken(value)) return
 
       reportInvalidColor(node, value)

plugin/tests/no-hardcoded-color.test.ts

@@ -33,6 +33,38 @@ import { Circle } from './panda/jsx';
 
 function App(){
   return <Circle _hover={{  borderColor: 'gray.100' }} />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ color: 'var(--my-color)' })`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+const styles = css({ backgroundColor: 'var(--bg-color)' })`,
+  },
+
+  {
+    code: javascript`
+import { Circle } from './panda/jsx';
+
+function App(){
+  return <Circle borderColor='var(--border-color)' />;
+}`,
+  },
+
+  {
+    code: javascript`
+import { css } from './panda/css';
+
+function App(){
+  return <div className={css({ color: 'var(--text-primary)' })} />;
 }`,
   },
 ]