sonance-brand-mcp 1.3.111 → 1.3.112

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/package.json

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