@opensite/ui 0.8.6 → 0.8.7

package/dist/industries-expandable-showcase.cjs

@@ -944,7 +944,7 @@ function IndustriesExpandableShowcase({
   desktopClassName,
   itemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -987,8 +987,8 @@ function IndustriesExpandableShowcase({
             ) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-6", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-semibold", children: contractor.category }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg leading-tight text-muted-foreground", children: contractor.title }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center p-0 text-sm font-medium text-primary hover:text-primary/80", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg leading-tight ", children: contractor.title }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center p-0 text-sm font-medium ", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
@@ -1033,8 +1033,8 @@ function IndustriesExpandableShowcase({
                       animate: { opacity: 1 },
                       exit: { opacity: 0 },
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg leading-tight text-muted-foreground", children: contractor.title }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center p-0 text-sm font-medium text-primary hover:text-primary/80", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg leading-tight ", children: contractor.title }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center p-0 text-sm font-medium ", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             DynamicIcon,
                             {
@@ -1081,7 +1081,15 @@ function IndustriesExpandableShowcase({
         }
       )
     ] });
-  }, [contractorsSlot, contractors, mobileClassName, desktopClassName, itemClassName, activeContractor, optixFlowConfig]);
+  }, [
+    contractorsSlot,
+    contractors,
+    mobileClassName,
+    desktopClassName,
+    itemClassName,
+    activeContractor,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1092,7 +1100,7 @@ function IndustriesExpandableShowcase({
       patternOpacity,
       patternClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-        (headingSlot || heading) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12", headingWrapperClassName), children: renderHeading }),
+        (headingSlot || heading) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6 md:mb-12", headingWrapperClassName), children: renderHeading }),
         renderContractors
       ] })
     }

package/dist/industries-expandable-showcase.js

@@ -923,7 +923,7 @@ function IndustriesExpandableShowcase({
   desktopClassName,
   itemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -966,8 +966,8 @@ function IndustriesExpandableShowcase({
             ) }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-6", children: [
               /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold", children: contractor.category }) }),
-              /* @__PURE__ */ jsx("h3", { className: "text-lg leading-tight text-muted-foreground", children: contractor.title }),
-              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center p-0 text-sm font-medium text-primary hover:text-primary/80", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg leading-tight ", children: contractor.title }),
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center p-0 text-sm font-medium ", children: [
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
@@ -1012,8 +1012,8 @@ function IndustriesExpandableShowcase({
                       animate: { opacity: 1 },
                       exit: { opacity: 0 },
                       children: [
-                        /* @__PURE__ */ jsx("h3", { className: "text-lg leading-tight text-muted-foreground", children: contractor.title }),
-                        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center p-0 text-sm font-medium text-primary hover:text-primary/80", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "text-lg leading-tight ", children: contractor.title }),
+                        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center p-0 text-sm font-medium ", children: [
                           /* @__PURE__ */ jsx(
                             DynamicIcon,
                             {
@@ -1060,7 +1060,15 @@ function IndustriesExpandableShowcase({
         }
       )
     ] });
-  }, [contractorsSlot, contractors, mobileClassName, desktopClassName, itemClassName, activeContractor, optixFlowConfig]);
+  }, [
+    contractorsSlot,
+    contractors,
+    mobileClassName,
+    desktopClassName,
+    itemClassName,
+    activeContractor,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1071,7 +1079,7 @@ function IndustriesExpandableShowcase({
       patternOpacity,
       patternClassName,
       children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
-        (headingSlot || heading) && /* @__PURE__ */ jsx("div", { className: cn("mb-12", headingWrapperClassName), children: renderHeading }),
+        (headingSlot || heading) && /* @__PURE__ */ jsx("div", { className: cn("mb-6 md:mb-12", headingWrapperClassName), children: renderHeading }),
         renderContractors
       ] })
     }

package/dist/industries-hover-reveal-grid.cjs

@@ -944,7 +944,7 @@ function IndustriesHoverRevealGrid({
   gridClassName,
   itemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -957,7 +957,7 @@ function IndustriesHoverRevealGrid({
       "h2",
       {
         className: cn(
-          "mb-8 text-3xl font-medium text-foreground",
+          "mb-8 text-3xl font-medium",
           headingClassName
         ),
         children: heading
@@ -1014,14 +1014,14 @@ function IndustriesHoverRevealGrid({
                             optixFlowConfig
                           }
                         ) }),
-                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "absolute bottom-10 text-lg font-medium text-foreground", children: industry.name })
+                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "absolute bottom-10 text-lg font-medium", children: industry.name })
                       ]
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     framerMotion.motion.div,
                     {
-                      className: "absolute inset-0 z-10 bg-black",
+                      className: "absolute inset-0 z-10 bg-foreground",
                       variants: {
                         initial: { y: "100%" },
                         hover: { y: "0%" }
@@ -1038,7 +1038,7 @@ function IndustriesHoverRevealGrid({
                         hover: { opacity: 1, y: 0 }
                       },
                       transition: { duration: 0.4, ease: easeTransition },
-                      className: "absolute inset-0 z-20 flex min-h-120 items-center justify-center p-8 text-white lg:min-h-144 xl:min-h-112",
+                      className: "absolute inset-0 z-20 flex min-h-120 items-center justify-center p-8 text-background lg:min-h-144 xl:min-h-112",
                       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
                         industryLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium opacity-90", children: [
                           industryLabel,
@@ -1089,7 +1089,14 @@ function IndustriesHoverRevealGrid({
         ))
       }
     );
-  }, [industriesSlot, industries, industryLabel, gridClassName, itemClassName, optixFlowConfig]);
+  }, [
+    industriesSlot,
+    industries,
+    industryLabel,
+    gridClassName,
+    itemClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/industries-hover-reveal-grid.js

@@ -923,7 +923,7 @@ function IndustriesHoverRevealGrid({
   gridClassName,
   itemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -936,7 +936,7 @@ function IndustriesHoverRevealGrid({
       "h2",
       {
         className: cn(
-          "mb-8 text-3xl font-medium text-foreground",
+          "mb-8 text-3xl font-medium",
           headingClassName
         ),
         children: heading
@@ -993,14 +993,14 @@ function IndustriesHoverRevealGrid({
                             optixFlowConfig
                           }
                         ) }),
-                        /* @__PURE__ */ jsx("h3", { className: "absolute bottom-10 text-lg font-medium text-foreground", children: industry.name })
+                        /* @__PURE__ */ jsx("h3", { className: "absolute bottom-10 text-lg font-medium", children: industry.name })
                       ]
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     motion.div,
                     {
-                      className: "absolute inset-0 z-10 bg-black",
+                      className: "absolute inset-0 z-10 bg-foreground",
                       variants: {
                         initial: { y: "100%" },
                         hover: { y: "0%" }
@@ -1017,7 +1017,7 @@ function IndustriesHoverRevealGrid({
                         hover: { opacity: 1, y: 0 }
                       },
                       transition: { duration: 0.4, ease: easeTransition },
-                      className: "absolute inset-0 z-20 flex min-h-120 items-center justify-center p-8 text-white lg:min-h-144 xl:min-h-112",
+                      className: "absolute inset-0 z-20 flex min-h-120 items-center justify-center p-8 text-background lg:min-h-144 xl:min-h-112",
                       children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
                         industryLabel && /* @__PURE__ */ jsxs("p", { className: "font-medium opacity-90", children: [
                           industryLabel,
@@ -1068,7 +1068,14 @@ function IndustriesHoverRevealGrid({
         ))
       }
     );
-  }, [industriesSlot, industries, industryLabel, gridClassName, itemClassName, optixFlowConfig]);
+  }, [
+    industriesSlot,
+    industries,
+    industryLabel,
+    gridClassName,
+    itemClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/industries-timeline-table.cjs

@@ -944,7 +944,7 @@ function IndustriesTimelineTable({
   projectsClassName,
   itemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -957,7 +957,7 @@ function IndustriesTimelineTable({
       "h2",
       {
         className: cn(
-          "mb-8 text-3xl font-bold text-foreground lg:text-4xl",
+          "mb-8 text-3xl font-bold lg:text-4xl",
           headingClassName
         ),
         children: heading
@@ -994,7 +994,7 @@ function IndustriesTimelineTable({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-3 grid grid-cols-2 gap-8 transition-all duration-300 md:grid-cols-3 lg:hover:rounded-lg lg:hover:font-medium lg:hover:text-secondary lg:hover:shadow-lg", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-2 flex items-center md:order-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-10 text-xs font-medium text-secondary opacity-100 lg:opacity-0 lg:group-hover:opacity-100", children: project.year }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "order-1 col-span-1 grid grid-cols-2 gap-8 border-b border-muted-foreground/20 p-5 transition-all duration-300 md:order-2 md:col-span-2 md:p-10 md:pr-0 md:pl-0 lg:group-hover:border-transparent", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0 pl-0 text-xl font-medium text-secondary transition-all duration-300 md:text-2xl lg:text-foreground lg:group-hover:pl-2 lg:group-hover:text-secondary", children: project.name }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0 pl-0 text-xl font-medium text-secondary transition-all duration-300 md:text-2xl lg:group-hover:pl-2 lg:group-hover:text-secondary", children: project.name }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden items-center justify-between gap-4 lg:flex lg:pr-10", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-secondary/80 opacity-100 lg:opacity-0 lg:group-hover:opacity-100", children: project.description }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex translate-x-full items-center justify-center rounded-full bg-primary p-1 text-secondary opacity-100 shadow-md transition-all duration-300 ease-out lg:opacity-0 lg:group-hover:translate-x-0 lg:group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 24 }) })
@@ -1011,12 +1011,18 @@ function IndustriesTimelineTable({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-2 bg-black/20 opacity-100 transition-all duration-300 lg:opacity-0 lg:group-hover:opacity-100" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-2 bg-foreground/20 opacity-100 transition-all duration-300 lg:opacity-0 lg:group-hover:opacity-100" })
         ] })
       },
       index
     )) });
-  }, [projectsSlot, projects, projectsClassName, itemClassName, optixFlowConfig]);
+  }, [
+    projectsSlot,
+    projects,
+    projectsClassName,
+    itemClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/industries-timeline-table.js

@@ -923,7 +923,7 @@ function IndustriesTimelineTable({
   projectsClassName,
   itemClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -936,7 +936,7 @@ function IndustriesTimelineTable({
       "h2",
       {
         className: cn(
-          "mb-8 text-3xl font-bold text-foreground lg:text-4xl",
+          "mb-8 text-3xl font-bold lg:text-4xl",
           headingClassName
         ),
         children: heading
@@ -973,7 +973,7 @@ function IndustriesTimelineTable({
           /* @__PURE__ */ jsxs("div", { className: "relative z-3 grid grid-cols-2 gap-8 transition-all duration-300 md:grid-cols-3 lg:hover:rounded-lg lg:hover:font-medium lg:hover:text-secondary lg:hover:shadow-lg", children: [
             /* @__PURE__ */ jsx("div", { className: "order-2 flex items-center md:order-1", children: /* @__PURE__ */ jsx("span", { className: "pl-10 text-xs font-medium text-secondary opacity-100 lg:opacity-0 lg:group-hover:opacity-100", children: project.year }) }),
             /* @__PURE__ */ jsxs("div", { className: "order-1 col-span-1 grid grid-cols-2 gap-8 border-b border-muted-foreground/20 p-5 transition-all duration-300 md:order-2 md:col-span-2 md:p-10 md:pr-0 md:pl-0 lg:group-hover:border-transparent", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("span", { className: "ml-0 pl-0 text-xl font-medium text-secondary transition-all duration-300 md:text-2xl lg:text-foreground lg:group-hover:pl-2 lg:group-hover:text-secondary", children: project.name }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("span", { className: "ml-0 pl-0 text-xl font-medium text-secondary transition-all duration-300 md:text-2xl lg:group-hover:pl-2 lg:group-hover:text-secondary", children: project.name }) }),
               /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-between gap-4 lg:flex lg:pr-10", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-sm text-secondary/80 opacity-100 lg:opacity-0 lg:group-hover:opacity-100", children: project.description }),
                 /* @__PURE__ */ jsx("span", { className: "flex translate-x-full items-center justify-center rounded-full bg-primary p-1 text-secondary opacity-100 shadow-md transition-all duration-300 ease-out lg:opacity-0 lg:group-hover:translate-x-0 lg:group-hover:opacity-100", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 24 }) })
@@ -990,12 +990,18 @@ function IndustriesTimelineTable({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-2 bg-black/20 opacity-100 transition-all duration-300 lg:opacity-0 lg:group-hover:opacity-100" })
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-2 bg-foreground/20 opacity-100 transition-all duration-300 lg:opacity-0 lg:group-hover:opacity-100" })
         ] })
       },
       index
     )) });
-  }, [projectsSlot, projects, projectsClassName, itemClassName, optixFlowConfig]);
+  }, [
+    projectsSlot,
+    projects,
+    projectsClassName,
+    itemClassName,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/interior-carousel.cjs

@@ -1283,7 +1283,7 @@ function InteriorCarousel({
                 CarouselPrevious,
                 {
                   className: cn(
-                    "left-5 scale-120 border-none bg-black/30 text-white hover:bg-black/50 hover:text-white dark:bg-black/30 dark:hover:bg-black/50",
+                    "left-5 scale-120 border-none bg-foreground/30 text-background hover:bg-foreground/50",
                     controlsClassName
                   )
                 }
@@ -1292,7 +1292,7 @@ function InteriorCarousel({
                 CarouselNext,
                 {
                   className: cn(
-                    "right-5 scale-120 border-none bg-black/30 text-white hover:bg-black/50 hover:text-white dark:bg-black/30 dark:hover:bg-black/50",
+                    "right-5 scale-120 border-none bg-foreground/30 text-background hover:bg-foreground/50",
                     controlsClassName
                   )
                 }

package/dist/interior-carousel.js

@@ -1259,7 +1259,7 @@ function InteriorCarousel({
                 CarouselPrevious,
                 {
                   className: cn(
-                    "left-5 scale-120 border-none bg-black/30 text-white hover:bg-black/50 hover:text-white dark:bg-black/30 dark:hover:bg-black/50",
+                    "left-5 scale-120 border-none bg-foreground/30 text-background hover:bg-foreground/50",
                     controlsClassName
                   )
                 }
@@ -1268,7 +1268,7 @@ function InteriorCarousel({
                 CarouselNext,
                 {
                   className: cn(
-                    "right-5 scale-120 border-none bg-black/30 text-white hover:bg-black/50 hover:text-white dark:bg-black/30 dark:hover:bg-black/50",
+                    "right-5 scale-120 border-none bg-foreground/30 text-background hover:bg-foreground/50",
                     controlsClassName
                   )
                 }

package/dist/link-page-bento-layout.cjs

@@ -1009,7 +1009,7 @@ function LinkPageBentoLayout({
           className: cn(
             "rounded-full p-2 transition-all duration-200",
             "hover:scale-110 active:scale-95",
-            isDark ? "text-neutral-500 hover:text-white hover:bg-white/10" : "text-muted-foreground hover:text-foreground hover:bg-neutral-100",
+            isDark ? "text-muted-foreground hover:bg-muted/10" : "text-muted-foreground hover:bg-muted",
             socialLinkClassName,
             social.className
           ),
@@ -1050,7 +1050,7 @@ function LinkPageBentoLayout({
             className: cn(
               "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isDark ? "border border-white/10 bg-white/5" : "border border-neutral-200 bg-neutral-100",
+              isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-muted",
               featuredLinkClassName,
               linkClassName
             ),
@@ -1066,7 +1066,7 @@ function LinkPageBentoLayout({
           className: cn(
             "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isDark ? "border border-white/10 bg-white/5" : "border border-neutral-200 bg-neutral-100",
+            isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-muted",
             featuredLinkClassName,
             linkClassName
           ),
@@ -1102,7 +1102,7 @@ function LinkPageBentoLayout({
                   {
                     className: cn(
                       "text-sm font-semibold",
-                      imageSource ? "text-white" : isDark ? "text-white" : "text-foreground",
+                      imageSource && "text-background",
                       featuredLinkLabelClassName
                     ),
                     children: label
@@ -1114,7 +1114,7 @@ function LinkPageBentoLayout({
                 {
                   className: cn(
                     "mt-0.5 text-xs",
-                    imageSource ? "text-white/70" : isDark ? "text-neutral-400" : "text-muted-foreground",
+                    imageSource ? "text-background/70" : "text-muted-foreground",
                     featuredLinkDescriptionClassName
                   ),
                   children: description
@@ -1153,7 +1153,7 @@ function LinkPageBentoLayout({
             className: cn(
               "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isDark ? "border border-white/10 bg-white/5 hover:bg-white/10" : "border border-neutral-200 bg-neutral-50 hover:bg-neutral-100",
+              isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-muted/50 hover:bg-muted",
               regularLinkClassName,
               linkClassName
             ),
@@ -1169,7 +1169,7 @@ function LinkPageBentoLayout({
           className: cn(
             "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isDark ? "border border-white/10 bg-white/5 hover:bg-white/10" : "border border-neutral-200 bg-neutral-50 hover:bg-neutral-100",
+            isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-muted/50 hover:bg-muted",
             regularLinkClassName,
             linkClassName
           ),
@@ -1180,7 +1180,7 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg",
-                  isDark ? "bg-white/10" : "bg-white",
+                  isDark ? "bg-muted/10" : "bg-card",
                   regularLinkIconWrapperClassName
                 ),
                 children: iconElement
@@ -1191,7 +1191,6 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "truncate text-sm font-medium",
-                  isDark ? "text-white" : "text-foreground",
                   regularLinkLabelClassName
                 ),
                 children: label
@@ -1248,7 +1247,6 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "text-xl font-bold",
-                  isDark ? "text-white" : "text-foreground",
                   nameClassName
                 ),
                 children: name
@@ -1258,8 +1256,7 @@ function LinkPageBentoLayout({
               "p",
               {
                 className: cn(
-                  "max-w-xs text-sm",
-                  isDark ? "text-neutral-400" : "text-muted-foreground",
+                  "max-w-xs text-sm text-muted-foreground",
                   bioClassName
                 ),
                 children: bio
@@ -1289,7 +1286,7 @@ function LinkPageBentoLayout({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          isDark ? "text-neutral-600" : "text-muted-foreground/50",
+          "text-muted-foreground/50",
           footerClassName,
           actionClassName
         ),
@@ -1307,7 +1304,7 @@ function LinkPageBentoLayout({
     {
       background: resolvedBackground,
       spacing,
-      className: cn(isDark ? "bg-neutral-950" : "bg-white", className),
+      className: cn(isDark ? "bg-foreground" : "bg-background", className),
       pattern,
       patternOpacity,
       patternClassName,

package/dist/link-page-bento-layout.js

@@ -988,7 +988,7 @@ function LinkPageBentoLayout({
           className: cn(
             "rounded-full p-2 transition-all duration-200",
             "hover:scale-110 active:scale-95",
-            isDark ? "text-neutral-500 hover:text-white hover:bg-white/10" : "text-muted-foreground hover:text-foreground hover:bg-neutral-100",
+            isDark ? "text-muted-foreground hover:bg-muted/10" : "text-muted-foreground hover:bg-muted",
             socialLinkClassName,
             social.className
           ),
@@ -1029,7 +1029,7 @@ function LinkPageBentoLayout({
             className: cn(
               "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isDark ? "border border-white/10 bg-white/5" : "border border-neutral-200 bg-neutral-100",
+              isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-muted",
               featuredLinkClassName,
               linkClassName
             ),
@@ -1045,7 +1045,7 @@ function LinkPageBentoLayout({
           className: cn(
             "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isDark ? "border border-white/10 bg-white/5" : "border border-neutral-200 bg-neutral-100",
+            isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-muted",
             featuredLinkClassName,
             linkClassName
           ),
@@ -1081,7 +1081,7 @@ function LinkPageBentoLayout({
                   {
                     className: cn(
                       "text-sm font-semibold",
-                      imageSource ? "text-white" : isDark ? "text-white" : "text-foreground",
+                      imageSource && "text-background",
                       featuredLinkLabelClassName
                     ),
                     children: label
@@ -1093,7 +1093,7 @@ function LinkPageBentoLayout({
                 {
                   className: cn(
                     "mt-0.5 text-xs",
-                    imageSource ? "text-white/70" : isDark ? "text-neutral-400" : "text-muted-foreground",
+                    imageSource ? "text-background/70" : "text-muted-foreground",
                     featuredLinkDescriptionClassName
                   ),
                   children: description
@@ -1132,7 +1132,7 @@ function LinkPageBentoLayout({
             className: cn(
               "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isDark ? "border border-white/10 bg-white/5 hover:bg-white/10" : "border border-neutral-200 bg-neutral-50 hover:bg-neutral-100",
+              isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-muted/50 hover:bg-muted",
               regularLinkClassName,
               linkClassName
             ),
@@ -1148,7 +1148,7 @@ function LinkPageBentoLayout({
           className: cn(
             "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isDark ? "border border-white/10 bg-white/5 hover:bg-white/10" : "border border-neutral-200 bg-neutral-50 hover:bg-neutral-100",
+            isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-muted/50 hover:bg-muted",
             regularLinkClassName,
             linkClassName
           ),
@@ -1159,7 +1159,7 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg",
-                  isDark ? "bg-white/10" : "bg-white",
+                  isDark ? "bg-muted/10" : "bg-card",
                   regularLinkIconWrapperClassName
                 ),
                 children: iconElement
@@ -1170,7 +1170,6 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "truncate text-sm font-medium",
-                  isDark ? "text-white" : "text-foreground",
                   regularLinkLabelClassName
                 ),
                 children: label
@@ -1227,7 +1226,6 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "text-xl font-bold",
-                  isDark ? "text-white" : "text-foreground",
                   nameClassName
                 ),
                 children: name
@@ -1237,8 +1235,7 @@ function LinkPageBentoLayout({
               "p",
               {
                 className: cn(
-                  "max-w-xs text-sm",
-                  isDark ? "text-neutral-400" : "text-muted-foreground",
+                  "max-w-xs text-sm text-muted-foreground",
                   bioClassName
                 ),
                 children: bio
@@ -1268,7 +1265,7 @@ function LinkPageBentoLayout({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          isDark ? "text-neutral-600" : "text-muted-foreground/50",
+          "text-muted-foreground/50",
           footerClassName,
           actionClassName
         ),
@@ -1286,7 +1283,7 @@ function LinkPageBentoLayout({
     {
       background: resolvedBackground,
       spacing,
-      className: cn(isDark ? "bg-neutral-950" : "bg-white", className),
+      className: cn(isDark ? "bg-foreground" : "bg-background", className),
       pattern,
       patternOpacity,
       patternClassName,