@opensite/ui 0.8.5 → 0.8.7

package/dist/carousel-icon-sidebar.js

@@ -1170,7 +1170,7 @@ function CarouselIconSidebar({
             "div",
             {
               className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-lg bg-background shadow-lg ring-1 ring-gray-200",
+                "flex h-12 w-12 items-center justify-center rounded-lg bg-background shadow-lg ring-1 ring-border",
                 iconClassName
               ),
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: activeItem.icon, size: 24 })
@@ -1198,8 +1198,8 @@ function CarouselIconSidebar({
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", controlsClassName), children: [
-              /* @__PURE__ */ jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-black hover:text-white" }),
-              /* @__PURE__ */ jsx(CarouselNext, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-black hover:text-white" })
+              /* @__PURE__ */ jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" }),
+              /* @__PURE__ */ jsx(CarouselNext, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" })
             ] })
           ] })
         ]

package/dist/carousel-image-hero.cjs

@@ -912,7 +912,7 @@ function CarouselImageHero({
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0 bg-muted", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -969,7 +969,7 @@ function CarouselImageHero({
                   "div",
                   {
                     className: cn(
-                      "inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm",
+                      "inline-flex items-center rounded-full bg-background/10 px-3 py-1 text-sm font-medium backdrop-blur-sm",
                       badgeClassName
                     ),
                     children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge })

package/dist/carousel-image-hero.js

@@ -891,7 +891,7 @@ function CarouselImageHero({
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0 bg-muted", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxs(
             "div",
             {
@@ -948,7 +948,7 @@ function CarouselImageHero({
                   "div",
                   {
                     className: cn(
-                      "inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm",
+                      "inline-flex items-center rounded-full bg-background/10 px-3 py-1 text-sm font-medium backdrop-blur-sm",
                       badgeClassName
                     ),
                     children: /* @__PURE__ */ jsx("span", { children: badge })

package/dist/carousel-multi-step-showcase.cjs

@@ -1080,7 +1080,7 @@ function CarouselMultiStepShowcase({
                       {
                         className: cn(
                           "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                          isActive ? "bg-primary-foreground text-primary" : isCompleted ? "bg-primary-foreground text-primary" : "bg-background"
+                          isActive ? "bg-primary-foreground text-primary" : isCompleted ? "bg-primary-foreground text-primary" : "bg-muted"
                         ),
                         children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 14 }) : step.step
                       }

package/dist/carousel-multi-step-showcase.js

@@ -1059,7 +1059,7 @@ function CarouselMultiStepShowcase({
                       {
                         className: cn(
                           "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                          isActive ? "bg-primary-foreground text-primary" : isCompleted ? "bg-primary-foreground text-primary" : "bg-background"
+                          isActive ? "bg-primary-foreground text-primary" : isCompleted ? "bg-primary-foreground text-primary" : "bg-muted"
                         ),
                         children: isCompleted ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 14 }) : step.step
                       }

package/dist/carousel-portfolio-hero.cjs

@@ -1057,7 +1057,7 @@ function CarouselPortfolioHero({
           "div",
           {
             className: cn(
-              "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12"
+              "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 md:px-8 lg:px-12"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
               currentSlide?.tag && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1084,7 +1084,7 @@ function CarouselPortfolioHero({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl  text-balance text-shadow",
+                    "mt-4 text-lg opacity-80 sm:text-xl md:max-w-2xl  text-balance text-shadow",
                     descriptionClassName
                   ),
                   children: currentSlide.description
@@ -1109,7 +1109,7 @@ function CarouselPortfolioHero({
                             {
                               variant: "outline",
                               size: "icon",
-                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              className: "rounded-full border-foreground/40 bg-muted hover:bg-muted/80",
                               onClick: goToPrev,
                               asButton: true,
                               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
@@ -1120,7 +1120,7 @@ function CarouselPortfolioHero({
                             {
                               variant: "outline",
                               size: "icon",
-                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              className: "rounded-full border-foreground/40 bg-muted hover:bg-muted/80",
                               onClick: goToNext,
                               asButton: true,
                               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
@@ -1129,7 +1129,7 @@ function CarouselPortfolioHero({
                           /* @__PURE__ */ jsxRuntime.jsxs(
                             "div",
                             {
-                              className: cn("ml-3 text-sm text-white/80", counterClassName),
+                              className: cn("ml-3 text-sm opacity-80", counterClassName),
                               children: [
                                 currentIndex + 1,
                                 " / ",

package/dist/carousel-portfolio-hero.js

@@ -1036,7 +1036,7 @@ function CarouselPortfolioHero({
           "div",
           {
             className: cn(
-              "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12"
+              "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 md:px-8 lg:px-12"
             ),
             children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
               currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx(
@@ -1063,7 +1063,7 @@ function CarouselPortfolioHero({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl  text-balance text-shadow",
+                    "mt-4 text-lg opacity-80 sm:text-xl md:max-w-2xl  text-balance text-shadow",
                     descriptionClassName
                   ),
                   children: currentSlide.description
@@ -1088,7 +1088,7 @@ function CarouselPortfolioHero({
                             {
                               variant: "outline",
                               size: "icon",
-                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              className: "rounded-full border-foreground/40 bg-muted hover:bg-muted/80",
                               onClick: goToPrev,
                               asButton: true,
                               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
@@ -1099,7 +1099,7 @@ function CarouselPortfolioHero({
                             {
                               variant: "outline",
                               size: "icon",
-                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              className: "rounded-full border-foreground/40 bg-muted hover:bg-muted/80",
                               onClick: goToNext,
                               asButton: true,
                               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
@@ -1108,7 +1108,7 @@ function CarouselPortfolioHero({
                           /* @__PURE__ */ jsxs(
                             "div",
                             {
-                              className: cn("ml-3 text-sm text-white/80", counterClassName),
+                              className: cn("ml-3 text-sm opacity-80", counterClassName),
                               children: [
                                 currentIndex + 1,
                                 " / ",

package/dist/carousel-progress-slider.cjs

@@ -1130,7 +1130,7 @@ function CarouselProgressSlider({
                   asButton: true,
                   variant: "outline",
                   size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted/80 backdrop-blur-sm",
                   "aria-label": isPaused ? "Play" : "Pause",
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,

package/dist/carousel-progress-slider.js

@@ -1109,7 +1109,7 @@ function CarouselProgressSlider({
                   asButton: true,
                   variant: "outline",
                   size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted/80 backdrop-blur-sm",
                   "aria-label": isPaused ? "Play" : "Pause",
                   children: /* @__PURE__ */ jsx(
                     DynamicIcon,

package/dist/case-studies-image-grid.cjs

@@ -872,7 +872,7 @@ function CaseStudiesImageGrid({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 bg-linear-to-t from-black/80 to-black/10", overlayClassName) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 bg-linear-to-t from-foreground/80 to-foreground/10", overlayClassName) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
@@ -883,7 +883,7 @@ function CaseStudiesImageGrid({
               optixFlowConfig
             }
           ),
-          typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("isolate max-w-sm text-lg font-semibold text-white lg:text-xl lg:font-semibold", titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: item.title })
+          typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("isolate max-w-sm text-lg font-semibold text-background lg:text-xl lg:font-semibold", titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: item.title })
         ]
       },
       index

package/dist/case-studies-image-grid.js

@@ -851,7 +851,7 @@ function CaseStudiesImageGrid({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 bg-linear-to-t from-black/80 to-black/10", overlayClassName) }),
+          /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 bg-linear-to-t from-foreground/80 to-foreground/10", overlayClassName) }),
           /* @__PURE__ */ jsx(
             Img,
             {
@@ -862,7 +862,7 @@ function CaseStudiesImageGrid({
               optixFlowConfig
             }
           ),
-          typeof item.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("isolate max-w-sm text-lg font-semibold text-white lg:text-xl lg:font-semibold", titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: item.title })
+          typeof item.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("isolate max-w-sm text-lg font-semibold text-background lg:text-xl lg:font-semibold", titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: item.title })
         ]
       },
       index

package/dist/case-studies-stats-card.cjs

@@ -968,7 +968,7 @@ function CaseStudiesStatsCard({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex max-w-lg flex-col gap-5", rightColumnClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-2xl leading-none font-bold md:text-3xl lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          summary && (typeof summary === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base font-medium text-foreground", summaryClassName), children: summary }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: summaryClassName, children: summary })),
+          summary && (typeof summary === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base font-medium", summaryClassName), children: summary }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: summaryClassName, children: summary })),
           renderedActions
         ] })
       ] }) })

package/dist/case-studies-stats-card.js

@@ -946,7 +946,7 @@ function CaseStudiesStatsCard({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn("flex max-w-lg flex-col gap-5", rightColumnClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-2xl leading-none font-bold md:text-3xl lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          summary && (typeof summary === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base font-medium text-foreground", summaryClassName), children: summary }) : /* @__PURE__ */ jsx("div", { className: summaryClassName, children: summary })),
+          summary && (typeof summary === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base font-medium", summaryClassName), children: summary }) : /* @__PURE__ */ jsx("div", { className: summaryClassName, children: summary })),
           renderedActions
         ] })
       ] }) })

package/dist/case-study-prose-sidebar.cjs

@@ -888,7 +888,7 @@ function CaseStudyProseSidebar({
     const baseClassName = isFirstAfterBorder ? "mb-5 w-full border-t border-border px-6 pt-5 last:mb-0" : "mb-5 px-6 last:mb-0";
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(baseClassName, detail.className, detailItemClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-semibold", children: detail.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden text-xs text-muted-foreground md:text-sm", children: detail.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: detail.href, className: "underline hover:text-foreground", children: detail.value }) : detail.value })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden text-xs text-muted-foreground md:text-sm", children: detail.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: detail.href, className: "underline", children: detail.value }) : detail.value })
     ] }, index);
   }, [detailItemClassName]);
   const detailsContent = React.useMemo(() => {

package/dist/case-study-prose-sidebar.js

@@ -867,7 +867,7 @@ function CaseStudyProseSidebar({
     const baseClassName = isFirstAfterBorder ? "mb-5 w-full border-t border-border px-6 pt-5 last:mb-0" : "mb-5 px-6 last:mb-0";
     return /* @__PURE__ */ jsxs("div", { className: cn(baseClassName, detail.className, detailItemClassName), children: [
       /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold", children: detail.label }),
-      /* @__PURE__ */ jsx("div", { className: "overflow-hidden text-xs text-muted-foreground md:text-sm", children: detail.href ? /* @__PURE__ */ jsx(Pressable, { href: detail.href, className: "underline hover:text-foreground", children: detail.value }) : detail.value })
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden text-xs text-muted-foreground md:text-sm", children: detail.href ? /* @__PURE__ */ jsx(Pressable, { href: detail.href, className: "underline", children: detail.value }) : detail.value })
     ] }, index);
   }, [detailItemClassName]);
   const detailsContent = useMemo(() => {

package/dist/case-study-toc-social-sidebar.cjs

@@ -1201,7 +1201,7 @@ function CaseStudyTocSocialSidebar({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold", children: detail.label }),
-          detail.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: detail.href, className: "mt-1 text-sm text-muted-foreground underline hover:text-foreground", children: detail.value }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: detail.value })
+          detail.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: detail.href, className: "mt-1 text-sm text-muted-foreground underline", children: detail.value }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: detail.value })
         ]
       },
       index

package/dist/case-study-toc-social-sidebar.js

@@ -1178,7 +1178,7 @@ function CaseStudyTocSocialSidebar({
         ),
         children: [
           /* @__PURE__ */ jsx("h2", { className: "font-semibold", children: detail.label }),
-          detail.href ? /* @__PURE__ */ jsx(Pressable, { href: detail.href, className: "mt-1 text-sm text-muted-foreground underline hover:text-foreground", children: detail.value }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: detail.value })
+          detail.href ? /* @__PURE__ */ jsx(Pressable, { href: detail.href, className: "mt-1 text-sm text-muted-foreground underline", children: detail.value }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: detail.value })
         ]
       },
       index

package/dist/comparison-ai-models.cjs

@@ -622,17 +622,17 @@ function ComparisonAiModels({
       const baseClass = "cursor-pointer py-4 text-center font-medium transition-all duration-300";
       let statusClass = "";
       if (status === "best") {
-        statusClass = "bg-green-50 text-success dark:bg-green-950/20";
+        statusClass = "bg-success/10 text-success";
       } else if (status === "worst") {
-        statusClass = "bg-red-50 text-destructive dark:bg-red-950/20";
+        statusClass = "bg-destructive/10 text-destructive";
       } else {
-        statusClass = "bg-muted/50 text-foreground";
+        statusClass = "bg-muted/50";
       }
       let hoverClass = "";
       if (hoveredModel === modelKey) {
-        if (modelKey === "modelA") hoverClass = "bg-red-50/80 dark:bg-red-950/30";
-        else if (modelKey === "modelB") hoverClass = "bg-blue-50/80 dark:bg-blue-950/30";
-        else if (modelKey === "modelC") hoverClass = "bg-green-50/80 dark:bg-green-950/30";
+        if (modelKey === "modelA") hoverClass = "bg-destructive/20";
+        else if (modelKey === "modelB") hoverClass = "bg-primary/20";
+        else if (modelKey === "modelC") hoverClass = "bg-success/20";
       }
       return cn(baseClass, statusClass, hoverClass);
     },
@@ -643,11 +643,11 @@ function ComparisonAiModels({
       const baseClass = "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300";
       if (hoveredModel === modelKey) {
         if (modelKey === "modelA")
-          return cn(baseClass, "bg-red-50/20 shadow-lg ring-2 ring-red-500/50 dark:bg-red-950/10");
+          return cn(baseClass, "bg-destructive/10 shadow-lg ring-2 ring-destructive/50");
         if (modelKey === "modelB")
-          return cn(baseClass, "bg-blue-50/20 shadow-lg ring-2 ring-blue-500/50 dark:bg-blue-950/10");
+          return cn(baseClass, "bg-primary/10 shadow-lg ring-2 ring-primary/50");
         if (modelKey === "modelC")
-          return cn(baseClass, "bg-green-50/20 shadow-lg ring-2 ring-green-500/50 dark:bg-green-950/10");
+          return cn(baseClass, "bg-success/10 shadow-lg ring-2 ring-success/50");
       }
       return baseClass;
     },
@@ -665,8 +665,8 @@ function ComparisonAiModels({
         ),
         children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: tableClassName, children: [
           /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/50", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-foreground", children: "Metric" }),
-            Object.entries(models).map(([key, model]) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "text-center font-semibold text-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Metric" }),
+            Object.entries(models).map(([key, model]) => /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "text-center font-semibold", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
               model.icon && /* @__PURE__ */ jsxRuntime.jsx(
                 img.Img,
                 {
@@ -680,7 +680,7 @@ function ComparisonAiModels({
             ] }) }, key))
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: comparisonData.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/30 transition-colors hover:bg-muted/30", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "py-4 font-medium text-foreground", children: row.metric }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "py-4 font-medium", children: row.metric }),
             /* @__PURE__ */ jsxRuntime.jsx(
               TableCell,
               {
@@ -735,17 +735,17 @@ function ComparisonAiModels({
     if (analysisSlot) return analysisSlot;
     if (!models) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative mt-8 border border-border/50 bg-muted/20 p-6", analysisClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-4 font-mono text-sm font-semibold tracking-wider text-foreground uppercase", children: "Technical Analysis" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-4 font-mono text-sm font-semibold tracking-wider uppercase", children: "Technical Analysis" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 font-mono text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2 md:grid-cols-3", children: Object.entries(models).map(([key, model]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getSummaryCardClassName(key), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 font-medium text-foreground", children: model.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 font-medium", children: model.name }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: model.summary.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             "\u2022 ",
             item
           ] }, idx)) })
         ] }, key)) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 rounded border border-border/30 bg-background/50 p-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 font-medium text-foreground", children: "Performance Summary" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 font-medium", children: "Performance Summary" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               "\u2022 ",

package/dist/comparison-ai-models.js

@@ -601,17 +601,17 @@ function ComparisonAiModels({
       const baseClass = "cursor-pointer py-4 text-center font-medium transition-all duration-300";
       let statusClass = "";
       if (status === "best") {
-        statusClass = "bg-green-50 text-success dark:bg-green-950/20";
+        statusClass = "bg-success/10 text-success";
       } else if (status === "worst") {
-        statusClass = "bg-red-50 text-destructive dark:bg-red-950/20";
+        statusClass = "bg-destructive/10 text-destructive";
       } else {
-        statusClass = "bg-muted/50 text-foreground";
+        statusClass = "bg-muted/50";
       }
       let hoverClass = "";
       if (hoveredModel === modelKey) {
-        if (modelKey === "modelA") hoverClass = "bg-red-50/80 dark:bg-red-950/30";
-        else if (modelKey === "modelB") hoverClass = "bg-blue-50/80 dark:bg-blue-950/30";
-        else if (modelKey === "modelC") hoverClass = "bg-green-50/80 dark:bg-green-950/30";
+        if (modelKey === "modelA") hoverClass = "bg-destructive/20";
+        else if (modelKey === "modelB") hoverClass = "bg-primary/20";
+        else if (modelKey === "modelC") hoverClass = "bg-success/20";
       }
       return cn(baseClass, statusClass, hoverClass);
     },
@@ -622,11 +622,11 @@ function ComparisonAiModels({
       const baseClass = "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300";
       if (hoveredModel === modelKey) {
         if (modelKey === "modelA")
-          return cn(baseClass, "bg-red-50/20 shadow-lg ring-2 ring-red-500/50 dark:bg-red-950/10");
+          return cn(baseClass, "bg-destructive/10 shadow-lg ring-2 ring-destructive/50");
         if (modelKey === "modelB")
-          return cn(baseClass, "bg-blue-50/20 shadow-lg ring-2 ring-blue-500/50 dark:bg-blue-950/10");
+          return cn(baseClass, "bg-primary/10 shadow-lg ring-2 ring-primary/50");
         if (modelKey === "modelC")
-          return cn(baseClass, "bg-green-50/20 shadow-lg ring-2 ring-green-500/50 dark:bg-green-950/10");
+          return cn(baseClass, "bg-success/10 shadow-lg ring-2 ring-success/50");
       }
       return baseClass;
     },
@@ -644,8 +644,8 @@ function ComparisonAiModels({
         ),
         children: /* @__PURE__ */ jsxs(Table, { className: tableClassName, children: [
           /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "border-border/50", children: [
-            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-foreground", children: "Metric" }),
-            Object.entries(models).map(([key, model]) => /* @__PURE__ */ jsx(TableHead, { className: "text-center font-semibold text-foreground", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold", children: "Metric" }),
+            Object.entries(models).map(([key, model]) => /* @__PURE__ */ jsx(TableHead, { className: "text-center font-semibold", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
               model.icon && /* @__PURE__ */ jsx(
                 Img,
                 {
@@ -659,7 +659,7 @@ function ComparisonAiModels({
             ] }) }, key))
           ] }) }),
           /* @__PURE__ */ jsx(TableBody, { children: comparisonData.map((row, index) => /* @__PURE__ */ jsxs(TableRow, { className: "border-border/30 transition-colors hover:bg-muted/30", children: [
-            /* @__PURE__ */ jsx(TableCell, { className: "py-4 font-medium text-foreground", children: row.metric }),
+            /* @__PURE__ */ jsx(TableCell, { className: "py-4 font-medium", children: row.metric }),
             /* @__PURE__ */ jsx(
               TableCell,
               {
@@ -714,17 +714,17 @@ function ComparisonAiModels({
     if (analysisSlot) return analysisSlot;
     if (!models) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("relative mt-8 border border-border/50 bg-muted/20 p-6", analysisClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("h4", { className: "mb-4 font-mono text-sm font-semibold tracking-wider text-foreground uppercase", children: "Technical Analysis" }),
+      /* @__PURE__ */ jsx("h4", { className: "mb-4 font-mono text-sm font-semibold tracking-wider uppercase", children: "Technical Analysis" }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3 font-mono text-xs text-muted-foreground", children: [
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 md:grid-cols-3", children: Object.entries(models).map(([key, model]) => /* @__PURE__ */ jsxs("div", { className: getSummaryCardClassName(key), children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-1 font-medium text-foreground", children: model.name }),
+          /* @__PURE__ */ jsx("div", { className: "mb-1 font-medium", children: model.name }),
           /* @__PURE__ */ jsx("div", { className: "space-y-1", children: model.summary.map((item, idx) => /* @__PURE__ */ jsxs("div", { children: [
             "\u2022 ",
             item
           ] }, idx)) })
         ] }, key)) }),
         /* @__PURE__ */ jsxs("div", { className: "mt-4 rounded border border-border/30 bg-background/50 p-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-2 font-medium text-foreground", children: "Performance Summary" }),
+          /* @__PURE__ */ jsx("div", { className: "mb-2 font-medium", children: "Performance Summary" }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               "\u2022 ",

package/dist/comparison-feature-cards.cjs

@@ -593,7 +593,7 @@ function ComparisonFeatureCards({
                   {
                     name: "lucide/circle-check-big",
                     size: 20,
-                    className: "shrink-0 text-emerald-700"
+                    className: "shrink-0 text-success"
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,

package/dist/comparison-feature-cards.js

@@ -571,7 +571,7 @@ function ComparisonFeatureCards({
                   {
                     name: "lucide/circle-check-big",
                     size: 20,
-                    className: "shrink-0 text-emerald-700"
+                    className: "shrink-0 text-success"
                   }
                 ) : /* @__PURE__ */ jsx(
                   DynamicIcon,

package/dist/comparison-feature-grid.cjs

@@ -570,7 +570,7 @@ function ComparisonFeatureGrid({
               className: cn("flex flex-col items-start text-left sm:flex-row sm:items-center", gridRowClassName),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-start px-6 pt-4 sm:w-16 sm:justify-center sm:py-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: row.icon, size: 20, className: "text-gray-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: row.icon, size: 20, className: "text-muted-foreground" }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-3 text-base font-medium sm:hidden", children: row.label })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1 px-6 pb-2 sm:py-4", children: [

package/dist/comparison-feature-grid.js

@@ -549,7 +549,7 @@ function ComparisonFeatureGrid({
               className: cn("flex flex-col items-start text-left sm:flex-row sm:items-center", gridRowClassName),
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-start px-6 pt-4 sm:w-16 sm:justify-center sm:py-4", children: [
-                  /* @__PURE__ */ jsx(DynamicIcon, { name: row.icon, size: 20, className: "text-gray-500" }),
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: row.icon, size: 20, className: "text-muted-foreground" }),
                   /* @__PURE__ */ jsx("span", { className: "ml-3 text-base font-medium sm:hidden", children: row.label })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "w-full flex-1 px-6 pb-2 sm:py-4", children: [

package/dist/comparison-metrics-rows.cjs

@@ -866,17 +866,17 @@ function ComparisonMetricsRows({
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 items-start gap-4 py-6 md:grid-cols-8 md:py-8", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "col-span-4 mt-2 text-base font-bold md:col-span-2 md:text-lg", children: row.title }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 flex flex-col md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-0 transition-colors group-hover:text-foreground md:ml-32 lg:ml-40 xl:ml-48 2xl:ml-56", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 flex items-baseline text-2xl font-bold text-foreground md:mb-2 md:text-5xl", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 flex flex-col md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-0 transition-colors md:ml-32 lg:ml-40 xl:ml-48 2xl:ml-56", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 flex items-baseline text-2xl font-bold md:mb-2 md:text-5xl", children: [
                   row.optionA.value,
-                  row.optionA.unit && /* @__PURE__ */ jsxRuntime.jsx("sup", { className: "ml-0.5 text-xs text-foreground md:text-sm", children: row.optionA.unit })
+                  row.optionA.unit && /* @__PURE__ */ jsxRuntime.jsx("sup", { className: "ml-0.5 text-xs md:text-sm", children: row.optionA.unit })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-tight text-muted-foreground md:text-sm md:leading-normal", children: row.optionA.desc })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 flex flex-col md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-0 transition-colors group-hover:text-accent-foreground md:ml-32 lg:ml-40 xl:ml-48 2xl:ml-56", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 flex items-baseline text-2xl font-bold text-foreground md:mb-2 md:text-5xl", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 flex flex-col md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-0 transition-colors md:ml-32 lg:ml-40 xl:ml-48 2xl:ml-56", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 flex items-baseline text-2xl font-bold md:mb-2 md:text-5xl", children: [
                   row.optionB.value,
-                  row.optionB.unit && /* @__PURE__ */ jsxRuntime.jsx("sup", { className: "ml-0.5 text-xs text-foreground md:text-sm", children: row.optionB.unit })
+                  row.optionB.unit && /* @__PURE__ */ jsxRuntime.jsx("sup", { className: "ml-0.5 text-xs md:text-sm", children: row.optionB.unit })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-tight text-muted-foreground md:text-sm md:leading-normal", children: row.optionB.desc })
               ] }) })

package/dist/comparison-metrics-rows.js

@@ -845,17 +845,17 @@ function ComparisonMetricsRows({
             ),
             children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 items-start gap-4 py-6 md:grid-cols-8 md:py-8", children: [
               /* @__PURE__ */ jsx("h3", { className: "col-span-4 mt-2 text-base font-bold md:col-span-2 md:text-lg", children: row.title }),
-              /* @__PURE__ */ jsx("div", { className: "col-span-2 flex flex-col md:col-span-3", children: /* @__PURE__ */ jsxs("div", { className: "ml-0 transition-colors group-hover:text-foreground md:ml-32 lg:ml-40 xl:ml-48 2xl:ml-56", children: [
-                /* @__PURE__ */ jsxs("p", { className: "mb-1 flex items-baseline text-2xl font-bold text-foreground md:mb-2 md:text-5xl", children: [
+              /* @__PURE__ */ jsx("div", { className: "col-span-2 flex flex-col md:col-span-3", children: /* @__PURE__ */ jsxs("div", { className: "ml-0 transition-colors md:ml-32 lg:ml-40 xl:ml-48 2xl:ml-56", children: [
+                /* @__PURE__ */ jsxs("p", { className: "mb-1 flex items-baseline text-2xl font-bold md:mb-2 md:text-5xl", children: [
                   row.optionA.value,
-                  row.optionA.unit && /* @__PURE__ */ jsx("sup", { className: "ml-0.5 text-xs text-foreground md:text-sm", children: row.optionA.unit })
+                  row.optionA.unit && /* @__PURE__ */ jsx("sup", { className: "ml-0.5 text-xs md:text-sm", children: row.optionA.unit })
                 ] }),
                 /* @__PURE__ */ jsx("p", { className: "text-xs leading-tight text-muted-foreground md:text-sm md:leading-normal", children: row.optionA.desc })
               ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "col-span-2 flex flex-col md:col-span-3", children: /* @__PURE__ */ jsxs("div", { className: "ml-0 transition-colors group-hover:text-accent-foreground md:ml-32 lg:ml-40 xl:ml-48 2xl:ml-56", children: [
-                /* @__PURE__ */ jsxs("p", { className: "mb-1 flex items-baseline text-2xl font-bold text-foreground md:mb-2 md:text-5xl", children: [
+              /* @__PURE__ */ jsx("div", { className: "col-span-2 flex flex-col md:col-span-3", children: /* @__PURE__ */ jsxs("div", { className: "ml-0 transition-colors md:ml-32 lg:ml-40 xl:ml-48 2xl:ml-56", children: [
+                /* @__PURE__ */ jsxs("p", { className: "mb-1 flex items-baseline text-2xl font-bold md:mb-2 md:text-5xl", children: [
                   row.optionB.value,
-                  row.optionB.unit && /* @__PURE__ */ jsx("sup", { className: "ml-0.5 text-xs text-foreground md:text-sm", children: row.optionB.unit })
+                  row.optionB.unit && /* @__PURE__ */ jsx("sup", { className: "ml-0.5 text-xs md:text-sm", children: row.optionB.unit })
                 ] }),
                 /* @__PURE__ */ jsx("p", { className: "text-xs leading-tight text-muted-foreground md:text-sm md:leading-normal", children: row.optionB.desc })
               ] }) })

package/dist/comparison-table-tabs.cjs

@@ -655,12 +655,12 @@ function ComparisonTableTabs({
   const [selectedTab, setSelectedTab] = React.useState(models?.[0]?.name || "");
   const renderStatusIcon = React__namespace.useCallback((status) => {
     if (status === "positive") {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-green-200 bg-green-100", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-700" }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-success/10", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-success" }) });
     }
     if (status === "negative") {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-red-200 bg-red-100", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-red-700" }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-destructive/10", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-destructive" }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-amber-200 bg-amber-100", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-minus", size: 16, className: "text-amber-700" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-accent/10", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-minus", size: 16, className: "text-accent" }) });
   }, []);
   const tableContent = React__namespace.useMemo(() => {
     if (tableSlot) return tableSlot;
@@ -681,7 +681,7 @@ function ComparisonTableTabs({
             TableHead,
             {
               className: cn(
-                "sticky top-0 mb-24 w-1/4 bg-background p-5 text-base font-medium text-primary after:absolute after:right-0 after:-bottom-px after:left-0 after:h-px after:bg-border",
+                "sticky top-0 mb-24 w-1/4 bg-background p-5 text-base font-medium after:absolute after:right-0 after:-bottom-px after:left-0 after:h-px after:bg-border",
                 tableHeaderClassName
               ),
               children: "Feature"
@@ -691,7 +691,7 @@ function ComparisonTableTabs({
             TableHead,
             {
               className: cn(
-                "sticky top-0 mb-24 w-1/4 bg-background p-5 text-center text-base font-medium text-primary after:absolute after:right-0 after:-bottom-px after:left-0 after:h-px after:bg-border md:table-cell",
+                "sticky top-0 mb-24 w-1/4 bg-background p-5 text-center text-base font-medium after:absolute after:right-0 after:-bottom-px after:left-0 after:h-px after:bg-border md:table-cell",
                 model.name !== selectedTab ? "hidden" : "",
                 tableHeaderClassName
               ),