sonance-brand-mcp 1.3.68 → 1.3.69

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

@@ -669,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
@@ -679,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[]> = {
@@ -690,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.68",
+  "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",