sonance-brand-mcp 1.3.111 → 1.3.113

package/dist/assets/globals.css

@@ -1,4 +1,8 @@
 @import "tailwindcss";
+
+/* Configure dark mode to use data-theme attribute */
+@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
 @import "../styles/brand-overrides.css";
 
 /* ============================================
@@ -166,11 +170,13 @@
   --space-24: 6rem;
   --space-32: 8rem;
 
-  /* Border Radius */
+  /* Border Radius - Liquid Glass (updated from 0-4px to 8-16px) */
   --radius-none: 0;
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 8px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
   --radius-full: 9999px;
 
   /* Animation */
@@ -179,6 +185,43 @@
   --duration-fast: 150ms;
   --duration-normal: 250ms;
   --duration-slow: 400ms;
+
+  /* ============================================
+     LIQUID GLASS SYSTEM - Light Mode
+     ============================================ */
+
+  /* Glass Backgrounds (Light Mode - frosted glass effect) */
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-bg-hover: rgba(255, 255, 255, 0.8);
+  --glass-bg-active: rgba(255, 255, 255, 0.9);
+  --glass-bg-elevated: rgba(255, 255, 255, 0.85);
+  --glass-bg-subtle: rgba(255, 255, 255, 0.5);
+
+  /* Glass Borders (Light Mode) */
+  --glass-border: rgba(0, 0, 0, 0.08);
+  --glass-border-hover: rgba(0, 0, 0, 0.12);
+  --glass-border-focus: rgba(0, 0, 0, 0.15);
+
+  /* Blur Values */
+  --glass-blur-sm: 8px;
+  --glass-blur-md: 12px;
+  --glass-blur-lg: 20px;
+  --glass-blur-xl: 32px;
+
+  /* Glass Shadows (Light Mode) */
+  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --glass-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
+  --glass-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
+
+  /* Glow Effects - Using Sonance Blue */
+  --glow-primary: rgba(0, 163, 225, 0.2);
+  --glow-primary-subtle: rgba(0, 163, 225, 0.1);
+  --glow-primary-intense: rgba(0, 163, 225, 0.35);
+
+  /* Inner Highlights */
+  --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --glass-inner-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.03);
 }
 
 /* Dark Mode */
@@ -252,6 +295,37 @@
   --sidebar-accent-foreground: #FFFFFF;
   --sidebar-border: #3a444c;
   --sidebar-ring: #00A3E1;
+
+  /* ============================================
+     LIQUID GLASS SYSTEM - Dark Mode
+     ============================================ */
+
+  /* Glass Backgrounds (Dark Mode - classic glass morphism) */
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --glass-bg-hover: rgba(255, 255, 255, 0.06);
+  --glass-bg-active: rgba(255, 255, 255, 0.1);
+  --glass-bg-elevated: rgba(255, 255, 255, 0.08);
+  --glass-bg-subtle: rgba(255, 255, 255, 0.02);
+
+  /* Glass Borders (Dark Mode) */
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-border-hover: rgba(255, 255, 255, 0.12);
+  --glass-border-focus: rgba(255, 255, 255, 0.18);
+
+  /* Glass Shadows (Dark Mode - more pronounced) */
+  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
+  --glass-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --glass-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
+
+  /* Glow Effects - More intense in dark mode */
+  --glow-primary: rgba(0, 163, 225, 0.35);
+  --glow-primary-subtle: rgba(0, 163, 225, 0.2);
+  --glow-primary-intense: rgba(0, 163, 225, 0.5);
+
+  /* Inner Highlights (Dark Mode) */
+  --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --glass-inner-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
 }
 
 /* System preference detection fallback */
@@ -395,11 +469,22 @@
 
   /* Font */
   --font-sans: var(--font-montserrat), system-ui, sans-serif;
-  
-  /* Border Radius */
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 8px;
+
+  /* Border Radius - Liquid Glass */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
+
+  /* Glass System Colors */
+  --color-glass-bg: var(--glass-bg);
+  --color-glass-bg-hover: var(--glass-bg-hover);
+  --color-glass-bg-active: var(--glass-bg-active);
+  --color-glass-bg-elevated: var(--glass-bg-elevated);
+  --color-glass-border: var(--glass-border);
+  --color-glass-border-hover: var(--glass-border-hover);
+  --color-glass-border-focus: var(--glass-border-focus);
 }
 
 /* ============================================
@@ -520,3 +605,134 @@ code ::selection,
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+/* ============================================
+   LIQUID GLASS UTILITY CLASSES
+   ============================================ */
+
+/* Glass Card - Primary container */
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow-md);
+  border-radius: var(--radius-lg);
+  transition: all 0.2s ease-out;
+}
+
+.glass-card:hover {
+  background: var(--glass-bg-hover);
+  border-color: var(--glass-border-hover);
+  box-shadow: var(--glass-shadow-lg), 0 0 20px var(--glow-primary-subtle);
+}
+
+/* Glass Button */
+.glass-btn {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  transition: all 0.2s ease-out;
+}
+
+.glass-btn:hover {
+  background: var(--glass-bg-hover);
+  border-color: var(--glass-border-hover);
+  box-shadow: 0 0 20px var(--glow-primary);
+}
+
+.glass-btn:active {
+  background: var(--glass-bg-active);
+  transform: scale(0.98);
+}
+
+/* Glass Input */
+.glass-input {
+  background: var(--glass-bg-subtle);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  transition: all 0.2s ease-out;
+}
+
+.glass-input:hover {
+  border-color: var(--glass-border-hover);
+}
+
+.glass-input:focus {
+  outline: none;
+  border-color: var(--sonance-blue);
+  box-shadow: 0 0 20px var(--glow-primary);
+}
+
+/* Glow Effect Utilities */
+.hover-glow {
+  transition: box-shadow 0.3s ease-out;
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 30px var(--glow-primary);
+}
+
+.glow-subtle:hover {
+  box-shadow: 0 0 15px var(--glow-primary-subtle);
+}
+
+.glow-intense:hover {
+  box-shadow: 0 0 40px var(--glow-primary-intense);
+}
+
+.focus-glow:focus {
+  box-shadow: 0 0 25px var(--glow-primary);
+}
+
+/* Glass Blur Utilities */
+.glass-blur {
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+}
+
+.glass-blur-sm {
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+}
+
+.glass-blur-xl {
+  backdrop-filter: blur(var(--glass-blur-xl));
+  -webkit-backdrop-filter: blur(var(--glass-blur-xl));
+}
+
+/* Glass Border Utilities */
+.glass-border {
+  border: 1px solid var(--glass-border);
+}
+
+.glass-border-hover:hover {
+  border-color: var(--glass-border-hover);
+}
+
+/* Text Gradient Utility */
+.text-gradient {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(135deg, var(--sonance-blue) 0%, var(--sonance-charcoal) 100%);
+}
+
+/* Fallback for browsers without backdrop-filter support */
+@supports not (backdrop-filter: blur(10px)) {
+  .glass-card,
+  .glass-btn,
+  .glass-input {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  [data-theme="dark"] .glass-card,
+  [data-theme="dark"] .glass-btn,
+  [data-theme="dark"] .glass-input {
+    background: rgba(26, 31, 36, 0.95);
+  }
+}

package/dist/assets/styles/brand-overrides.css

@@ -4,13 +4,14 @@
    ========================================================================== */
 
 :root {
+  --zoom--scale: 0.93;
   /* Sonance Logo Sizing */
-  --sonance-logo-scale: 1;
+  --sonance-logo-scale: 0.94;
   --sonance-logo-width: auto;
   --sonance-logo-height: auto;
   
   /* IPORT Logo Sizing */
-  --iport-logo-scale: 1;
+  --iport-logo-scale: 1.08;
   --iport-logo-width: auto;
   --iport-logo-height: auto;
   

package/dist/assets/utils.ts

@@ -1,6 +1,7 @@
 import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
+  return twMerge(clsx(inputs));
 }
 

package/dist/index.js

@@ -377,6 +377,9 @@ function runDevToolsInstaller() {
     let sourceApiInjectId;
     let sourceApiAnalyze;
     let sourceApiVisionApply;
+    let sourceApiVisionApplyThemeDiscovery;
+    let sourceApiVisionApplyStylingDetection;
+    let sourceApiVisionApplyImageStylingDetection;
     let sourceApiVisionEdit;
     let sourceApiAiEdit;
     let sourceApiSaveColors;
@@ -395,6 +398,9 @@ function runDevToolsInstaller() {
         sourceApiInjectId = path.join(BUNDLED_ASSETS, "api/sonance-inject-id/route.ts");
         sourceApiAnalyze = path.join(BUNDLED_ASSETS, "api/sonance-analyze/route.ts");
         sourceApiVisionApply = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/route.ts");
+        sourceApiVisionApplyThemeDiscovery = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/theme-discovery.ts");
+        sourceApiVisionApplyStylingDetection = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/styling-detection.ts");
+        sourceApiVisionApplyImageStylingDetection = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/image-styling-detection.ts");
         sourceApiVisionEdit = path.join(BUNDLED_ASSETS, "api/sonance-vision-edit/route.ts");
         sourceApiAiEdit = path.join(BUNDLED_ASSETS, "api/sonance-ai-edit/route.ts");
         sourceApiSaveColors = path.join(BUNDLED_ASSETS, "api/sonance-save-colors/route.ts");
@@ -414,6 +420,9 @@ function runDevToolsInstaller() {
         sourceApiInjectId = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-inject-id/route.ts");
         sourceApiAnalyze = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-analyze/route.ts");
         sourceApiVisionApply = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/route.ts");
+        sourceApiVisionApplyThemeDiscovery = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/theme-discovery.ts");
+        sourceApiVisionApplyStylingDetection = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/styling-detection.ts");
+        sourceApiVisionApplyImageStylingDetection = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/image-styling-detection.ts");
         sourceApiVisionEdit = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-edit/route.ts");
         sourceApiAiEdit = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-ai-edit/route.ts");
         sourceApiSaveColors = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-save-colors/route.ts");
@@ -563,6 +572,16 @@ function runDevToolsInstaller() {
     fs.copyFileSync(sourceApiVisionApply, path.join(apiVisionApplyDir, "route.ts"));
     createdFiles.push(`${pathPrefix}app/api/sonance-vision-apply/route.ts`);
     console.log(`  ✓ Created ${pathPrefix}app/api/sonance-vision-apply/route.ts`);
+    // Copy supporting files for vision-apply
+    fs.copyFileSync(sourceApiVisionApplyThemeDiscovery, path.join(apiVisionApplyDir, "theme-discovery.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-vision-apply/theme-discovery.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-vision-apply/theme-discovery.ts`);
+    fs.copyFileSync(sourceApiVisionApplyStylingDetection, path.join(apiVisionApplyDir, "styling-detection.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-vision-apply/styling-detection.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-vision-apply/styling-detection.ts`);
+    fs.copyFileSync(sourceApiVisionApplyImageStylingDetection, path.join(apiVisionApplyDir, "image-styling-detection.ts"));
+    createdFiles.push(`${pathPrefix}app/api/sonance-vision-apply/image-styling-detection.ts`);
+    console.log(`  ✓ Created ${pathPrefix}app/api/sonance-vision-apply/image-styling-detection.ts`);
     if (!fs.existsSync(apiVisionEditDir)) {
         fs.mkdirSync(apiVisionEditDir, { recursive: true });
     }
@@ -1101,6 +1120,9 @@ function runDevToolsSync(fullSync = false) {
     let sourceApiAnalyze;
     let sourceApiSaveColors;
     let sourceApiVisionApply;
+    let sourceApiVisionApplyThemeDiscovery;
+    let sourceApiVisionApplyStylingDetection;
+    let sourceApiVisionApplyImageStylingDetection;
     let sourceApiVisionEdit;
     if (IS_BUNDLED) {
         sourceDevTools = path.join(BUNDLED_ASSETS, "dev-tools");
@@ -1109,6 +1131,9 @@ function runDevToolsSync(fullSync = false) {
         sourceApiAnalyze = path.join(BUNDLED_ASSETS, "api/sonance-analyze/route.ts");
         sourceApiSaveColors = path.join(BUNDLED_ASSETS, "api/sonance-save-colors/route.ts");
         sourceApiVisionApply = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/route.ts");
+        sourceApiVisionApplyThemeDiscovery = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/theme-discovery.ts");
+        sourceApiVisionApplyStylingDetection = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/styling-detection.ts");
+        sourceApiVisionApplyImageStylingDetection = path.join(BUNDLED_ASSETS, "api/sonance-vision-apply/image-styling-detection.ts");
         sourceApiVisionEdit = path.join(BUNDLED_ASSETS, "api/sonance-vision-edit/route.ts");
     }
     else {
@@ -1118,6 +1143,9 @@ function runDevToolsSync(fullSync = false) {
         sourceApiAnalyze = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-analyze/route.ts");
         sourceApiSaveColors = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-save-colors/route.ts");
         sourceApiVisionApply = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/route.ts");
+        sourceApiVisionApplyThemeDiscovery = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/theme-discovery.ts");
+        sourceApiVisionApplyStylingDetection = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/styling-detection.ts");
+        sourceApiVisionApplyImageStylingDetection = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-apply/image-styling-detection.ts");
         sourceApiVisionEdit = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-vision-edit/route.ts");
     }
     // Core files to sync (always synced)
@@ -1173,7 +1201,10 @@ function runDevToolsSync(fullSync = false) {
     }
     // Always sync Vision API routes (critical for Vision Mode)
     const visionApiFiles = [
-        { src: sourceApiVisionApply, dest: path.join(targetDir, baseDir, "app/api/sonance-vision-apply/route.ts"), name: "sonance-vision-apply" },
+        { src: sourceApiVisionApply, dest: path.join(targetDir, baseDir, "app/api/sonance-vision-apply/route.ts"), name: "sonance-vision-apply/route" },
+        { src: sourceApiVisionApplyThemeDiscovery, dest: path.join(targetDir, baseDir, "app/api/sonance-vision-apply/theme-discovery.ts"), name: "sonance-vision-apply/theme-discovery" },
+        { src: sourceApiVisionApplyStylingDetection, dest: path.join(targetDir, baseDir, "app/api/sonance-vision-apply/styling-detection.ts"), name: "sonance-vision-apply/styling-detection" },
+        { src: sourceApiVisionApplyImageStylingDetection, dest: path.join(targetDir, baseDir, "app/api/sonance-vision-apply/image-styling-detection.ts"), name: "sonance-vision-apply/image-styling-detection" },
         { src: sourceApiVisionEdit, dest: path.join(targetDir, baseDir, "app/api/sonance-vision-edit/route.ts"), name: "sonance-vision-edit" },
     ];
     for (const file of visionApiFiles) {

package/package.json

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