sonance-brand-mcp 1.3.110 → 1.3.112

package/dist/assets/components/slider.tsx

@@ -11,7 +11,7 @@ const getTrackStateStyles = (state?: SliderState) => {
 
   const stateMap: Record<string, string> = {
     hover: "",
-    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
+    focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
     active: "",
     disabled: "opacity-50 cursor-not-allowed",
   };
@@ -23,9 +23,9 @@ const getThumbStateStyles = (state?: SliderState) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
-    hover: "scale-110",
-    focus: "",
-    active: "scale-110",
+    hover: "scale-110 shadow-[0_0_12px_var(--glow-primary)]",
+    focus: "shadow-[0_0_12px_var(--glow-primary)]",
+    active: "scale-110 shadow-[0_0_12px_var(--glow-primary)]",
     disabled: "hover:scale-100",
   };
 
@@ -158,24 +158,26 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
           onMouseDown={handleMouseDown}
           onKeyDown={handleKeyDown}
           className={cn(
-            "relative h-2 w-full cursor-pointer rounded-full bg-background-secondary",
-            "focus:outline-none focus:ring-2 focus:ring-border-focus focus:ring-offset-2 focus:ring-offset-background",
+            "relative h-2 w-full cursor-pointer rounded-full",
+            "bg-white/60 dark:bg-white/[0.05] backdrop-blur-sm",
+            "border border-black/5 dark:border-white/5",
+            "focus:outline-none focus:ring-2 focus:ring-[color:var(--sonance-blue)]/30 focus:ring-offset-2 focus:ring-offset-background",
             isDisabled && "cursor-not-allowed opacity-50",
             getTrackStateStyles(state)
           )}
         >
           {/* Filled track */}
           <div
-            className="absolute left-0 top-0 h-full rounded-full bg-primary transition-all"
+            className="absolute left-0 top-0 h-full rounded-full bg-[color:var(--sonance-blue)] transition-all"
             style={{ width: `${percentage}%` }}
           />
           {/* Thumb */}
           <div data-sonance-name="slider"
             className={cn(
               "absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full",
-              "border-2 border-primary bg-background shadow-sm transition-all",
-              "hover:scale-110",
-              isDisabled && "hover:scale-100",
+              "border-2 border-[color:var(--sonance-blue)] bg-white dark:bg-white/90 shadow-md transition-all",
+              "hover:scale-110 hover:shadow-[0_0_12px_var(--glow-primary)]",
+              isDisabled && "hover:scale-100 hover:shadow-md",
               getThumbStateStyles(state)
             )}
             style={{ left: `${percentage}%` }}

package/dist/assets/components/switch.tsx

@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils";
 export type SwitchState = "default" | "hover" | "focus" | "checked" | "disabled";
 
 const switchTrackVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border bg-input transition-all duration-200 has-[:checked]:border-primary has-[:checked]:bg-primary has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:focus]:ring-2 has-[:focus]:ring-primary/20 has-[:focus]:ring-offset-2 has-[:focus]:ring-offset-background",
+  "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-all duration-200 backdrop-blur-sm bg-white/60 dark:bg-white/5 border-black/8 dark:border-white/8 has-[:checked]:border-[color:var(--sonance-blue)] has-[:checked]:bg-[color:var(--sonance-blue)] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:focus]:ring-2 has-[:focus]:ring-[color:var(--sonance-blue)]/30 has-[:focus]:ring-offset-2 has-[:focus]:ring-offset-background",
   {
     variants: {
       size: {
@@ -43,9 +43,9 @@ const getTrackStateStyles = (state?: SwitchState) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
-    hover: "border-border-hover",
-    focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
-    checked: "border-primary bg-primary",
+    hover: "border-black/15 dark:border-white/15",
+    focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+    checked: "border-[color:var(--sonance-blue)] bg-[color:var(--sonance-blue)]",
     disabled: "opacity-50 cursor-not-allowed",
   };
 

package/dist/assets/components/table.tsx

@@ -20,7 +20,7 @@ export const TableHeader = forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} data-sonance-name="table" {...props} />
+  <thead ref={ref} className={cn("[&_tr]:border-b [&_tr]:border-black/8 dark:[&_tr]:border-white/8 bg-white/50 dark:bg-white/[0.02]", className)} data-sonance-name="table" {...props} />
 ));
 
 TableHeader.displayName = "TableHeader";
@@ -45,7 +45,7 @@ export const TableFooter = forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t border-border bg-background-secondary font-medium",
+      "border-t border-black/8 dark:border-white/8 bg-white/50 dark:bg-white/[0.02] font-medium",
       className
     )} data-sonance-name="table"
     {...props}
@@ -61,9 +61,9 @@ export const TableRow = forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b border-border transition-colors",
-      "hover:bg-card-hover",
-      "data-[state=selected]:bg-secondary-hover",
+      "border-b border-black/8 dark:border-white/8 transition-colors",
+      "hover:bg-white/50 dark:hover:bg-white/[0.03]",
+      "data-[state=selected]:bg-white/60 dark:data-[state=selected]:bg-white/[0.05]",
       className
     )} data-sonance-name="table"
     {...props}

package/dist/assets/components/tabs.tsx

@@ -7,14 +7,14 @@ import { cn } from "@/lib/utils";
 export type TabsTriggerState = "default" | "hover" | "focus" | "active" | "disabled";
 
 const tabsTriggerVariants = cva(
-  "relative font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/20",
+  "relative font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30",
   {
     variants: {
       size: {
-        xs: "px-2.5 py-1 text-[10px] rounded-md",
-        sm: "px-3 py-1.5 text-xs rounded-lg",
-        md: "px-3.5 py-2 text-sm rounded-lg",
-        lg: "px-4 py-2.5 text-sm rounded-xl",
+        xs: "px-2.5 py-1 text-[10px] rounded-lg",
+        sm: "px-3 py-1.5 text-xs rounded-xl",
+        md: "px-3.5 py-2 text-sm rounded-xl",
+        lg: "px-4 py-2.5 text-sm rounded-2xl",
       },
     },
     defaultVariants: {
@@ -88,7 +88,7 @@ export function TabsList({ className, children }: TabsListProps) {
     <div data-sonance-name="tabs"
       role="tablist"
       className={cn(
-        "inline-flex items-center gap-1 rounded-lg bg-muted/50 p-1",
+        "inline-flex items-center gap-1 rounded-xl bg-white/50 dark:bg-white/5 backdrop-blur-sm border border-black/5 dark:border-white/5 p-1",
         className
       )}
     >
@@ -129,8 +129,8 @@ export function TabsTrigger({
       className={cn(
         tabsTriggerVariants({ size: context.size }),
         isActive
-          ? "text-foreground bg-background shadow-sm"
-          : "text-foreground-muted hover:text-foreground hover:bg-background/50",
+          ? "text-foreground bg-white/80 dark:bg-white/10 shadow-sm backdrop-blur-sm"
+          : "text-foreground-muted hover:text-foreground hover:bg-white/50 dark:hover:bg-white/5",
         isDisabled && "cursor-not-allowed opacity-50",
         getStateStyles(state, isActive),
         className

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}