feat(web): add magic gradient color variable to globals.css

web/src/app/globals.css

@@ -183,6 +183,8 @@
 	--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px
 		hsl(0 0% 0% / 0.1);
 	--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+	--magic-gradient-color: oklch(0.67 0.2 23.8 / 15%);
 }
 
 .dark {
@@ -233,6 +235,8 @@
 	--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px
 		hsl(0 0% 0% / 0.1);
 	--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+	--magic-gradient-color: oklch(0.27 0 0);
 }
 
 @layer base {

web/src/app/icons/components/icon-search.tsx

@@ -78,7 +78,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 			// Then filter by search query
 			if (query.trim()) {
 				// Normalization function: lowercase, remove spaces and hyphens
-				const normalizeString = (str: string) => str.toLowerCase().replace(/[-\s]/g, '')
+				const normalizeString = (str: string) => str.toLowerCase().replace(/[-\s]/g, "")
 				const normalizedQuery = normalizeString(query)
 
 				filtered = filtered.filter(({ name, data }) => {
@@ -158,8 +158,6 @@ export function IconSearch({ icons }: IconSearchProps) {
 		[pathname, router, initialSort],
 	)
 
-	
-
 	const handleSearch = useCallback(
 		(query: string) => {
 			setSearchQuery(query)
@@ -409,7 +407,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 						variant="default"
 						size="lg"
 						onClick={() => {
-							setIsLazyRequestSubmitted(true); 
+							setIsLazyRequestSubmitted(true)
 							toast("We hear you!", {
 								description: `Okay, okay... we'll consider adding "${searchQuery || "that icon"}" just for you. 😉`,
 							})
@@ -418,7 +416,7 @@ export function IconSearch({ icons }: IconSearchProps) {
 								categories: selectedCategories,
 							})
 						}}
-						disabled={isLazyRequestSubmitted} 
+						disabled={isLazyRequestSubmitted}
 					>
 						I want this icon added but I'm too lazy to add it myself
 					</Button>

web/src/components/icon-details.tsx

@@ -142,7 +142,6 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 	}
 
 	const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
-		const { resolvedTheme } = useTheme()
 		const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
 		const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`
 		const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`
@@ -151,7 +150,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 
 		return (
 			<TooltipProvider key={variantKey} delayDuration={500}>
-				<MagicCard gradientColor={resolvedTheme === "dark" ? "#262626" : "#D9D9D955"} className="p-0 rounded-md">
+				<MagicCard className="p-0 rounded-md">
 					<div className="flex flex-col items-center p-4 transition-all">
 						<Tooltip>
 							<TooltipTrigger asChild>

web/src/components/magicui/magic-card.tsx

@@ -95,7 +95,7 @@ export function MagicCard({
 				className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
 				style={{
 					background: useMotionTemplate`
-            radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%)
+            radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, var(--magic-gradient-color, ${gradientColor}), transparent 100%)
           `,
 					opacity: gradientOpacity,
 				}}