sonance-brand-mcp 1.3.111 → 1.3.112

package/dist/assets/api/sonance-vision-apply/theme-discovery.ts

@@ -677,7 +677,7 @@ function getColorDescription(value: string, name: string): string {
   const rgb = parseColorToRgb(value);
   if (!rgb) return "";
   
-  const luminance = getLuminance(rgb);
+  const luminance = getLuminance(rgb.r, rgb.g, rgb.b);
   const baseName = name.replace(/^--/, "");
   
   // Very light colors (like white)

package/dist/assets/brand-system.ts

@@ -11,7 +11,7 @@ export interface ThemeConfig {
   accentColor: string;
 
   // Radius
-  radius: 'none' | 'sm' | 'md' | 'lg';
+  radius: 'none' | 'sm' | 'md' | 'lg' | 'xl';
 
   // Typography
   headingWeight: 400 | 500 | 600 | 700;
@@ -57,7 +57,7 @@ export interface ComponentSnippet {
 export const defaultThemeConfig: ThemeConfig = {
   baseColor: '#333F48', // Sonance Charcoal
   accentColor: '#00A3E1', // Sonance Blue
-  radius: 'sm',
+  radius: 'md', // Liquid Glass default
   headingWeight: 600,
   bodyWeight: 400,
   typographyScale: 'default',
@@ -74,7 +74,7 @@ export const brandPresets: BrandPreset[] = [
     config: {
       baseColor: '#333F48', // Sonance Charcoal
       accentColor: '#00A3E1', // Sonance Blue
-      radius: 'sm',
+      radius: 'md', // Liquid Glass
       headingWeight: 600,
       bodyWeight: 400,
       typographyScale: 'default',
@@ -88,7 +88,7 @@ export const brandPresets: BrandPreset[] = [
     config: {
       baseColor: '#FC4C02', // IPORT Orange
       accentColor: '#0F161D', // IPORT Dark
-      radius: 'sm',
+      radius: 'md', // Liquid Glass
       headingWeight: 700,
       bodyWeight: 400,
       typographyScale: 'default',
@@ -102,7 +102,7 @@ export const brandPresets: BrandPreset[] = [
     config: {
       baseColor: '#00A3E1', // Blaze Blue
       accentColor: '#28282B', // Blaze Dark Gray
-      radius: 'sm',
+      radius: 'md', // Liquid Glass
       headingWeight: 600,
       bodyWeight: 400,
       typographyScale: 'default',
@@ -133,9 +133,9 @@ export const brandLogos: Record<BrandId, BrandLogos> = {
 
 // Logo dimension overrides
 export const logoSizes: Record<string, { width?: number; height?: number; scale?: number }> = {
-  
-
-
+  'Sonance_James_IPORT_Lockup_Light': {
+    scale: 0.9
+  }
 
 
 
@@ -168,9 +168,10 @@ export const colorPresets: ColorPreset[] = [
 
 export const radiusValues: Record<ThemeConfig['radius'], string> = {
   none: '0px',
-  sm: '2px',
-  md: '4px',
-  lg: '8px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '20px',
 };
 
 export const typographyScales: Record<ThemeConfig['typographyScale'], number> = {
@@ -325,7 +326,7 @@ export function generateRandomTheme(): ThemeConfig {
   const accentColors = colorPresets.filter(c => c.value !== randomColor.value);
   const randomAccent = accentColors[Math.floor(Math.random() * accentColors.length)];
 
-  const radiusOptions: ThemeConfig['radius'][] = ['none', 'sm', 'md', 'lg'];
+  const radiusOptions: ThemeConfig['radius'][] = ['none', 'sm', 'md', 'lg', 'xl'];
   const headingWeights: ThemeConfig['headingWeight'][] = [400, 500, 600, 700];
   const bodyWeights: ThemeConfig['bodyWeight'][] = [300, 400, 500];
   const typographyScaleOptions: ThemeConfig['typographyScale'][] = ['compact', 'default', 'large'];

package/dist/assets/components/accordion.tsx

@@ -11,9 +11,9 @@ const getStateStyles = (state?: AccordionTriggerState) => {
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, string> = {
-    hover: "text-foreground-secondary",
-    focus: "ring-2 ring-border-focus ring-offset-2 ring-offset-background",
-    expanded: "",
+    hover: "text-foreground bg-white/50 dark:bg-white/5",
+    focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+    expanded: "bg-white/30 dark:bg-white/[0.02]",
     disabled: "opacity-50 cursor-not-allowed",
   };
 
@@ -65,7 +65,12 @@ export function Accordion({
 
   return (
     <AccordionContext.Provider value={{ openItems, toggleItem, type }}>
-      <div data-sonance-name="accordion" className={cn("w-full divide-y divide-border border-y border-border", className)}>
+      <div data-sonance-name="accordion" className={cn(
+        "w-full divide-y divide-black/8 dark:divide-white/8",
+        "bg-white/60 dark:bg-white/[0.02] backdrop-blur-sm",
+        "border border-black/8 dark:border-white/8 rounded-xl overflow-hidden",
+        className
+      )}>
         {children}
       </div>
     </AccordionContext.Provider>
@@ -119,8 +124,11 @@ export const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerPr
         onClick={() => !isDisabled && accordionContext.toggleItem(itemContext.value)}
         disabled={isDisabled}
         className={cn(
-          "flex w-full items-center justify-between py-4 text-left font-medium text-foreground",
-          "transition-colors hover:text-foreground-secondary",
+          "flex w-full items-center justify-between px-4 py-4 text-left font-medium text-foreground",
+          "transition-all duration-200",
+          "hover:bg-white/50 dark:hover:bg-white/5 hover:text-foreground",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sonance-blue)]/30 focus-visible:ring-inset",
+          isExpanded && "bg-white/30 dark:bg-white/[0.02]",
           isDisabled && "opacity-50 cursor-not-allowed",
           getStateStyles(state),
           className
@@ -158,7 +166,7 @@ export const AccordionContent = forwardRef<
       className={cn(
         "overflow-hidden text-sm text-foreground-secondary",
         "transition-all duration-200",
-        itemContext.isOpen ? "pb-4" : "h-0",
+        itemContext.isOpen ? "px-4 pb-4" : "h-0",
         className
       )}
       aria-hidden={!itemContext.isOpen} data-sonance-name="accordion"

package/dist/assets/components/alert-dialog.tsx

@@ -14,7 +14,9 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -31,10 +33,19 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
+      data-sonance-name="alert-dialog"
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200",
-        "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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-        "rounded-sm",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6",
+        "backdrop-blur-xl rounded-3xl",
+        "bg-white/80 dark:bg-black/60",
+        "border 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)]",
+        "duration-200",
+        "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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
@@ -64,9 +75,10 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2.5",
       className
-    )} data-sonance-name="alert-dialog"
+    )}
+    data-sonance-name="alert-dialog"
     {...props}
   />
 );
@@ -90,7 +102,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-foreground-secondary", className)}
+    className={cn("text-sm text-foreground-muted", className)}
     {...props}
   />
 ));
@@ -104,7 +116,14 @@ const AlertDialogAction = React.forwardRef<
   <AlertDialogPrimitive.Action
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-sm bg-primary px-4 py-2 text-sm font-medium uppercase tracking-wide text-primary-foreground transition-colors hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "inline-flex h-9 items-center justify-center px-5 text-sm font-medium uppercase tracking-wide",
+      "rounded-xl backdrop-blur-sm transition-all duration-200",
+      "bg-[color:var(--sonance-blue)]/90 text-white",
+      "border border-white/20",
+      "hover:bg-[color:var(--sonance-blue)]/80 hover:shadow-[0_0_25px_var(--glow-primary-intense)]",
+      "focus: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",
+      "active:scale-[0.98]",
       className
     )}
     {...props}
@@ -119,7 +138,14 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      "mt-2 inline-flex h-10 items-center justify-center rounded-sm border border-border bg-transparent px-4 py-2 text-sm font-medium uppercase tracking-wide text-foreground transition-colors hover:bg-secondary-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 sm:mt-0",
+      "mt-2 sm:mt-0 inline-flex h-9 items-center justify-center px-5 text-sm font-medium uppercase tracking-wide",
+      "rounded-xl backdrop-blur-sm transition-all duration-200",
+      "bg-white/60 dark:bg-white/5 text-foreground",
+      "border border-black/10 dark:border-white/10",
+      "hover:bg-white/70 dark:hover:bg-white/8 hover:shadow-[0_0_15px_var(--glow-primary-subtle)]",
+      "focus: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",
+      "active:scale-[0.98]",
       className
     )}
     {...props}
@@ -140,4 +166,3 @@ export {
   AlertDialogAction,
   AlertDialogCancel,
 };
-

package/dist/assets/components/alert.tsx

@@ -6,21 +6,22 @@ import { cn } from "@/lib/utils";
 export type AlertState = "default" | "hover" | "focus";
 
 const alertVariants = cva(
-  "relative flex w-full items-start border transition-all duration-200",
+  "relative flex w-full items-start border transition-all duration-200 backdrop-blur-md",
   {
     variants: {
       variant: {
-        default: "border-border bg-background-secondary text-foreground",
-        success: "border-success/30 bg-success-light text-success",
-        error: "border-error/30 bg-error-light text-error",
-        warning: "border-warning/30 bg-warning-light text-warning",
-        info: "border-info/30 bg-info-light text-info",
+        // Glass morphism alerts
+        default: "border-black/8 dark:border-white/8 bg-white/70 dark:bg-white/5 text-foreground",
+        success: "border-success/20 bg-success/10 dark:bg-success/15 text-success",
+        error: "border-error/20 bg-error/10 dark:bg-error/15 text-error",
+        warning: "border-warning/20 bg-warning/10 dark:bg-warning/15 text-warning",
+        info: "border-info/20 bg-info/10 dark:bg-info/15 text-info",
       },
       size: {
-        xs: "gap-2 p-2 rounded-lg text-xs",
-        sm: "gap-2.5 p-3 rounded-xl text-xs",
-        md: "gap-3 p-4 rounded-xl text-sm",
-        lg: "gap-4 p-5 rounded-2xl text-sm",
+        xs: "gap-2 p-2 rounded-xl text-xs",
+        sm: "gap-2.5 p-3 rounded-2xl text-xs",
+        md: "gap-3 p-4 rounded-2xl text-sm",
+        lg: "gap-4 p-5 rounded-3xl text-sm",
       },
     },
     defaultVariants: {

package/dist/assets/components/avatar.tsx

@@ -7,7 +7,7 @@ import { User } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const avatarVariants = cva(
-  "relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-background-secondary",
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-white/60 dark:bg-white/5 backdrop-blur-sm border border-black/8 dark:border-white/8",
   {
     variants: {
       size: {
@@ -19,7 +19,7 @@ const avatarVariants = cva(
       },
       shape: {
         circle: "rounded-full",
-        square: "rounded-sm",
+        square: "rounded-xl",
       },
     },
     defaultVariants: {
@@ -104,7 +104,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "flex h-full w-full items-center justify-center bg-white/50 dark:bg-white/5",
       className
     )}
     {...props}
@@ -136,7 +136,7 @@ function AvatarGroup({ children, max, size = "md", className }: AvatarGroupProps
         <div data-sonance-name="avatar"
           className={cn(
             avatarVariants({ size, shape: "circle" }),
-            "ring-2 ring-background bg-background-tertiary"
+            "ring-2 ring-background bg-white/70 dark:bg-white/10"
           )}
         >
           <span id="avatar-group-span-excess" className="text-xs font-medium text-foreground-muted">+{excess}</span>

package/dist/assets/components/badge.tsx

@@ -4,23 +4,27 @@ import { cn } from "@/lib/utils";
 export type BadgeState = "default" | "hover";
 
 const badgeVariants = cva(
-  "inline-flex items-center font-medium transition-all duration-150",
+  "inline-flex items-center font-medium transition-all duration-150 backdrop-blur-sm",
   {
     variants: {
       variant: {
-        default: "bg-background-secondary text-foreground border border-border hover:bg-secondary-hover",
-        primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
-        secondary: "bg-secondary-hover text-secondary-foreground border border-border hover:bg-secondary",
-        success: "bg-success text-white hover:bg-success/90",
-        error: "bg-error text-white hover:bg-error/90",
-        warning: "bg-warning text-white hover:bg-warning/90",
-        info: "bg-info text-white hover:bg-info/90",
-        outline: "border border-border text-foreground bg-transparent hover:bg-secondary-hover",
-        glass: "bg-primary/20 text-primary border border-primary/30 backdrop-blur-sm hover:bg-primary/30",
+        // Glass morphism - default style
+        default: "bg-white/60 dark:bg-white/10 text-foreground border border-black/8 dark:border-white/10 hover:bg-white/70 dark:hover:bg-white/15",
+        primary: "bg-[color:var(--sonance-blue)]/20 text-[color:var(--sonance-blue)] dark:text-[color:var(--sonance-blue)] border border-[color:var(--sonance-blue)]/30 hover:bg-[color:var(--sonance-blue)]/30",
+        secondary: "bg-white/50 dark:bg-white/5 text-foreground-secondary border border-black/5 dark:border-white/5 hover:bg-white/60 dark:hover:bg-white/10",
+        success: "bg-success/20 text-success border border-success/30 hover:bg-success/30",
+        error: "bg-error/20 text-error border border-error/30 hover:bg-error/30",
+        warning: "bg-warning/20 text-warning border border-warning/30 hover:bg-warning/30",
+        info: "bg-info/20 text-info border border-info/30 hover:bg-info/30",
+        outline: "border border-black/15 dark:border-white/15 text-foreground bg-transparent hover:bg-white/50 dark:hover:bg-white/5",
+        // Non-glass solid variants
+        "solid-primary": "bg-primary text-primary-foreground hover:bg-primary-hover backdrop-blur-none",
+        "solid-success": "bg-success text-white hover:bg-success/90 backdrop-blur-none",
+        "solid-error": "bg-error text-white hover:bg-error/90 backdrop-blur-none",
       },
       size: {
-        xs: "px-1.5 py-0.5 text-[10px] rounded-md",
-        sm: "px-2 py-0.5 text-xs rounded-lg",
+        xs: "px-1.5 py-0.5 text-[10px] rounded-lg",
+        sm: "px-2 py-0.5 text-xs rounded-xl",
         md: "px-2.5 py-0.5 text-xs rounded-full",
         lg: "px-3 py-1 text-sm rounded-full",
       },

package/dist/assets/components/button.stories.tsx

@@ -84,8 +84,8 @@ export const Ghost: Story = {
 
 export const Inverted: Story = {
   args: {
-    children: 'Inverted Button',
-    variant: 'inverted',
+    children: 'Outline on Dark',
+    variant: 'outline',
   },
   parameters: {
     backgrounds: {
@@ -139,7 +139,7 @@ export const AllVariants: Story = {
       <Button id="all-variants-button-secondary" variant="secondary">Secondary</Button>
       <Button id="all-variants-button-ghost" variant="ghost">Ghost</Button>
       <div className="bg-sonance-charcoal p-2 rounded">
-        <Button id="all-variants-button-inverted" variant="inverted">Inverted</Button>
+        <Button id="all-variants-button-outline-dark" variant="outline">Outline</Button>
       </div>
     </div>
   ),

package/dist/assets/components/button.tsx

@@ -5,30 +5,37 @@ import { forwardRef } from "react";
 export type ButtonState = "default" | "hover" | "active" | "focus" | "disabled";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center font-medium uppercase tracking-wide transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
+  "inline-flex items-center justify-center font-medium uppercase tracking-wide transition-all duration-200 ease-out 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 active:scale-[0.98]",
   {
     variants: {
       variant: {
+        // Glass morphism - default style
+        default:
+          "bg-white/70 dark:bg-white/5 text-foreground border border-black/8 dark:border-white/10 hover:bg-white/80 dark:hover:bg-white/8 hover:border-black/12 dark:hover:border-white/15 hover:shadow-[0_0_20px_var(--glow-primary)] shadow-sm",
         primary:
-          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active shadow-sm hover:shadow-md",
+          "bg-[color:var(--sonance-blue)]/90 text-white border border-white/20 hover:bg-[color:var(--sonance-blue)]/80 hover:shadow-[0_0_25px_var(--glow-primary-intense)] shadow-lg",
         secondary:
-          "bg-secondary text-secondary-foreground border border-border hover:bg-secondary-hover hover:border-border-hover shadow-sm hover:shadow-md",
-        ghost: "text-foreground hover:bg-secondary-hover",
-        inverted:
-          "bg-sonance-white text-sonance-charcoal hover:opacity-90 shadow-sm hover:shadow-md",
-        glass:
-          "bg-primary/90 text-primary-foreground backdrop-blur-sm border border-white/10 hover:bg-primary/80 shadow-lg",
+          "bg-white/60 dark:bg-white/5 text-foreground border border-black/10 dark:border-white/10 hover:bg-white/70 dark:hover:bg-white/8 hover:shadow-[0_0_15px_var(--glow-primary-subtle)]",
+        ghost:
+          "text-foreground hover:bg-white/50 dark:hover:bg-white/5 border border-transparent hover:border-black/5 dark:hover:border-white/5",
+        outline:
+          "bg-transparent text-foreground border border-black/15 dark:border-white/15 hover:bg-white/50 dark:hover:bg-white/5 hover:border-black/20 dark:hover:border-white/20 hover:shadow-[0_0_15px_var(--glow-primary-subtle)]",
+        // Non-glass solid variants for fallback
+        solid:
+          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active shadow-sm hover:shadow-md backdrop-blur-none",
+        "solid-secondary":
+          "bg-secondary text-secondary-foreground border border-border hover:bg-secondary-hover hover:border-border-hover shadow-sm hover:shadow-md backdrop-blur-none",
       },
       size: {
-        xs: "h-6 px-2.5 text-[10px] rounded-md",
-        sm: "h-8 px-3.5 text-xs rounded-lg",
-        md: "h-9 px-4 text-sm rounded-lg",
-        lg: "h-10 px-5 text-sm rounded-xl",
+        xs: "h-7 px-3 text-[10px] rounded-lg",
+        sm: "h-8 px-4 text-xs rounded-xl",
+        md: "h-9 px-5 text-sm rounded-xl",
+        lg: "h-10 px-6 text-sm rounded-2xl",
         icon: "h-9 w-9 rounded-full",
       },
     },
     defaultVariants: {
-      variant: "primary",
+      variant: "default",
       size: "sm",
     },
   }
@@ -39,39 +46,51 @@ const getStateStyles = (variant: string | null | undefined, state?: ButtonState)
   if (!state || state === "default") return "";
 
   const stateMap: Record<string, Record<string, string>> = {
+    default: {
+      hover: "bg-white/80 dark:bg-white/8 border-black/12 dark:border-white/15 shadow-[0_0_20px_var(--glow-primary)]",
+      active: "bg-white/90 dark:bg-white/10 scale-[0.98]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+      disabled: "opacity-50 pointer-events-none",
+    },
     primary: {
-      hover: "bg-primary-hover shadow-md",
-      active: "bg-primary-active scale-[0.98]",
-      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+      hover: "bg-[color:var(--sonance-blue)]/80 shadow-[0_0_25px_var(--glow-primary-intense)]",
+      active: "bg-[color:var(--sonance-blue)]/70 scale-[0.98]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
     secondary: {
-      hover: "bg-secondary-hover border-border-hover shadow-md",
-      active: "bg-secondary-hover scale-[0.98]",
-      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+      hover: "bg-white/70 dark:bg-white/8 shadow-[0_0_15px_var(--glow-primary-subtle)]",
+      active: "bg-white/80 dark:bg-white/10 scale-[0.98]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
     ghost: {
-      hover: "bg-secondary-hover",
-      active: "bg-secondary-hover scale-[0.98]",
-      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+      hover: "bg-white/50 dark:bg-white/5",
+      active: "bg-white/60 dark:bg-white/8 scale-[0.98]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
-    inverted: {
-      hover: "opacity-90 shadow-md",
-      active: "opacity-80 scale-[0.98]",
-      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+    outline: {
+      hover: "bg-white/50 dark:bg-white/5 border-black/20 dark:border-white/20 shadow-[0_0_15px_var(--glow-primary-subtle)]",
+      active: "bg-white/60 dark:bg-white/8 scale-[0.98]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
-    glass: {
-      hover: "bg-primary/80 shadow-lg",
-      active: "bg-primary/70 scale-[0.98]",
-      focus: "ring-2 ring-primary/20 ring-offset-2 ring-offset-background",
+    solid: {
+      hover: "bg-primary-hover shadow-md",
+      active: "bg-primary-active scale-[0.98]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
+      disabled: "opacity-50 pointer-events-none",
+    },
+    "solid-secondary": {
+      hover: "bg-secondary-hover border-border-hover shadow-md",
+      active: "bg-secondary-hover scale-[0.98]",
+      focus: "ring-2 ring-[color:var(--sonance-blue)]/30 ring-offset-2 ring-offset-background",
       disabled: "opacity-50 pointer-events-none",
     },
   };
 
-  return stateMap[variant || "primary"]?.[state] || "";
+  return stateMap[variant || "default"]?.[state] || "";
 };
 
 interface ButtonProps

package/dist/assets/components/calendar.tsx

@@ -62,13 +62,17 @@ export function Calendar({
   };
 
   return (
-    <div data-sonance-name="calendar" className={cn("p-4 bg-card border border-border rounded-sm", className)}>
+    <div data-sonance-name="calendar" className={cn(
+      "p-4 bg-white/70 dark:bg-white/[0.03] backdrop-blur-lg",
+      "border border-black/8 dark:border-white/8 rounded-2xl",
+      className
+    )}>
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <button
           type="button"
           onClick={handlePreviousMonth}
-          className="p-1.5 hover:bg-secondary-hover rounded-sm transition-colors"
+          className="p-1.5 hover:bg-white/50 dark:hover:bg-white/10 rounded-xl transition-colors"
           aria-label="Previous month"
         >
           <ChevronLeft className="h-4 w-4 text-foreground" />
@@ -79,7 +83,7 @@ export function Calendar({
         <button
           type="button"
           onClick={handleNextMonth}
-          className="p-1.5 hover:bg-secondary-hover rounded-sm transition-colors"
+          className="p-1.5 hover:bg-white/50 dark:hover:bg-white/10 rounded-xl transition-colors"
           aria-label="Next month"
         >
           <ChevronRight className="h-4 w-4 text-foreground" />
@@ -113,16 +117,16 @@ export function Calendar({
               onClick={() => handleSelectDate(day)}
               disabled={isDisabled}
               className={cn(
-                "h-8 w-8 flex items-center justify-center text-sm rounded-sm transition-colors",
+                "h-8 w-8 flex items-center justify-center text-sm rounded-xl transition-all duration-200",
                 isSelected
-                  ? "bg-primary text-primary-foreground"
+                  ? "bg-[color:var(--sonance-blue)] text-white shadow-[0_0_12px_var(--glow-primary)]"
                   : isDisabled
                   ? "text-foreground-subtle cursor-not-allowed"
                   : !isCurrentMonth
-                  ? "text-foreground-subtle hover:bg-secondary-hover"
+                  ? "text-foreground-subtle hover:bg-white/50 dark:hover:bg-white/10"
                   : isTodayDate
-                  ? "bg-secondary text-foreground hover:bg-secondary-hover font-medium"
-                  : "text-foreground hover:bg-secondary-hover"
+                  ? "bg-white/50 dark:bg-white/10 text-foreground font-medium hover:bg-white/60 dark:hover:bg-white/15"
+                  : "text-foreground hover:bg-white/50 dark:hover:bg-white/10"
               )}
             >
               {format(day, "d")}

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>(