@opensite/ui 0.8.9 → 0.9.1

package/dist/components.cjs

@@ -73,6 +73,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";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -1655,7 +1685,7 @@ function AlternatingBlocks({
       className,
       children: [
         title && typeof title !== "string" || subtitle && typeof subtitle !== "string" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-          subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+          subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-sm font-semibold uppercase tracking-wider", getAccentColor(background)), children: subtitle }),
           title && typeof title !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
         ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
@@ -1860,12 +1890,12 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
+            className: cn("relative rounded-lg border p-6 transition-colors", `hover:${getNestedCardBg(background, "muted")}`),
             children: [
-              principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
+              principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute right-4 top-4 text-3xl font-bold", getAccentColor(background), "opacity-20"), children: principle.number }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
-                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: principle.description }) : principle.description)
               ] })
             ]
           },
@@ -1916,7 +1946,8 @@ function AboutMissionPrinciples({
               "div",
               {
                 className: cn(
-                  "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                  "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm",
+                  getAccentColor(background),
                   badgeClassName
                 ),
                 children: badgeText
@@ -1936,7 +1967,8 @@ function AboutMissionPrinciples({
               "p",
               {
                 className: cn(
-                  "text-xl text-muted-foreground",
+                  "text-xl",
+                  getTextColor(background, "muted"),
                   missionDescriptionClassName
                 ),
                 children: missionDescription
@@ -1971,7 +2003,8 @@ function AboutMissionPrinciples({
                   "p",
                   {
                     className: cn(
-                      "mb-4 text-muted-foreground",
+                      "mb-4",
+                      getTextColor(background, "muted"),
                       visionDescriptionClassName
                     ),
                     children: visionDescription
@@ -2056,7 +2089,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(
@@ -2065,7 +2098,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" : ""
                     )
                   }
@@ -2077,16 +2111,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
@@ -2120,7 +2154,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
@@ -2140,7 +2176,8 @@ function AboutExpandableValues({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground text-balance",
+                    "text-balance",
+                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description
@@ -2164,7 +2201,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 })),
@@ -2325,7 +2362,7 @@ function CommunityInitiatives({
               category.id
             )) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: currentCategory?.description }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted")), children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
             TabsContent,
             {
@@ -2347,20 +2384,20 @@ function CommunityInitiatives({
                           ),
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md bg-primary/10 p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md p-2", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
                                 DynamicIcon,
                                 {
                                   name: initiative.icon,
                                   size: 24,
-                                  className: "text-primary"
+                                  className: cn(getAccentColor(background))
                                 }
                               ) }),
                               /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
                             ] }),
-                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: initiative.description }),
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
                             initiative.metrics && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-primary", children: metric.value }),
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: metric.label })
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-bold", getAccentColor(background)), children: metric.value }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 text-xs", getTextColor(background, "muted")), children: metric.label })
                             ] }, i)) })
                           ]
                         }
@@ -2398,7 +2435,7 @@ function CommunityInitiatives({
                               {
                                 name: initiative.icon,
                                 size: 64,
-                                className: "mx-auto mb-4 text-muted-foreground/50"
+                                className: cn("mx-auto mb-4", getTextColor(background, "muted"), "opacity-50")
                               }
                             ),
                             /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
@@ -2453,7 +2490,9 @@ function CommunityInitiatives({
                 "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
@@ -2469,7 +2508,7 @@ function CommunityInitiatives({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
             ]
           }
         ),
@@ -2484,7 +2523,8 @@ function CommunityInitiatives({
             "p",
             {
               className: cn(
-                "mx-auto mb-8 max-w-2xl text-muted-foreground",
+                "mx-auto mb-8 max-w-2xl",
+                getTextColor(background, "muted"),
                 ctaDescriptionClassName
               ),
               children: ctaDescription
@@ -2578,9 +2618,9 @@ function AboutCultureTabs({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-12 max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm", getAccentColor(background), badgeClassName), children: badgeText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         aspectsSlot ? aspectsSlot : resolvedAspects.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
           Tabs,
@@ -2594,7 +2634,7 @@ function AboutCultureTabs({
                 TabsTrigger,
                 {
                   value: aspect.id,
-                  className: "px-3 py-2.5 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                  className: cn("px-3 py-2.5", `data-[state=active]:${getAccentColor(background)}`, "data-[state=active]:text-primary-foreground"),
                   children: aspect.title
                 },
                 aspect.id
@@ -2603,7 +2643,7 @@ function AboutCultureTabs({
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-relaxed text-muted-foreground", children: aspect.description })
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: aspect.description })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 bg-gradient-to-br from-primary/5 to-primary/10 p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2611,10 +2651,10 @@ function AboutCultureTabs({
                       {
                         name: "lucide/quote",
                         size: 32,
-                        className: "text-primary/40"
+                        className: cn(getAccentColor(background), "opacity-40")
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "italic text-muted-foreground", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("italic", getTextColor(background, "muted")), children: [
                       '"',
                       aspect.testimonial.quote,
                       '"'
@@ -2631,7 +2671,7 @@ function AboutCultureTabs({
                       ) }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                         /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: aspect.testimonial.role })
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs", getTextColor(background, "muted")), children: aspect.testimonial.role })
                       ] })
                     ] })
                   ] }) })
@@ -2660,7 +2700,7 @@ function AboutCultureTabs({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 text-muted-foreground", ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription })),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6", getTextColor(background, "muted"), ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription })),
               (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-4", actionsClassName), children: actionsContent })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
@@ -2699,7 +2739,7 @@ function MediaHoverCtas({
           "--media-hover-cta-hover-bg": item.onHoverBackgroundColor
         } : {}
       } : void 0;
-      const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : "bg-muted-foreground/10";
+      const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : getNestedCardBg(background, "muted");
       const hoverBackgroundClassName = applyHoverBackground ? "group-hover:bg-[var(--media-hover-cta-hover-bg)]" : "";
       const hoverImageAltText = item.altText ?? "";
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2735,7 +2775,7 @@ function MediaHoverCtas({
         index
       );
     });
-  }, [itemsSlot, resolvedItems, optixFlowConfig]);
+  }, [itemsSlot, resolvedItems, optixFlowConfig, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/components.js

@@ -50,6 +50,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";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -1632,7 +1662,7 @@ function AlternatingBlocks({
       className,
       children: [
         title && typeof title !== "string" || subtitle && typeof subtitle !== "string" ? /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-          subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+          subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-sm font-semibold uppercase tracking-wider", getAccentColor(background)), children: subtitle }),
           title && typeof title !== "string" && /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
         ] }) : null,
         /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
@@ -1837,12 +1867,12 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
+            className: cn("relative rounded-lg border p-6 transition-colors", `hover:${getNestedCardBg(background, "muted")}`),
             children: [
-              principle.number && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
+              principle.number && /* @__PURE__ */ jsx("div", { className: cn("absolute right-4 top-4 text-3xl font-bold", getAccentColor(background), "opacity-20"), children: principle.number }),
               /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
-                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: principle.description }) : principle.description)
+                principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: principle.description }) : principle.description)
               ] })
             ]
           },
@@ -1893,7 +1923,8 @@ function AboutMissionPrinciples({
               "div",
               {
                 className: cn(
-                  "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary",
+                  "inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm",
+                  getAccentColor(background),
                   badgeClassName
                 ),
                 children: badgeText
@@ -1913,7 +1944,8 @@ function AboutMissionPrinciples({
               "p",
               {
                 className: cn(
-                  "text-xl text-muted-foreground",
+                  "text-xl",
+                  getTextColor(background, "muted"),
                   missionDescriptionClassName
                 ),
                 children: missionDescription
@@ -1948,7 +1980,8 @@ function AboutMissionPrinciples({
                   "p",
                   {
                     className: cn(
-                      "mb-4 text-muted-foreground",
+                      "mb-4",
+                      getTextColor(background, "muted"),
                       visionDescriptionClassName
                     ),
                     children: visionDescription
@@ -2033,7 +2066,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(
@@ -2042,7 +2075,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" : ""
                     )
                   }
@@ -2054,16 +2088,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
@@ -2097,7 +2131,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
@@ -2117,7 +2153,8 @@ function AboutExpandableValues({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground text-balance",
+                    "text-balance",
+                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description
@@ -2141,7 +2178,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 })),
@@ -2302,7 +2339,7 @@ function CommunityInitiatives({
               category.id
             )) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: currentCategory?.description }) }),
+          /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted")), children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsx(
             TabsContent,
             {
@@ -2324,20 +2361,20 @@ function CommunityInitiatives({
                           ),
                           children: [
                             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                              /* @__PURE__ */ jsx("div", { className: "rounded-md bg-primary/10 p-2", children: /* @__PURE__ */ jsx(
+                              /* @__PURE__ */ jsx("div", { className: cn("rounded-md p-2", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
                                 DynamicIcon,
                                 {
                                   name: initiative.icon,
                                   size: 24,
-                                  className: "text-primary"
+                                  className: cn(getAccentColor(background))
                                 }
                               ) }),
                               /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
                             ] }),
-                            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: initiative.description }),
+                            /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
                             initiative.metrics && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                              /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-primary", children: metric.value }),
-                              /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: metric.label })
+                              /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-bold", getAccentColor(background)), children: metric.value }),
+                              /* @__PURE__ */ jsx("div", { className: cn("mt-1 text-xs", getTextColor(background, "muted")), children: metric.label })
                             ] }, i)) })
                           ]
                         }
@@ -2375,7 +2412,7 @@ function CommunityInitiatives({
                               {
                                 name: initiative.icon,
                                 size: 64,
-                                className: "mx-auto mb-4 text-muted-foreground/50"
+                                className: cn("mx-auto mb-4", getTextColor(background, "muted"), "opacity-50")
                               }
                             ),
                             /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
@@ -2430,7 +2467,9 @@ function CommunityInitiatives({
                 "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
@@ -2446,7 +2485,7 @@ function CommunityInitiatives({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
             ]
           }
         ),
@@ -2461,7 +2500,8 @@ function CommunityInitiatives({
             "p",
             {
               className: cn(
-                "mx-auto mb-8 max-w-2xl text-muted-foreground",
+                "mx-auto mb-8 max-w-2xl",
+                getTextColor(background, "muted"),
                 ctaDescriptionClassName
               ),
               children: ctaDescription
@@ -2555,9 +2595,9 @@ function AboutCultureTabs({
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mb-12 max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm text-primary", badgeClassName), children: badgeText }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm", getAccentColor(background), badgeClassName), children: badgeText }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         aspectsSlot ? aspectsSlot : resolvedAspects.length > 0 ? /* @__PURE__ */ jsxs(
           Tabs,
@@ -2571,7 +2611,7 @@ function AboutCultureTabs({
                 TabsTrigger,
                 {
                   value: aspect.id,
-                  className: "px-3 py-2.5 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                  className: cn("px-3 py-2.5", `data-[state=active]:${getAccentColor(background)}`, "data-[state=active]:text-primary-foreground"),
                   children: aspect.title
                 },
                 aspect.id
@@ -2580,7 +2620,7 @@ function AboutCultureTabs({
                 /* @__PURE__ */ jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
                   /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
                     /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
-                    /* @__PURE__ */ jsx("p", { className: "leading-relaxed text-muted-foreground", children: aspect.description })
+                    /* @__PURE__ */ jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: aspect.description })
                   ] }),
                   /* @__PURE__ */ jsx(Card, { className: "border-0 bg-gradient-to-br from-primary/5 to-primary/10 p-0", children: /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
                     /* @__PURE__ */ jsx(
@@ -2588,10 +2628,10 @@ function AboutCultureTabs({
                       {
                         name: "lucide/quote",
                         size: 32,
-                        className: "text-primary/40"
+                        className: cn(getAccentColor(background), "opacity-40")
                       }
                     ),
-                    /* @__PURE__ */ jsxs("p", { className: "italic text-muted-foreground", children: [
+                    /* @__PURE__ */ jsxs("p", { className: cn("italic", getTextColor(background, "muted")), children: [
                       '"',
                       aspect.testimonial.quote,
                       '"'
@@ -2608,7 +2648,7 @@ function AboutCultureTabs({
                       ) }),
                       /* @__PURE__ */ jsxs("div", { children: [
                         /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
-                        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: aspect.testimonial.role })
+                        /* @__PURE__ */ jsx("p", { className: cn("text-xs", getTextColor(background, "muted")), children: aspect.testimonial.role })
                       ] })
                     ] })
                   ] }) })
@@ -2637,7 +2677,7 @@ function AboutCultureTabs({
           /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 text-muted-foreground", ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription })),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6", getTextColor(background, "muted"), ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription })),
               (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex gap-4", actionsClassName), children: actionsContent })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
@@ -2676,7 +2716,7 @@ function MediaHoverCtas({
           "--media-hover-cta-hover-bg": item.onHoverBackgroundColor
         } : {}
       } : void 0;
-      const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : "bg-muted-foreground/10";
+      const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : getNestedCardBg(background, "muted");
       const hoverBackgroundClassName = applyHoverBackground ? "group-hover:bg-[var(--media-hover-cta-hover-bg)]" : "";
       const hoverImageAltText = item.altText ?? "";
       return /* @__PURE__ */ jsxs(
@@ -2712,7 +2752,7 @@ function MediaHoverCtas({
         index
       );
     });
-  }, [itemsSlot, resolvedItems, optixFlowConfig]);
+  }, [itemsSlot, resolvedItems, optixFlowConfig, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {