@opensite/ui 0.8.6 → 0.8.8

package/dist/process-numbered-services.cjs

@@ -1010,7 +1010,7 @@ function ProcessNumberedServices({
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-4", children: [
             service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title })),
-            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/50 leading-relaxed", children: service.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50 leading-relaxed", children: service.description })),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground leading-relaxed", children: service.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground leading-relaxed", children: service.description })),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1069,7 +1069,7 @@ function ProcessNumberedServices({
             "p",
             {
               className: cn(
-                "text-lg text-foreground/50",
+                "text-lg text-muted-foreground",
                 descriptionClassName
               ),
               children: description

package/dist/process-numbered-services.js

@@ -989,7 +989,7 @@ function ProcessNumberedServices({
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "lg:col-span-4", children: [
             service.title && (typeof service.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-2xl font-semibold tracking-tight", children: service.title })),
-            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/50 leading-relaxed", children: service.description }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/50 leading-relaxed", children: service.description })),
+            service.description && (typeof service.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground leading-relaxed", children: service.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground leading-relaxed", children: service.description })),
             renderServiceAction(service)
           ] }),
           /* @__PURE__ */ jsx("div", { className: "lg:col-span-7", children: service.capabilities?.length ? /* @__PURE__ */ jsx(
@@ -1048,7 +1048,7 @@ function ProcessNumberedServices({
             "p",
             {
               className: cn(
-                "text-lg text-foreground/50",
+                "text-lg text-muted-foreground",
                 descriptionClassName
               ),
               children: description

package/dist/process-roadmap-timeline.cjs

@@ -517,17 +517,17 @@ var StatusBadge = ({
   const config = {
     completed: {
       label: "Completed",
-      badgeClassName: "bg-success/10 text-success dark:bg-success/10 dark:text-success",
+      badgeClassName: "bg-success/10 text-success",
       icon: "lucide/check-circle-2"
     },
     "in-progress": {
       label: "In Progress",
-      badgeClassName: "bg-primary/10 text-primary dark:bg-primary/10 dark:text-primary",
+      badgeClassName: "bg-primary/10 text-primary",
       icon: "lucide/loader-2"
     },
     upcoming: {
       label: "Upcoming",
-      badgeClassName: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400",
+      badgeClassName: "bg-muted text-muted-foreground",
       icon: "lucide/clock"
     }
   };
@@ -611,7 +611,7 @@ function ProcessRoadmapTimeline({
                       }
                     ),
                     milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title })),
-                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-foreground/50", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-foreground/50", children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-muted-foreground", children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
@@ -639,7 +639,7 @@ function ProcessRoadmapTimeline({
             {
               className: cn(
                 "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2 bg-background",
-                milestone.status === "completed" ? "border-success bg-success text-white" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground",
+                milestone.status === "completed" ? "border-success bg-success text-background" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground",
                 milestoneNodeClassName
               ),
               children: milestone.status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: index + 1 })
@@ -675,7 +675,7 @@ function ProcessRoadmapTimeline({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-foreground/50",
+                "mx-auto max-w-2xl text-lg text-muted-foreground",
                 descriptionClassName
               ),
               children: description

package/dist/process-roadmap-timeline.js

@@ -496,17 +496,17 @@ var StatusBadge = ({
   const config = {
     completed: {
       label: "Completed",
-      badgeClassName: "bg-success/10 text-success dark:bg-success/10 dark:text-success",
+      badgeClassName: "bg-success/10 text-success",
       icon: "lucide/check-circle-2"
     },
     "in-progress": {
       label: "In Progress",
-      badgeClassName: "bg-primary/10 text-primary dark:bg-primary/10 dark:text-primary",
+      badgeClassName: "bg-primary/10 text-primary",
       icon: "lucide/loader-2"
     },
     upcoming: {
       label: "Upcoming",
-      badgeClassName: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400",
+      badgeClassName: "bg-muted text-muted-foreground",
       icon: "lucide/clock"
     }
   };
@@ -590,7 +590,7 @@ function ProcessRoadmapTimeline({
                       }
                     ),
                     milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-semibold tracking-tight", children: milestone.title })),
-                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-foreground/50", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4 text-foreground/50", children: milestone.description })),
+                    milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4 text-muted-foreground", children: milestone.description })),
                     milestone.features?.length ? /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -618,7 +618,7 @@ function ProcessRoadmapTimeline({
             {
               className: cn(
                 "absolute left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full border-2 bg-background",
-                milestone.status === "completed" ? "border-success bg-success text-white" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground",
+                milestone.status === "completed" ? "border-success bg-success text-background" : milestone.status === "in-progress" ? "border-primary bg-primary text-primary-foreground" : "border-border text-muted-foreground",
                 milestoneNodeClassName
               ),
               children: milestone.status === "completed" ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 20 }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
@@ -654,7 +654,7 @@ function ProcessRoadmapTimeline({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-foreground/50",
+                "mx-auto max-w-2xl text-lg text-muted-foreground",
                 descriptionClassName
               ),
               children: description

package/dist/process-scroll-image.cjs

@@ -969,7 +969,7 @@ var ProcessCard = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-9xl tracking-tighter", children: step.step ?? `0${index + 1}` }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: step.title })),
-          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/50", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50", children: step.description }))
+          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: step.description }))
         ] })
       ]
     }
@@ -1109,7 +1109,7 @@ function ProcessScrollImage({
                     "p",
                     {
                       className: cn(
-                        "text-base text-foreground/50",
+                        "text-base text-muted-foreground",
                         descriptionClassName
                       ),
                       children: description

package/dist/process-scroll-image.js

@@ -948,7 +948,7 @@ var ProcessCard = ({
         /* @__PURE__ */ jsx("div", { className: "flex w-fit items-center justify-center px-4 py-1 text-9xl tracking-tighter", children: step.step ?? `0${index + 1}` }),
         /* @__PURE__ */ jsxs("div", { children: [
           step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: step.title })),
-          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/50", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/50", children: step.description }))
+          step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: step.description }))
         ] })
       ]
     }
@@ -1088,7 +1088,7 @@ function ProcessScrollImage({
                     "p",
                     {
                       className: cn(
-                        "text-base text-foreground/50",
+                        "text-base text-muted-foreground",
                         descriptionClassName
                       ),
                       children: description

package/dist/process-steps-grid.cjs

@@ -563,7 +563,7 @@ function ProcessStepsGrid({
                   }
                 ),
                 step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title })),
-                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/50 leading-relaxed", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50 leading-relaxed", children: step.description }))
+                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground leading-relaxed", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground leading-relaxed", children: step.description }))
               ] })
             ]
           },
@@ -596,7 +596,7 @@ function ProcessStepsGrid({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-foreground/50",
+                "mx-auto max-w-2xl text-lg text-muted-foreground",
                 descriptionClassName
               ),
               children: description

package/dist/process-steps-grid.js

@@ -542,7 +542,7 @@ function ProcessStepsGrid({
                   }
                 ),
                 step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title })),
-                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/50 leading-relaxed", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/50 leading-relaxed", children: step.description }))
+                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground leading-relaxed", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground leading-relaxed", children: step.description }))
               ] })
             ]
           },
@@ -575,7 +575,7 @@ function ProcessStepsGrid({
             "p",
             {
               className: cn(
-                "mx-auto max-w-2xl text-lg text-foreground/50",
+                "mx-auto max-w-2xl text-lg text-muted-foreground",
                 descriptionClassName
               ),
               children: description

package/dist/process-sticky-steps.cjs

@@ -1054,7 +1054,7 @@ function ProcessStickySteps({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 items-center justify-center bg-muted px-4 py-1 tracking-tighter", children: step.step ?? `0${index + 1}` }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground/50", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50", children: step.description }))
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: step.description }))
           ] })
         ]
       },
@@ -1093,7 +1093,7 @@ function ProcessStickySteps({
                 "p",
                 {
                   className: cn(
-                    "text-base text-foreground/50",
+                    "text-base text-muted-foreground",
                     descriptionClassName
                   ),
                   children: description

package/dist/process-sticky-steps.js

@@ -1033,7 +1033,7 @@ function ProcessStickySteps({
           /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center bg-muted px-4 py-1 tracking-tighter", children: step.step ?? `0${index + 1}` }),
           /* @__PURE__ */ jsxs("div", { children: [
             step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-semibold tracking-tighter lg:text-3xl", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/50", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/50", children: step.description }))
+            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: step.description }))
           ] })
         ]
       },
@@ -1072,7 +1072,7 @@ function ProcessStickySteps({
                 "p",
                 {
                   className: cn(
-                    "text-base text-foreground/50",
+                    "text-base text-muted-foreground",
                     descriptionClassName
                   ),
                   children: description

package/dist/project-alternating-motion.cjs

@@ -461,7 +461,7 @@ function ProjectAlternatingMotion({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between", contentClassName), children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-lg font-medium sm:text-4xl", children: project.title }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 max-w-sm text-sm font-medium text-foreground", children: project.description }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 max-w-sm text-sm font-medium", children: project.description }),
               /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "px-3 py-2", children: project.tag })
             ] })
           ] }),

package/dist/project-alternating-motion.js

@@ -455,7 +455,7 @@ function ProjectAlternatingMotion({
           /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-between", contentClassName), children: [
             /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-medium sm:text-4xl", children: project.title }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("p", { className: "mb-3 max-w-sm text-sm font-medium text-foreground", children: project.description }),
+              /* @__PURE__ */ jsx("p", { className: "mb-3 max-w-sm text-sm font-medium", children: project.description }),
               /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "px-3 py-2", children: project.tag })
             ] })
           ] }),

package/dist/project-background-reveal.cjs

@@ -965,7 +965,7 @@ function ProjectBackgroundReveal({
           backgroundImage: `url(${project.image})`
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col gap-7 text-white/80 transition-colors duration-300 ease-out group-hover:text-white lg:flex-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col gap-7 text-background/80 transition-colors duration-300 ease-out group-hover:text-background lg:flex-row", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 text-2xl font-bold", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "/" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: String(idx + 1).padStart(2, "0") })
@@ -990,7 +990,7 @@ function ProjectBackgroundReveal({
               ) }) })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-0 bg-black/80 backdrop-blur-sm transition-all duration-300 ease-out group-hover:bg-black/50 group-hover:backdrop-blur-none" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-0 bg-foreground/80 backdrop-blur-sm transition-all duration-300 ease-out group-hover:bg-foreground/50 group-hover:backdrop-blur-none" })
         ]
       },
       idx

package/dist/project-background-reveal.js

@@ -944,7 +944,7 @@ function ProjectBackgroundReveal({
           backgroundImage: `url(${project.image})`
         },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-7 text-white/80 transition-colors duration-300 ease-out group-hover:text-white lg:flex-row", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-7 text-background/80 transition-colors duration-300 ease-out group-hover:text-background lg:flex-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex gap-1 text-2xl font-bold", children: [
               /* @__PURE__ */ jsx("span", { children: "/" }),
               /* @__PURE__ */ jsx("span", { children: String(idx + 1).padStart(2, "0") })
@@ -969,7 +969,7 @@ function ProjectBackgroundReveal({
               ) }) })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-0 bg-black/80 backdrop-blur-sm transition-all duration-300 ease-out group-hover:bg-black/50 group-hover:backdrop-blur-none" })
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-0 bg-foreground/80 backdrop-blur-sm transition-all duration-300 ease-out group-hover:bg-foreground/50 group-hover:backdrop-blur-none" })
         ]
       },
       idx

package/dist/project-card-overlay.cjs

@@ -544,7 +544,7 @@ var ProjectCard = ({
       whileHover: { scale: 1.02 },
       whileTap: { scale: 0.98 },
       className: cn(
-        "group relative cursor-pointer overflow-hidden rounded-3xl bg-black shadow-2xl",
+        "group relative cursor-pointer overflow-hidden rounded-3xl bg-foreground shadow-2xl",
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-square overflow-hidden", children: [
@@ -557,19 +557,19 @@ var ProjectCard = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block rounded-full border border-white/20 bg-black/50 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur-sm", children: project.category }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-foreground/80 via-foreground/20 to-transparent" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block rounded-full border border-border/20 bg-foreground/50 px-3 py-1.5 text-xs font-semibold text-background backdrop-blur-sm", children: project.category }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border border-border/30 bg-card/20 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
             name: "lucide/arrow-up-right",
             size: 16,
-            className: "text-white"
+            className: "text-background"
           }
         ) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-4 bottom-4 left-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 text-2xl font-bold tracking-tight text-white md:text-3xl", children: project.title }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: project.description })
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 text-2xl font-bold tracking-tight text-background md:text-3xl", children: project.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-background/70 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: project.description })
         ] })
       ] })
     }

package/dist/project-card-overlay.js

@@ -523,7 +523,7 @@ var ProjectCard = ({
       whileHover: { scale: 1.02 },
       whileTap: { scale: 0.98 },
       className: cn(
-        "group relative cursor-pointer overflow-hidden rounded-3xl bg-black shadow-2xl",
+        "group relative cursor-pointer overflow-hidden rounded-3xl bg-foreground shadow-2xl",
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-square overflow-hidden", children: [
@@ -536,19 +536,19 @@ var ProjectCard = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent" }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-4", children: /* @__PURE__ */ jsx("span", { className: "inline-block rounded-full border border-white/20 bg-black/50 px-3 py-1.5 text-xs font-semibold text-white backdrop-blur-sm", children: project.category }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-foreground/80 via-foreground/20 to-transparent" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-4", children: /* @__PURE__ */ jsx("span", { className: "inline-block rounded-full border border-border/20 bg-foreground/50 px-3 py-1.5 text-xs font-semibold text-background backdrop-blur-sm", children: project.category }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border border-border/30 bg-card/20 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
           DynamicIcon,
           {
             name: "lucide/arrow-up-right",
             size: 16,
-            className: "text-white"
+            className: "text-background"
           }
         ) }) }),
         /* @__PURE__ */ jsxs("div", { className: "absolute right-4 bottom-4 left-4", children: [
-          /* @__PURE__ */ jsx("h3", { className: "mb-1 text-2xl font-bold tracking-tight text-white md:text-3xl", children: project.title }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-white/70 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: project.description })
+          /* @__PURE__ */ jsx("h3", { className: "mb-1 text-2xl font-bold tracking-tight text-background md:text-3xl", children: project.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-background/70 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: project.description })
         ] })
       ] })
     }

package/dist/project-carousel-cinematic.cjs

@@ -1172,7 +1172,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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
               }
             ),
@@ -1183,7 +1183,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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
               }
             )

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