@opensite/ui 0.8.9 → 0.9.1

package/dist/feature-icon-tabs-content.js

@@ -13,6 +13,54 @@ 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 getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1112,7 +1160,8 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                `data-[state=active]:${getBorderColor(background, "accent")}`,
                 tabTriggerClassName,
                 tab.className
               ),
@@ -1191,7 +1240,8 @@ function FeatureIconTabsContent({
                       "p",
                       {
                         className: cn(
-                          "text-muted-foreground lg:text-lg",
+                          "lg:text-lg",
+                          getTextColor(background, "muted"),
                           content.descriptionClassName
                         ),
                         children: content.description
@@ -1200,7 +1250,8 @@ function FeatureIconTabsContent({
                       "div",
                       {
                         className: cn(
-                          "text-muted-foreground lg:text-lg",
+                          "lg:text-lg",
+                          getTextColor(background, "muted"),
                           content.descriptionClassName
                         ),
                         children: content.description
@@ -1268,10 +1319,10 @@ function FeatureIconTabsContent({
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn("text-muted-foreground", descriptionClassName),
+                  className: cn(getTextColor(background, "muted"), descriptionClassName),
                   children: description
                 }
               ))

package/dist/feature-image-cards-three-column.cjs

@@ -34,6 +34,32 @@ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive)
 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 svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1056,7 +1082,7 @@ function FeatureImageCardsThreeColumn({
       containerClassName,
       children: [
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-muted-foreground", descriptionClassName), children: description })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-5 pt-14 xl:grid-cols-3", gridClassName), children: cardsContent })
       ]
     }

package/dist/feature-image-cards-three-column.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 svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1034,7 +1060,7 @@ function FeatureImageCardsThreeColumn({
       containerClassName,
       children: [
         title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-muted-foreground", descriptionClassName), children: description })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
         /* @__PURE__ */ jsx("div", { className: cn("grid gap-5 pt-14 xl:grid-cols-3", gridClassName), children: cardsContent })
       ]
     }

package/dist/feature-integration-cards.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -984,7 +1010,7 @@ function FeatureIntegrationCards({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),
-          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", integration.descriptionClassName), children: integration.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", integration.descriptionClassName), children: integration.description }))
+          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }))
         ] })
       ] });
       if (integration.link) {
@@ -1021,7 +1047,7 @@ function FeatureIntegrationCards({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-12 flex max-w-3xl flex-col items-center gap-4 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", gridClassName), children: integrationsContent })
       ]

package/dist/feature-integration-cards.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -963,7 +989,7 @@ function FeatureIntegrationCards({
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
           integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),
-          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", integration.descriptionClassName), children: integration.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", integration.descriptionClassName), children: integration.description }))
+          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }))
         ] })
       ] });
       if (integration.link) {
@@ -1000,7 +1026,7 @@ function FeatureIntegrationCards({
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mb-12 flex max-w-3xl flex-col items-center gap-4 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }))
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", gridClassName), children: integrationsContent })
       ]

package/dist/feature-pattern-grid-links.cjs

@@ -31,6 +31,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 svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -975,14 +1001,14 @@ function FeaturePatternGridLinks({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             renderFeatureIcon(feature),
             feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }))
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
           ] }),
           renderFeatureLink(feature)
         ]
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink]);
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/feature-pattern-grid-links.js

@@ -10,6 +10,32 @@ import { cva } from 'class-variance-authority';
 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 svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -954,14 +980,14 @@ function FeaturePatternGridLinks({
           /* @__PURE__ */ jsxs("div", { children: [
             renderFeatureIcon(feature),
             feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }))
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
           ] }),
           renderFeatureLink(feature)
         ]
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink]);
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/feature-utility-cards-grid.cjs

@@ -34,6 +34,10 @@ var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -993,9 +997,9 @@ function FeatureUtilityCardsGrid({
   const renderLabelIcon = React.useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName)
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: getAccentColor(background) });
     return null;
-  }, [labelIcon, labelIconName]);
+  }, [labelIcon, labelIconName, background]);
   const learnMoreContent = React.useMemo(() => {
     if (learnMoreSlot) return learnMoreSlot;
     if (!learnMoreAction) return null;
@@ -1006,7 +1010,8 @@ function FeatureUtilityCardsGrid({
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
           className: cn(
-            "hover:text-primary hover:underline",
+            "hover:underline",
+            `hover:${getAccentColor(background)}`,
             learnMoreAction.className
           ),
           "aria-label": learnMoreAction["aria-label"],
@@ -1028,7 +1033,7 @@ function FeatureUtilityCardsGrid({
         ]
       }
     );
-  }, [learnMoreSlot, learnMoreAction]);
+  }, [learnMoreSlot, learnMoreAction, background]);
   const renderUtilityImage = React__namespace.useCallback(
     (utility) => {
       if (utility.imageSlot) return utility.imageSlot;

package/dist/feature-utility-cards-grid.js

@@ -12,6 +12,10 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -971,9 +975,9 @@ function FeatureUtilityCardsGrid({
   const renderLabelIcon = useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName)
-      return /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20, className: getAccentColor(background) });
     return null;
-  }, [labelIcon, labelIconName]);
+  }, [labelIcon, labelIconName, background]);
   const learnMoreContent = useMemo(() => {
     if (learnMoreSlot) return learnMoreSlot;
     if (!learnMoreAction) return null;
@@ -984,7 +988,8 @@ function FeatureUtilityCardsGrid({
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
           className: cn(
-            "hover:text-primary hover:underline",
+            "hover:underline",
+            `hover:${getAccentColor(background)}`,
             learnMoreAction.className
           ),
           "aria-label": learnMoreAction["aria-label"],
@@ -1006,7 +1011,7 @@ function FeatureUtilityCardsGrid({
         ]
       }
     );
-  }, [learnMoreSlot, learnMoreAction]);
+  }, [learnMoreSlot, learnMoreAction, background]);
   const renderUtilityImage = React.useCallback(
     (utility) => {
       if (utility.imageSlot) return utility.imageSlot;