sonance-brand-mcp 1.2.4 → 1.2.5

package/dist/index.js

@@ -1009,7 +1009,6 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
             // Apply smart defaults and track what was defaulted
             const defaultsUsed = [];
             const brand = rawArgs.brand || (() => { defaultsUsed.push("brand → Sonance"); return "sonance"; })();
-            const theme = rawArgs.theme || (() => { defaultsUsed.push("theme → Light"); return "light"; })();
             const logoPreference = rawArgs.logo_preference || (() => { defaultsUsed.push("logo → Default lockup"); return "default"; })();
             const component_description = rawArgs.component_description;
             // Smart output type detection
@@ -1017,6 +1016,15 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
             if (!rawArgs.output_type) {
                 defaultsUsed.push(`output type → ${detectedOutputType} (auto-detected)`);
             }
+            // Dual-theme mode: For UI outputs without explicit theme, provide BOTH themes by default
+            const isDualThemeMode = detectedOutputType === "ui" && !rawArgs.theme;
+            const theme = rawArgs.theme || "light";
+            if (isDualThemeMode) {
+                defaultsUsed.push("theme → Light AND Dark (dual-theme default for UI)");
+            }
+            else if (!rawArgs.theme) {
+                defaultsUsed.push("theme → Light");
+            }
             // Logo path mapping based on preference and theme
             // Light theme = dark logo (for light backgrounds), Dark theme = light logo (for dark backgrounds)
             const logoMap = {
@@ -1205,17 +1213,20 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
 \`\`\``,
                 },
             };
-            const tokens = brandTokens[brand]?.[theme];
-            if (!tokens) {
-                return {
-                    content: [{ type: "text", text: `Invalid brand/theme combination: ${brand}/${theme}` }],
-                    isError: true,
-                };
-            }
             // Build defaults notice if any were applied
             const defaultsNotice = defaultsUsed.length > 0
                 ? `\n> **Note**: Defaults applied: ${defaultsUsed.join(", ")}. Specify \`brand\`, \`theme\`, \`logo_preference\`, or \`output_type\` explicitly for different styling.\n`
                 : "";
+            // For dual-theme mode (UI without explicit theme), get both themes
+            const lightTokens = brandTokens[brand]?.light;
+            const darkTokens = brandTokens[brand]?.dark;
+            const singleThemeTokens = brandTokens[brand]?.[theme];
+            if (!lightTokens || !darkTokens) {
+                return {
+                    content: [{ type: "text", text: `Invalid brand: ${brand}` }],
+                    isError: true,
+                };
+            }
             // Get live brand colors for document formats
             const docColors = getBrandColorsForDocs();
             // Output-type-specific implementation guidance
@@ -1370,14 +1381,130 @@ const example = "Sonance";
 - Use dark variant for GitHub (light mode default)
 - Path: \`${logoPath}\``,
             };
-            const response = `# Design Context for: ${component_description}
+            // Build the response based on single or dual theme mode
+            let response;
+            if (isDualThemeMode) {
+                // DUAL-THEME MODE: Provide both light and dark tokens for UI
+                const lightLogoPath = logoMap[logoPreference]?.light || logoMap.default.light;
+                const darkLogoPath = logoMap[logoPreference]?.dark || logoMap.default.dark;
+                response = `# Design Context for: ${component_description}
+
+**Brand**: ${brand.toUpperCase()}
+**Theme**: Light AND Dark Mode (automatically implemented)
+**Output Type**: ${detectedOutputType.toUpperCase()}
+**Logo**: ${logoPreferenceLabel}
+${defaultsNotice}
+
+> **Dual-Theme Default**: All UI designs include both light and dark mode tokens by default.
+> Implement both themes using Tailwind \`dark:\` variants or CSS custom properties.
+
+---
+
+${lightTokens}
+
+---
+
+${darkTokens}
+
+---
+
+## Theme Switching Implementation
+
+### Using Tailwind Dark Mode
+\`\`\`tsx
+// Components automatically support dark mode with dark: prefix
+<div className="bg-white dark:bg-sonance-charcoal text-sonance-charcoal dark:text-white">
+  <button className="bg-sonance-blue text-white dark:text-sonance-charcoal px-6 py-3 text-sm font-medium uppercase tracking-wide">
+    Action
+  </button>
+</div>
+
+// Cards with theme support
+<div className="bg-white dark:bg-sonance-charcoal border border-sonance-light-gray dark:border-white/10 rounded-sm p-6 shadow-sm">
+  Content
+</div>
+\`\`\`
+
+### Using CSS Custom Properties
+\`\`\`css
+:root {
+  --background: #FFFFFF;
+  --foreground: #333F48;
+  --primary: #00A3E1;
+  --card: #FFFFFF;
+  --border: #D9D9D6;
+}
+
+[data-theme="dark"], .dark {
+  --background: #333F48;
+  --foreground: #FFFFFF;
+  --primary: #00A3E1;
+  --card: #333F48;
+  --border: rgba(255, 255, 255, 0.1);
+}
+\`\`\`
+
+### Next.js Theme Provider Pattern
+\`\`\`tsx
+// Use next-themes for automatic system detection
+import { ThemeProvider } from 'next-themes'
+
+export function Providers({ children }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  )
+}
+\`\`\`
+
+### Logo Usage for Both Themes
+- **Light mode (light backgrounds)**: \`${lightLogoPath}\`
+- **Dark mode (dark backgrounds)**: \`${darkLogoPath}\`
+
+\`\`\`tsx
+// Theme-aware logo component
+import { useTheme } from 'next-themes'
+import Image from 'next/image'
+
+function Logo() {
+  const { resolvedTheme } = useTheme()
+  const logoSrc = resolvedTheme === 'dark'
+    ? '${darkLogoPath}'
+    : '${lightLogoPath}'
+
+  return <Image src={logoSrc} alt="${logoPreferenceLabel}" width={200} height={40} />
+}
+\`\`\`
+
+${outputTypeGuidance[detectedOutputType]}
+
+## Typography (All Brands)
+- **Font Family**: Montserrat
+- **Headlines**: font-weight 300 (Light) or 500 (Medium)
+- **Body**: font-weight 400 (Regular), line-height 1.6
+- **Buttons/CTAs**: font-weight 500, uppercase, letter-spacing 0.08em
+
+## Design Principles
+1. Generous whitespace — layouts should feel "breathable"
+2. Minimal borders — use subtle dividers, not heavy borders
+3. Refined shadows — subtle elevation, not aggressive drop shadows
+4. Premium feel — every element should feel high-end and intentional
+
+---
+
+Now design the **${component_description}** with **BOTH light and dark mode support** following these tokens and principles.`;
+            }
+            else {
+                // SINGLE-THEME MODE: Backwards compatible for explicit theme or non-UI outputs
+                response = `# Design Context for: ${component_description}
 
 **Brand**: ${brand.toUpperCase()}
 **Theme**: ${theme.charAt(0).toUpperCase() + theme.slice(1)}
 **Output Type**: ${detectedOutputType.toUpperCase()}
 **Logo**: ${logoPreferenceLabel}
 ${defaultsNotice}
-${tokens}
+${singleThemeTokens}
 
 ${outputTypeGuidance[detectedOutputType]}
 
@@ -1396,6 +1523,7 @@ ${outputTypeGuidance[detectedOutputType]}
 ---
 
 Now design the **${component_description}** following these tokens and principles.`;
+            }
             return {
                 content: [{ type: "text", text: response }],
             };

package/package.json

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