sonance-brand-mcp 1.3.51 → 1.3.53

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

@@ -0,0 +1,388 @@
+/**
+ * Theme Discovery Module for Sonance DevTools
+ * 
+ * Dynamically discovers and parses theme/design system files from target codebases.
+ * Extracts CSS variables, Tailwind colors, and available semantic tokens to provide
+ * context to the LLM for intelligent styling decisions.
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Discovered theme information from a codebase
+ */
+export interface DiscoveredTheme {
+  // Raw CSS variable definitions found (e.g., { "--accent": "#00D3C8" })
+  cssVariables: Record<string, string>;
+  
+  // Tailwind custom colors from config (if found)
+  tailwindColors: Record<string, string>;
+  
+  // Available semantic class tokens discovered
+  availableTokens: string[];
+  
+  // Full raw theme CSS content for additional context
+  rawThemeCSS: string;
+  
+  // Files that were discovered and parsed
+  discoveredFiles: string[];
+}
+
+/**
+ * Patterns for finding theme-related files
+ */
+const THEME_FILE_PATTERNS = [
+  // CSS files
+  "src/app/globals.css",
+  "app/globals.css",
+  "src/styles/globals.css",
+  "styles/globals.css",
+  "src/styles/global.css",
+  "styles/global.css",
+  "src/styles/variables.css",
+  "styles/variables.css",
+  "src/styles/theme.css",
+  "styles/theme.css",
+  "src/styles/brand-overrides.css",
+  "styles/brand-overrides.css",
+  // Tailwind config files
+  "tailwind.config.js",
+  "tailwind.config.ts",
+  "tailwind.config.mjs",
+  "tailwind.config.cjs",
+];
+
+/**
+ * Find all theme-related files in a project
+ */
+export function findThemeFiles(projectRoot: string): string[] {
+  const foundFiles: string[] = [];
+  
+  for (const pattern of THEME_FILE_PATTERNS) {
+    const fullPath = path.join(projectRoot, pattern);
+    if (fs.existsSync(fullPath)) {
+      foundFiles.push(pattern);
+    }
+  }
+  
+  // Also search for any additional CSS files in common locations
+  const additionalDirs = ["src/styles", "styles", "src/app", "app"];
+  for (const dir of additionalDirs) {
+    const dirPath = path.join(projectRoot, dir);
+    if (fs.existsSync(dirPath) && fs.statSync(dirPath).isDirectory()) {
+      try {
+        const files = fs.readdirSync(dirPath);
+        for (const file of files) {
+          if (file.endsWith(".css") && !foundFiles.includes(path.join(dir, file))) {
+            foundFiles.push(path.join(dir, file));
+          }
+        }
+      } catch {
+        // Ignore read errors
+      }
+    }
+  }
+  
+  return foundFiles;
+}
+
+/**
+ * Parse CSS content and extract variable definitions
+ * Extracts patterns like: --primary: #333F48; or --accent: hsl(180 100% 50%);
+ */
+export function parseCSSVariables(cssContent: string): Record<string, string> {
+  const variables: Record<string, string> = {};
+  
+  // Match CSS custom property definitions
+  // Handles: --name: value; with various value formats
+  const regex = /--([a-zA-Z0-9-]+)\s*:\s*([^;]+);/g;
+  
+  let match;
+  while ((match = regex.exec(cssContent)) !== null) {
+    const name = match[1].trim();
+    const value = match[2].trim();
+    variables[`--${name}`] = value;
+  }
+  
+  return variables;
+}
+
+/**
+ * Parse Tailwind config file and extract custom color definitions
+ * Handles both JS and TS config formats
+ */
+export function parseTailwindConfig(configPath: string, projectRoot: string): Record<string, string> {
+  const colors: Record<string, string> = {};
+  
+  const fullPath = path.join(projectRoot, configPath);
+  if (!fs.existsSync(fullPath)) {
+    return colors;
+  }
+  
+  try {
+    const content = fs.readFileSync(fullPath, "utf-8");
+    
+    // Extract color definitions from the config
+    // This is a simplified parser that handles common patterns
+    
+    // Pattern 1: colors: { name: "value" } or colors: { name: { DEFAULT: "value" } }
+    const colorBlockMatch = content.match(/colors\s*:\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+    if (colorBlockMatch) {
+      const colorBlock = colorBlockMatch[1];
+      
+      // Simple key-value pairs: name: "value" or name: 'value'
+      const simpleColorRegex = /(\w+[-\w]*)\s*:\s*["']([^"']+)["']/g;
+      let match;
+      while ((match = simpleColorRegex.exec(colorBlock)) !== null) {
+        colors[match[1]] = match[2];
+      }
+      
+      // Nested objects with DEFAULT: name: { DEFAULT: "value" }
+      const nestedColorRegex = /(\w+[-\w]*)\s*:\s*\{\s*DEFAULT\s*:\s*["']([^"']+)["']/g;
+      while ((match = nestedColorRegex.exec(colorBlock)) !== null) {
+        colors[match[1]] = match[2];
+      }
+    }
+    
+    // Pattern 2: extend: { colors: { ... } }
+    const extendColorMatch = content.match(/extend\s*:\s*\{[^}]*colors\s*:\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+    if (extendColorMatch) {
+      const extendBlock = extendColorMatch[1];
+      
+      const simpleColorRegex = /(\w+[-\w]*)\s*:\s*["']([^"']+)["']/g;
+      let match;
+      while ((match = simpleColorRegex.exec(extendBlock)) !== null) {
+        colors[match[1]] = match[2];
+      }
+      
+      // CSS variable references: name: "var(--name)" or "hsl(var(--name))"
+      const varRefRegex = /(\w+[-\w]*)\s*:\s*["'](?:hsl\()?var\(--([^)]+)\)(?:\))?["']/g;
+      while ((match = varRefRegex.exec(extendBlock)) !== null) {
+        colors[match[1]] = `var(--${match[2]})`;
+      }
+    }
+    
+  } catch (error) {
+    // Silently fail - config parsing is best-effort
+    console.warn(`[Theme Discovery] Failed to parse Tailwind config: ${error}`);
+  }
+  
+  return colors;
+}
+
+/**
+ * Extract available semantic tokens from CSS content
+ * Finds class-like patterns that suggest available Tailwind/utility classes
+ */
+export function extractAvailableTokens(cssVariables: Record<string, string>): string[] {
+  const tokens: string[] = [];
+  
+  // Generate bg-* and text-* tokens from CSS variable names
+  for (const varName of Object.keys(cssVariables)) {
+    // Remove -- prefix
+    const name = varName.replace(/^--/, "");
+    
+    // Skip numeric or utility variables
+    if (/^\d/.test(name) || name.includes("radius") || name.includes("shadow")) {
+      continue;
+    }
+    
+    // Common color-related variable patterns
+    if (
+      name.includes("background") ||
+      name.includes("foreground") ||
+      name.includes("primary") ||
+      name.includes("secondary") ||
+      name.includes("accent") ||
+      name.includes("muted") ||
+      name.includes("destructive") ||
+      name.includes("success") ||
+      name.includes("warning") ||
+      name.includes("border") ||
+      name.includes("ring") ||
+      name.includes("card") ||
+      name.includes("popover")
+    ) {
+      // Add as potential class token
+      tokens.push(name);
+    }
+  }
+  
+  // Always include common utility tokens
+  const commonTokens = [
+    "text-white",
+    "text-black",
+    "bg-white",
+    "bg-black",
+    "bg-transparent",
+  ];
+  
+  return [...new Set([...tokens, ...commonTokens])];
+}
+
+/**
+ * Analyze CSS variables to identify contrast relationships
+ * Returns warnings about potentially problematic color combinations
+ */
+export function analyzeContrastRelationships(
+  cssVariables: Record<string, string>
+): { warnings: string[]; goodPairs: { bg: string; text: string }[] } {
+  const warnings: string[] = [];
+  const goodPairs: { bg: string; text: string }[] = [];
+  
+  // Common pattern: --{name} is background, --{name}-foreground is text
+  // Check if foreground values look like they might have contrast issues
+  
+  for (const [varName, value] of Object.entries(cssVariables)) {
+    // Skip if this is a foreground variable
+    if (varName.includes("foreground")) continue;
+    
+    const baseName = varName.replace(/^--/, "");
+    const foregroundVar = `--${baseName}-foreground`;
+    
+    if (cssVariables[foregroundVar]) {
+      const bgValue = value;
+      const fgValue = cssVariables[foregroundVar];
+      
+      // Simple heuristic: if both values reference same color or are similar
+      // This is a basic check - real contrast would need color parsing
+      if (bgValue === fgValue) {
+        warnings.push(
+          `WARNING: ${varName} and ${foregroundVar} have identical values - text will be invisible`
+        );
+      }
+      
+      // Add as a known pair (user should verify contrast)
+      goodPairs.push({
+        bg: `bg-${baseName}`,
+        text: `text-${baseName}-foreground`,
+      });
+    }
+  }
+  
+  return { warnings, goodPairs };
+}
+
+/**
+ * Main entry point: Discover theme from a project
+ */
+export async function discoverTheme(projectRoot: string): Promise<DiscoveredTheme> {
+  const result: DiscoveredTheme = {
+    cssVariables: {},
+    tailwindColors: {},
+    availableTokens: [],
+    rawThemeCSS: "",
+    discoveredFiles: [],
+  };
+  
+  // Find theme files
+  const themeFiles = findThemeFiles(projectRoot);
+  result.discoveredFiles = themeFiles;
+  
+  // Parse each file
+  for (const file of themeFiles) {
+    const fullPath = path.join(projectRoot, file);
+    
+    try {
+      if (file.endsWith(".css")) {
+        const content = fs.readFileSync(fullPath, "utf-8");
+        
+        // Accumulate raw CSS
+        result.rawThemeCSS += `\n/* === ${file} === */\n${content}\n`;
+        
+        // Parse variables
+        const variables = parseCSSVariables(content);
+        Object.assign(result.cssVariables, variables);
+        
+      } else if (file.includes("tailwind.config")) {
+        // Parse Tailwind config
+        const colors = parseTailwindConfig(file, projectRoot);
+        Object.assign(result.tailwindColors, colors);
+      }
+    } catch (error) {
+      console.warn(`[Theme Discovery] Error reading ${file}:`, error);
+    }
+  }
+  
+  // Extract available tokens
+  result.availableTokens = extractAvailableTokens(result.cssVariables);
+  
+  return result;
+}
+
+/**
+ * Format discovered theme as context for the LLM prompt
+ */
+export function formatThemeForPrompt(theme: DiscoveredTheme): string {
+  const lines: string[] = [];
+  
+  lines.push("**TARGET CODEBASE THEME (discovered):**");
+  lines.push("");
+  
+  // CSS Variables
+  if (Object.keys(theme.cssVariables).length > 0) {
+    lines.push("CSS Variables:");
+    
+    // Group by category
+    const categories: Record<string, string[]> = {
+      colors: [],
+      other: [],
+    };
+    
+    for (const [name, value] of Object.entries(theme.cssVariables)) {
+      const entry = `  ${name}: ${value}`;
+      if (
+        name.includes("background") ||
+        name.includes("foreground") ||
+        name.includes("primary") ||
+        name.includes("secondary") ||
+        name.includes("accent") ||
+        name.includes("muted") ||
+        name.includes("destructive") ||
+        name.includes("success") ||
+        name.includes("warning") ||
+        name.includes("border") ||
+        name.includes("card")
+      ) {
+        categories.colors.push(entry);
+      } else {
+        categories.other.push(entry);
+      }
+    }
+    
+    // Only include color-related variables (most relevant for styling)
+    lines.push(...categories.colors.slice(0, 30)); // Limit to avoid prompt bloat
+    
+    if (categories.colors.length > 30) {
+      lines.push(`  ... and ${categories.colors.length - 30} more color variables`);
+    }
+    lines.push("");
+  }
+  
+  // Tailwind Colors
+  if (Object.keys(theme.tailwindColors).length > 0) {
+    lines.push("Tailwind Custom Colors:");
+    for (const [name, value] of Object.entries(theme.tailwindColors)) {
+      lines.push(`  ${name}: ${value}`);
+    }
+    lines.push("");
+  }
+  
+  // Available Tokens
+  if (theme.availableTokens.length > 0) {
+    lines.push(`Available Semantic Tokens: ${theme.availableTokens.slice(0, 20).join(", ")}`);
+    if (theme.availableTokens.length > 20) {
+      lines.push(`  ... and ${theme.availableTokens.length - 20} more`);
+    }
+    lines.push("");
+  }
+  
+  // Discovered Files
+  if (theme.discoveredFiles.length > 0) {
+    lines.push(`Theme Files Found: ${theme.discoveredFiles.join(", ")}`);
+  }
+  
+  return lines.join("\n");
+}
+

package/package.json

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