feat: add glow button variant

Author: wackerow

src/components/ui/buttons/Button.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
+import { Sparkles } from "lucide-react"
 import { Slot } from "@radix-ui/react-slot"
 
 import { cn } from "@/lib/utils/cn"
@@ -10,6 +11,26 @@ import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
 import { BaseLink, type LinkProps } from "../Link"
 
+const variants = {
+  variant: {
+    solid: cn(
+      "text-white bg-primary-action border-transparent",
+      "hover:!text-white hover:bg-primary-action-hover", // Hover
+      "active:bg-primary-action-hover", // Active
+      "disabled:bg-disabled disabled:text-background" // Disabled
+    ),
+    outline: "", // Base styling
+    ghost: "border-transparent hover:shadow-none",
+    link: "border-transparent hover:shadow-none underline !min-h-0 !py-0 !px-1 active:text-primary",
+    glow: "group relative rounded-lg border-none p-px text-body [&_[data-label='inner']]:!rounded-[7px]",
+  },
+  size: {
+    lg: "text-lg py-3 px-8 [&>svg]:size-6 [&>svg]:text-2xl rounded-lg focus-visible:rounded-lg",
+    md: "min-h-10.5 px-4 py-2 [&>svg]:size-6 [&>svg]:text-2xl",
+    sm: "text-xs min-h-[31px] py-1.5 px-2 [&>svg]:size-4 [&>svg]:text-md",
+  },
+}
+
 const buttonVariants = cva(
   cn(
     // Sizing and positioning classes:
@@ -28,24 +49,7 @@ const buttonVariants = cva(
     "[&[data-secondary='true']]:text-body"
   ),
   {
-    variants: {
-      variant: {
-        solid: cn(
-          "text-white bg-primary-action border-transparent",
-          "hover:!text-white hover:bg-primary-action-hover", // Hover
-          "active:bg-primary-action-hover", // Active
-          "disabled:bg-disabled disabled:text-background" // Disabled
-        ),
-        outline: "", // Base styling
-        ghost: "border-transparent hover:shadow-none",
-        link: "border-transparent hover:shadow-none underline !min-h-0 !py-0 !px-1 active:text-primary",
-      },
-      size: {
-        lg: "text-lg py-3 px-8 [&>svg]:text-2xl rounded-lg focus-visible:rounded-lg",
-        md: "min-h-10.5 px-4 py-2 [&>svg]:text-2xl",
-        sm: "text-xs min-h-[31px] py-1.5 px-2 [&>svg]:text-md",
-      },
-    },
+    variants,
     defaultVariants: {
       variant: "solid",
       size: "md",
@@ -110,6 +114,30 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
       onClick?.(e)
     }
+    if (variant === "glow") {
+      const { children, ...buttonProps } = props
+      return (
+        <button
+          className={cn(variants.variant.glow, className)}
+          {...buttonProps}
+        >
+          {/* Glow */}
+          <div className="absolute inset-0 overflow-hidden rounded-[inherit] opacity-50 blur-md transition-transform duration-300 after:absolute after:-inset-[200%] after:bg-rainbow-gradient group-hover:scale-110 group-hover:transition-transform group-hover:duration-300 after:motion-safe:animate-spin-4" />
+          {/* Border */}
+          <div className="absolute inset-0 overflow-hidden rounded-[inherit] after:absolute after:-inset-[200%] after:bg-rainbow-gradient after:motion-safe:animate-spin-4" />
+          <div
+            data-label="inner"
+            className={cn(
+              variants.size[size || "md"],
+              "relative z-[1] inline-flex gap-2 bg-background/90 px-6 pb-2 pt-3 font-semibold shadow-inner ring-[1px] ring-white/25 backdrop-blur-lg"
+            )}
+          >
+            {children}
+            <Sparkles className="rotate//-12 mb-1 transition-transform group-hover:animate-wave group-hover:transition-transform" />
+          </div>
+        </button>
+      )
+    }
 
     const Comp = asChild ? Slot : "button"
     return (

src/styles/semantic-tokens.css

@@ -97,6 +97,16 @@
     --card-gradient-secondary-hover: linear-gradient(95deg, rgba(211, 145, 242, 0.2) 0%, rgba(159, 43, 212, 0.2) 102.78%);
     --ten-year-gradient: linear-gradient(100deg, #F6C9EA 55.38%, #C7A9F1 110.54%);
 
+    /* Rainbow gradients */
+    --rainbow-gradient: conic-gradient(
+      from 0deg,
+      hsla(var(--primary)),
+      hsla(var(--accent-b)),
+      hsla(var(--accent-a)),
+      hsla(var(--accent-c)),
+      hsla(var(--primary))
+    );
+
     /* Shadows */
     --shadow-color-a: hsla(var(--purple-800), 0.02);
     --shadow-color-b: hsla(var(--red-800), 0.04);

tailwind.config.ts

@@ -237,6 +237,7 @@ const config = {
         "card-gradient-secondary": "var(--card-gradient-secondary)",
         "card-gradient-secondary-hover": "var(--card-gradient-secondary-hover)",
         "ten-year-gradient": "var(--ten-year-gradient)",
+        "rainbow-gradient": "var(--rainbow-gradient)",
       },
       boxShadow: {
         "table-box": "var(--table-box-shadow)",
@@ -306,6 +307,12 @@ const config = {
           "0%": { opacity: "0" },
           "100%": { opacity: "1" },
         },
+        "rotate-back-and-forth": {
+          "0%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(5deg)" },
+          "75%": { transform: "rotate(-5deg)" },
+          "100%": { transform: "rotate(0deg)" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
@@ -320,9 +327,11 @@ const config = {
         "spin-18": "spin 36s linear infinite",
         "counter-spin-18": "spin 36s linear infinite reverse",
         "spin-9": "spin 18s linear infinite",
+        "spin-4": "spin 4s linear infinite",
         "counter-spin-9": "spin 18s linear infinite reverse",
         "pulse-light": "pulse-light 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
         "fade-in": "fade-in 150ms ease-in-out",
+        wave: "rotate-back-and-forth 1s linear infinite",
       },
       // Add custom border-radius tailwinds extension for "4xl" as "2rem"
       borderRadius: {