@m13v/seo-components 0.16.2 → 0.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "scripts": {
     "build:css": "tailwind -i src/_build.css -o dist/styles.css --minify",
     "bump:consumers": "bash scripts/bump-consumers.sh",

package/src/components/AnimatedBeam.tsx

@@ -15,7 +15,7 @@ interface AnimatedBeamProps {
   /** Right side nodes (destinations) */
   to: BeamNode[];
   title?: string;
-  /** Accent hex color for the hub fill and beam glow. Defaults to teal (#14b8a6). */
+  /** Accent hex color for the hub fill and beam glow. If omitted, reads the consumer's --seo-accent CSS variable (falling back to teal #14b8a6). */
   accentColor?: string;
   className?: string;
 }
@@ -31,9 +31,10 @@ export function AnimatedBeam({
   hub,
   to,
   title,
-  accentColor = "#14b8a6",
+  accentColor,
   className = "",
 }: AnimatedBeamProps) {
+  const fillColor = accentColor ?? "var(--seo-accent, #14b8a6)";
   const width = 720;
   const height = 380;
   const centerX = width / 2;
@@ -62,9 +63,9 @@ export function AnimatedBeam({
       >
         <defs>
           <linearGradient id="beam-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" stopColor={accentColor} stopOpacity="0" />
-            <stop offset="50%" stopColor={accentColor} stopOpacity="1" />
-            <stop offset="100%" stopColor={accentColor} stopOpacity="0" />
+            <stop offset="0%" style={{ stopColor: fillColor, stopOpacity: 0 }} />
+            <stop offset="50%" style={{ stopColor: fillColor, stopOpacity: 1 }} />
+            <stop offset="100%" style={{ stopColor: fillColor, stopOpacity: 0 }} />
           </linearGradient>
           <filter id="glow">
             <feGaussianBlur stdDeviation="3" result="blur" />
@@ -185,7 +186,7 @@ export function AnimatedBeam({
             width="144"
             height="72"
             rx="36"
-            fill={accentColor}
+            style={{ fill: fillColor }}
             filter="url(#glow)"
           />
           <rect

package/src/components/IntegrationsGrid.tsx

@@ -81,7 +81,11 @@ export function IntegrationsGrid({
                 ) : (
                   <div
                     className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md text-sm font-semibold text-white"
-                    style={{ background: it.accent || "linear-gradient(135deg,#14b8a6,#22d3ee)" }}
+                    style={{
+                      background:
+                        it.accent ||
+                        "linear-gradient(135deg, var(--seo-accent, #14b8a6), var(--seo-accent-2, #22d3ee))",
+                    }}
                     aria-hidden="true"
                   >
                     {initial}

package/src/components/ShineBorder.tsx

@@ -24,14 +24,15 @@ import React from "react";
  * </ShineBorder>
  */
 
-type TColorProp = `#${string}` | `#${string}`[];
+type TColorProp = string | string[];
 
 interface ShineBorderProps {
   borderRadius?: number;
   borderWidth?: number;
   duration?: number;
-  /** Hex color(s) for the shine gradient. Pass your brand accent color. Defaults to teal.
-   *  CSS custom properties are not supported here (conic gradient border trick). */
+  /** Color(s) for the shine gradient. Accepts any CSS color or a CSS custom
+   *  property (e.g. `var(--seo-accent)`). Defaults to the consumer's
+   *  `--seo-accent` value, falling back to teal (#14b8a6). */
   color?: TColorProp;
   className?: string;
   children: React.ReactNode;
@@ -41,10 +42,11 @@ export function ShineBorder({
   borderRadius = 8,
   borderWidth = 1,
   duration = 14,
-  color = "#14b8a6",
+  color,
   className,
   children,
 }: ShineBorderProps) {
+  const resolvedColor = color ?? "var(--seo-accent, #14b8a6)";
   const outerBase =
     "relative grid min-h-[60px] w-fit min-w-[300px] place-items-center bg-white dark:bg-zinc-900 p-3 text-zinc-900 dark:text-zinc-100";
   const outerClass = className
@@ -71,7 +73,7 @@ export function ShineBorder({
             "--mask-linear-gradient":
               "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
             "--background-radial-gradient": `radial-gradient(transparent,transparent, ${
-              Array.isArray(color) ? color.join(",") : color
+              Array.isArray(resolvedColor) ? resolvedColor.join(",") : resolvedColor
             },transparent,transparent)`,
           } as React.CSSProperties
         }