sonance-brand-mcp 1.3.67 → 1.3.69

package/dist/assets/api/sonance-vision-apply/theme-discovery.ts

@@ -480,18 +480,32 @@ export function analyzeContrastRelationships(
   // Track which backgrounds we've analyzed to add white/black alternatives
   const analyzedBackgrounds: { name: string; rgb: RGB }[] = [];
   
+  // DEBUG: Log start of analysis
+  const varCount = Object.keys(cssVariables).length;
+  console.log("[Contrast] Starting analysis with", varCount, "variables");
+  
+  let skippedForeground = 0;
+  let skippedNonColor = 0;
+  let failedParse = 0;
+  let noForegroundVar = 0;
+  let pairsAnalyzed = 0;
+  
   // Find all bg/foreground pairs automatically
   for (const [varName, value] of Object.entries(cssVariables)) {
     // Skip if this is a foreground variable
-    if (varName.includes("foreground")) continue;
+    if (varName.includes("foreground")) {
+      skippedForeground++;
+      continue;
+    }
     
     // Skip non-color variables
     if (
       varName.includes("radius") ||
       varName.includes("shadow") ||
       varName.includes("ring") ||
-      varName.includes("border") && !varName.match(/border$/)
+      (varName.includes("border") && !varName.match(/border$/))
     ) {
+      skippedNonColor++;
       continue;
     }
     
@@ -500,19 +514,30 @@ export function analyzeContrastRelationships(
     
     // Parse background color
     const bgRgb = parseColorToRgb(value);
-    if (!bgRgb) continue;
+    if (!bgRgb) {
+      // DEBUG: Log failed parses for important color variables
+      if (baseName.includes("primary") || baseName.includes("accent") || baseName.includes("success")) {
+        console.log("[Contrast] Failed to parse:", varName, "=", value);
+      }
+      failedParse++;
+      continue;
+    }
     
     // Track this background for alternative suggestions
     analyzedBackgrounds.push({ name: baseName, rgb: bgRgb });
     
     // Check if there's a corresponding foreground variable
     if (cssVariables[foregroundVar]) {
+      pairsAnalyzed++;
       const fgRgb = parseColorToRgb(cssVariables[foregroundVar]);
       
       if (fgRgb) {
         const ratio = getContrastRatio(bgRgb, fgRgb);
         const passes = ratio >= 4.5; // WCAG AA for normal text
         
+        // DEBUG: Log analyzed pairs
+        console.log("[Contrast] Pair:", baseName, "bg:", value, "fg:", cssVariables[foregroundVar], "ratio:", ratio.toFixed(1), passes ? "PASS" : "FAIL");
+        
         if (!passes) {
           // Find the best alternative
           const alternative = getBestAlternative(bgRgb);
@@ -531,9 +556,26 @@ export function analyzeContrastRelationships(
           });
         }
       }
+    } else {
+      // DEBUG: Log important variables without foreground
+      if (baseName.includes("primary") || baseName.includes("accent") || baseName.includes("success")) {
+        console.log("[Contrast] No foreground var for:", baseName, "looked for:", foregroundVar);
+      }
+      noForegroundVar++;
     }
   }
   
+  // DEBUG: Summary
+  console.log("[Contrast] Summary:", {
+    total: varCount,
+    skippedForeground,
+    skippedNonColor,
+    failedParse,
+    noForegroundVar,
+    pairsAnalyzed,
+    analyzedBackgrounds: analyzedBackgrounds.length,
+  });
+  
   // Add white/black alternatives for all analyzed backgrounds
   const whiteRgb: RGB = { r: 255, g: 255, b: 255 };
   const blackRgb: RGB = { r: 0, g: 0, b: 0 };
@@ -627,6 +669,53 @@ export async function discoverTheme(projectRoot: string): Promise<DiscoveredThem
   return result;
 }
 
+/**
+ * Get a human-readable description of a color based on its luminance and name
+ * This helps the LLM understand what colors look like visually
+ */
+function getColorDescription(value: string, name: string): string {
+  const rgb = parseColorToRgb(value);
+  if (!rgb) return "";
+  
+  const luminance = getLuminance(rgb);
+  const baseName = name.replace(/^--/, "");
+  
+  // Very light colors (like white)
+  if (luminance > 0.9) {
+    if (baseName.includes("foreground")) {
+      return " (WHITE text)";
+    }
+    return " ⚠️ WHITE - do NOT use for buttons";
+  }
+  
+  // Very dark colors
+  if (luminance < 0.1) {
+    if (baseName.includes("background")) {
+      return " (DARK background)";
+    }
+    return " (BLACK/DARK)";
+  }
+  
+  // Semantic color guidance
+  if (baseName.includes("accent")) {
+    return " ✓ ACCENT - good for buttons/CTAs";
+  }
+  if (baseName.includes("success")) {
+    return " ✓ GREEN - good for positive actions";
+  }
+  if (baseName.includes("destructive")) {
+    return " ✓ RED - good for danger/delete";
+  }
+  if (baseName.includes("warning")) {
+    return " (ORANGE/YELLOW - caution)";
+  }
+  if (baseName.includes("primary") && luminance > 0.7) {
+    return " ⚠️ LIGHT - avoid for buttons on light backgrounds";
+  }
+  
+  return "";
+}
+
 /**
  * Format discovered theme as context for the LLM prompt
  * Includes contrast warnings to prevent bad color combinations
@@ -637,9 +726,15 @@ export function formatThemeForPrompt(theme: DiscoveredTheme): string {
   lines.push("**TARGET CODEBASE THEME (discovered):**");
   lines.push("");
   
+  // Quick reference for button colors
+  lines.push("BUTTON COLOR QUICK REFERENCE:");
+  lines.push("  ✓ Use for buttons: bg-accent, bg-success, bg-destructive");
+  lines.push("  ✗ Avoid for buttons: bg-primary (may be WHITE), bg-secondary (may be transparent)");
+  lines.push("");
+  
   // CSS Variables
   if (Object.keys(theme.cssVariables).length > 0) {
-    lines.push("CSS Variables:");
+    lines.push("COLOR TOKENS (with usage guidance):");
     
     // Group by category
     const categories: Record<string, string[]> = {
@@ -648,7 +743,10 @@ export function formatThemeForPrompt(theme: DiscoveredTheme): string {
     };
     
     for (const [name, value] of Object.entries(theme.cssVariables)) {
-      const entry = `  ${name}: ${value}`;
+      // Add color description for important tokens
+      const description = getColorDescription(value, name);
+      const entry = `  ${name}: ${value}${description}`;
+      
       if (
         name.includes("background") ||
         name.includes("foreground") ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.67",
+  "version": "1.3.69",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",