@opensite/ui 0.8.5 → 0.8.7

package/dist/project-carousel-cinematic.js

@@ -1148,7 +1148,7 @@ function ProjectCarouselCinematic({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollPrev(),
                 disabled: !canScrollPrev,
-                className: "pointer-events-auto ml-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto ml-4 h-12 w-12 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
               }
             ),
@@ -1159,7 +1159,7 @@ function ProjectCarouselCinematic({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollNext(),
                 disabled: !canScrollNext,
-                className: "pointer-events-auto mr-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto mr-4 h-12 w-12 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
               }
             )

package/dist/project-carousel-detail-cards.cjs

@@ -1232,7 +1232,7 @@ function ProjectCarouselDetailCards({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollPrev(),
                 disabled: !canScrollPrev,
-                className: "pointer-events-auto ml-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto ml-4 h-12 w-12 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
               }
             ),
@@ -1243,7 +1243,7 @@ function ProjectCarouselDetailCards({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollNext(),
                 disabled: !canScrollNext,
-                className: "pointer-events-auto mr-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto mr-4 h-12 w-12 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
               }
             )

package/dist/project-carousel-detail-cards.js

@@ -1208,7 +1208,7 @@ function ProjectCarouselDetailCards({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollPrev(),
                 disabled: !canScrollPrev,
-                className: "pointer-events-auto ml-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto ml-4 h-12 w-12 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
               }
             ),
@@ -1219,7 +1219,7 @@ function ProjectCarouselDetailCards({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollNext(),
                 disabled: !canScrollNext,
-                className: "pointer-events-auto mr-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto mr-4 h-12 w-12 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
               }
             )

package/dist/project-carousel-minimal.cjs

@@ -1161,7 +1161,7 @@ function ProjectCarouselMinimal({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollPrev(),
                 disabled: !canScrollPrev,
-                className: "pointer-events-auto ml-4 h-10 w-10 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto ml-4 h-10 w-10 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
               }
             ),
@@ -1172,7 +1172,7 @@ function ProjectCarouselMinimal({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollNext(),
                 disabled: !canScrollNext,
-                className: "pointer-events-auto mr-4 h-10 w-10 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto mr-4 h-10 w-10 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
               }
             )

package/dist/project-carousel-minimal.js

@@ -1137,7 +1137,7 @@ function ProjectCarouselMinimal({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollPrev(),
                 disabled: !canScrollPrev,
-                className: "pointer-events-auto ml-4 h-10 w-10 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto ml-4 h-10 w-10 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
               }
             ),
@@ -1148,7 +1148,7 @@ function ProjectCarouselMinimal({
                 variant: "outline",
                 onClick: () => carouselApi?.scrollNext(),
                 disabled: !canScrollNext,
-                className: "pointer-events-auto mr-4 h-10 w-10 rounded-full border-gray-200 bg-white/90 hover:bg-white",
+                className: "pointer-events-auto mr-4 h-10 w-10 rounded-full border-border bg-card/90 hover:bg-card",
                 children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
               }
             )

package/dist/project-detail-architecture-carousel.cjs

@@ -1173,7 +1173,7 @@ function ProjectDetailArchitectureCarousel(props) {
           (backActionSlot || backAction) && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...fadeInUp, className: "mb-12", children: renderedBackAction }),
           /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.header, { ...fadeInUp, className: cn("mb-16", headerClassName), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3 mb-6 text-sm text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-3 py-1 font-medium text-foreground", children: category }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-3 py-1 font-medium", children: category }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: year }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "|" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: location })
@@ -1182,7 +1182,7 @@ function ProjectDetailArchitectureCarousel(props) {
               "h1",
               {
                 className: cn(
-                  "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl",
+                  "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
                   titleClassName
                 ),
                 children: title
@@ -1329,7 +1329,7 @@ function ProjectDetailArchitectureCarousel(props) {
                           optixFlowConfig
                         }
                       ),
-                      enableLightbox && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors hover:bg-black/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-background/80 p-3 opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/maximize-2", size: 24 }) }) })
+                      enableLightbox && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/0 transition-colors hover:bg-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-background/80 p-3 opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/maximize-2", size: 24 }) }) })
                     ]
                   }
                 ),
@@ -1444,7 +1444,7 @@ function ProjectDetailArchitectureCarousel(props) {
                 sectionsClassName
               ),
               children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                typeof section.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 text-2xl font-semibold text-foreground", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: section.title }),
+                typeof section.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 text-2xl font-semibold", children: section.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: section.title }),
                 typeof section.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg leading-relaxed text-muted-foreground", children: section.content }) : section.content
               ] }, index))
             }

package/dist/project-detail-architecture-carousel.js

@@ -1152,7 +1152,7 @@ function ProjectDetailArchitectureCarousel(props) {
           (backActionSlot || backAction) && /* @__PURE__ */ jsx(motion.div, { ...fadeInUp, className: "mb-12", children: renderedBackAction }),
           /* @__PURE__ */ jsxs(motion.header, { ...fadeInUp, className: cn("mb-16", headerClassName), children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 mb-6 text-sm text-muted-foreground", children: [
-              /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-3 py-1 font-medium text-foreground", children: category }),
+              /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-3 py-1 font-medium", children: category }),
               /* @__PURE__ */ jsx("span", { children: year }),
               /* @__PURE__ */ jsx("span", { children: "|" }),
               /* @__PURE__ */ jsx("span", { children: location })
@@ -1161,7 +1161,7 @@ function ProjectDetailArchitectureCarousel(props) {
               "h1",
               {
                 className: cn(
-                  "text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl",
+                  "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
                   titleClassName
                 ),
                 children: title
@@ -1308,7 +1308,7 @@ function ProjectDetailArchitectureCarousel(props) {
                           optixFlowConfig
                         }
                       ),
-                      enableLightbox && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors hover:bg-black/20", children: /* @__PURE__ */ jsx("div", { className: "rounded-full bg-background/80 p-3 opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/maximize-2", size: 24 }) }) })
+                      enableLightbox && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/0 transition-colors hover:bg-foreground/20", children: /* @__PURE__ */ jsx("div", { className: "rounded-full bg-background/80 p-3 opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/maximize-2", size: 24 }) }) })
                     ]
                   }
                 ),
@@ -1423,7 +1423,7 @@ function ProjectDetailArchitectureCarousel(props) {
                 sectionsClassName
               ),
               children: sections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
-                typeof section.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-2xl font-semibold text-foreground", children: section.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: section.title }),
+                typeof section.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-2xl font-semibold", children: section.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: section.title }),
                 typeof section.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg leading-relaxed text-muted-foreground", children: section.content }) : section.content
               ] }, index))
             }

package/dist/project-featured-carousel.cjs

@@ -1193,7 +1193,7 @@ function ProjectFeaturedCarousel({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "bg-white/90", children: project.category }) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "bg-card/90", children: project.category }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: project.title }),

package/dist/project-featured-carousel.js

@@ -1169,7 +1169,7 @@ function ProjectFeaturedCarousel({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-4", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "bg-white/90", children: project.category }) })
+            /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-4", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "bg-card/90", children: project.category }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
             /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: project.title }),

package/dist/project-filterable-gallery.cjs

@@ -448,10 +448,10 @@ function ProjectFilterableGallery({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/60 p-8 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { className: "translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-xs font-medium tracking-widest text-gray-300", children: item.category }),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center bg-foreground/60 p-8 text-background opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { className: "translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-xs font-medium tracking-widest text-muted-foreground", children: item.category }),
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-light tracking-wide", children: item.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs text-sm leading-relaxed text-gray-200", children: item.description })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs text-sm leading-relaxed text-muted-foreground", children: item.description })
           ] }) })
         ] })
       },
@@ -480,7 +480,7 @@ function ProjectFilterableGallery({
                 onClick: () => handleFilterChange(category),
                 className: cn(
                   "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
-                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
+                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-muted-foreground",
                   filterButtonClassName
                 ),
                 children: category
@@ -506,7 +506,7 @@ function ProjectFilterableGallery({
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             className: cn("py-16 text-center", emptyStateClassName),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg text-gray-500", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg text-muted-foreground", children: [
               'No items found for "',
               activeFilter,
               '" category.'

package/dist/project-filterable-gallery.js

@@ -442,10 +442,10 @@ function ProjectFilterableGallery({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsx(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/60 p-8 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsxs(motion.div, { className: "translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: [
-            /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs font-medium tracking-widest text-gray-300", children: item.category }),
+          /* @__PURE__ */ jsx(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center bg-foreground/60 p-8 text-background opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsxs(motion.div, { className: "translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs font-medium tracking-widest text-muted-foreground", children: item.category }),
             /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-light tracking-wide", children: item.title }),
-            /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm leading-relaxed text-gray-200", children: item.description })
+            /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm leading-relaxed text-muted-foreground", children: item.description })
           ] }) })
         ] })
       },
@@ -474,7 +474,7 @@ function ProjectFilterableGallery({
                 onClick: () => handleFilterChange(category),
                 className: cn(
                   "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
-                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
+                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-muted-foreground",
                   filterButtonClassName
                 ),
                 children: category
@@ -500,7 +500,7 @@ function ProjectFilterableGallery({
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             className: cn("py-16 text-center", emptyStateClassName),
-            children: /* @__PURE__ */ jsxs("p", { className: "text-lg text-gray-500", children: [
+            children: /* @__PURE__ */ jsxs("p", { className: "text-lg text-muted-foreground", children: [
               'No items found for "',
               activeFilter,
               '" category.'

package/dist/project-filterable-three-column.cjs

@@ -448,10 +448,10 @@ function ProjectFilterableThreeColumn({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/60 p-8 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { className: "translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-xs font-medium tracking-widest text-gray-300", children: item.category }),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center bg-foreground/60 p-8 text-background opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { className: "translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-xs font-medium tracking-widest text-muted-foreground", children: item.category }),
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-light tracking-wide", children: item.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs text-sm leading-relaxed text-gray-200", children: item.description })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs text-sm leading-relaxed text-muted-foreground", children: item.description })
           ] }) })
         ] })
       },
@@ -480,7 +480,7 @@ function ProjectFilterableThreeColumn({
                 onClick: () => handleFilterChange(category),
                 className: cn(
                   "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
-                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
+                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-muted-foreground",
                   filterButtonClassName
                 ),
                 children: category
@@ -506,7 +506,7 @@ function ProjectFilterableThreeColumn({
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             className: "py-16 text-center",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg text-gray-500", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg text-muted-foreground", children: [
               'No items found for "',
               activeFilter,
               '" category.'

package/dist/project-filterable-three-column.js

@@ -442,10 +442,10 @@ function ProjectFilterableThreeColumn({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsx(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/60 p-8 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsxs(motion.div, { className: "translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: [
-            /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs font-medium tracking-widest text-gray-300", children: item.category }),
+          /* @__PURE__ */ jsx(motion.div, { className: "absolute inset-0 flex flex-col items-center justify-center bg-foreground/60 p-8 text-background opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsxs(motion.div, { className: "translate-y-5 text-center opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs font-medium tracking-widest text-muted-foreground", children: item.category }),
             /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-light tracking-wide", children: item.title }),
-            /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm leading-relaxed text-gray-200", children: item.description })
+            /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm leading-relaxed text-muted-foreground", children: item.description })
           ] }) })
         ] })
       },
@@ -474,7 +474,7 @@ function ProjectFilterableThreeColumn({
                 onClick: () => handleFilterChange(category),
                 className: cn(
                   "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
-                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
+                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-muted-foreground",
                   filterButtonClassName
                 ),
                 children: category
@@ -500,7 +500,7 @@ function ProjectFilterableThreeColumn({
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             className: "py-16 text-center",
-            children: /* @__PURE__ */ jsxs("p", { className: "text-lg text-gray-500", children: [
+            children: /* @__PURE__ */ jsxs("p", { className: "text-lg text-muted-foreground", children: [
               'No items found for "',
               activeFilter,
               '" category.'

package/dist/project-interactive-hover-reveal.cjs

@@ -976,15 +976,15 @@ function ProjectInteractiveHoverReveal({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/90 via-black/60 to-black/30 opacity-80 transition-opacity duration-300 group-hover:opacity-90" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-foreground/90 via-foreground/60 to-foreground/30 opacity-80 transition-opacity duration-300 group-hover:opacity-90" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: `absolute bottom-0 left-0 p-6 transition-all duration-300 ease-in-out ${hoveredIndex === index ? "opacity-0" : "opacity-100"}`,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium tracking-wider text-white uppercase", children: project.category }),
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-white drop-shadow-md", children: project.title })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium tracking-wider text-background uppercase", children: project.category }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-background drop-shadow-md", children: project.title })
               ]
             }
           ),
@@ -993,10 +993,10 @@ function ProjectInteractiveHoverReveal({
             {
               className: `absolute inset-0 flex flex-col justify-end p-6 transition-all duration-300 ease-in-out ${hoveredIndex === index ? "opacity-100" : "translate-y-4 opacity-0"}`,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium tracking-wider text-white uppercase", children: project.category }),
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold text-white drop-shadow-md", children: project.title }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-medium text-white drop-shadow", children: project.description }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center text-sm font-medium text-white drop-shadow", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium tracking-wider text-background uppercase", children: project.category }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold text-background drop-shadow-md", children: project.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-medium text-background drop-shadow", children: project.description }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center text-sm font-medium text-background drop-shadow", children: [
                   projectLinkLabel ?? "View Project",
                   " ",
                   projectLinkIcon ?? (projectLinkIconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: projectLinkIconName, size: 14, className: "ml-1" }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14, className: "ml-1" }))

package/dist/project-interactive-hover-reveal.js

@@ -955,15 +955,15 @@ function ProjectInteractiveHoverReveal({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/90 via-black/60 to-black/30 opacity-80 transition-opacity duration-300 group-hover:opacity-90" })
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-foreground/90 via-foreground/60 to-foreground/30 opacity-80 transition-opacity duration-300 group-hover:opacity-90" })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               className: `absolute bottom-0 left-0 p-6 transition-all duration-300 ease-in-out ${hoveredIndex === index ? "opacity-0" : "opacity-100"}`,
               children: [
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium tracking-wider text-white uppercase", children: project.category }),
-                /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-white drop-shadow-md", children: project.title })
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium tracking-wider text-background uppercase", children: project.category }),
+                /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-background drop-shadow-md", children: project.title })
               ]
             }
           ),
@@ -972,10 +972,10 @@ function ProjectInteractiveHoverReveal({
             {
               className: `absolute inset-0 flex flex-col justify-end p-6 transition-all duration-300 ease-in-out ${hoveredIndex === index ? "opacity-100" : "translate-y-4 opacity-0"}`,
               children: [
-                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium tracking-wider text-white uppercase", children: project.category }),
-                /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold text-white drop-shadow-md", children: project.title }),
-                /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm font-medium text-white drop-shadow", children: project.description }),
-                /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center text-sm font-medium text-white drop-shadow", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium tracking-wider text-background uppercase", children: project.category }),
+                /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold text-background drop-shadow-md", children: project.title }),
+                /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm font-medium text-background drop-shadow", children: project.description }),
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center text-sm font-medium text-background drop-shadow", children: [
                   projectLinkLabel ?? "View Project",
                   " ",
                   projectLinkIcon ?? (projectLinkIconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: projectLinkIconName, size: 14, className: "ml-1" }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14, className: "ml-1" }))

package/dist/project-masonry-columns.cjs

@@ -433,7 +433,7 @@ function ProjectMasonryColumns({
                   optixFlowConfig
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/0 transition-all duration-300 group-hover:bg-foreground/10" })
             ]
           }
         )

package/dist/project-masonry-columns.js

@@ -427,7 +427,7 @@ function ProjectMasonryColumns({
                   optixFlowConfig
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" })
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/0 transition-all duration-300 group-hover:bg-foreground/10" })
             ]
           }
         )

package/dist/project-scroll-reveal.cjs

@@ -603,17 +603,17 @@ var ProjectItem = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.div,
                 {
-                  className: "absolute inset-0 bg-linear-to-t from-black/80 via-black/40 to-transparent",
+                  className: "absolute inset-0 bg-linear-to-t from-foreground/80 via-foreground/40 to-transparent",
                   initial: { opacity: 0.6 },
                   animate: { opacity: hoveredIndex === index ? 0.8 : 0.6 },
                   transition: { duration: 0.4 }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-white", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-background", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   framerMotion.motion.div,
                   {
-                    className: "flex items-center gap-2 text-sm text-white/80 lg:mb-4",
+                    className: "flex items-center gap-2 text-sm text-background/80 lg:mb-4",
                     initial: { opacity: 0, y: 20 },
                     animate: { opacity: 1, y: hoveredIndex === index ? -5 : 0 },
                     transition: { duration: 0.5, delay: 0.1, ease: "easeOut" },
@@ -660,7 +660,7 @@ var ProjectItem = ({
               position: "absolute",
               pointerEvents: "none"
             },
-            className: "z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/30 bg-white/20 text-white shadow-lg backdrop-blur-sm",
+            className: "z-20 flex h-12 w-12 items-center justify-center rounded-full border border-border/30 bg-card/20 text-background shadow-lg backdrop-blur-sm",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               framerMotion.motion.div,
               {

package/dist/project-scroll-reveal.js

@@ -582,17 +582,17 @@ var ProjectItem = ({
               /* @__PURE__ */ jsx(
                 motion.div,
                 {
-                  className: "absolute inset-0 bg-linear-to-t from-black/80 via-black/40 to-transparent",
+                  className: "absolute inset-0 bg-linear-to-t from-foreground/80 via-foreground/40 to-transparent",
                   initial: { opacity: 0.6 },
                   animate: { opacity: hoveredIndex === index ? 0.8 : 0.6 },
                   transition: { duration: 0.4 }
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-white", children: [
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-background", children: [
                 /* @__PURE__ */ jsxs(
                   motion.div,
                   {
-                    className: "flex items-center gap-2 text-sm text-white/80 lg:mb-4",
+                    className: "flex items-center gap-2 text-sm text-background/80 lg:mb-4",
                     initial: { opacity: 0, y: 20 },
                     animate: { opacity: 1, y: hoveredIndex === index ? -5 : 0 },
                     transition: { duration: 0.5, delay: 0.1, ease: "easeOut" },
@@ -639,7 +639,7 @@ var ProjectItem = ({
               position: "absolute",
               pointerEvents: "none"
             },
-            className: "z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/30 bg-white/20 text-white shadow-lg backdrop-blur-sm",
+            className: "z-20 flex h-12 w-12 items-center justify-center rounded-full border border-border/30 bg-card/20 text-background shadow-lg backdrop-blur-sm",
             children: /* @__PURE__ */ jsx(
               motion.div,
               {

package/dist/project-showcase-alternating.cjs

@@ -417,7 +417,7 @@ function ProjectShowcaseAlternating({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "order-2 lg:order-1 lg:col-span-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 font-sans text-base font-bold tracking-wider text-foreground uppercase md:text-base", children: project.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 font-sans text-base font-bold tracking-wider uppercase md:text-base", children: project.title }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-sm font-sans text-sm leading-relaxed text-muted-foreground md:text-base", children: project.description })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-1 lg:order-2 lg:col-span-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-4/3 w-full overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/project-showcase-alternating.js

@@ -411,7 +411,7 @@ function ProjectShowcaseAlternating({
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "order-2 lg:order-1 lg:col-span-4", children: [
-            /* @__PURE__ */ jsx("h2", { className: "mb-4 font-sans text-base font-bold tracking-wider text-foreground uppercase md:text-base", children: project.title }),
+            /* @__PURE__ */ jsx("h2", { className: "mb-4 font-sans text-base font-bold tracking-wider uppercase md:text-base", children: project.title }),
             /* @__PURE__ */ jsx("p", { className: "max-w-sm font-sans text-sm leading-relaxed text-muted-foreground md:text-base", children: project.description })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "order-1 lg:order-2 lg:col-span-8", children: /* @__PURE__ */ jsx("div", { className: "relative aspect-4/3 w-full overflow-hidden rounded-lg border border-border", children: /* @__PURE__ */ jsx(

package/dist/project-sticky-scroll.cjs

@@ -447,7 +447,7 @@ function ProjectStickyScroll({
           animate: {
             opacity: activeCard === index ? 1 : 0.3
           },
-          className: cn("text-2xl font-bold text-slate-100", titleClassName),
+          className: cn("text-2xl font-bold text-muted-foreground", titleClassName),
           children: item.title
         }
       ),
@@ -461,7 +461,7 @@ function ProjectStickyScroll({
             opacity: activeCard === index ? 1 : 0.3
           },
           className: cn(
-            "text-kg text-slate-300 max-w-sm mt-10",
+            "text-kg text-muted-foreground max-w-sm mt-10",
             descriptionClassName
           ),
           children: item.description
@@ -498,7 +498,7 @@ function ProjectStickyScroll({
               {
                 style: { background: backgroundGradient },
                 className: cn(
-                  "hidden lg:block h-60 w-80 rounded-md bg-white sticky top-10 overflow-hidden",
+                  "hidden lg:block h-60 w-80 rounded-md bg-card sticky top-10 overflow-hidden",
                   contentClassName
                 ),
                 children: content[activeCard]?.content ?? null

package/dist/project-sticky-scroll.js

@@ -441,7 +441,7 @@ function ProjectStickyScroll({
           animate: {
             opacity: activeCard === index ? 1 : 0.3
           },
-          className: cn("text-2xl font-bold text-slate-100", titleClassName),
+          className: cn("text-2xl font-bold text-muted-foreground", titleClassName),
           children: item.title
         }
       ),
@@ -455,7 +455,7 @@ function ProjectStickyScroll({
             opacity: activeCard === index ? 1 : 0.3
           },
           className: cn(
-            "text-kg text-slate-300 max-w-sm mt-10",
+            "text-kg text-muted-foreground max-w-sm mt-10",
             descriptionClassName
           ),
           children: item.description
@@ -492,7 +492,7 @@ function ProjectStickyScroll({
               {
                 style: { background: backgroundGradient },
                 className: cn(
-                  "hidden lg:block h-60 w-80 rounded-md bg-white sticky top-10 overflow-hidden",
+                  "hidden lg:block h-60 w-80 rounded-md bg-card sticky top-10 overflow-hidden",
                   contentClassName
                 ),
                 children: content[activeCard]?.content ?? null

package/dist/project-studio-hover-preview.cjs

@@ -461,14 +461,14 @@ function ProjectStudioHoverPreview({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg bg-black/0 transition-all duration-500 group-hover:bg-black/10" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg bg-foreground/0 transition-all duration-500 group-hover:bg-foreground/10" })
           ]
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-between gap-0.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm leading-tight font-medium transition-colors duration-300 group-hover:text-neutral-800 md:text-base", children: project.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm leading-tight font-medium transition-colors duration-300 md:text-base", children: project.title }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600", children: project.year }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: project.year }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: project.type })
         ] })
       ] })
@@ -532,10 +532,10 @@ function ProjectStudioHoverPreview({
                   },
                   className: "pointer-events-none absolute top-0 left-0 z-9999 select-none",
                   children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10 bg-black/95 shadow-2xl shadow-black/30 backdrop-blur-md" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-white", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-xl border border-border/10 bg-foreground/95 shadow-2xl shadow-foreground/30 backdrop-blur-md" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-background", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base", children: tooltipLabel ?? "Explore" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full border border-white/30 bg-white/10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full border border-border/30 bg-card/10", children: /* @__PURE__ */ jsxRuntime.jsx(
                         framerMotion.motion.span,
                         {
                           animate: { x: [0, 2, 0] },
@@ -549,7 +549,7 @@ function ProjectStudioHoverPreview({
                         }
                       ) })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 scale-105 rounded-2xl bg-white/5 blur-sm" })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 scale-105 rounded-2xl bg-card/5 blur-sm" })
                   ] })
                 }
               ) })