Prompt for Replit — Fix Logo Color Editor (Primary / Secondary / Accent)

Goal: The three swatches (Primary / Secondary / Accent) in the Logo tool must live-update the logo artwork only (not text or added shapes) in the preview and persist to SVG/PNG export.

What’s likely wrong

The color UI is updating state, but the logo SVG isn’t bound to that state (no linkage).

The template paths aren’t mapped to roles (primary/secondary/accent), or the mapping exists but isn’t read during render/export.

Colors are set only via CSS outside the export pipeline, so downloaded SVG reverts.

Implement (exactly this)

Canonical role mapping (one approach, pick A or B):
A. CSS variables on the logo root (preferred):

On the logo root group (e.g., #logo-root), set:

style="--logo-primary: <hex>; --logo-secondary: <hex>; --logo-accent: <hex>;"


In the rendered logo SVG, ensure role paths use:

fill: var(--logo-primary) (or stroke: var(--logo-primary))

fill: var(--logo-secondary)

fill: var(--logo-accent)

Do not change text or user-added shapes here.

B. Data attributes per path:

Add data-role="primary|secondary|accent" on the relevant <path>/<g> elements.

On color change, set el.style.fill = hex (and/or stroke where appropriate).

Wire UI → preview (live):

When a swatch changes, update the composer color state:

colors = { primary, secondary, accent }


Apply immediately to preview:

If using CSS vars: update inline style on #logo-root.

If using data-role: query role nodes once (cache), set style.fill/style.stroke.

Export (must preserve chosen colors):

SVG export:

If using CSS vars: inline a <style> at the top of the exported SVG defining:

:root { --logo-primary: <hex>; --logo-secondary: <hex>; --logo-accent: <hex>; }


and ensure role nodes reference var(--logo-*).
Or (simpler) resolve vars at export time by writing the computed hex directly into each role node’s fill/stroke.

Make sure the export pipeline touches only the logo group, not text or user-shapes.

PNG export: rasterize the live preview (colors already applied).

Do not change / do not break

Routes, preview sizing, drag/rotate/curve/skew behavior.

Text colors and user-added shape colors (they’re separate tools).

Existing IDs/structure (#logo-root, brand-name, tagline, est-year).

Acceptance criteria

Changing Primary recolors the intended primary paths instantly.

Secondary and Accent recolor their mapped parts, independently.

Switching tabs, dragging, rotating, or curving does not reset colors.

Export SVG shows the same colors when opened locally (no reversion to black).

Export PNG matches the preview exactly.

Smoke test

Set Primary to a bold color → preview updates main body/outline.

Set Secondary to a different color → only secondary regions change.

Set Accent to a pop color → only detail highlights change.

Drag/rotate logo → colors persist.

Download SVG/PNG → open → colors match the preview.

If templates lack role tags

Add a quick mapping pass on load: detect path groups by id/class (primary, secondary, accent) or by provided metadata; if none, fallback to Single Color Mode (apply Primary to all) and hide Secondary/Accent until a mapped template is loaded.