@opensite/ui 0.8.6 → 0.8.8

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" })
                   ] })
                 }
               ) })

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

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

package/dist/project-video-carousel.cjs

@@ -1183,8 +1183,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-carousel.js

@@ -1159,8 +1159,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-bento.cjs

@@ -573,8 +573,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-bento.js

@@ -552,8 +552,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-grid.cjs

@@ -573,8 +573,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-grid.js

@@ -552,8 +552,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })

package/dist/project-video-hover-rounded.cjs

@@ -573,8 +573,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -623,7 +623,7 @@ function ProjectVideoHoverRounded({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-left text-foreground", headerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-left", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {

package/dist/project-video-hover-rounded.js

@@ -552,8 +552,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -602,7 +602,7 @@ function ProjectVideoHoverRounded({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-left text-foreground", headerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-left", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {

package/dist/project-video-hover-stack.cjs

@@ -573,8 +573,8 @@ var VideoSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/30 transition-all duration-500 group-hover:bg-black/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-white sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-background sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium tracking-wider uppercase opacity-80 sm:mb-3 sm:text-sm md:mb-4 md:text-base", children: studioName }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "max-w-md text-2xl font-light tracking-tight sm:text-3xl md:text-4xl lg:max-w-lg", children: projectTitle })
         ] }) })
@@ -622,7 +622,7 @@ function ProjectVideoHoverStack({
       patternOpacity,
       className: cn("min-h-screen", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-[50vh]", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left text-foreground sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-[50vh]", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bottom-12 flex items-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 text-left sm:px-8 md:px-12 lg:px-16 xl:px-20", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {