@opensite/ui 0.8.9 → 0.9.1

package/dist/about-expandable-values.cjs

@@ -61,6 +61,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:")) {
@@ -1029,7 +1059,7 @@ function AboutExpandableValues({
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                     value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold", children: value.title }) : value.title),
-                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: value.shortDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: value.shortDescription }))
+                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: value.shortDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: value.shortDescription }))
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1038,7 +1068,8 @@ function AboutExpandableValues({
                     name: "lucide/chevron-down",
                     size: 20,
                     className: cn(
-                      "mt-1 shrink-0 text-muted-foreground transition-transform duration-300",
+                      "mt-1 shrink-0 transition-transform duration-300",
+                      getTextColor(background, "muted"),
                       expandedValue === value.id ? "rotate-180" : ""
                     )
                   }
@@ -1050,16 +1081,16 @@ function AboutExpandableValues({
             value.longDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
               "rounded-lg p-4",
               getNestedCardBg(background, "subtle")
-            ), children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: value.longDescription }) : value.longDescription }),
+            ), children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: value.longDescription }) : value.longDescription }),
             value.examples && value.examples.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-2 text-sm font-semibold text-muted-foreground", children: "How we put this into practice:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("mb-2 text-sm font-semibold", getTextColor(background, "muted")), children: "How we put this into practice:" }),
               /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: value.examples.map((example, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 flex size-5 shrink-0 items-center justify-center rounded-full", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
                     name: "lucide/check",
                     size: 12,
-                    className: "text-primary"
+                    className: getAccentColor(background)
                   }
                 ) }),
                 typeof example === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm pt-2", children: example }) : example
@@ -1093,7 +1124,9 @@ function AboutExpandableValues({
                 "div",
                 {
                   className: cn(
-                    "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                    "inline-block rounded-lg px-3 py-1 text-sm",
+                    getNestedCardBg(background, "muted"),
+                    getAccentColor(background),
                     badgeClassName
                   ),
                   children: badgeText
@@ -1113,7 +1146,8 @@ function AboutExpandableValues({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground text-balance",
+                    "text-balance",
+                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description
@@ -1137,7 +1171,7 @@ function AboutExpandableValues({
               ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
-                  className: cn("text-muted-foreground", ctaDescriptionClassName),
+                  className: cn(getTextColor(background, "muted"), ctaDescriptionClassName),
                   children: ctaDescription
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),

package/dist/about-expandable-values.js

@@ -40,6 +40,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:")) {
@@ -1008,7 +1038,7 @@ function AboutExpandableValues({
                   /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
                   /* @__PURE__ */ jsxs("div", { children: [
                     value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: value.title }) : value.title),
-                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: value.shortDescription }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: value.shortDescription }))
+                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: value.shortDescription }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: value.shortDescription }))
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx(
@@ -1017,7 +1047,8 @@ function AboutExpandableValues({
                     name: "lucide/chevron-down",
                     size: 20,
                     className: cn(
-                      "mt-1 shrink-0 text-muted-foreground transition-transform duration-300",
+                      "mt-1 shrink-0 transition-transform duration-300",
+                      getTextColor(background, "muted"),
                       expandedValue === value.id ? "rotate-180" : ""
                     )
                   }
@@ -1029,16 +1060,16 @@ function AboutExpandableValues({
             value.longDescription && /* @__PURE__ */ jsx("div", { className: cn(
               "rounded-lg p-4",
               getNestedCardBg(background, "subtle")
-            ), children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: value.longDescription }) : value.longDescription }),
+            ), children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: value.longDescription }) : value.longDescription }),
             value.examples && value.examples.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-semibold text-muted-foreground", children: "How we put this into practice:" }),
+              /* @__PURE__ */ jsx("h4", { className: cn("mb-2 text-sm font-semibold", getTextColor(background, "muted")), children: "How we put this into practice:" }),
               /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: value.examples.map((example, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "mt-1 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: cn("mt-1 flex size-5 shrink-0 items-center justify-center rounded-full", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: "lucide/check",
                     size: 12,
-                    className: "text-primary"
+                    className: getAccentColor(background)
                   }
                 ) }),
                 typeof example === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm pt-2", children: example }) : example
@@ -1072,7 +1103,9 @@ function AboutExpandableValues({
                 "div",
                 {
                   className: cn(
-                    "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                    "inline-block rounded-lg px-3 py-1 text-sm",
+                    getNestedCardBg(background, "muted"),
+                    getAccentColor(background),
                     badgeClassName
                   ),
                   children: badgeText
@@ -1092,7 +1125,8 @@ function AboutExpandableValues({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground text-balance",
+                    "text-balance",
+                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description
@@ -1116,7 +1150,7 @@ function AboutExpandableValues({
               ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn("text-muted-foreground", ctaDescriptionClassName),
+                  className: cn(getTextColor(background, "muted"), ctaDescriptionClassName),
                   children: ctaDescription
                 }
               ) : /* @__PURE__ */ jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),

package/dist/about-interactive-tabs.cjs

@@ -31,6 +31,58 @@ var React__namespace = /*#__PURE__*/_interopNamespace(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";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -454,9 +506,14 @@ function AboutInteractiveTabs({
               className: cn(
                 "flex-shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
                 activeTab === tab.id ? cn(
-                  "border-b-2 border-primary text-primary",
+                  "border-b-2",
+                  getBorderColor(background, "accent"),
+                  getAccentColor(background),
                   activeTabClassName
-                ) : "text-muted-foreground hover:text-primary",
+                ) : cn(
+                  getTextColor(background, "muted"),
+                  `hover:${getAccentColor(background)}`
+                ),
                 tabButtonClassName
               ),
               children: tab.label
@@ -485,7 +542,8 @@ function AboutInteractiveTabs({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg text-muted-foreground",
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
                     tabContentDescriptionClassName
                   ),
                   children: activeContent.description
@@ -548,7 +606,8 @@ function AboutInteractiveTabs({
             "p",
             {
               className: cn(
-                "mt-4 text-lg text-muted-foreground text-balance",
+                "mt-4 text-lg text-balance",
+                getTextColor(background, "muted"),
                 subtitleClassName
               ),
               children: subtitle

package/dist/about-interactive-tabs.js

@@ -10,6 +10,58 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(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";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -433,9 +485,14 @@ function AboutInteractiveTabs({
               className: cn(
                 "flex-shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
                 activeTab === tab.id ? cn(
-                  "border-b-2 border-primary text-primary",
+                  "border-b-2",
+                  getBorderColor(background, "accent"),
+                  getAccentColor(background),
                   activeTabClassName
-                ) : "text-muted-foreground hover:text-primary",
+                ) : cn(
+                  getTextColor(background, "muted"),
+                  `hover:${getAccentColor(background)}`
+                ),
                 tabButtonClassName
               ),
               children: tab.label
@@ -464,7 +521,8 @@ function AboutInteractiveTabs({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg text-muted-foreground",
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
                     tabContentDescriptionClassName
                   ),
                   children: activeContent.description
@@ -527,7 +585,8 @@ function AboutInteractiveTabs({
             "p",
             {
               className: cn(
-                "mt-4 text-lg text-muted-foreground text-balance",
+                "mt-4 text-lg text-balance",
+                getTextColor(background, "muted"),
                 subtitleClassName
               ),
               children: subtitle

package/dist/about-location-info-hero.cjs

@@ -32,6 +32,32 @@ var React__namespace = /*#__PURE__*/_interopNamespace(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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1106,11 +1132,11 @@ function AboutLocationInfoHero({
         }
       ) : section.label),
       section.hours && section.hours.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-sm", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: item.day }) : item.day),
+        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: getTextColor(background, "muted"), children: item.day }) : item.day),
         item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.time }) : item.time)
       ] }, itemIndex)) })
     ] }, sectionIndex)) });
-  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor]);
+  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor, background]);
   const imagesContent = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;

package/dist/about-location-info-hero.js

@@ -11,6 +11,32 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1085,11 +1111,11 @@ function AboutLocationInfoHero({
         }
       ) : section.label),
       section.hours && section.hours.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-sm", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.day }) : item.day),
+        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsx("span", { className: getTextColor(background, "muted"), children: item.day }) : item.day),
         item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsx("span", { children: item.time }) : item.time)
       ] }, itemIndex)) })
     ] }, sectionIndex)) });
-  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor]);
+  }, [hoursSectionsSlot, hoursSections, hoursSectionsClassName, accentColor, background]);
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;

package/dist/about-minimal-story.cjs

@@ -15,6 +15,36 @@ 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";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -421,13 +451,13 @@ function AboutMinimalStory({
           className: "h-16 w-16 rounded-full object-cover",
           optixFlowConfig
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary text-2xl font-bold text-primary-foreground", children: author.name.charAt(0) }),
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-primary-foreground", getAccentColor(background)), children: author.name.charAt(0) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: author.name }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: author.role })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: author.role })
       ] })
     ] });
-  }, [authorSlot, author, authorClassName, optixFlowConfig]);
+  }, [authorSlot, author, authorClassName, optixFlowConfig, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -453,7 +483,8 @@ function AboutMinimalStory({
           "p",
           {
             className: cn(
-              "mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line",
+              "mt-8 text-lg leading-relaxed whitespace-pre-line",
+              getTextColor(background, "muted"),
               bodyClassName
             ),
             children: content

package/dist/about-minimal-story.js

@@ -9,6 +9,36 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(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";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -415,13 +445,13 @@ function AboutMinimalStory({
           className: "h-16 w-16 rounded-full object-cover",
           optixFlowConfig
         }
-      ) : /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary text-2xl font-bold text-primary-foreground", children: author.name.charAt(0) }),
+      ) : /* @__PURE__ */ jsx("div", { className: cn("flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-primary-foreground", getAccentColor(background)), children: author.name.charAt(0) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "font-semibold", children: author.name }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: author.role })
+        /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: author.role })
       ] })
     ] });
-  }, [authorSlot, author, authorClassName, optixFlowConfig]);
+  }, [authorSlot, author, authorClassName, optixFlowConfig, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -447,7 +477,8 @@ function AboutMinimalStory({
           "p",
           {
             className: cn(
-              "mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line",
+              "mt-8 text-lg leading-relaxed whitespace-pre-line",
+              getTextColor(background, "muted"),
               bodyClassName
             ),
             children: content