sonance-brand-mcp 1.3.50 → 1.3.51

package/dist/assets/api/sonance-vision-apply/route.ts

@@ -3,6 +3,7 @@ import * as fs from "fs";
 import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
 import { randomUUID } from "crypto";
+import { discoverTheme, formatThemeForPrompt } from "./theme-discovery";
 
 /**
  * Sonance DevTools API - Apply-First Vision Mode
@@ -471,10 +472,47 @@ Return search/replace patches (NOT full files). The system applies your patches
 - CRITICAL: NEVER invent or guess code. Your "search" string MUST be copied EXACTLY from the provided file content. If you cannot find the exact code to modify, return an empty modifications array.
 - If the file content appears truncated, only modify code that is visible in the provided content.
 
-**SONANCE BRAND COLORS:**
-- Charcoal: #333F48 (primary text)
-- IPORT Orange: #FC4C02
-- Blaze Blue: #00A3E1
+═══════════════════════════════════════════════════════════════════════════════
+SONANCE BRAND COLOR SYSTEM
+═══════════════════════════════════════════════════════════════════════════════
+
+**Core Colors:**
+- Primary (Charcoal): #333F48 - main text, dark backgrounds
+- Accent (Cyan "The Beam"): #00D3C8 - highlights, interactive elements, CTAs
+- Success: Green tones - positive states, confirmations
+- Warning: Amber/Orange tones - caution states, alerts
+- Destructive: Red tones - errors, delete actions
+
+**CRITICAL CONTRAST RULES:**
+When using colored backgrounds, ALWAYS use high-contrast text:
+
+| Background        | Use This Text                      | NEVER Use              |
+|-------------------|------------------------------------|-----------------------|
+| bg-accent         | text-white                         | text-accent-foreground |
+| bg-primary        | text-primary-foreground, text-white | text-primary          |
+| bg-success        | text-white                         | text-success          |
+| bg-warning        | text-white                         | text-warning          |
+| bg-destructive    | text-white                         | text-destructive      |
+
+**SEMANTIC TOKEN PATTERNS:**
+- text-{color} = the color itself (use on NEUTRAL backgrounds like white/gray)
+- text-{color}-foreground = INTENDED for text on {color} backgrounds, but MAY have contrast issues
+- bg-{color} = background in that color
+- WHEN IN DOUBT: Use text-white on any colored background for guaranteed contrast
+
+**BUTTON PATTERNS (Sonance Standard):**
+- Primary CTA: bg-primary text-primary-foreground
+- Accent/Highlight: bg-accent text-white (NOT text-accent-foreground)
+- Success: bg-success text-white
+- Warning: bg-warning text-white
+- Destructive: bg-destructive text-white
+- Outlined: border-border bg-transparent text-foreground
+
+**COMMON MISTAKES TO AVOID:**
+- WRONG: bg-accent text-accent-foreground (accent-foreground is often dark = invisible text)
+- RIGHT: bg-accent text-white (white text on cyan = visible)
+- WRONG: bg-primary text-primary (same color = invisible)
+- RIGHT: bg-primary text-primary-foreground OR text-white
 
 **RESPONSE FORMAT:**
 CRITICAL: Return ONLY the JSON object below. Do NOT include any text, explanation, or thinking before or after the JSON. No preamble. No "Looking at the screenshot..." No markdown code blocks. Just raw JSON:
@@ -666,7 +704,7 @@ export async function POST(request: Request) {
       const TOTAL_CONTEXT_BUDGET = 500000; // 500k chars total budget
       const MAX_RECOMMENDED_FILE = Infinity; // NEVER truncate the target file - AI needs full context
       const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
-      const MAX_GLOBALS_CSS = 1500;
+      const MAX_GLOBALS_CSS = 15000; // Increased to capture full theme definitions
       const MAX_FILES = 25;
       
       let usedContext = 0;
@@ -760,6 +798,25 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
+      // ========== THEME DISCOVERY ==========
+      // Dynamically discover theme tokens from the target codebase
+      const discoveredTheme = await discoverTheme(projectRoot);
+      const themeContext = formatThemeForPrompt(discoveredTheme);
+      
+      if (discoveredTheme.discoveredFiles.length > 0) {
+        textContent += `
+═══════════════════════════════════════════════════════════════════════════════
+${themeContext}
+═══════════════════════════════════════════════════════════════════════════════
+
+`;
+        debugLog("Theme discovery complete", {
+          filesFound: discoveredTheme.discoveredFiles,
+          cssVariableCount: Object.keys(discoveredTheme.cssVariables).length,
+          tailwindColorCount: Object.keys(discoveredTheme.tailwindColors).length,
+        });
+      }
+
       // ========== GLOBALS CSS ==========
       const globalsTruncated = pageContext.globalsCSS.substring(0, MAX_GLOBALS_CSS);
       textContent += `

package/dist/assets/api/sonance-vision-edit/route.ts

@@ -2,6 +2,7 @@ import { NextResponse } from "next/server";
 import * as fs from "fs";
 import * as path from "path";
 import Anthropic from "@anthropic-ai/sdk";
+import { discoverTheme, formatThemeForPrompt } from "../sonance-vision-apply/theme-discovery";
 
 /**
  * Sonance DevTools API - Vision Mode Editor
@@ -469,10 +470,47 @@ Return search/replace patches (NOT full files). The system applies your patches
 - CRITICAL: NEVER invent or guess code. Your "search" string MUST be copied EXACTLY from the provided file content. If you cannot find the exact code to modify, return an empty modifications array.
 - If the file content appears truncated, only modify code that is visible in the provided content.
 
-**SONANCE BRAND COLORS:**
-- Charcoal: #333F48 (primary text)
-- IPORT Orange: #FC4C02
-- Blaze Blue: #00A3E1
+═══════════════════════════════════════════════════════════════════════════════
+SONANCE BRAND COLOR SYSTEM
+═══════════════════════════════════════════════════════════════════════════════
+
+**Core Colors:**
+- Primary (Charcoal): #333F48 - main text, dark backgrounds
+- Accent (Cyan "The Beam"): #00D3C8 - highlights, interactive elements, CTAs
+- Success: Green tones - positive states, confirmations
+- Warning: Amber/Orange tones - caution states, alerts
+- Destructive: Red tones - errors, delete actions
+
+**CRITICAL CONTRAST RULES:**
+When using colored backgrounds, ALWAYS use high-contrast text:
+
+| Background        | Use This Text                      | NEVER Use              |
+|-------------------|------------------------------------|-----------------------|
+| bg-accent         | text-white                         | text-accent-foreground |
+| bg-primary        | text-primary-foreground, text-white | text-primary          |
+| bg-success        | text-white                         | text-success          |
+| bg-warning        | text-white                         | text-warning          |
+| bg-destructive    | text-white                         | text-destructive      |
+
+**SEMANTIC TOKEN PATTERNS:**
+- text-{color} = the color itself (use on NEUTRAL backgrounds like white/gray)
+- text-{color}-foreground = INTENDED for text on {color} backgrounds, but MAY have contrast issues
+- bg-{color} = background in that color
+- WHEN IN DOUBT: Use text-white on any colored background for guaranteed contrast
+
+**BUTTON PATTERNS (Sonance Standard):**
+- Primary CTA: bg-primary text-primary-foreground
+- Accent/Highlight: bg-accent text-white (NOT text-accent-foreground)
+- Success: bg-success text-white
+- Warning: bg-warning text-white
+- Destructive: bg-destructive text-white
+- Outlined: border-border bg-transparent text-foreground
+
+**COMMON MISTAKES TO AVOID:**
+- WRONG: bg-accent text-accent-foreground (accent-foreground is often dark = invisible text)
+- RIGHT: bg-accent text-white (white text on cyan = visible)
+- WRONG: bg-primary text-primary (same color = invisible)
+- RIGHT: bg-primary text-primary-foreground OR text-white
 
 **RESPONSE FORMAT:**
 CRITICAL: Return ONLY the JSON object below. Do NOT include any text, explanation, or thinking before or after the JSON. No preamble. No "Looking at the screenshot..." No markdown code blocks. Just raw JSON:
@@ -675,7 +713,7 @@ export async function POST(request: Request) {
       const TOTAL_CONTEXT_BUDGET = 500000; // 500k chars total budget
       const MAX_RECOMMENDED_FILE = Infinity; // NEVER truncate the target file - AI needs full context
       const MAX_PAGE_FILE = 2000; // Page file is just a wrapper
-      const MAX_GLOBALS_CSS = 1500;
+      const MAX_GLOBALS_CSS = 15000; // Increased to capture full theme definitions
       const MAX_FILES = 25;
       
       let usedContext = 0;
@@ -769,6 +807,25 @@ ${truncatedContent}${wasTruncated ? "\n// ... (truncated)" : ""}
         }
       }
 
+      // ========== THEME DISCOVERY ==========
+      // Dynamically discover theme tokens from the target codebase
+      const discoveredTheme = await discoverTheme(projectRoot);
+      const themeContext = formatThemeForPrompt(discoveredTheme);
+      
+      if (discoveredTheme.discoveredFiles.length > 0) {
+        textContent += `
+═══════════════════════════════════════════════════════════════════════════════
+${themeContext}
+═══════════════════════════════════════════════════════════════════════════════
+
+`;
+        debugLog("Theme discovery complete", {
+          filesFound: discoveredTheme.discoveredFiles,
+          cssVariableCount: Object.keys(discoveredTheme.cssVariables).length,
+          tailwindColorCount: Object.keys(discoveredTheme.tailwindColors).length,
+        });
+      }
+
       // ========== GLOBALS CSS ==========
       const globalsTruncated = pageContext.globalsCSS.substring(0, MAX_GLOBALS_CSS);
       textContent += `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.50",
+  "version": "1.3.51",
   "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",