@m13v/seo-components 0.17.0 → 0.17.1

package/package.json

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

package/src/components/Particles.tsx

@@ -68,8 +68,9 @@ interface ParticlesProps {
   ease?: number;
   size?: number;
   refresh?: boolean;
-  /** Hex color for particles. Pass your brand accent color. Defaults to teal (#14b8a6).
-   *  CSS custom properties are not supported here (canvas context). */
+  /** Hex color for particles. Pass your brand accent color. If omitted,
+   *  reads the consumer's `--seo-accent` CSS variable at mount (falling
+   *  back to teal #14b8a6). Only hex values are supported (canvas context). */
   color?: string;
   vx?: number;
   vy?: number;
@@ -95,7 +96,7 @@ export function Particles({
   ease = 50,
   size = 0.4,
   refresh = false,
-  color = "#14b8a6",
+  color,
   vx = 0,
   vy = 0,
 }: ParticlesProps) {
@@ -108,7 +109,13 @@ export function Particles({
   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
 
-  const rgb = hexToRgb(color);
+  const [resolvedColor, setResolvedColor] = useState<string>(
+    color ?? "#14b8a6",
+  );
+  useEffect(() => {
+    setResolvedColor(color ?? resolveAccentFromDOM());
+  }, [color]);
+  const rgb = hexToRgb(resolvedColor);
 
   const circleParams = (): Circle => {
     const x = Math.floor(Math.random() * canvasSize.current.w);