@opensite/ui 0.8.8 → 0.9.0

package/dist/hero-pattern-badge-logos.cjs

@@ -33,6 +33,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";
+    }
+  }
+}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -968,11 +994,11 @@ function HeroPatternBadgeLogos({
           badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl md:text-lg lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions }),
           (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground", children: logosTagline }) : logosTagline),
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm", getTextColor(background, "muted")), children: logosTagline }) : logosTagline),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
           ] })
         ] }) }) })

package/dist/hero-pattern-badge-logos.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, 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, 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 HeroPatternBadgeLogosProps {

package/dist/hero-pattern-badge-logos.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, 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, 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 HeroPatternBadgeLogosProps {

package/dist/hero-pattern-badge-logos.js

@@ -12,6 +12,32 @@ import { Img } from '@page-speed/img';
 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";
+    }
+  }
+}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -947,11 +973,11 @@ function HeroPatternBadgeLogos({
           badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
           /* @__PURE__ */ jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl md:text-lg lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions }),
           (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground", children: logosTagline }) : logosTagline),
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm", getTextColor(background, "muted")), children: logosTagline }) : logosTagline),
             /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
           ] })
         ] }) }) })

package/dist/hero-pattern-logo-tech-stack.cjs

@@ -32,6 +32,36 @@ 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -889,7 +919,7 @@ function HeroPatternLogoTechStack({
     if (techLogosSlot) return techLogosSlot;
     if (!techLogos || techLogos.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 flex flex-col items-center gap-5", techLogosClassName), children: [
-      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground lg:text-left", children: techStackLabel }) : techStackLabel),
+      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium lg:text-left", getTextColor(background, "muted")), children: techStackLabel }) : techStackLabel),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: techLogos.map((techLogo, index) => {
         const techLogoSrc = typeof techLogo.src === "string" ? techLogo.src : techLogo.src.light;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -940,9 +970,9 @@ function HeroPatternLogoTechStack({
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
               heading,
               " ",
-              highlightedWord && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: highlightedWord })
+              highlightedWord && /* @__PURE__ */ jsxRuntime.jsx("span", { className: getAccentColor(background), children: highlightedWord })
             ] }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           renderActions,
           renderTechLogos

package/dist/hero-pattern-logo-tech-stack.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { L as LogoItem, 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 { L as LogoItem, 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 HeroPatternLogoTechStackProps {

package/dist/hero-pattern-logo-tech-stack.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { L as LogoItem, 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 { L as LogoItem, 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 HeroPatternLogoTechStackProps {

package/dist/hero-pattern-logo-tech-stack.js

@@ -11,6 +11,36 @@ import { Img } from '@page-speed/img';
 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:")) {
@@ -868,7 +898,7 @@ function HeroPatternLogoTechStack({
     if (techLogosSlot) return techLogosSlot;
     if (!techLogos || techLogos.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-20 flex flex-col items-center gap-5", techLogosClassName), children: [
-      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground lg:text-left", children: techStackLabel }) : techStackLabel),
+      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-medium lg:text-left", getTextColor(background, "muted")), children: techStackLabel }) : techStackLabel),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: techLogos.map((techLogo, index) => {
         const techLogoSrc = typeof techLogo.src === "string" ? techLogo.src : techLogo.src.light;
         return /* @__PURE__ */ jsx(
@@ -919,9 +949,9 @@ function HeroPatternLogoTechStack({
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
               heading,
               " ",
-              highlightedWord && /* @__PURE__ */ jsx("span", { className: "text-primary", children: highlightedWord })
+              highlightedWord && /* @__PURE__ */ jsx("span", { className: getAccentColor(background), children: highlightedWord })
             ] }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           renderActions,
           renderTechLogos

package/dist/hero-platform-features-grid.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:")) {
@@ -981,7 +1007,7 @@ function HeroPlatformFeaturesGrid({
       feature.icon ?? (feature.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         feature.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
-        feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground md:text-base", children: feature.description })
+        feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted")), children: feature.description })
       ] })
     ] }, index)) });
   }, [featuresSlot, features, featuresClassName]);
@@ -996,7 +1022,7 @@ function HeroPlatformFeaturesGrid({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
           renderLogo,
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 text-sm tracking-widest text-muted-foreground md:text-base", children: subtitle }) : subtitle),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base", getTextColor(background, "muted")), children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
           renderAction
         ] }),

package/dist/hero-platform-features-grid.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { L as LogoItem, A as ActionConfig, F as FeatureItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { L as LogoItem, A as ActionConfig, F as FeatureItem, 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 HeroPlatformFeaturesGridProps {

package/dist/hero-platform-features-grid.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { L as LogoItem, A as ActionConfig, F as FeatureItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { L as LogoItem, A as ActionConfig, F as FeatureItem, 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 HeroPlatformFeaturesGridProps {

package/dist/hero-platform-features-grid.js

@@ -11,6 +11,32 @@ import { Img } from '@page-speed/img';
 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:")) {
@@ -960,7 +986,7 @@ function HeroPlatformFeaturesGrid({
       feature.icon ?? (feature.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
       /* @__PURE__ */ jsxs("div", { children: [
         feature.title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
-        feature.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground md:text-base", children: feature.description })
+        feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted")), children: feature.description })
       ] })
     ] }, index)) });
   }, [featuresSlot, features, featuresClassName]);
@@ -975,7 +1001,7 @@ function HeroPlatformFeaturesGrid({
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("text-center", headerClassName), children: [
           renderLogo,
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("span", { className: "mb-3 text-sm tracking-widest text-muted-foreground md:text-base", children: subtitle }) : subtitle),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base", getTextColor(background, "muted")), children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
           renderAction
         ] }),

package/dist/hero-portfolio-creative.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:")) {
@@ -968,7 +994,7 @@ function HeroPortfolioCreative({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         profile.name && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold ", children: profile.name }),
-        profile.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: profile.title })
+        profile.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: profile.title })
       ] })
     ] });
   }, [profileSlot, profile, optixFlowConfig]);
@@ -1000,7 +1026,7 @@ function HeroPortfolioCreative({
       Pressable,
       {
         href: link.href,
-        className: cn("text-muted-foreground hover:", link.className),
+        className: cn("hover:", getTextColor(background, "muted"), link.className),
         children: link.icon ?? (link.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.iconName, size: 20 }))
       },
       index
@@ -1064,7 +1090,7 @@ function HeroPortfolioCreative({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderProfile,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions,
           renderSocialLinks
         ] }),

package/dist/hero-portfolio-creative.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, 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 ProfileInfo {

package/dist/hero-portfolio-creative.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, 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 ProfileInfo {

package/dist/hero-portfolio-creative.js

@@ -11,6 +11,32 @@ import { Img } from '@page-speed/img';
 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:")) {
@@ -947,7 +973,7 @@ function HeroPortfolioCreative({
       ) }),
       /* @__PURE__ */ jsxs("div", { children: [
         profile.name && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold ", children: profile.name }),
-        profile.title && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: profile.title })
+        profile.title && /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: profile.title })
       ] })
     ] });
   }, [profileSlot, profile, optixFlowConfig]);
@@ -979,7 +1005,7 @@ function HeroPortfolioCreative({
       Pressable,
       {
         href: link.href,
-        className: cn("text-muted-foreground hover:", link.className),
+        className: cn("hover:", getTextColor(background, "muted"), link.className),
         children: link.icon ?? (link.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: link.iconName, size: 20 }))
       },
       index
@@ -1043,7 +1069,7 @@ function HeroPortfolioCreative({
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderProfile,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions,
           renderSocialLinks
         ] }),

package/dist/hero-premium-split-avatars.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { A as ActionConfig, I as ImageItem, 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, I as ImageItem, 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 AvatarItem {

package/dist/hero-premium-split-avatars.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { A as ActionConfig, I as ImageItem, 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, I as ImageItem, 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 AvatarItem {

package/dist/hero-presentation-platform-video.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig } 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 HeroPresentationPlatformVideoProps {

package/dist/hero-presentation-platform-video.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig } 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 HeroPresentationPlatformVideoProps {