sonance-brand-mcp 1.3.111 → 1.3.112

package/dist/assets/components/textarea.tsx

@@ -15,10 +15,10 @@ const getStateStyles = (state?: TextareaState) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
-    hover: "border-border-hover",
-    focus: "border-input-focus",
+    hover: "border-black/15 dark:border-white/15",
+    focus: "border-[color:var(--sonance-blue)] shadow-[0_0_20px_var(--glow-primary)]",
     error: "border-error",
-    disabled: "opacity-50 cursor-not-allowed bg-secondary",
+    disabled: "opacity-50 cursor-not-allowed bg-white/30 dark:bg-white/[0.02]",
   };
 
   return stateMap[state] || "";
@@ -40,12 +40,14 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           ref={ref}
           disabled={isDisabled}
           className={cn(
-            "min-h-[120px] w-full resize-y border border-input-border bg-input px-4 py-3",
-            "text-foreground placeholder:text-input-placeholder",
-            "transition-colors duration-200",
-            "hover:border-border-hover",
-            "focus:border-input-focus focus:outline-none",
-            "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-secondary",
+            "min-h-[120px] w-full resize-y rounded-xl px-4 py-3",
+            "bg-white/60 dark:bg-white/[0.03] backdrop-blur-sm",
+            "border border-black/8 dark:border-white/8",
+            "text-foreground placeholder:text-foreground-muted",
+            "transition-all duration-200",
+            "hover:border-black/15 dark:hover:border-white/15",
+            "focus:border-[color:var(--sonance-blue)] focus:shadow-[0_0_20px_var(--glow-primary)] focus:outline-none",
+            "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/30 dark:disabled:bg-white/[0.02]",
             hasError && "border-error",
             getStateStyles(state),
             className

package/dist/assets/components/toast.tsx

@@ -7,15 +7,15 @@ import { cn } from "@/lib/utils";
 
 // Toast variants
 const toastVariants = cva(
-  "relative flex items-start gap-3 w-full max-w-sm p-4 border shadow-lg animate-in slide-in-from-right-full duration-300",
+  "relative flex items-start gap-3 w-full max-w-sm p-4 rounded-2xl shadow-xl backdrop-blur-xl animate-in slide-in-from-right-full duration-300",
   {
     variants: {
       variant: {
-        default: "bg-card border-border text-foreground",
-        success: "bg-success-light border-success/30 text-success",
-        error: "bg-error-light border-error/30 text-error",
-        warning: "bg-warning-light border-warning/30 text-warning",
-        info: "bg-info-light border-info/30 text-info",
+        default: "bg-white/90 dark:bg-black/80 border border-black/10 dark:border-white/10 text-foreground",
+        success: "bg-white/90 dark:bg-black/80 border border-success/30 text-success",
+        error: "bg-white/90 dark:bg-black/80 border border-error/30 text-error",
+        warning: "bg-white/90 dark:bg-black/80 border border-warning/30 text-warning",
+        info: "bg-white/90 dark:bg-black/80 border border-info/30 text-info",
       },
     },
     defaultVariants: {
@@ -67,7 +67,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
         {onClose && (
           <button
             onClick={onClose}
-            className="shrink-0 p-1 opacity-70 hover:opacity-100 transition-opacity"
+            className="shrink-0 p-1.5 rounded-lg opacity-70 hover:opacity-100 hover:bg-white/50 dark:hover:bg-white/10 transition-all"
           >
             <X className="h-4 w-4" />
             <span id="icon-span-dismiss" className="sr-only">Dismiss</span>

package/dist/assets/components/toggle.tsx

@@ -6,14 +6,34 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  cn(
+    "inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium",
+    "transition-all duration-150 backdrop-blur-sm",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+  ),
   {
     variants: {
       variant: {
-        default:
-          "bg-transparent hover:bg-secondary-hover text-foreground-secondary data-[state=on]:bg-secondary-hover data-[state=on]:text-foreground",
-        outline:
-          "border border-border bg-transparent hover:bg-secondary-hover hover:text-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+        default: cn(
+          "bg-transparent text-foreground-muted",
+          "hover:bg-white/60 dark:hover:bg-white/10 hover:text-foreground",
+          "data-[state=on]:bg-white/70 dark:data-[state=on]:bg-white/10 data-[state=on]:text-foreground",
+          "data-[state=on]:shadow-[0_0_12px_var(--glow-primary-subtle)]"
+        ),
+        outline: cn(
+          "border border-black/10 dark:border-white/10 bg-transparent",
+          "hover:bg-white/50 dark:hover:bg-white/8 hover:text-foreground",
+          "data-[state=on]:bg-[color:var(--sonance-blue)]/90 data-[state=on]:text-white data-[state=on]:border-transparent",
+          "data-[state=on]:shadow-[0_0_20px_var(--glow-primary)]"
+        ),
+        glass: cn(
+          "bg-white/50 dark:bg-white/5 border border-black/8 dark:border-white/8",
+          "hover:bg-white/60 dark:hover:bg-white/8 hover:text-foreground",
+          "data-[state=on]:bg-white/80 dark:data-[state=on]:bg-white/15 data-[state=on]:text-foreground",
+          "data-[state=on]:shadow-[0_0_15px_var(--glow-primary-subtle)]"
+        ),
       },
       size: {
         default: "h-10 px-3 min-w-10",
@@ -33,7 +53,8 @@ const Toggle = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
     VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root data-sonance-name="toggle"
+  <TogglePrimitive.Root
+    data-sonance-name="toggle"
     ref={ref}
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}
@@ -43,4 +64,3 @@ const Toggle = React.forwardRef<
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
 export { Toggle, toggleVariants };
-

package/dist/assets/components/tooltip.tsx

@@ -17,20 +17,22 @@ const tooltipContentVariants = cva(
   {
     variants: {
       size: {
-        xs: "px-2 py-1 text-[10px] rounded-md",
-        sm: "px-2.5 py-1 text-xs rounded-lg",
-        md: "px-3 py-1.5 text-sm rounded-lg",
-        lg: "px-3.5 py-2 text-sm rounded-xl",
+        xs: "px-2 py-1 text-[10px] rounded-lg",
+        sm: "px-2.5 py-1 text-xs rounded-xl",
+        md: "px-3 py-1.5 text-sm rounded-xl",
+        lg: "px-3.5 py-2 text-sm rounded-2xl",
       },
       tooltipVariant: {
-        default: "bg-popover text-popover-foreground border-border",
-        glass: "bg-popover/95 text-popover-foreground border-border/50 backdrop-blur-md",
-        dark: "bg-foreground text-background border-foreground",
+        // Glass morphism - default style
+        default: "bg-white/90 dark:bg-black/80 text-foreground border-black/10 dark:border-white/10 backdrop-blur-xl shadow-[0_4px_16px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.4)]",
+        dark: "bg-foreground/95 text-background border-foreground/20 backdrop-blur-xl",
+        // Non-glass solid variant
+        solid: "bg-popover text-popover-foreground border-border backdrop-blur-none",
       },
     },
     defaultVariants: {
       size: "sm",
-      tooltipVariant: "glass",
+      tooltipVariant: "default",
     },
   }
 )

package/dist/assets/components/user.tsx

@@ -100,8 +100,9 @@ export function UserCard({
   return (
     <div data-sonance-name="user"
       className={cn(
-        "flex items-center justify-between gap-4 p-4",
-        "border border-border bg-card",
+        "flex items-center justify-between gap-4 p-4 rounded-xl",
+        "bg-white/70 dark:bg-white/[0.03] backdrop-blur-sm",
+        "border border-black/8 dark:border-white/8",
         className
       )}
     >
@@ -136,13 +137,14 @@ export function UserListItem({
   return (
     <div
       onClick={onClick}
+      data-sonance-name="user"
       className={cn(
         "flex items-center justify-between gap-4 px-4 py-3",
-        "transition-colors",
+        "transition-all duration-150",
         onClick && "cursor-pointer",
         selected
-          ? "bg-primary text-primary-foreground"
-          : "hover:bg-secondary-hover",
+          ? "bg-[color:var(--sonance-blue)] text-white"
+          : "hover:bg-white/50 dark:hover:bg-white/5",
         className
       )}
     >
@@ -159,7 +161,7 @@ export function UserListItem({
               id="user-list-item-span-description"
               className={cn(
                 "text-xs truncate",
-                selected ? "text-primary-foreground/70" : "text-foreground-muted"
+                selected ? "text-white/70" : "text-foreground-muted"
               )}
             >
               {description}