sonance-brand-mcp 1.2.3 → 1.2.5

package/dist/assets/BRAND_GUIDELINES.md

@@ -8,7 +8,7 @@
 
 | Brand | Primary Color | Accent Color | Theme |
 |-------|---------------|--------------|-------|
-| **Sonance** | Charcoal `#333F48` | Cyan "The Beam" `#00D3C8` | Light preferred |
+| **Sonance** | Charcoal `#333F48` | Cyan "The Beam" `#00A3E1` | Light preferred |
 | **Sonance Foundation** | Charcoal `#333F48` | Green `#00B2A9` | Light preferred |
 | **IPORT** | Black `#0E1114` | Orange `#FC4C02` | Dark preferred |
 | **Blaze Audio** | Black `#1A1A1C` | Blue `#00A3E1` | Dark preferred |
@@ -65,7 +65,7 @@ font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-s
 | Color | Hex | CSS Variable | Tailwind Class | Usage |
 |-------|-----|--------------|----------------|-------|
 | Charcoal | `#333F48` | `--sonance-charcoal` | `bg-sonance-charcoal` | Primary brand color, text |
-| The Beam (Cyan) | `#00D3C8` | `--sonance-blue` | `bg-sonance-blue` | Accent, highlights |
+| The Beam (Cyan) | `#00A3E1` | `--sonance-blue` | `bg-sonance-blue` | Accent, highlights |
 | Light Gray | `#D9D9D6` | `--sonance-light-gray` | `bg-sonance-light-gray` | Backgrounds, borders |
 | White | `#FFFFFF` | `--sonance-white` | `bg-sonance-white` | Backgrounds |
 | Black | `#000000` | `--sonance-black` | `bg-sonance-black` | Text on light backgrounds |
@@ -447,7 +447,7 @@ When crediting a photographer, follow these guidelines consistently:
 :root {
   /* Sonance Core */
   --sonance-charcoal: #333F48;
-  --sonance-blue: #00D3C8;
+  --sonance-blue: #00A3E1;
   --sonance-light-gray: #D9D9D6;
   
   /* IPORT Core */

package/dist/assets/globals.css

@@ -7,7 +7,7 @@
 :root {
   /* Core Brand Colors - Official Sonance Palette (from Brand Guidelines PDF) */
   --sonance-charcoal: #333F48;
-  --sonance-blue: #00D3C8;  /* "The Beam" - cyan accent on logo */
+  --sonance-blue: #00A3E1;  /* "The Beam" - cyan accent on logo | Pantone 2191C/2191U */
   --sonance-light-gray: #D9D9D6;
   --sonance-white: #FFFFFF;
   --sonance-black: #000000;

package/dist/assets/logo-manifest.json

@@ -28,6 +28,8 @@
   "/logos/sonance/Sonance_Logo_Black_RGB.png",
   "/logos/sonance/Sonance_Logo_Grayscale_RGB.png",
   "/logos/sonance/Sonance_Logo_Reverse_RGB.png",
+  "/logos/sonance-academy/SonanceAcademy_Logo_Dark_CMYK.png",
+  "/logos/sonance-academy/SonanceAcademy_Logo_Light_CMYK.png",
   "/logos/sonance-iport/Sonance_IPORT_LockUp_3C_Dark_RGB.png",
   "/logos/sonance-iport/Sonance_IPORT_LockUp_3C_Light_RGB.png",
   "/logos/sonance-iport/Sonance_IPORT_LockUp_3C_Reverse_RGB.png",

package/dist/index.js

@@ -365,7 +365,7 @@ function extractBrandColors() {
             silver: extractColor("--sonance-silver") || "#e2e2e2",
             white: extractColor("--sonance-white") || "#FFFFFF",
             black: extractColor("--sonance-black") || "#000000",
-            teal: "#00D3C8", // Sonance accent
+            teal: "#00A3E1", // Sonance accent (The Beam)
             gray50: extractColor("--sonance-gray-50") || "#f8f9f9",
             gray100: extractColor("--sonance-gray-100") || "#f0f1f2",
             gray500: extractColor("--sonance-gray-500") || "#7a8389",
@@ -379,7 +379,7 @@ function extractBrandColors() {
             silver: "#e2e2e2",
             white: "#FFFFFF",
             black: "#000000",
-            teal: "#00D3C8",
+            teal: "#00A3E1",
             gray50: "#f8f9f9",
             gray100: "#f0f1f2",
             gray500: "#7a8389",
@@ -424,7 +424,7 @@ const BRAND_PALETTES = {
     sonance: {
         primary: "#343d46", // Sonance Charcoal
         secondary: "#e2e2e2", // Sonance Silver
-        accent: "#00D3C8", // Sonance Teal
+        accent: "#00A3E1", // Sonance Blue (The Beam)
         background: "#FFFFFF",
         foreground: "#343d46",
         name: "Sonance",
@@ -474,7 +474,7 @@ function getBrandColorPatterns(brand) {
         sonance: {
             primaryPattern: /343d46|343D46|#343d46|0x34.*0x3D.*0x46|rgb\(52.*61.*70\)|charcoal|CHARCOAL|sonance-charcoal/i,
             secondaryPattern: /e2e2e2|E2E2E2|#e2e2e2|0xE2.*0xE2.*0xE2|rgb\(226.*226.*226\)|silver|SILVER|sonance-silver/i,
-            accentPattern: /00D3C8|00d3c8|#00D3C8|0x00.*0xD3.*0xC8|rgb\(0.*211.*200\)|teal|TEAL/i,
+            accentPattern: /00A3E1|00a3e1|#00A3E1|0x00.*0xA3.*0xE1|rgb\(0.*163.*225\)|sonance-blue|SONANCE.*BLUE/i,
         },
         iport: {
             primaryPattern: /0F161D|0f161d|#0F161D|0x0F.*0x16.*0x1D|rgb\(15.*22.*29\)|iport.*dark/i,
@@ -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 = {
@@ -1047,7 +1055,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                     light: `## Sonance Light Theme Design Tokens
 
 ### Colors
-- **Primary/Accent**: \`#00D3C8\` (Sonance Teal) — \`bg-sonance-blue\`, \`text-sonance-blue\`
+- **Primary/Accent**: \`#00A3E1\` (Sonance Blue) — \`bg-sonance-blue\`, \`text-sonance-blue\`
 - **Text Primary**: \`#333F48\` (Charcoal) — \`text-sonance-charcoal\`
 - **Background**: \`#FFFFFF\` or \`#F5F5F5\` — \`bg-white\`, \`bg-sonance-light-gray\`
 - **Borders/Dividers**: \`#D9D9D6\` — \`border-sonance-light-gray\`
@@ -1072,7 +1080,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                     dark: `## Sonance Dark Theme Design Tokens
 
 ### Colors
-- **Primary/Accent**: \`#00D3C8\` (Sonance Teal) — \`bg-sonance-blue\`, \`text-sonance-blue\`
+- **Primary/Accent**: \`#00A3E1\` (Sonance Blue) — \`bg-sonance-blue\`, \`text-sonance-blue\`
 - **Text Primary**: \`#FFFFFF\` — \`text-white\`
 - **Background**: \`#333F48\` (Charcoal) — \`bg-sonance-charcoal\`
 - **Text Secondary**: \`#D9D9D6\` — \`text-sonance-light-gray\`
@@ -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 }],
             };
@@ -1428,10 +1556,10 @@ Now design the **${component_description}** following these tokens and principle
                 const accentPattern = brandPatterns.accentPattern;
                 // Common non-brand colors that indicate incomplete rebranding (exclude target brand colors)
                 const nonBrandColors = evalBrand === "sonance"
-                    ? /0066CC|0078D4|1E90FF|007BFF|2196F3|FF5722|FF9800|4CAF50|8BC34A|E91E63|9C27B0|673AB7|3F51B5|FC4C02|0F161D|28282B|00A3E1|C02B0A/i
+                    ? /0066CC|0078D4|1E90FF|007BFF|2196F3|FF5722|FF9800|4CAF50|8BC34A|E91E63|9C27B0|673AB7|3F51B5|FC4C02|0F161D|28282B|C02B0A/i
                     : evalBrand === "iport"
-                        ? /0066CC|0078D4|1E90FF|007BFF|2196F3|FF5722|FF9800|4CAF50|8BC34A|E91E63|9C27B0|673AB7|3F51B5|343d46|00D3C8|28282B|00A3E1|C02B0A/i
-                        : /0066CC|0078D4|1E90FF|007BFF|2196F3|FF5722|FF9800|4CAF50|8BC34A|E91E63|9C27B0|673AB7|3F51B5|343d46|00D3C8|FC4C02|0F161D/i;
+                        ? /0066CC|0078D4|1E90FF|007BFF|2196F3|FF5722|FF9800|4CAF50|8BC34A|E91E63|9C27B0|673AB7|3F51B5|343d46|00A3E1|28282B|C02B0A/i
+                        : /0066CC|0078D4|1E90FF|007BFF|2196F3|FF5722|FF9800|4CAF50|8BC34A|E91E63|9C27B0|673AB7|3F51B5|343d46|00A3E1|FC4C02|0F161D/i;
                 // Brand-specific logo patterns
                 const logoPatterns = {
                     sonance: /logo|sonance.*\.(png|jpg|svg)|Sonance_logo|add_picture|drawImage|Image\(/i,

package/package.json

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