@opensite/ui 0.8.8 → 0.9.0

package/dist/about-company-profile.cjs

@@ -32,6 +32,62 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -863,7 +919,9 @@ function AboutCompanyProfile({
       "div",
       {
         className: cn(
-          "flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto",
+          "flex flex-col justify-between gap-6 rounded-xl p-7 md:w-1/2 lg:w-auto",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           breakoutClassName
         ),
         children: [
@@ -878,7 +936,7 @@ function AboutCompanyProfile({
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             typeof breakout.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-lg font-semibold", children: breakout.title }) : breakout.title,
-            typeof breakout.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: breakout.description }) : breakout.description
+            typeof breakout.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: breakout.description }) : breakout.description
           ] }),
           breakout.action && /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
@@ -897,7 +955,7 @@ function AboutCompanyProfile({
         ]
       }
     );
-  }, [breakoutSlot, breakout, breakoutClassName, optixFlowConfig]);
+  }, [breakoutSlot, breakout, breakoutClassName, optixFlowConfig, background]);
   const companiesContent = React.useMemo(() => {
     if (companiesSlot) return companiesSlot;
     if (!companies || companies.length === 0)
@@ -978,7 +1036,8 @@ function AboutCompanyProfile({
             "p",
             {
               className: cn(
-                "text-muted-foreground text-balance",
+                "text-balance",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -1019,7 +1078,9 @@ function AboutCompanyProfile({
           "div",
           {
             className: cn(
-              "relative overflow-hidden rounded-xl bg-muted p-7 md:p-16",
+              "relative overflow-hidden rounded-xl p-7 md:p-16",
+              getNestedCardBg(background),
+              getNestedCardTextColor(background),
               achievementsClassName
             ),
             children: [
@@ -1038,7 +1099,8 @@ function AboutCompanyProfile({
                   "p",
                   {
                     className: cn(
-                      "max-w-xl text-muted-foreground",
+                      "max-w-xl",
+                      getTextColor(background, "muted"),
                       achievementsDescriptionClassName
                     ),
                     children: achievementsDescription

package/dist/about-company-profile.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface BreakoutConfig {

package/dist/about-company-profile.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig, L as LogoItem, S as StatItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface BreakoutConfig {

package/dist/about-company-profile.js

@@ -11,6 +11,62 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -842,7 +898,9 @@ function AboutCompanyProfile({
       "div",
       {
         className: cn(
-          "flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto",
+          "flex flex-col justify-between gap-6 rounded-xl p-7 md:w-1/2 lg:w-auto",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           breakoutClassName
         ),
         children: [
@@ -857,7 +915,7 @@ function AboutCompanyProfile({
           ),
           /* @__PURE__ */ jsxs("div", { children: [
             typeof breakout.title === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-lg font-semibold", children: breakout.title }) : breakout.title,
-            typeof breakout.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: breakout.description }) : breakout.description
+            typeof breakout.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: breakout.description }) : breakout.description
           ] }),
           breakout.action && /* @__PURE__ */ jsx(
             Pressable,
@@ -876,7 +934,7 @@ function AboutCompanyProfile({
         ]
       }
     );
-  }, [breakoutSlot, breakout, breakoutClassName, optixFlowConfig]);
+  }, [breakoutSlot, breakout, breakoutClassName, optixFlowConfig, background]);
   const companiesContent = useMemo(() => {
     if (companiesSlot) return companiesSlot;
     if (!companies || companies.length === 0)
@@ -957,7 +1015,8 @@ function AboutCompanyProfile({
             "p",
             {
               className: cn(
-                "text-muted-foreground text-balance",
+                "text-balance",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -998,7 +1057,9 @@ function AboutCompanyProfile({
           "div",
           {
             className: cn(
-              "relative overflow-hidden rounded-xl bg-muted p-7 md:p-16",
+              "relative overflow-hidden rounded-xl p-7 md:p-16",
+              getNestedCardBg(background),
+              getNestedCardTextColor(background),
               achievementsClassName
             ),
             children: [
@@ -1017,7 +1078,8 @@ function AboutCompanyProfile({
                   "p",
                   {
                     className: cn(
-                      "max-w-xl text-muted-foreground",
+                      "max-w-xl",
+                      getTextColor(background, "muted"),
                       achievementsDescriptionClassName
                     ),
                     children: achievementsDescription

package/dist/about-culture-tabs.cjs

@@ -34,6 +34,36 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1089,9 +1119,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,
@@ -1105,7 +1135,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
@@ -1114,7 +1144,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(
@@ -1122,10 +1152,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,
                       '"'
@@ -1142,7 +1172,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 })
                       ] })
                     ] })
                   ] }) })
@@ -1171,7 +1201,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 })

package/dist/about-culture-tabs.d.cts

@@ -1,8 +1,7 @@
-export { c as AboutCultureTabs, p as AboutCultureTabsProps } from './community-initiatives-Sm_ZSgyv.cjs';
+export { c as AboutCultureTabs, p as AboutCultureTabsProps } from './community-initiatives-CPyEa7IX.cjs';
 import 'react';
-import './pattern-background-a7gKHzHy.cjs';
 import 'react/jsx-runtime';
-import './blocks-Cohq4eio.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';

package/dist/about-culture-tabs.d.ts

@@ -1,8 +1,7 @@
-export { c as AboutCultureTabs, p as AboutCultureTabsProps } from './community-initiatives-BeWIIjA4.js';
+export { c as AboutCultureTabs, p as AboutCultureTabsProps } from './community-initiatives-hxnFe3w6.js';
 import 'react';
-import './pattern-background-a7gKHzHy.js';
 import 'react/jsx-runtime';
-import './blocks-k17uluAz.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';

package/dist/about-culture-tabs.js

@@ -12,6 +12,36 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1067,9 +1097,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,
@@ -1083,7 +1113,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
@@ -1092,7 +1122,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(
@@ -1100,10 +1130,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,
                       '"'
@@ -1120,7 +1150,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 })
                       ] })
                     ] })
                   ] }) })
@@ -1149,7 +1179,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 })

package/dist/about-developer-profile.cjs

@@ -32,6 +32,66 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+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:")) {
@@ -863,14 +923,15 @@ function AboutDeveloperProfile({
         href: link.href,
         "aria-label": link["aria-label"],
         className: cn(
-          "text-muted-foreground hover:text-primary",
+          getTextColor(background, "muted"),
+          `hover:${getAccentColor(background)}`,
           link.className
         ),
         children: link.icon
       },
       idx
     ));
-  }, [socialLinksSlot, socialLinks]);
+  }, [socialLinksSlot, socialLinks, background]);
   const skillsContent = React.useMemo(() => {
     if (skillsSlot) return skillsSlot;
     if (!skills || skills.length === 0) return null;
@@ -878,14 +939,16 @@ function AboutDeveloperProfile({
       "span",
       {
         className: cn(
-          "rounded-full bg-muted px-4 py-2 text-sm font-medium",
+          "rounded-full px-4 py-2 text-sm font-medium",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
           skillTagClassName
         ),
         children: skill
       },
       idx
     ));
-  }, [skillsSlot, skills, skillTagClassName]);
+  }, [skillsSlot, skills, skillTagClassName, background]);
   const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -939,7 +1002,7 @@ function AboutDeveloperProfile({
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center md:text-left", children: [
             name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
-            role && (typeof role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-xl text-primary", roleClassName), children: role }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", roleClassName), children: role })),
+            role && (typeof role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-xl", getAccentColor(background), roleClassName), children: role }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", roleClassName), children: role })),
             (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -956,7 +1019,8 @@ function AboutDeveloperProfile({
           "p",
           {
             className: cn(
-              "text-lg text-muted-foreground whitespace-pre-line",
+              "text-lg whitespace-pre-line",
+              getTextColor(background, "muted"),
               bioClassName
             ),
             children: bio

package/dist/about-developer-profile.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface AboutDeveloperProfileProps {

package/dist/about-developer-profile.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface AboutDeveloperProfileProps {