save

component-library/src/components/ui/button.tsx

@@ -4,22 +4,33 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
+/**
+ * Glass physics shared by the filled variants: the backdrop is blurred and
+ * saturated the way the cube renders bend what is behind them, the lit rim
+ * and the caustic ride the inset-shadow slot, the cast bloom the outer one.
+ * Tint and edge colour come from the `glass-*` utilities in globals.css.
+ */
+const glass =
+  "backdrop-blur-md backdrop-saturate-150 inset-shadow-glass shadow-glass hover:shadow-glass-lg"
+
+const glassOnHover =
+  "hover:backdrop-blur-md hover:backdrop-saturate-150 hover:inset-shadow-glass hover:shadow-glass"
+
 const buttonVariants = cva(
   "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg text-sm font-semibold whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-sm hover:bg-brand-700",
-        outline:
-          "border border-border bg-card text-foreground shadow-pill hover:border-brand-200 hover:bg-brand-50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-brand-100",
-        ghost: "text-foreground hover:bg-secondary",
+        default: `${glass} glass-teal text-primary-foreground hover:glass-lit`,
+        outline: `${glass} glass-clear text-foreground hover:glass-lit`,
+        secondary: `${glass} glass-mint text-secondary-foreground hover:glass-lit`,
+        ghost: `${glassOnHover} text-foreground hover:glass-clear`,
         link: "text-primary underline-offset-4 hover:underline",
-        /* white button sitting on the teal gradient band */
-        inverse: "bg-white text-brand-800 shadow-sm hover:bg-brand-50",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        /* frosted white button sitting on the teal gradient band */
+        inverse: `${glass} glass-frost text-brand-800 hover:glass-lit`,
+        /* its quieter neighbour: the band still reads through the glass */
+        inverseOutline: `${glass} glass-veil text-white hover:glass-lit`,
+        destructive: `${glass} glass-danger text-destructive-foreground hover:glass-lit`,
       },
       size: {
         default: "h-10 px-5 py-2",