@opensite/ui 0.8.9 → 0.9.1

package/dist/link-tree-block.cjs

@@ -64,6 +64,54 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1002,8 +1050,8 @@ function LinkTreeBlock({
   brandName,
   brandTagline,
   brandLogo,
-  brandAvatar = blockBrandedIconsAndPlaceholders.avatar1,
-  brandVerified = true,
+  brandAvatar,
+  brandVerified = false,
   verifiedIcon,
   brandSlot,
   links,
@@ -1044,19 +1092,16 @@ function LinkTreeBlock({
   socialLinkClassName,
   socialIconClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "gray",
   spacing,
   pattern,
   patternOpacity,
   patternClassName,
-  backgroundPattern = "dotPattern",
+  backgroundPattern,
   accentColor,
   optixFlowConfig
 }) {
-  const isDark = theme === "dark";
-  const isGlass = theme === "glass";
-  const resolvedBackground = background ?? (isDark ? "dark" : "gray");
+  const resolvedBackground = background;
   const resolvedPattern = pattern ?? backgroundPattern;
   const [lightboxOpen, setLightboxOpen] = React.useState(false);
   const [lightboxIndex, setLightboxIndex] = React.useState(0);
@@ -1129,10 +1174,7 @@ function LinkTreeBlock({
                   {
                     name: "lucide/check",
                     size: 14,
-                    className: cn(
-                      "text-primary-foreground",
-                      verifiedIconClassName
-                    )
+                    className: cn("", verifiedIconClassName)
                   }
                 )
               }
@@ -1153,7 +1195,8 @@ function LinkTreeBlock({
               "p",
               {
                 className: cn(
-                  "max-w-xs text-balance text-sm text-muted-foreground",
+                  "max-w-xs text-balance text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   taglineClassName
                 ),
                 children: brandTagline
@@ -1163,7 +1206,22 @@ function LinkTreeBlock({
         ]
       }
     );
-  }, [brandSlot, headerClassName, avatarClassName, resolvedAvatar, optixFlowConfig, brandVerified, verifiedBadgeClassName, verifiedIcon, verifiedIconClassName, brandName, isDark, nameClassName, brandTagline, taglineClassName]);
+  }, [
+    brandSlot,
+    headerClassName,
+    avatarClassName,
+    resolvedAvatar,
+    optixFlowConfig,
+    brandVerified,
+    verifiedBadgeClassName,
+    verifiedIcon,
+    verifiedIconClassName,
+    brandName,
+    resolvedBackground,
+    nameClassName,
+    brandTagline,
+    taglineClassName
+  ]);
   const renderLinks = React.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1196,7 +1254,7 @@ function LinkTreeBlock({
             className: cn(
               "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : isDark ? "border border-border/10 bg-muted/10 hover:bg-muted/20" : isGlass ? "border border-border/30 bg-card/60 backdrop-blur-sm hover:bg-card/80" : "border border-border bg-card hover:bg-accent",
+              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "border border-border bg-card hover:bg-accent",
               linkClassName,
               isFeatured ? featuredLinkClassName : null,
               linkItemClassName
@@ -1213,7 +1271,7 @@ function LinkTreeBlock({
           className: cn(
             "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : isDark ? "border border-border/10 bg-muted/10 hover:bg-muted/20" : isGlass ? "border border-border/30 bg-card/60 backdrop-blur-sm hover:bg-card/80" : "border border-border bg-card hover:bg-accent",
+            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "border border-border bg-card hover:bg-accent",
             linkClassName,
             isFeatured ? featuredLinkClassName : null,
             linkItemClassName
@@ -1237,7 +1295,7 @@ function LinkTreeBlock({
                 {
                   className: cn(
                     "mt-0.5 block truncate text-xs",
-                    isFeatured ? "text-primary-foreground/70" : "text-muted-foreground",
+                    isFeatured ? "text-primary-foreground/70" : getTextColor(resolvedBackground, "muted"),
                     linkDescriptionClassName
                   ),
                   children: description
@@ -1259,7 +1317,7 @@ function LinkTreeBlock({
                 size: 16,
                 className: cn(
                   "shrink-0 transition-transform group-hover:translate-x-0.5",
-                  isFeatured ? "text-primary-foreground/70" : "text-muted-foreground",
+                  isFeatured ? "text-primary-foreground/70" : getTextColor(resolvedBackground, "muted"),
                   linkChevronClassName
                 )
               }
@@ -1269,7 +1327,19 @@ function LinkTreeBlock({
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, isDark, isGlass, linkClassName, featuredLinkClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    linkIconClassName,
+    resolvedBackground,
+    linkClassName,
+    featuredLinkClassName,
+    linkLabelClassName,
+    linkDescriptionClassName,
+    linkBadgeClassName,
+    linkChevronClassName
+  ]);
   const renderMediaGallery = React.useMemo(() => {
     if (mediaGallerySlot) return mediaGallerySlot;
     if (!mediaGallery || mediaGallery.length === 0) return null;
@@ -1279,7 +1349,7 @@ function LinkTreeBlock({
         "h3",
         {
           className: cn(
-            "text-center text-sm font-medium text-muted-foreground",
+            "text-center text-sm font-medium ",
             mediaGalleryTitleClassName
           ),
           children: mediaGalleryTitle
@@ -1295,7 +1365,8 @@ function LinkTreeBlock({
               className: cn(
                 "group relative aspect-square overflow-hidden rounded-lg cursor-pointer",
                 "transition-all duration-200 hover:scale-[1.02]",
-                isDark ? "ring-1 ring-white/10" : "ring-1 ring-border",
+                "ring-1",
+                getBorderColor(resolvedBackground, "muted"),
                 mediaGalleryItemClassName,
                 item.className
               ),
@@ -1355,7 +1426,7 @@ function LinkTreeBlock({
                         name: "lucide/play",
                         size: 24,
                         className: cn(
-                          "text-background opacity-0 transition-opacity group-hover:opacity-100",
+                          " opacity-0 transition-opacity group-hover:opacity-100",
                           mediaGalleryPlayIconClassName
                         )
                       }
@@ -1369,7 +1440,21 @@ function LinkTreeBlock({
         }
       )
     ] });
-  }, [mediaGallerySlot, mediaGallery, mediaGalleryLimit, mediaGalleryClassName, mediaGalleryTitle, isDark, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, handleMediaClick, mediaGalleryMediaClassName, optixFlowConfig, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName]);
+  }, [
+    mediaGallerySlot,
+    mediaGallery,
+    mediaGalleryLimit,
+    mediaGalleryClassName,
+    mediaGalleryTitle,
+    mediaGalleryTitleClassName,
+    mediaGalleryGridClassName,
+    mediaGalleryItemClassName,
+    handleMediaClick,
+    mediaGalleryMediaClassName,
+    optixFlowConfig,
+    mediaGalleryOverlayClassName,
+    mediaGalleryPlayIconClassName
+  ]);
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1381,10 +1466,11 @@ function LinkTreeBlock({
           socialLinksClassName
         ),
         children: socialLinks.map((social, index) => {
-          const icon = social.icon || (social.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+          const { iconName, ...socialPressableProps } = social;
+          const icon = social.icon || (iconName ? /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
-              name: social.iconName,
+              name: iconName,
               size: 20,
               className: socialIconClassName
             }
@@ -1393,14 +1479,13 @@ function LinkTreeBlock({
           return /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
-              href: social.href,
+              ...socialPressableProps,
               "aria-label": ariaLabel,
               className: cn(
                 "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
                 "hover:scale-110 active:scale-95",
                 getNestedCardBg(resolvedBackground),
                 getNestedCardTextColor(resolvedBackground),
-                isDark ? "hover:bg-muted/20" : isGlass ? "backdrop-blur-sm hover:bg-card/80" : "hover:bg-accent",
                 socialLinkClassName,
                 social.className
               ),
@@ -1411,7 +1496,14 @@ function LinkTreeBlock({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, isGlass, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    resolvedBackground,
+    socialLinkClassName
+  ]);
   const renderFooter = React.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1430,7 +1522,6 @@ function LinkTreeBlock({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          "text-muted-foreground/60",
           footerClassName,
           actionClassName
         ),
@@ -1442,16 +1533,13 @@ function LinkTreeBlock({
         ] })
       }
     );
-  }, [footerSlot, footerAction, isDark, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background: resolvedBackground,
       spacing,
-      className: cn(
-        theme === "dark" ? "bg-foreground" : theme === "glass" ? "bg-gradient-to-br from-muted/50 via-background to-muted/30" : "bg-muted/30",
-        className
-      ),
+      className,
       pattern: resolvedPattern,
       patternOpacity,
       patternClassName,

package/dist/link-tree-block.d.cts

@@ -221,13 +221,6 @@ interface LinkTreeBlockProps {
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Theme variation for the component.
-     * - "light": Light background with dark text (default)
-     * - "dark": Dark background with light text
-     * - "glass": Glassmorphism effect with gradient background
-     */
-    theme?: "light" | "dark" | "glass";
     /**
      * Background style for the section
      */
@@ -297,6 +290,6 @@ interface LinkTreeBlockProps {
  * />
  * ```
  */
-declare function LinkTreeBlock({ brandName, brandTagline, brandLogo, brandAvatar, brandVerified, verifiedIcon, brandSlot, links, linksSlot, socialLinks, socialLinksSlot, mediaGallery, mediaGallerySlot, mediaGalleryTitle, mediaGalleryLimit, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, taglineClassName, verifiedBadgeClassName, verifiedIconClassName, linksClassName, linkClassName, featuredLinkClassName, linkIconClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName, mediaGalleryClassName, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, mediaGalleryMediaClassName, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, theme, background, spacing, pattern, patternOpacity, patternClassName, backgroundPattern, accentColor, optixFlowConfig, }: LinkTreeBlockProps): React.JSX.Element;
+declare function LinkTreeBlock({ brandName, brandTagline, brandLogo, brandAvatar, brandVerified, verifiedIcon, brandSlot, links, linksSlot, socialLinks, socialLinksSlot, mediaGallery, mediaGallerySlot, mediaGalleryTitle, mediaGalleryLimit, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, taglineClassName, verifiedBadgeClassName, verifiedIconClassName, linksClassName, linkClassName, featuredLinkClassName, linkIconClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName, mediaGalleryClassName, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, mediaGalleryMediaClassName, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, backgroundPattern, accentColor, optixFlowConfig, }: LinkTreeBlockProps): React.JSX.Element;
 
 export { LinkTreeBlock, type LinkTreeBlockProps, type LinkTreeLink, type MediaGalleryItem, type SocialLink };

package/dist/link-tree-block.d.ts

@@ -221,13 +221,6 @@ interface LinkTreeBlockProps {
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Theme variation for the component.
-     * - "light": Light background with dark text (default)
-     * - "dark": Dark background with light text
-     * - "glass": Glassmorphism effect with gradient background
-     */
-    theme?: "light" | "dark" | "glass";
     /**
      * Background style for the section
      */
@@ -297,6 +290,6 @@ interface LinkTreeBlockProps {
  * />
  * ```
  */
-declare function LinkTreeBlock({ brandName, brandTagline, brandLogo, brandAvatar, brandVerified, verifiedIcon, brandSlot, links, linksSlot, socialLinks, socialLinksSlot, mediaGallery, mediaGallerySlot, mediaGalleryTitle, mediaGalleryLimit, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, taglineClassName, verifiedBadgeClassName, verifiedIconClassName, linksClassName, linkClassName, featuredLinkClassName, linkIconClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName, mediaGalleryClassName, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, mediaGalleryMediaClassName, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, theme, background, spacing, pattern, patternOpacity, patternClassName, backgroundPattern, accentColor, optixFlowConfig, }: LinkTreeBlockProps): React.JSX.Element;
+declare function LinkTreeBlock({ brandName, brandTagline, brandLogo, brandAvatar, brandVerified, verifiedIcon, brandSlot, links, linksSlot, socialLinks, socialLinksSlot, mediaGallery, mediaGallerySlot, mediaGalleryTitle, mediaGalleryLimit, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, taglineClassName, verifiedBadgeClassName, verifiedIconClassName, linksClassName, linkClassName, featuredLinkClassName, linkIconClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName, mediaGalleryClassName, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, mediaGalleryMediaClassName, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, backgroundPattern, accentColor, optixFlowConfig, }: LinkTreeBlockProps): React.JSX.Element;
 
 export { LinkTreeBlock, type LinkTreeBlockProps, type LinkTreeLink, type MediaGalleryItem, type SocialLink };

package/dist/link-tree-block.js

@@ -43,6 +43,54 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -981,8 +1029,8 @@ function LinkTreeBlock({
   brandName,
   brandTagline,
   brandLogo,
-  brandAvatar = blockBrandedIconsAndPlaceholders.avatar1,
-  brandVerified = true,
+  brandAvatar,
+  brandVerified = false,
   verifiedIcon,
   brandSlot,
   links,
@@ -1023,19 +1071,16 @@ function LinkTreeBlock({
   socialLinkClassName,
   socialIconClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "gray",
   spacing,
   pattern,
   patternOpacity,
   patternClassName,
-  backgroundPattern = "dotPattern",
+  backgroundPattern,
   accentColor,
   optixFlowConfig
 }) {
-  const isDark = theme === "dark";
-  const isGlass = theme === "glass";
-  const resolvedBackground = background ?? (isDark ? "dark" : "gray");
+  const resolvedBackground = background;
   const resolvedPattern = pattern ?? backgroundPattern;
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
@@ -1108,10 +1153,7 @@ function LinkTreeBlock({
                   {
                     name: "lucide/check",
                     size: 14,
-                    className: cn(
-                      "text-primary-foreground",
-                      verifiedIconClassName
-                    )
+                    className: cn("", verifiedIconClassName)
                   }
                 )
               }
@@ -1132,7 +1174,8 @@ function LinkTreeBlock({
               "p",
               {
                 className: cn(
-                  "max-w-xs text-balance text-sm text-muted-foreground",
+                  "max-w-xs text-balance text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   taglineClassName
                 ),
                 children: brandTagline
@@ -1142,7 +1185,22 @@ function LinkTreeBlock({
         ]
       }
     );
-  }, [brandSlot, headerClassName, avatarClassName, resolvedAvatar, optixFlowConfig, brandVerified, verifiedBadgeClassName, verifiedIcon, verifiedIconClassName, brandName, isDark, nameClassName, brandTagline, taglineClassName]);
+  }, [
+    brandSlot,
+    headerClassName,
+    avatarClassName,
+    resolvedAvatar,
+    optixFlowConfig,
+    brandVerified,
+    verifiedBadgeClassName,
+    verifiedIcon,
+    verifiedIconClassName,
+    brandName,
+    resolvedBackground,
+    nameClassName,
+    brandTagline,
+    taglineClassName
+  ]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1175,7 +1233,7 @@ function LinkTreeBlock({
             className: cn(
               "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : isDark ? "border border-border/10 bg-muted/10 hover:bg-muted/20" : isGlass ? "border border-border/30 bg-card/60 backdrop-blur-sm hover:bg-card/80" : "border border-border bg-card hover:bg-accent",
+              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "border border-border bg-card hover:bg-accent",
               linkClassName,
               isFeatured ? featuredLinkClassName : null,
               linkItemClassName
@@ -1192,7 +1250,7 @@ function LinkTreeBlock({
           className: cn(
             "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : isDark ? "border border-border/10 bg-muted/10 hover:bg-muted/20" : isGlass ? "border border-border/30 bg-card/60 backdrop-blur-sm hover:bg-card/80" : "border border-border bg-card hover:bg-accent",
+            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "border border-border bg-card hover:bg-accent",
             linkClassName,
             isFeatured ? featuredLinkClassName : null,
             linkItemClassName
@@ -1216,7 +1274,7 @@ function LinkTreeBlock({
                 {
                   className: cn(
                     "mt-0.5 block truncate text-xs",
-                    isFeatured ? "text-primary-foreground/70" : "text-muted-foreground",
+                    isFeatured ? "text-primary-foreground/70" : getTextColor(resolvedBackground, "muted"),
                     linkDescriptionClassName
                   ),
                   children: description
@@ -1238,7 +1296,7 @@ function LinkTreeBlock({
                 size: 16,
                 className: cn(
                   "shrink-0 transition-transform group-hover:translate-x-0.5",
-                  isFeatured ? "text-primary-foreground/70" : "text-muted-foreground",
+                  isFeatured ? "text-primary-foreground/70" : getTextColor(resolvedBackground, "muted"),
                   linkChevronClassName
                 )
               }
@@ -1248,7 +1306,19 @@ function LinkTreeBlock({
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, isDark, isGlass, linkClassName, featuredLinkClassName, linkLabelClassName, linkDescriptionClassName, linkBadgeClassName, linkChevronClassName]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    linkIconClassName,
+    resolvedBackground,
+    linkClassName,
+    featuredLinkClassName,
+    linkLabelClassName,
+    linkDescriptionClassName,
+    linkBadgeClassName,
+    linkChevronClassName
+  ]);
   const renderMediaGallery = useMemo(() => {
     if (mediaGallerySlot) return mediaGallerySlot;
     if (!mediaGallery || mediaGallery.length === 0) return null;
@@ -1258,7 +1328,7 @@ function LinkTreeBlock({
         "h3",
         {
           className: cn(
-            "text-center text-sm font-medium text-muted-foreground",
+            "text-center text-sm font-medium ",
             mediaGalleryTitleClassName
           ),
           children: mediaGalleryTitle
@@ -1274,7 +1344,8 @@ function LinkTreeBlock({
               className: cn(
                 "group relative aspect-square overflow-hidden rounded-lg cursor-pointer",
                 "transition-all duration-200 hover:scale-[1.02]",
-                isDark ? "ring-1 ring-white/10" : "ring-1 ring-border",
+                "ring-1",
+                getBorderColor(resolvedBackground, "muted"),
                 mediaGalleryItemClassName,
                 item.className
               ),
@@ -1334,7 +1405,7 @@ function LinkTreeBlock({
                         name: "lucide/play",
                         size: 24,
                         className: cn(
-                          "text-background opacity-0 transition-opacity group-hover:opacity-100",
+                          " opacity-0 transition-opacity group-hover:opacity-100",
                           mediaGalleryPlayIconClassName
                         )
                       }
@@ -1348,7 +1419,21 @@ function LinkTreeBlock({
         }
       )
     ] });
-  }, [mediaGallerySlot, mediaGallery, mediaGalleryLimit, mediaGalleryClassName, mediaGalleryTitle, isDark, mediaGalleryTitleClassName, mediaGalleryGridClassName, mediaGalleryItemClassName, handleMediaClick, mediaGalleryMediaClassName, optixFlowConfig, mediaGalleryOverlayClassName, mediaGalleryPlayIconClassName]);
+  }, [
+    mediaGallerySlot,
+    mediaGallery,
+    mediaGalleryLimit,
+    mediaGalleryClassName,
+    mediaGalleryTitle,
+    mediaGalleryTitleClassName,
+    mediaGalleryGridClassName,
+    mediaGalleryItemClassName,
+    handleMediaClick,
+    mediaGalleryMediaClassName,
+    optixFlowConfig,
+    mediaGalleryOverlayClassName,
+    mediaGalleryPlayIconClassName
+  ]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1360,10 +1445,11 @@ function LinkTreeBlock({
           socialLinksClassName
         ),
         children: socialLinks.map((social, index) => {
-          const icon = social.icon || (social.iconName ? /* @__PURE__ */ jsx(
+          const { iconName, ...socialPressableProps } = social;
+          const icon = social.icon || (iconName ? /* @__PURE__ */ jsx(
             DynamicIcon,
             {
-              name: social.iconName,
+              name: iconName,
               size: 20,
               className: socialIconClassName
             }
@@ -1372,14 +1458,13 @@ function LinkTreeBlock({
           return /* @__PURE__ */ jsx(
             Pressable,
             {
-              href: social.href,
+              ...socialPressableProps,
               "aria-label": ariaLabel,
               className: cn(
                 "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
                 "hover:scale-110 active:scale-95",
                 getNestedCardBg(resolvedBackground),
                 getNestedCardTextColor(resolvedBackground),
-                isDark ? "hover:bg-muted/20" : isGlass ? "backdrop-blur-sm hover:bg-card/80" : "hover:bg-accent",
                 socialLinkClassName,
                 social.className
               ),
@@ -1390,7 +1475,14 @@ function LinkTreeBlock({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, isGlass, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    resolvedBackground,
+    socialLinkClassName
+  ]);
   const renderFooter = useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1409,7 +1501,6 @@ function LinkTreeBlock({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          "text-muted-foreground/60",
           footerClassName,
           actionClassName
         ),
@@ -1421,16 +1512,13 @@ function LinkTreeBlock({
         ] })
       }
     );
-  }, [footerSlot, footerAction, isDark, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
       background: resolvedBackground,
       spacing,
-      className: cn(
-        theme === "dark" ? "bg-foreground" : theme === "glass" ? "bg-gradient-to-br from-muted/50 via-background to-muted/30" : "bg-muted/30",
-        className
-      ),
+      className,
       pattern: resolvedPattern,
       patternOpacity,
       patternClassName,