sonance-brand-mcp 1.3.110 → 1.3.112

package/dist/assets/components/card.tsx

@@ -1,22 +1,31 @@
+"use client";
+
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
-import { forwardRef } from "react";
+import { forwardRef, createContext, useContext } from "react";
 
 export type CardState = "default" | "hover" | "focus";
 
 const cardVariants = cva(
-  "bg-card border border-card-border transition-all duration-200",
+  "transition-all duration-200 backdrop-blur-lg",
   {
     variants: {
       variant: {
-        default: "hover:border-border-hover hover:bg-card-hover",
-        elevated: "shadow-md hover:shadow-lg",
-        glass: "bg-card/80 backdrop-blur-sm border-white/10 hover:bg-card/90",
+        // Glass morphism - default style
+        default:
+          "bg-white/70 dark:bg-white/[0.03] border border-black/8 dark:border-white/8 shadow-[0_4px_16px_rgba(0,0,0,0.08)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.3)] hover:bg-white/80 dark:hover:bg-white/[0.05] hover:border-black/10 dark:hover:border-white/10 hover:shadow-[0_0_20px_var(--glow-primary-subtle)]",
+        elevated:
+          "bg-white/80 dark:bg-white/[0.05] border border-black/10 dark:border-white/10 shadow-lg hover:shadow-xl hover:shadow-[0_0_30px_var(--glow-primary)] dark:hover:shadow-[0_0_30px_var(--glow-primary)]",
+        subtle:
+          "bg-white/50 dark:bg-white/[0.02] border border-black/5 dark:border-white/5 hover:bg-white/60 dark:hover:bg-white/[0.04] hover:border-black/8 dark:hover:border-white/8",
+        // Non-glass solid variant for fallback
+        solid:
+          "bg-card border-card-border hover:border-border-hover hover:bg-card-hover backdrop-blur-none",
       },
       size: {
-        compact: "rounded-lg",
-        default: "rounded-xl",
-        spacious: "rounded-2xl",
+        compact: "rounded-xl",
+        default: "rounded-2xl",
+        spacious: "rounded-3xl",
       },
     },
     defaultVariants: {
@@ -42,32 +51,29 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement>,
 const getStateStyles = (variant: string | null | undefined, state?: CardState) => {
   if (!state || state === "default") return "";
 
-  if (variant === "elevated") {
-    const stateMap: Record<string, string> = {
-      hover: "shadow-lg",
-      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
-    };
-    return stateMap[state] || "";
-  }
-
-  if (variant === "glass") {
-    const stateMap: Record<string, string> = {
-      hover: "bg-card/90",
-      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
-    };
-    return stateMap[state] || "";
-  }
-
-  const stateMap: Record<string, string> = {
-    hover: "border-border-hover bg-card-hover",
-    focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+  const stateMap: Record<string, Record<string, string>> = {
+    default: {
+      hover: "bg-white/80 dark:bg-white/[0.05] border-black/10 dark:border-white/10 shadow-[0_0_20px_var(--glow-primary-subtle)]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+    },
+    elevated: {
+      hover: "shadow-xl shadow-[0_0_30px_var(--glow-primary)]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+    },
+    subtle: {
+      hover: "bg-white/60 dark:bg-white/[0.04] border-black/8 dark:border-white/8",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+    },
+    solid: {
+      hover: "border-border-hover bg-card-hover",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+    },
   };
 
-  return stateMap[state] || "";
+  return stateMap[variant || "default"]?.[state] || "";
 };
 
 // Create a context for passing size to children
-import { createContext, useContext } from "react";
 const CardSizeContext = createContext<"compact" | "default" | "spacious">("default");
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(

package/dist/assets/components/checkbox.tsx

@@ -8,14 +8,14 @@ import { cn } from "@/lib/utils";
 export type CheckboxState = "default" | "hover" | "focus" | "checked" | "disabled";
 
 const checkboxVariants = cva(
-  "peer shrink-0 appearance-none border border-border bg-input transition-all duration-150 hover:border-border-hover checked:border-primary checked:bg-primary focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+  "peer shrink-0 appearance-none border transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-[color:var(--sonance-blue)]/30 focus:ring-offset-2 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 backdrop-blur-sm bg-white/60 dark:bg-white/5 border-black/8 dark:border-white/8 hover:border-black/15 dark:hover:border-white/15 checked:border-[color:var(--sonance-blue)] checked:bg-[color:var(--sonance-blue)]",
   {
     variants: {
       size: {
-        xs: "h-3.5 w-3.5 rounded",
-        sm: "h-4 w-4 rounded-md",
-        md: "h-5 w-5 rounded-md",
-        lg: "h-6 w-6 rounded-lg",
+        xs: "h-3.5 w-3.5 rounded-md",
+        sm: "h-4 w-4 rounded-lg",
+        md: "h-5 w-5 rounded-lg",
+        lg: "h-6 w-6 rounded-xl",
       },
     },
     defaultVariants: {
@@ -46,9 +46,9 @@ const getStateStyles = (state?: CheckboxState) => {
   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",
   };
 
@@ -105,6 +105,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           <div className="flex flex-col gap-0.5">
             {label && (
               <span
+                id="checkbox-span-label"
                 className="text-sm font-medium text-foreground select-none"
               >
                 {label}

package/dist/assets/components/code.tsx

@@ -12,12 +12,19 @@ interface CodeProps extends React.HTMLAttributes<HTMLElement> {
 export const Code = forwardRef<HTMLElement, CodeProps>(
   ({ className, variant = "default", ...props }, ref) => {
     const variantClasses = {
-      default: "bg-background-secondary text-foreground",
-      primary: "bg-primary/10 text-primary",
+      default: "bg-white/60 dark:bg-white/[0.03] text-foreground border border-black/8 dark:border-white/8",
+      primary: "bg-[color:var(--sonance-blue)]/10 text-[color:var(--sonance-blue)] border border-[color:var(--sonance-blue)]/20",
     };
 
     return (
-      <code data-sonance-name="code"
+      <code
+        ref={ref}
+        data-sonance-name="code"
+        className={cn(
+          "inline-flex items-center px-1.5 py-0.5 rounded-lg font-mono text-sm backdrop-blur-sm",
+          variantClasses[variant],
+          className
+        )}
         {...props}
       />
     );
@@ -57,7 +64,7 @@ export function CodeBlock({
   return (
     <div data-sonance-name="code" className={cn("relative group w-full max-w-full overflow-hidden", className)}>
       {filename && (
-        <div className="flex items-center justify-between px-3 sm:px-4 py-2 border-b border-border bg-background-tertiary">
+        <div className="flex items-center justify-between px-3 sm:px-4 py-2 border-b border-black/8 dark:border-white/8 bg-white/50 dark:bg-white/[0.02]">
           <span id="code-block-span-filename" className="text-xs font-medium text-foreground-muted truncate">{filename}</span>
           {language && (
             <span id="code-block-span-language" className="text-xs uppercase tracking-wider text-foreground-subtle flex-shrink-0 ml-2">
@@ -69,9 +76,10 @@ export function CodeBlock({
       <div className="relative">
         <pre
           className={cn(
-            "overflow-x-auto bg-background-secondary p-3 sm:p-4 w-full max-w-full",
+            "overflow-x-auto bg-white/60 dark:bg-white/[0.02] backdrop-blur-sm p-3 sm:p-4 w-full max-w-full rounded-xl",
             "font-mono text-xs sm:text-sm text-foreground-secondary",
-            filename && "rounded-t-none"
+            "border border-black/8 dark:border-white/8",
+            filename && "rounded-t-none border-t-0"
           )}
         >
           <code className="block">
@@ -99,10 +107,10 @@ export function CodeBlock({
           onClick={copyToClipboard}
           className={cn(
             "absolute right-1.5 sm:right-2 top-1.5 sm:top-2 p-1.5 sm:p-2",
-            "bg-background border border-border rounded-sm",
-            "text-foreground-muted hover:text-foreground",
-            "opacity-0 group-hover:opacity-100 transition-opacity",
-            "focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-border-focus"
+            "bg-white/70 dark:bg-white/10 border border-black/8 dark:border-white/8 rounded-lg backdrop-blur-sm",
+            "text-foreground-muted hover:text-foreground hover:bg-white/80 dark:hover:bg-white/15",
+            "opacity-0 group-hover:opacity-100 transition-all",
+            "focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[color:var(--sonance-blue)]/30"
           )}
           aria-label={copied ? "Copied!" : "Copy code"}
         >
@@ -143,7 +151,7 @@ export function Snippet({
     <div
       className={cn(
         "inline-flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2",
-        "bg-background-secondary border border-border rounded-sm",
+        "bg-white/60 dark:bg-white/[0.03] border border-black/8 dark:border-white/8 rounded-xl backdrop-blur-sm",
         "font-mono text-xs sm:text-sm",
         "max-w-full overflow-hidden",
         className

package/dist/assets/components/command.tsx

@@ -16,10 +16,15 @@ const Command = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
+    data-sonance-name="command"
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-sm bg-card text-foreground",
+      "flex h-full w-full flex-col overflow-hidden rounded-2xl",
+      "bg-white/90 dark:bg-black/80 backdrop-blur-xl",
+      "border border-black/10 dark:border-white/10",
+      "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
+      "text-foreground",
       className
-    )} data-sonance-name="command"
+    )}
     {...props}
   />
 ));
@@ -38,7 +43,7 @@ const CommandDialog = ({ children, open, onOpenChange }: CommandDialogProps) =>
 
   return (
     <Dialog data-sonance-name="command" open={open ?? false} onClose={handleClose}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg" showClose={false}>
+      <DialogContent className="overflow-hidden p-0" showClose={false}>
         <DialogTitle className="sr-only">Command Menu</DialogTitle>
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-foreground-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
@@ -52,12 +57,17 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b border-border px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <div
+    className="flex items-center border-b border-black/8 dark:border-white/8 px-3 bg-white/50 dark:bg-white/[0.02]"
+    cmdk-input-wrapper=""
+  >
+    <Search className="mr-2 h-4 w-4 shrink-0 text-foreground-muted" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-sm bg-transparent py-3 text-sm outline-none placeholder:text-foreground-muted disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full bg-transparent py-3 text-sm outline-none",
+        "placeholder:text-foreground-muted",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -100,7 +110,11 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-foreground-muted",
+      "overflow-hidden p-1 text-foreground",
+      "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5",
+      "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest",
+      "[&_[cmdk-group-heading]]:text-foreground-muted",
       className
     )}
     {...props}
@@ -115,7 +129,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn("-mx-1 h-px bg-black/8 dark:bg-white/8", className)}
     {...props}
   />
 ));
@@ -128,8 +142,11 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
-      "data-[selected=true]:bg-secondary-hover data-[selected=true]:text-foreground",
+      "relative flex cursor-default select-none items-center gap-2 rounded-xl px-2 py-1.5 text-sm outline-none",
+      "transition-all duration-150",
+      "data-[selected=true]:bg-white/60 dark:data-[selected=true]:bg-white/10",
+      "data-[selected=true]:text-foreground",
+      "data-[selected=true]:shadow-[0_0_12px_var(--glow-primary-subtle)]",
       "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
@@ -146,11 +163,14 @@ const CommandShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      id="command-shortcut-span"
+      data-sonance-name="command"
       className={cn(
         "ml-auto text-xs tracking-widest text-foreground-muted",
+        "px-1.5 py-0.5 rounded-md",
+        "bg-white/40 dark:bg-white/5",
+        "border border-black/5 dark:border-white/10",
         className
-      )} data-sonance-name="command"
+      )}
       {...props}
     />
   );
@@ -168,4 +188,3 @@ export {
   CommandShortcut,
   CommandSeparator,
 };
-

package/dist/assets/components/context-menu.tsx

@@ -21,9 +21,10 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
-      "data-[state=open]:bg-secondary-hover data-[state=open]:text-foreground",
+      "flex cursor-default select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "data-[state=open]:bg-white/60 dark:data-[state=open]:bg-white/10 data-[state=open]:text-foreground",
       inset && "pl-8",
       className
     )}
@@ -42,7 +43,10 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden rounded-xl p-1 text-foreground",
+      "bg-white/90 dark:bg-black/80 backdrop-blur-xl",
+      "border border-black/10 dark:border-white/10",
+      "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -64,8 +68,12 @@ const ContextMenuContent = React.forwardRef<
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
       ref={ref}
+      data-sonance-name="context-menu"
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-foreground shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-xl p-1 text-foreground",
+        "bg-white/90 dark:bg-black/80 backdrop-blur-xl",
+        "border border-black/10 dark:border-white/10",
+        "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
         "animate-in fade-in-80",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -91,8 +99,10 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
+      "relative flex cursor-default select-none items-center rounded-xl px-2 py-1.5 text-sm outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "focus:shadow-[0_0_12px_var(--glow-primary-subtle)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
@@ -109,15 +119,17 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
+      "relative flex cursor-default select-none items-center rounded-xl py-1.5 pl-8 pr-2 text-sm outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "focus:shadow-[0_0_12px_var(--glow-primary-subtle)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span id="context-menu-checkbox-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -135,14 +147,16 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-secondary-hover focus:text-foreground",
+      "relative flex cursor-default select-none items-center rounded-xl py-1.5 pl-8 pr-2 text-sm outline-none",
+      "transition-all duration-150",
+      "focus:bg-white/60 dark:focus:bg-white/10 focus:text-foreground",
+      "focus:shadow-[0_0_12px_var(--glow-primary-subtle)]",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span id="context-menu-radio-item-span" className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -176,7 +190,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("-mx-1 my-1 h-px bg-black/8 dark:bg-white/8", className)}
     {...props}
   />
 ));
@@ -187,7 +201,15 @@ const ContextMenuShortcut = ({
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span id="context-menu-shortcut-span" data-sonance-name="context-menu"
+    <span
+      data-sonance-name="context-menu"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-foreground-muted",
+        "px-1.5 py-0.5 rounded-md",
+        "bg-white/40 dark:bg-white/5",
+        "border border-black/5 dark:border-white/10",
+        className
+      )}
       {...props}
     />
   );
@@ -211,4 +233,3 @@ export {
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
 };
-

package/dist/assets/components/dialog.tsx

@@ -48,10 +48,10 @@ export function Dialog({ open, onClose, children, size = "default" }: DialogProp
 
   return (
     <DialogContext.Provider value={{ open, onClose, size }}>
-      <div className="fixed inset-0 z-50 flex items-center justify-center">
-        {/* Backdrop with blur */}
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        {/* Backdrop with enhanced blur */}
         <div
-          className="absolute inset-0 bg-overlay/80 backdrop-blur-sm animate-in fade-in duration-200"
+          className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-md animate-in fade-in duration-200"
           onClick={onClose}
         />
         {/* Content */}
@@ -80,7 +80,10 @@ export const DialogContent = forwardRef<
       data-sonance-name="dialog"
       ref={ref}
       className={cn(
-        "relative bg-card/95 backdrop-blur-xl border border-border rounded-2xl shadow-2xl",
+        "relative backdrop-blur-xl border rounded-3xl",
+        "bg-white/80 dark:bg-black/60",
+        "border-black/10 dark:border-white/10",
+        "shadow-[0_16px_48px_rgba(0,0,0,0.15)] dark:shadow-[0_16px_48px_rgba(0,0,0,0.5)]",
         "min-w-[320px] max-w-lg",
         className
       )}
@@ -89,7 +92,7 @@ export const DialogContent = forwardRef<
       {showClose && context && (
         <button
           onClick={context.onClose}
-          className="absolute right-3 top-3 p-1.5 rounded-lg text-foreground-muted hover:text-foreground hover:bg-secondary-hover transition-all duration-150"
+          className="absolute right-3 top-3 p-1.5 rounded-xl text-foreground-muted hover:text-foreground hover:bg-white/50 dark:hover:bg-white/10 transition-all duration-150"
         >
           <X className="h-4 w-4" />
           <span id="dialog-content-span-close" className="sr-only">Close</span>

package/dist/assets/components/divider.tsx

@@ -10,7 +10,15 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
   ({ orientation = "horizontal", label, className, ...props }, ref) => {
     if (orientation === "vertical") {
       return (
-        <div data-sonance-name="divider"
+        <div
+          ref={ref}
+          role="separator"
+          aria-orientation="vertical"
+          data-sonance-name="divider"
+          className={cn(
+            "w-px h-full bg-black/8 dark:bg-white/8",
+            className
+          )}
           {...props}
         />
       );
@@ -21,14 +29,15 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
         <div
           ref={ref}
           role="separator"
-          className={cn("flex items-center gap-4", className)} data-sonance-name="divider"
+          className={cn("flex items-center gap-4", className)}
+          data-sonance-name="divider"
           {...props}
         >
-          <div className="h-px flex-1 bg-border" />
+          <div className="h-px flex-1 bg-black/8 dark:bg-white/8" />
           <span id="divider-span-label" className="text-xs font-medium uppercase tracking-widest text-foreground-muted">
             {label}
           </span>
-          <div className="h-px flex-1 bg-border" />
+          <div className="h-px flex-1 bg-black/8 dark:bg-white/8" />
         </div>
       );
     }
@@ -38,7 +47,8 @@ export const Divider = forwardRef<HTMLDivElement, DividerProps>(
         ref={ref}
         role="separator"
         aria-orientation="horizontal"
-        className={cn("h-px w-full bg-border", className)} data-sonance-name="divider"
+        className={cn("h-px w-full bg-black/8 dark:bg-white/8", className)}
+        data-sonance-name="divider"
         {...props}
       />
     );

package/dist/assets/components/drawer.tsx

@@ -63,7 +63,8 @@ export function Drawer({
       {/* Drawer panel */}
       <div data-sonance-name="drawer"
         className={cn(
-          "absolute bg-background border-border shadow-xl",
+          "absolute bg-white/90 dark:bg-black/80 backdrop-blur-xl",
+          "border-black/10 dark:border-white/10 shadow-xl",
           position === "left" && "border-r",
           position === "right" && "border-l",
           position === "top" && "border-b",
@@ -85,7 +86,7 @@ export const DrawerHeader = forwardRef<
   <div
     ref={ref}
     className={cn(
-      "flex items-center justify-between px-6 py-4 border-b border-border",
+      "flex items-center justify-between px-6 py-4 border-b border-black/8 dark:border-white/8",
       className
     )} data-sonance-name="drawer"
     {...props}
@@ -139,7 +140,7 @@ export const DrawerFooter = forwardRef<
   <div
     ref={ref}
     className={cn(
-      "flex items-center justify-end gap-3 px-6 py-4 border-t border-border",
+      "flex items-center justify-end gap-3 px-6 py-4 border-t border-black/8 dark:border-white/8",
       className
     )} data-sonance-name="drawer"
     {...props}

package/dist/assets/components/dropdown-menu.tsx

@@ -7,23 +7,25 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const dropdownMenuContentVariants = cva(
-  "z-50 min-w-[8rem] overflow-hidden border p-1 text-foreground shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "z-50 min-w-[8rem] overflow-hidden border p-1.5 text-foreground shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
   {
     variants: {
       size: {
-        xs: "rounded-lg text-xs",
-        sm: "rounded-xl text-xs",
-        md: "rounded-xl text-sm",
-        lg: "rounded-2xl text-sm",
+        xs: "rounded-xl text-xs",
+        sm: "rounded-2xl text-xs",
+        md: "rounded-2xl text-sm",
+        lg: "rounded-3xl text-sm",
       },
       menuVariant: {
-        default: "bg-card border-border",
-        glass: "bg-card/95 border-border/50 backdrop-blur-xl",
+        // Glass morphism - default style
+        default: "bg-white/90 dark:bg-black/80 border-black/10 dark:border-white/10 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
+        // Non-glass solid variant
+        solid: "bg-card border-border backdrop-blur-none",
       },
     },
     defaultVariants: {
       size: "sm",
-      menuVariant: "glass",
+      menuVariant: "default",
     },
   }
 );
@@ -33,10 +35,10 @@ const dropdownMenuItemVariants = cva(
   {
     variants: {
       size: {
-        xs: "rounded-md px-2 py-1 text-xs",
-        sm: "rounded-lg px-2.5 py-1.5 text-xs",
-        md: "rounded-lg px-3 py-2 text-sm",
-        lg: "rounded-xl px-3.5 py-2.5 text-sm",
+        xs: "rounded-lg px-2 py-1 text-xs",
+        sm: "rounded-xl px-2.5 py-1.5 text-xs",
+        md: "rounded-xl px-3 py-2 text-sm",
+        lg: "rounded-2xl px-3.5 py-2.5 text-sm",
       },
     },
     defaultVariants: {
@@ -129,7 +131,7 @@ const DropdownMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       dropdownMenuItemVariants({ size: "sm" }),
-      "focus:bg-secondary-hover focus:text-foreground",
+      "focus:bg-white/50 dark:focus:bg-white/10 focus:text-foreground",
       inset && "pl-8",
       className
     )}

package/dist/assets/components/hover-card.tsx

@@ -16,7 +16,10 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-sm border border-border bg-card p-4 text-foreground shadow-md outline-none",
+      "z-50 w-64 rounded-2xl p-4 text-foreground outline-none",
+      "bg-white/90 dark:bg-black/70 backdrop-blur-xl",
+      "border border-black/10 dark:border-white/10",
+      "shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

package/dist/assets/components/image.tsx

@@ -66,7 +66,7 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(
     };
 
     const containerClasses = cn(
-      "relative overflow-hidden bg-background-secondary",
+      "relative overflow-hidden bg-white/50 dark:bg-white/[0.02] backdrop-blur-sm",
       aspectRatioClasses[aspectRatio],
       radiusClasses[radius],
       className