@opensite/ui 0.8.8 → 0.9.0

package/dist/timeline-scroll-sticky-image.js

@@ -9,6 +9,32 @@ import { jsx, jsxs } 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";
+    }
+  }
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -492,7 +518,7 @@ function TimelineScrollStickyImage({
                 sectionClassName
               ),
               children: [
-                /* @__PURE__ */ jsx("div", { className: "block rounded-2xl border bg-muted p-4 md:hidden", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: cn("block rounded-2xl border p-4 md:hidden", getNestedCardBg(background)), children: /* @__PURE__ */ jsx(
                   Img,
                   {
                     src: section.image,
@@ -556,7 +582,8 @@ function TimelineScrollStickyImage({
                   "div",
                   {
                     className: cn(
-                      "absolute inset-0 flex h-full items-center justify-center rounded-2xl border bg-muted p-4 transition-opacity duration-200",
+                      "absolute inset-0 flex h-full items-center justify-center rounded-2xl border p-4 transition-opacity duration-200",
+                      getNestedCardBg(background),
                       index === safeActiveIndex ? "opacity-100" : "opacity-0"
                     ),
                     children: /* @__PURE__ */ jsx(

package/dist/timeline-stepper-animated.cjs

@@ -33,6 +33,36 @@ var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -958,8 +988,8 @@ var ProcessBar = React6__namespace.memo(({ currentStep, steps }) => /* @__PURE__
     )
   ] })
 ] }, index)) }) }));
-var StepperContent = React6__namespace.memo(({ step, optixFlowConfig, imageClassName, descriptionClassName }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-4 flex min-h-[400px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl bg-muted p-6 text-center", children: [
+var StepperContent = React6__namespace.memo(({ step, optixFlowConfig, imageClassName, descriptionClassName, background }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("my-4 flex min-h-[400px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl p-6 text-center", getNestedCardBg(background), getNestedCardTextColor(background)), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
@@ -1119,7 +1149,8 @@ function TimelineStepperAnimated({
                 step: steps[safeCurrentStep],
                 optixFlowConfig,
                 imageClassName,
-                descriptionClassName
+                descriptionClassName,
+                background
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: navButtonsClassName, children: /* @__PURE__ */ jsxRuntime.jsx(NavButtons, { handlePrev, handleNext }) })

package/dist/timeline-stepper-animated.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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 './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.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';
 
 interface TimelineStep {

package/dist/timeline-stepper-animated.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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 './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.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';
 
 interface TimelineStep {

package/dist/timeline-stepper-animated.js

@@ -12,6 +12,36 @@ import { jsx, jsxs } 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -937,8 +967,8 @@ var ProcessBar = React6.memo(({ currentStep, steps }) => /* @__PURE__ */ jsx("di
     )
   ] })
 ] }, index)) }) }));
-var StepperContent = React6.memo(({ step, optixFlowConfig, imageClassName, descriptionClassName }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "my-4 flex min-h-[400px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl bg-muted p-6 text-center", children: [
+var StepperContent = React6.memo(({ step, optixFlowConfig, imageClassName, descriptionClassName, background }) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-4 flex min-h-[400px] w-full flex-col items-center justify-center overflow-hidden rounded-2xl p-6 text-center", getNestedCardBg(background), getNestedCardTextColor(background)), children: [
     /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -1098,7 +1128,8 @@ function TimelineStepperAnimated({
                 step: steps[safeCurrentStep],
                 optixFlowConfig,
                 imageClassName,
-                descriptionClassName
+                descriptionClassName,
+                background
               }
             ) }),
             /* @__PURE__ */ jsx("div", { className: navButtonsClassName, children: /* @__PURE__ */ jsx(NavButtons, { handlePrev, handleNext }) })

package/dist/timeline-tabbed-phases.cjs

@@ -35,6 +35,32 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1207,7 +1233,7 @@ function TimelineTabbedPhases({
                         animate: { opacity: 100, y: 0 },
                         transition: { ease: [0, 0.71, 0.2, 1.01], duration: 0.8 },
                         className: "relative z-20 col-span-1",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "size-full rounded-2xl border-2 border-background bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("size-full rounded-2xl border-2 border-background", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx(
                           img.Img,
                           {
                             src: phase.imageSrc,

package/dist/timeline-tabbed-phases.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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 } 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 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineTabbedPhase {

package/dist/timeline-tabbed-phases.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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 } 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 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface TimelineTabbedPhase {

package/dist/timeline-tabbed-phases.js

@@ -13,6 +13,32 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1185,7 +1211,7 @@ function TimelineTabbedPhases({
                         animate: { opacity: 100, y: 0 },
                         transition: { ease: [0, 0.71, 0.2, 1.01], duration: 0.8 },
                         className: "relative z-20 col-span-1",
-                        children: /* @__PURE__ */ jsx(Card, { className: "group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none", children: /* @__PURE__ */ jsx(CardContent, { className: "size-full rounded-2xl border-2 border-background bg-muted", children: /* @__PURE__ */ jsx(
+                        children: /* @__PURE__ */ jsx(Card, { className: "group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none", children: /* @__PURE__ */ jsx(CardContent, { className: cn("size-full rounded-2xl border-2 border-background", getNestedCardBg(background)), children: /* @__PURE__ */ jsx(
                           Img,
                           {
                             src: phase.imageSrc,

package/dist/timeline-two-column-featured.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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 } 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 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineFeature {

package/dist/timeline-two-column-featured.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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 } 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 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface TimelineFeature {

package/dist/timeline-vertical-icon-dashed.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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 './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.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';
 
 interface TimelineStep {

package/dist/timeline-vertical-icon-dashed.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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 './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.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';
 
 interface TimelineStep {

package/dist/types.d.cts

@@ -1,8 +1,7 @@
 import 'react';
-import './pattern-background-a7gKHzHy.cjs';
-export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-Cohq4eio.cjs';
-export { p as AboutCultureTabsProps, n as AboutExpandableValuesProps, m as AboutMissionPrinciplesProps, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, D as DirectionConfig, F as FeatureShowcaseItem, s as FeatureShowcaseProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+export { p as AboutCultureTabsProps, n as AboutExpandableValuesProps, m as AboutMissionPrinciplesProps, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, D as DirectionConfig, F as FeatureShowcaseItem, s as FeatureShowcaseProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-CPyEa7IX.cjs';
+export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } 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';

package/dist/types.d.ts

@@ -1,8 +1,7 @@
 import 'react';
-import './pattern-background-a7gKHzHy.js';
-export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } from './blocks-k17uluAz.js';
-export { p as AboutCultureTabsProps, n as AboutExpandableValuesProps, m as AboutMissionPrinciplesProps, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, D as DirectionConfig, F as FeatureShowcaseItem, s as FeatureShowcaseProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+export { p as AboutCultureTabsProps, n as AboutExpandableValuesProps, m as AboutMissionPrinciplesProps, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, D as DirectionConfig, F as FeatureShowcaseItem, s as FeatureShowcaseProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-hxnFe3w6.js';
+export { A as ActionConfig, h as AuthorInfo, c as BlockActionProps, B as BlockBaseProps, f as BlockBlogProps, b as BlockContentProps, d as BlockLogoProps, e as BlogPostItem, g as BreadcrumbItem, D as DetailItem, F as FeatureItem, I as ImageItem, L as LogoItem, N as NavLinkItem, O as OptixFlowConfig, j as OutcomeItem, i as SectionItem, a as SocialLinkItem, S as StatItem, T as TestimonialItem } 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';

package/dist/utils.cjs

@@ -52,8 +52,66 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  if (options?.override) return options.override;
+  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) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  if (options?.override) return options.override;
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 
 exports.BRIGHTNESS_CLASS_MAP = BRIGHTNESS_CLASS_MAP;
 exports.cn = cn;
+exports.getAccentColor = getAccentColor;
+exports.getBorderColor = getBorderColor;
 exports.getNestedCardBg = getNestedCardBg;
 exports.getNestedCardTextColor = getNestedCardTextColor;
+exports.getTextColor = getTextColor;

package/dist/utils.d.cts

@@ -1,11 +1,10 @@
 import { ClassValue } from 'clsx';
-import { f as SectionBackground } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground } 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';
 
 declare function cn(...inputs: ClassValue[]): string;
@@ -112,5 +111,117 @@ declare function getNestedCardBg(parentBg?: SectionBackground, variant?: NestedC
 declare function getNestedCardTextColor(parentBg?: SectionBackground, options?: {
     override?: string;
 }): string;
+/**
+ * Text color variant types for dynamic theming
+ */
+type TextColorVariant = "default" | "muted" | "subtle" | "accent";
+/**
+ * Get the appropriate text color class based on parent Section background.
+ *
+ * This utility provides **context-aware text coloring** that adapts to the parent
+ * Section's background to ensure optimal readability and visual hierarchy.
+ *
+ * **How it works:**
+ * - On **dark backgrounds** (dark, secondary, primary): Uses lighter text colors
+ * - On **light backgrounds** (default, white, gray, muted): Uses darker text colors
+ *
+ * **Variants:**
+ * - `default`: Primary text color (highest contrast)
+ * - `muted`: Secondary text color (medium contrast) - for descriptions, labels
+ * - `subtle`: Tertiary text color (lower contrast) - for captions, metadata
+ * - `accent`: Accent color - for emphasis, links, highlights
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param variant - The type of text color to use (default: 'default')
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind text color class string
+ *
+ * @example
+ * // Muted text for descriptions
+ * <p className={getTextColor(background, 'muted')}>
+ *   This is a description with reduced emphasis
+ * </p>
+ *
+ * @example
+ * // Accent text for links
+ * <a className={getTextColor(background, 'accent')}>
+ *   Learn more
+ * </a>
+ *
+ * @example
+ * // Manual override
+ * <span className={getTextColor(background, 'default', { override: 'text-blue-600' })}>
+ *   Custom color
+ * </span>
+ */
+declare function getTextColor(parentBg?: SectionBackground, variant?: TextColorVariant, options?: {
+    override?: string;
+}): string;
+/**
+ * Get the appropriate accent color class based on parent Section background.
+ *
+ * This utility provides **context-aware accent coloring** for icons, decorations,
+ * and emphasis elements that need to stand out from the background.
+ *
+ * **How it works:**
+ * - On **dark backgrounds**: Uses lighter accent colors for visibility
+ * - On **light backgrounds**: Uses primary brand color for emphasis
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind text color class string (for icons/SVGs)
+ *
+ * @example
+ * // Icon with dynamic accent color
+ * <DynamicIcon className={getAccentColor(background)} />
+ *
+ * @example
+ * // Decorative element
+ * <div className={cn(getAccentColor(background), "absolute top-0 right-0")}>
+ *   <CornerIllustration />
+ * </div>
+ */
+declare function getAccentColor(parentBg?: SectionBackground, options?: {
+    override?: string;
+}): string;
+/**
+ * Border color variant types for dynamic theming
+ */
+type BorderColorVariant = "default" | "muted" | "accent";
+/**
+ * Get the appropriate border color class based on parent Section background.
+ *
+ * This utility provides **context-aware border coloring** that adapts to the parent
+ * Section's background to ensure borders remain visible and aesthetically pleasing.
+ *
+ * **How it works:**
+ * - On **dark backgrounds**: Uses lighter border colors for visibility
+ * - On **light backgrounds**: Uses subtle border colors for elegance
+ *
+ * **Variants:**
+ * - `default`: Standard border color (subtle, elegant)
+ * - `muted`: Very subtle border (minimal contrast)
+ * - `accent`: Accent-colored border (for emphasis)
+ *
+ * @param parentBg - The parent Section's background variant
+ * @param variant - The type of border color to use (default: 'default')
+ * @param options - Optional configuration for manual override
+ * @returns Tailwind border color class string
+ *
+ * @example
+ * // Card with dynamic border
+ * <div className={cn(getBorderColor(background), "border rounded-lg p-6")}>
+ *   Content
+ * </div>
+ *
+ * @example
+ * // Accent border for emphasis
+ * <div className={cn(getBorderColor(background, 'accent'), "border-2 rounded-lg")}>
+ *   Featured content
+ * </div>
+ */
+declare function getBorderColor(parentBg?: SectionBackground, variant?: BorderColorVariant, options?: {
+    override?: string;
+}): string;
 
-export { BRIGHTNESS_CLASS_MAP, type NestedCardBgOptions, type NestedCardVariant, cn, getNestedCardBg, getNestedCardTextColor };
+export { BRIGHTNESS_CLASS_MAP, type BorderColorVariant, type NestedCardBgOptions, type NestedCardVariant, type TextColorVariant, cn, getAccentColor, getBorderColor, getNestedCardBg, getNestedCardTextColor, getTextColor };