Refactor UI components for consistent design system

Updated badge, progress, scroll-area, spinner, toggle-group, and toggle components to use a more unified and simplified design system. This includes standardizing border radii, spacing, color schemes, and removing complex or custom visual effects in favor of design token-based styling. The changes improve maintainability and visual consistency across the UI component library.

Author: hotlong

packages/components/src/ui/badge.tsx

@@ -5,18 +5,17 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-sm border px-2.5 py-0.5 text-[10px] font-mono font-bold uppercase tracking-widest w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1.5 [&>svg]:pointer-events-none focus-visible:border-cyan-500 focus-visible:ring-cyan-500/50 focus-visible:ring-[1px] transition-all duration-300 overflow-hidden backdrop-blur-sm select-none",
+  "inline-flex items-center justify-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-cyan-500/50 bg-cyan-950/40 text-cyan-300 shadow-[0_0_10px_-4px_rgba(6,182,212,0.6)] [a&]:hover:bg-cyan-900/60 [a&]:hover:shadow-[0_0_15px_-2px_rgba(6,182,212,0.8)] [a&]:hover:border-cyan-400",
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
-          "border-slate-700 bg-slate-800/60 text-slate-300 shadow-sm [a&]:hover:bg-slate-700/80 [a&]:hover:text-slate-200",
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "border-red-500/40 bg-red-950/40 text-red-400 shadow-[0_0_10px_-4px_rgba(239,68,68,0.6)] [a&]:hover:bg-red-900/60 [a&]:hover:border-red-400 [a&]:hover:shadow-[0_0_15px_-2px_rgba(239,68,68,0.8)]",
-        outline:
-          "text-cyan-400 border-cyan-800 bg-transparent shadow-[inset_0_0_5px_rgba(6,182,212,0.1)] [a&]:hover:bg-cyan-950/30 [a&]:hover:border-cyan-500 [a&]:hover:text-cyan-200 [a&]:hover:shadow-[0_0_10px_-5px_cyan]",
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
       },
     },
     defaultVariants: {

packages/components/src/ui/progress.tsx

@@ -12,28 +12,16 @@ function Progress({
     <ProgressPrimitive.Root
       data-slot="progress"
       className={cn(
-        "relative h-3 w-full overflow-hidden rounded-sm bg-slate-950/60 border border-slate-800/60 shadow-inner",
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
         className
       )}
       {...props}
     >
-      {/* Background Grid Pattern for empty track */}
-      <div className="absolute inset-0 bg-[linear-gradient(90deg,transparent_2px,rgba(6,182,212,0.1)_2px),linear-gradient(0deg,transparent_2px,rgba(6,182,212,0.1)_2px)] bg-[size:10px_10px] opacity-20" />
-
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className="h-full w-full flex-1 transition-all bg-cyan-500 relative shadow-[0_0_15px_cyan]"
+        className="h-full w-full flex-1 bg-primary transition-all"
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      >
-        {/* Pulse / Flow Effect Overlay */}
-        <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent -translate-x-full animate-[shimmer_1.5s_infinite_linear]" />
-        
-        {/* Leading Edge Hotspot */}
-        <div className="absolute right-0 top-0 bottom-0 w-0.5 bg-white shadow-[0_0_10px_2px_white] z-10" />
-        
-        {/* Scanlines on the bar */}
-        <div className="absolute inset-0 bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.2)_50%)] bg-[size:4px_4px]" />
-      </ProgressPrimitive.Indicator>
+      />
     </ProgressPrimitive.Root>
   )
 }

packages/components/src/ui/scroll-area.tsx

@@ -49,7 +49,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="relative flex-1 rounded-full bg-cyan-900/40 hover:bg-cyan-500/60 transition-colors duration-300"
+        className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )

packages/components/src/ui/spinner.tsx

@@ -1,36 +1,16 @@
 import * as React from "react"
 import { cn } from "../lib/utils"
+import { Loader2 } from "lucide-react"
 
 function Spinner({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       role="status"
       aria-label="Loading"
-      className={cn("relative flex items-center justify-center shrink-0", className)}
+      className={cn("flex items-center justify-center", className)}
       {...props}
     >
-      <div className="relative aspect-square h-full w-full min-w-[1em] min-h-[1em]">
-          {/* Outer Atmosphere / Fire (Fast Spin) */}
-          <div className="absolute inset-0 rounded-full border-[15%] border-transparent border-t-orange-500 border-r-red-600 animate-[spin_0.8s_linear_infinite] shadow-[0_0_15px_-4px_rgba(234,88,12,0.8)]" 
-               style={{ borderWidth: "2px" }} 
-          />
-          
-          {/* Turbulence Layer (Reverse Spin) */}
-          <div className="absolute inset-[10%] rounded-full border-[15%] border-transparent border-b-yellow-400/80 border-l-orange-500/80 animate-[spin_1.5s_ease-in-out_infinite_reverse]" 
-               style={{ borderWidth: "2px" }}
-          />
-
-          {/* Core Planet (Internal) */}
-          <div className="absolute inset-[25%] rounded-full overflow-hidden bg-slate-950 shadow-[inset_0_0_4px_rgba(0,0,0,0.8)]">
-               {/* Molten Core Texture (Rotating) */}
-               <div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] animate-[spin_3s_linear_infinite]">
-                  <div className="w-full h-full bg-[conic-gradient(from_180deg,#1e293b_0deg,#0e7490_80deg,#7c3aed_160deg,#be123c_240deg,#ea580c_300deg,#1e293b_360deg)] opacity-90 blur-[1px]" />
-               </div>
-               
-              {/* Surface Reflection & Shadow (Spherical look) */}
-               <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.4)_0%,transparent_50%,rgba(0,0,0,0.9)_100%)] z-10" />
-          </div>
-      </div>
+      <Loader2 className="animate-spin text-muted-foreground w-full h-full min-w-4 min-h-4" />
     </div>
   )
 }

packages/components/src/ui/toggle-group.tsx

@@ -6,40 +6,32 @@ import { cn } from "../lib/utils"
 import { toggleVariants } from "./toggle"
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }
+  VariantProps<typeof toggleVariants>
 >({
   size: "default",
   variant: "default",
-  spacing: 0,
 })
 
 function ToggleGroup({
   className,
   variant,
   size,
-  spacing = 0,
   children,
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }) {
+  VariantProps<typeof toggleVariants>) {
   return (
     <ToggleGroupPrimitive.Root
       data-slot="toggle-group"
       data-variant={variant}
       data-size={size}
-      data-spacing={spacing}
-      style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md bg-slate-950/20 p-1 border border-slate-800/50 shadow-inner",
+        "flex justify-center flex-row gap-1 items-center",
         className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+      <ToggleGroupContext.Provider value={{ variant, size }}>
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
@@ -61,20 +53,11 @@ function ToggleGroupItem({
       data-slot="toggle-group-item"
       data-variant={context.variant || variant}
       data-size={context.size || size}
-      data-spacing={context.spacing}
       className={cn(
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        // Force rounded-sm logic for group items when spacing is 0
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-sm data-[spacing=0]:last:rounded-r-sm",
-        // Handle borders for connected items
-        "data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-         // Add separating line for non-outline items if needed, or rely on gaps. 
-         // For Outline variant in Future Tech, we might want to keep them distinct or joined.
-         // Current logic keeps them joined.
         className
       )}
       {...props}

packages/components/src/ui/toggle.tsx

@@ -5,23 +5,18 @@ 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-all duration-300 hover:text-cyan-400 focus-visible:ring-1 focus-visible:ring-cyan-400/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: [
-          "bg-transparent hover:bg-cyan-950/20",
-          "data-[state=on]:bg-cyan-950/40 data-[state=on]:text-cyan-300 data-[state=on]:border data-[state=on]:border-cyan-500/30 data-[state=on]:shadow-[0_0_12px_-3px_rgba(6,182,212,0.4)]",
-        ],
-        outline: [
-          "border border-cyan-900/60 bg-transparent shadow-xs hover:bg-cyan-950/30 hover:text-cyan-300 hover:border-cyan-500/50",
-          "data-[state=on]:bg-cyan-600 data-[state=on]:text-white data-[state=on]:border-cyan-400 data-[state=on]:shadow-[0_0_15px_rgba(6,182,212,0.6)]",
-        ],
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 px-3 min-w-9",
-        sm: "h-8 px-2 min-w-8 text-xs",
-        lg: "h-10 px-3 min-w-10",
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
       },
     },
     defaultVariants: {