feat: add fix suggestions for dark mode theme issues

Extends suggest_fix to handle mixed-token-hardcoded and
dark-mode-shadow-invisible issues from the enhanced
theme checker. Both generate var()-based suggestions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: himerus

.changeset/suggest-fix-dark-mode.md

@@ -0,0 +1,5 @@
+---
+'helixir': patch
+---
+
+Add auto-fix suggestions for mixed-token-hardcoded and dark-mode-shadow-invisible theme issues

packages/core/src/handlers/suggest-fix.ts

@@ -289,7 +289,39 @@ function fixThemeCompat(input: SuggestFixInput): FixSuggestion {
     return {
       original,
       suggestion: `background: var(${bgToken}); color: var(${fgToken});`,
-      explanation: `Light-on-light or dark-on-dark color pairs create contrast issues. Use semantic token pairs (surface + on-surface) that maintain readable contrast across themes.`,
+      explanation:
+        `Light-on-light or dark-on-dark color pairs create contrast issues. ` +
+        `Use semantic token pairs (surface + on-surface) that maintain readable contrast across themes.`,
+      severity: 'warning',
+    };
+  }
+
+  if (input.issue === 'mixed-token-hardcoded') {
+    const propMatch = original.match(/([a-z-]+)\s*:\s*([^;]+)/i);
+    if (propMatch) {
+      const [, prop, value] = propMatch;
+      const token = suggestTokenForProperty(prop ?? 'color', tokenPrefix);
+      return {
+        original,
+        suggestion: `${prop}: var(${token}, ${value?.trim()});`,
+        explanation:
+          `One property uses a design token while the paired property is hardcoded. ` +
+          `When the theme switches, the token adapts but the hardcoded value stays — ` +
+          `breaking the color pairing. Use tokens for both.`,
+        severity: 'warning',
+      };
+    }
+  }
+
+  if (input.issue === 'dark-mode-shadow-invisible') {
+    const shadowToken = tokenPrefix ? `${tokenPrefix}-shadow-md` : '--shadow-md';
+    return {
+      original,
+      suggestion: `box-shadow: var(${shadowToken});`,
+      explanation:
+        `Very low opacity shadows (alpha <= 0.1) are invisible on dark backgrounds. ` +
+        `Use a design token that adapts shadow intensity per theme, ` +
+        `or increase the opacity for dark mode.`,
       severity: 'warning',
     };
   }

tests/handlers/suggest-fix.test.ts

@@ -358,6 +358,38 @@ describe('suggestFix — library-agnostic tokens', () => {
     expect(result.suggestion).not.toContain('--sl-');
   });
 
+  it('fixes mixed-token-hardcoded by wrapping in var()', () => {
+    const result = suggestFix({
+      type: 'theme-compat',
+      issue: 'mixed-token-hardcoded',
+      original: 'color: #333333;',
+    });
+    expect(result.suggestion).toContain('var(');
+    expect(result.explanation).toContain('token');
+    expect(result.severity).toBe('warning');
+  });
+
+  it('fixes dark-mode-shadow-invisible with token', () => {
+    const result = suggestFix({
+      type: 'theme-compat',
+      issue: 'dark-mode-shadow-invisible',
+      original: 'box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
+    });
+    expect(result.suggestion).toContain('var(');
+    expect(result.suggestion).toContain('shadow');
+    expect(result.severity).toBe('warning');
+  });
+
+  it('uses tokenPrefix in dark-mode-shadow-invisible fix', () => {
+    const result = suggestFix({
+      type: 'theme-compat',
+      issue: 'dark-mode-shadow-invisible',
+      original: 'box-shadow: 0 2px 8px rgba(0,0,0,0.05);',
+      tokenPrefix: '--hx-',
+    });
+    expect(result.suggestion).toContain('--hx-');
+  });
+
   it('generates property-appropriate token names from prefix', () => {
     const result = suggestFix({
       type: 'token-fallback',