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

This commit is contained in:
Thomas Camlong
2025-04-22 20:51:58 +02:00
parent fc40975c50
commit 773e3b78a3
4 changed files with 9 additions and 8 deletions

View File

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

View File

@@ -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,
}}