feat: add fix suggestions for dark mode theme issues

feat: add fix suggestions for dark mode theme issues

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',
     };
   }

packages/core/src/handlers/validation-summary.ts

@@ -136,11 +136,14 @@ export function summarizeValidation(result: ValidateComponentCodeResult): Valida
 
   if (result.themeCompat) {
     for (const issue of result.themeCompat.issues) {
+      const original = `${issue.property}: ${issue.value};`;
+      const fix = tryAutoFix('theme-compat', issue.rule, original, issue.property);
       issues.push({
         severity: 'warning',
         category: 'themeCompat',
         message: issue.message,
         line: issue.line,
+        ...(fix ? { fix } : {}),
       });
     }
   }

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',