@opensite/ui 0.8.9 → 0.9.1

package/dist/about-startup-team.js

@@ -41,6 +41,36 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1009,7 +1039,10 @@ function AboutStartupTeam({
         onClick: () => handleTabChange(link.value),
         className: cn(
           "block w-full text-left rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-          activeTab === link.value ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
+          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(
+            getTextColor(background, "muted"),
+            "hover:bg-muted"
+          )
         ),
         children: link.label
       },
@@ -1051,17 +1084,20 @@ function AboutStartupTeam({
             {
               name: "lucide/user",
               size: 40,
-              className: "text-muted-foreground"
+              className: cn(getTextColor(background, "muted"))
             }
           ) }),
           member.name && (typeof member.name === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-4 font-semibold", children: member.name }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: member.name })),
-          member.role && (typeof member.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: member.role }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: member.role })),
+          member.role && (typeof member.role === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: member.role }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: member.role })),
           member.socialLinks && member.socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center gap-3", children: member.socialLinks.map((link, linkIdx) => /* @__PURE__ */ jsx(
             Pressable,
             {
               href: link.url,
               "aria-label": link.label,
-              className: "text-muted-foreground hover:text-primary",
+              className: cn(
+                getTextColor(background, "muted"),
+                `hover:${getAccentColor(background)}`
+              ),
               children: link.icon
             },
             linkIdx
@@ -1086,7 +1122,11 @@ function AboutStartupTeam({
         onClick: () => handleTabChange(link.value),
         className: cn(
           "shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-          activeTab === link.value ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(
+            "bg-muted",
+            getTextColor(background, "muted"),
+            "hover:bg-muted/80"
+          )
         ),
         children: link.label
       },
@@ -1127,7 +1167,8 @@ function AboutStartupTeam({
             "p",
             {
               className: cn(
-                "mt-6 text-lg text-muted-foreground whitespace-pre-line",
+                "mt-6 text-lg whitespace-pre-line",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description

package/dist/about-stats-showcase.cjs

@@ -45,6 +45,32 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -477,7 +503,7 @@ function AboutStatsShowcase({
         className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName),
         children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
           stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
-          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
+          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: stat.label }) : stat.label)
         ] }, idx))
       }
     );
@@ -564,7 +590,7 @@ function AboutStatsShowcase({
             ), children: [
               benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
               benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
-              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : benefit.stat.description)
+              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
             ] }),
             benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
@@ -585,7 +611,7 @@ function AboutStatsShowcase({
                   benefit.testimonial.author,
                   ","
                 ] }) : benefit.testimonial.author),
-                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
+                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: benefit.testimonial.role }) : benefit.testimonial.role)
               ] })
             ] })
           ] }, idx))
@@ -626,7 +652,8 @@ function AboutStatsShowcase({
               "p",
               {
                 className: cn(
-                  "text-lg text-muted-foreground md:text-xl text-balance",
+                  "text-lg md:text-xl text-balance",
+                  getTextColor(background, "muted"),
                   descriptionClassName
                 ),
                 children: description

package/dist/about-stats-showcase.js

@@ -39,6 +39,32 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -471,7 +497,7 @@ function AboutStatsShowcase({
         className: cn("grid grid-cols-2 gap-6 md:grid-cols-3", statsClassName),
         children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
           stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
-          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.label }) : stat.label)
+          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: stat.label }) : stat.label)
         ] }, idx))
       }
     );
@@ -558,7 +584,7 @@ function AboutStatsShowcase({
             ), children: [
               benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: benefit.stat.value })),
               benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: benefit.stat.label })),
-              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: benefit.stat.description }) : benefit.stat.description)
+              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
             ] }),
             benefit.testimonial && /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-background p-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
@@ -579,7 +605,7 @@ function AboutStatsShowcase({
                   benefit.testimonial.author,
                   ","
                 ] }) : benefit.testimonial.author),
-                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: benefit.testimonial.role }) : benefit.testimonial.role)
+                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: benefit.testimonial.role }) : benefit.testimonial.role)
               ] })
             ] })
           ] }, idx))
@@ -620,7 +646,8 @@ function AboutStatsShowcase({
               "p",
               {
                 className: cn(
-                  "text-lg text-muted-foreground md:text-xl text-balance",
+                  "text-lg md:text-xl text-balance",
+                  getTextColor(background, "muted"),
                   descriptionClassName
                 ),
                 children: description

package/dist/about-stats-sidebar.cjs

@@ -44,6 +44,32 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -449,7 +475,7 @@ function AboutStatsSidebar({
       stat.icon,
       typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: stat.value }),
       typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.description }))
+      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.description }))
     ] }, idx)) });
   }, [statsSlot, stats, statsClassName]);
   const featuresContent = React.useMemo(() => {
@@ -459,7 +485,7 @@ function AboutStatsSidebar({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10", feature.iconBgClass), children: feature.icon }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: feature.description }) : feature.description)
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
       ] })
     ] }, idx)) });
   }, [featuresSlot, features, featuresClassName]);
@@ -475,7 +501,7 @@ function AboutStatsSidebar({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
           (statsSlot || stats && stats.length > 0) && statsContent,

package/dist/about-stats-sidebar.js

@@ -38,6 +38,32 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -443,7 +469,7 @@ function AboutStatsSidebar({
       stat.icon,
       typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: stat.value }),
       typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.description }))
+      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.description }))
     ] }, idx)) });
   }, [statsSlot, stats, statsClassName]);
   const featuresContent = useMemo(() => {
@@ -453,7 +479,7 @@ function AboutStatsSidebar({
       /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10", feature.iconBgClass), children: feature.icon }),
       /* @__PURE__ */ jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: feature.description }) : feature.description)
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
       ] })
     ] }, idx)) });
   }, [featuresSlot, features, featuresClassName]);
@@ -469,7 +495,7 @@ function AboutStatsSidebar({
       children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
           (statsSlot || stats && stats.length > 0) && statsContent,

package/dist/about-story-expertise.cjs

@@ -59,6 +59,36 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -886,7 +916,7 @@ function AboutStoryExpertise({
   const storyContent = React.useMemo(() => {
     if (storySlot) return storySlot;
     if (!storyParagraphs || storyParagraphs.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4 text-muted-foreground", storyClassName), children: storyParagraphs.map(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", getTextColor(background, "muted"), storyClassName), children: storyParagraphs.map(
       (paragraph, idx) => typeof paragraph === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: paragraph }, idx) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: paragraph }, idx)
     ) });
   }, [storySlot, storyParagraphs, storyClassName]);
@@ -919,11 +949,11 @@ function AboutStoryExpertise({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: highlight.label }) : highlight.label),
+              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.2em]", getTextColor(background, "muted")), children: highlight.label }) : highlight.label),
               highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
             ] })
           ] }),
-          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: highlight.description }) : highlight.description)
+          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: highlight.description }) : highlight.description)
         ]
       }
     );
@@ -947,10 +977,14 @@ function AboutStoryExpertise({
             transition: { duration: 0.3, delay: idx * 0.05 },
             className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary", children: area.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+                "flex h-12 w-12 items-center justify-center rounded-xl",
+                getNestedCardBg(background, "muted"),
+                getAccentColor(background)
+              ), children: area.icon }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-bold", children: area.title }) : area.title),
-                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: area.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: area.description }))
+                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: area.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: area.description }))
               ] })
             ]
           },
@@ -983,7 +1017,8 @@ function AboutStoryExpertise({
                     "p",
                     {
                       className: cn(
-                        "text-sm font-semibold uppercase tracking-[0.2em] text-primary",
+                        "text-sm font-semibold uppercase tracking-[0.2em]",
+                        getAccentColor(background),
                         eyebrowClassName
                       ),
                       children: eyebrow
@@ -1048,7 +1083,7 @@ function AboutStoryExpertise({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-primary", children: "Our Expertise" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]", getAccentColor(background)), children: "Our Expertise" }),
                 expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "h3",
                   {
@@ -1063,7 +1098,8 @@ function AboutStoryExpertise({
                   "p",
                   {
                     className: cn(
-                      "mx-auto mt-3 max-w-2xl text-muted-foreground",
+                      "mx-auto mt-3 max-w-2xl",
+                      getTextColor(background, "muted"),
                       expertiseDescriptionClassName
                     ),
                     children: expertiseDescription

package/dist/about-story-expertise.js

@@ -38,6 +38,36 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -865,7 +895,7 @@ function AboutStoryExpertise({
   const storyContent = useMemo(() => {
     if (storySlot) return storySlot;
     if (!storyParagraphs || storyParagraphs.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4 text-muted-foreground", storyClassName), children: storyParagraphs.map(
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4", getTextColor(background, "muted"), storyClassName), children: storyParagraphs.map(
       (paragraph, idx) => typeof paragraph === "string" ? /* @__PURE__ */ jsx("p", { children: paragraph }, idx) : /* @__PURE__ */ jsx("div", { children: paragraph }, idx)
     ) });
   }, [storySlot, storyParagraphs, storyClassName]);
@@ -898,11 +928,11 @@ function AboutStoryExpertise({
           /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
             /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
             /* @__PURE__ */ jsxs("div", { children: [
-              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: highlight.label }) : highlight.label),
+              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.2em]", getTextColor(background, "muted")), children: highlight.label }) : highlight.label),
               highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
             ] })
           ] }),
-          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: highlight.description }) : highlight.description)
+          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: highlight.description }) : highlight.description)
         ]
       }
     );
@@ -926,10 +956,14 @@ function AboutStoryExpertise({
             transition: { duration: 0.3, delay: idx * 0.05 },
             className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
             children: [
-              /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary", children: area.icon }),
+              /* @__PURE__ */ jsx("div", { className: cn(
+                "flex h-12 w-12 items-center justify-center rounded-xl",
+                getNestedCardBg(background, "muted"),
+                getAccentColor(background)
+              ), children: area.icon }),
               /* @__PURE__ */ jsxs("div", { children: [
                 area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsx("h4", { className: "text-lg font-bold", children: area.title }) : area.title),
-                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: area.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: area.description }))
+                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: area.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: area.description }))
               ] })
             ]
           },
@@ -962,7 +996,8 @@ function AboutStoryExpertise({
                     "p",
                     {
                       className: cn(
-                        "text-sm font-semibold uppercase tracking-[0.2em] text-primary",
+                        "text-sm font-semibold uppercase tracking-[0.2em]",
+                        getAccentColor(background),
                         eyebrowClassName
                       ),
                       children: eyebrow
@@ -1027,7 +1062,7 @@ function AboutStoryExpertise({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-primary", children: "Our Expertise" }),
+                /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]", getAccentColor(background)), children: "Our Expertise" }),
                 expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsx(
                   "h3",
                   {
@@ -1042,7 +1077,8 @@ function AboutStoryExpertise({
                   "p",
                   {
                     className: cn(
-                      "mx-auto mt-3 max-w-2xl text-muted-foreground",
+                      "mx-auto mt-3 max-w-2xl",
+                      getTextColor(background, "muted"),
                       expertiseDescriptionClassName
                     ),
                     children: expertiseDescription

package/dist/about-story-gallery.cjs

@@ -15,6 +15,32 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -457,7 +483,8 @@ function AboutStoryGallery({
             "p",
             {
               className: cn(
-                "mt-6 text-lg text-muted-foreground whitespace-pre-line text-balance",
+                "mt-6 text-lg whitespace-pre-line text-balance",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description