@vizzly-testing/cli 0.32.0 → 0.33.0

package/dist/reporter-ssr/ssr-entry.js

@@ -16,33 +16,33 @@ function isNewComparisonStatus(status) {
 var statusConfig = {
 	failed: {
 		label: "Changed",
-		borderClass: "border-l-red-500",
-		badgeClass: "bg-red-500/15 text-red-400 ring-red-500/30",
-		dotClass: "bg-red-500",
+		borderClass: "border-l-[var(--accent-danger)]",
+		badgeClass: "bg-[var(--accent-danger-muted)] text-[var(--accent-danger)] ring-[color-mix(in_srgb,var(--accent-danger)_30%,transparent)]",
+		dotClass: "bg-[var(--accent-danger)]",
 		sectionTitle: "Visual Changes",
 		sectionIcon: "◐"
 	},
 	new: {
 		label: "New",
-		borderClass: "border-l-blue-500",
-		badgeClass: "bg-blue-500/15 text-blue-400 ring-blue-500/30",
-		dotClass: "bg-blue-500",
+		borderClass: "border-l-[var(--accent-media)]",
+		badgeClass: "bg-[var(--accent-media-muted)] text-[var(--accent-media)] ring-[color-mix(in_srgb,var(--accent-media)_30%,transparent)]",
+		dotClass: "bg-[var(--accent-media)]",
 		sectionTitle: "New Screenshots",
 		sectionIcon: "+"
 	},
 	passed: {
 		label: "Passed",
-		borderClass: "border-l-emerald-500",
-		badgeClass: "bg-emerald-500/15 text-emerald-400 ring-emerald-500/30",
-		dotClass: "bg-emerald-500",
+		borderClass: "border-l-[var(--accent-success)]",
+		badgeClass: "bg-[var(--accent-success-muted)] text-[var(--accent-success)] ring-[color-mix(in_srgb,var(--accent-success)_30%,transparent)]",
+		dotClass: "bg-[var(--accent-success)]",
 		sectionTitle: "Passed",
 		sectionIcon: "✓"
 	},
 	error: {
 		label: "Error",
-		borderClass: "border-l-orange-500",
-		badgeClass: "bg-orange-500/15 text-orange-400 ring-orange-500/30",
-		dotClass: "bg-orange-500",
+		borderClass: "border-l-[var(--accent-warning)]",
+		badgeClass: "bg-[var(--accent-warning-muted)] text-[var(--accent-warning)] ring-[color-mix(in_srgb,var(--accent-warning)_30%,transparent)]",
+		dotClass: "bg-[var(--accent-warning)]",
 		sectionTitle: "Errors",
 		sectionIcon: "!"
 	}
@@ -57,7 +57,7 @@ function StatusBadge({ status }) {
 function DiffBadge({ percentage }) {
 	if (percentage === void 0 || percentage === null || percentage === 0) return null;
 	return /* @__PURE__ */ jsxs("span", {
-		className: "font-mono text-xs text-red-400/80 tabular-nums",
+		className: "font-mono text-xs text-[var(--accent-danger)] tabular-nums",
 		children: [percentage.toFixed(2), "%"]
 	});
 }
@@ -65,7 +65,7 @@ function MetaInfo({ properties }) {
 	if (!properties) return null;
 	let { viewport_width, viewport_height, browser } = properties;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 text-xs text-slate-500",
+		className: "flex items-center gap-2 text-xs text-[var(--text-muted)]",
 		children: [viewport_width && viewport_height && /* @__PURE__ */ jsxs("span", {
 			className: "font-mono tabular-nums",
 			children: [
@@ -74,7 +74,7 @@ function MetaInfo({ properties }) {
 				viewport_height
 			]
 		}), browser && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-			className: "text-slate-600",
+			className: "text-[var(--text-muted)]",
 			children: "·"
 		}), /* @__PURE__ */ jsx("span", {
 			className: "capitalize",
@@ -94,23 +94,23 @@ function FailedComparison({ comparison, isEven }) {
 		children: [/* @__PURE__ */ jsxs("summary", {
 			className: `
           flex items-center gap-4 p-4 cursor-pointer
-          ${isEven ? "bg-slate-800/30" : "bg-slate-800/50"}
-          hover:bg-slate-700/50
+          ${isEven ? "bg-[var(--vz-surface)]" : "bg-[var(--vz-elevated)]"}
+          hover:bg-[var(--vz-raised)]
           border-l-4 ${config.borderClass}
           rounded-r-lg transition-all duration-150
           list-none [&::-webkit-details-marker]:hidden
-          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900
+          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--accent-brand)_50%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--vz-bg)]
         `,
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "relative w-16 h-10 flex-shrink-0 rounded overflow-hidden bg-slate-900",
+					className: "relative w-16 h-10 flex-shrink-0 rounded overflow-hidden bg-[var(--vz-bg)]",
 					children: [(current || baseline) && /* @__PURE__ */ jsx("img", {
 						src: current || baseline,
 						alt: "",
 						className: "w-full h-full object-cover object-top"
 					}), diff && /* @__PURE__ */ jsx("div", {
-						className: "absolute inset-0 bg-red-500/20 flex items-center justify-center",
-						children: /* @__PURE__ */ jsx("span", { className: "w-2 h-2 bg-red-500 rounded-full animate-pulse" })
+						className: "absolute inset-0 bg-[color-mix(in_srgb,var(--accent-danger)_20%,transparent)] flex items-center justify-center",
+						children: /* @__PURE__ */ jsx("span", { className: "w-2 h-2 bg-[var(--accent-danger)] rounded-full animate-pulse" })
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -118,7 +118,7 @@ function FailedComparison({ comparison, isEven }) {
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "font-medium text-white truncate",
+							className: "font-medium text-[var(--text-primary)] truncate",
 							children: name
 						}), /* @__PURE__ */ jsx(DiffBadge, { percentage: diffPercentage })]
 					}), /* @__PURE__ */ jsx(MetaInfo, { properties })]
@@ -126,7 +126,7 @@ function FailedComparison({ comparison, isEven }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ jsx(StatusBadge, { status }), /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5 text-slate-500 group-hover:text-slate-400 transition-colors",
+						className: "flex items-center gap-1.5 text-[var(--text-muted)] group-hover:text-[var(--text-tertiary)] transition-colors",
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-xs hidden sm:inline opacity-0 group-hover:opacity-100 transition-opacity",
 							children: "Details"
@@ -147,23 +147,23 @@ function FailedComparison({ comparison, isEven }) {
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-1 p-4 bg-slate-800/20 rounded-lg border border-slate-700/30 animate-[fadeIn_150ms_ease-out]",
+			className: "mt-1 p-4 bg-[var(--vz-surface)] rounded-lg border border-[var(--vz-border-subtle)] animate-[fadeIn_150ms_ease-out]",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "grid grid-cols-1 lg:grid-cols-2 gap-4",
 				children: [baseline && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2 mb-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-xs font-medium text-slate-400 uppercase tracking-wider",
+						className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider",
 						children: "Baseline"
 					}), /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-slate-600",
+						className: "text-xs text-[var(--text-muted)]",
 						children: "Expected"
 					})]
 				}), /* @__PURE__ */ jsx("a", {
 					href: baseline,
 					target: "_blank",
 					rel: "noopener noreferrer",
-					className: "block rounded-lg overflow-hidden border border-slate-700/50 hover:border-slate-600 transition-colors",
+					className: "block rounded-lg overflow-hidden border border-[var(--vz-border-subtle)] hover:border-[var(--vz-border-strong)] transition-colors",
 					children: /* @__PURE__ */ jsx("img", {
 						src: baseline,
 						alt: `${name} baseline`,
@@ -172,17 +172,17 @@ function FailedComparison({ comparison, isEven }) {
 				})] }), current && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2 mb-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-xs font-medium text-slate-400 uppercase tracking-wider",
+						className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider",
 						children: "Current"
 					}), /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-slate-600",
+						className: "text-xs text-[var(--text-muted)]",
 						children: "Actual"
 					})]
 				}), /* @__PURE__ */ jsx("a", {
 					href: current,
 					target: "_blank",
 					rel: "noopener noreferrer",
-					className: "block rounded-lg overflow-hidden border border-slate-700/50 hover:border-slate-600 transition-colors",
+					className: "block rounded-lg overflow-hidden border border-[var(--vz-border-subtle)] hover:border-[var(--vz-border-strong)] transition-colors",
 					children: /* @__PURE__ */ jsx("img", {
 						src: current,
 						alt: `${name} current`,
@@ -190,21 +190,21 @@ function FailedComparison({ comparison, isEven }) {
 					})
 				})] })]
 			}), diff && /* @__PURE__ */ jsxs("div", {
-				className: "mt-4 pt-4 border-t border-slate-700/30",
+				className: "mt-4 pt-4 border-t border-[var(--vz-border-subtle)]",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2 mb-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-xs font-medium text-red-400 uppercase tracking-wider",
+						className: "text-xs font-medium text-[var(--accent-danger)] uppercase tracking-wider",
 						children: "Difference"
 					}), diffPercentage > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "text-xs text-red-400/60 font-mono",
+						className: "text-xs text-[color-mix(in_srgb,var(--accent-danger)_70%,transparent)] font-mono",
 						children: [diffPercentage.toFixed(2), "% of pixels changed"]
 					})]
 				}), /* @__PURE__ */ jsx("a", {
 					href: diff,
 					target: "_blank",
 					rel: "noopener noreferrer",
-					className: "block rounded-lg overflow-hidden border border-red-500/30 hover:border-red-500/50 transition-colors max-w-2xl",
+					className: "block rounded-lg overflow-hidden border border-[color-mix(in_srgb,var(--accent-danger)_32%,transparent)] hover:border-[color-mix(in_srgb,var(--accent-danger)_52%,transparent)] transition-colors max-w-2xl",
 					children: /* @__PURE__ */ jsx("img", {
 						src: diff,
 						alt: `${name} diff`,
@@ -227,16 +227,16 @@ function NewComparison({ comparison, isEven }) {
 		children: [/* @__PURE__ */ jsxs("summary", {
 			className: `
           flex items-center gap-4 p-4 cursor-pointer
-          ${isEven ? "bg-slate-800/30" : "bg-slate-800/50"}
-          hover:bg-slate-700/50
-          border-l-4 border-l-blue-500
+          ${isEven ? "bg-[var(--vz-surface)]" : "bg-[var(--vz-elevated)]"}
+          hover:bg-[var(--vz-raised)]
+          border-l-4 border-l-[var(--accent-media)]
           rounded-r-lg transition-all duration-150
           list-none [&::-webkit-details-marker]:hidden
-          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900
+          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--accent-brand)_50%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--vz-bg)]
         `,
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "w-16 h-10 flex-shrink-0 rounded overflow-hidden bg-slate-900",
+					className: "w-16 h-10 flex-shrink-0 rounded overflow-hidden bg-[var(--vz-bg)]",
 					children: imageSrc && /* @__PURE__ */ jsx("img", {
 						src: imageSrc,
 						alt: "",
@@ -246,14 +246,14 @@ function NewComparison({ comparison, isEven }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex-1 min-w-0",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "font-medium text-white truncate block",
+						className: "font-medium text-[var(--text-primary)] truncate block",
 						children: name
 					}), /* @__PURE__ */ jsx(MetaInfo, { properties })]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ jsx(StatusBadge, { status: "new" }), /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5 text-slate-500 group-hover:text-slate-400 transition-colors",
+						className: "flex items-center gap-1.5 text-[var(--text-muted)] group-hover:text-[var(--text-tertiary)] transition-colors",
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-xs hidden sm:inline opacity-0 group-hover:opacity-100 transition-opacity",
 							children: "Preview"
@@ -274,21 +274,21 @@ function NewComparison({ comparison, isEven }) {
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-1 p-4 bg-slate-800/20 rounded-lg border border-slate-700/30 animate-[fadeIn_150ms_ease-out]",
+			className: "mt-1 p-4 bg-[var(--vz-surface)] rounded-lg border border-[var(--vz-border-subtle)] animate-[fadeIn_150ms_ease-out]",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 mb-2",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-xs font-medium text-blue-400 uppercase tracking-wider",
+					className: "text-xs font-medium text-[var(--accent-media)] uppercase tracking-wider",
 					children: "New Screenshot"
 				}), /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-slate-600",
+					className: "text-xs text-[var(--text-muted)]",
 					children: "No baseline to compare"
 				})]
 			}), imageSrc && /* @__PURE__ */ jsx("a", {
 				href: imageSrc,
 				target: "_blank",
 				rel: "noopener noreferrer",
-				className: "block rounded-lg overflow-hidden border border-blue-500/30 hover:border-blue-500/50 transition-colors max-w-2xl",
+				className: "block rounded-lg overflow-hidden border border-[color-mix(in_srgb,var(--accent-media)_32%,transparent)] hover:border-[color-mix(in_srgb,var(--accent-media)_52%,transparent)] transition-colors max-w-2xl",
 				children: /* @__PURE__ */ jsx("img", {
 					src: imageSrc,
 					alt: name,
@@ -306,15 +306,15 @@ function PassedComparison({ comparison }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: `
         flex items-center gap-3 px-4 py-2.5
-        bg-slate-800/20 hover:bg-slate-800/30
-        border-l-4 border-l-emerald-500/50
+        bg-[var(--vz-surface)] hover:bg-[var(--vz-raised)]
+        border-l-4 border-l-[color-mix(in_srgb,var(--accent-success)_50%,transparent)]
         rounded-r-lg transition-colors
       `,
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: "w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center flex-shrink-0",
+				className: "w-5 h-5 rounded-full bg-[var(--accent-success-muted)] flex items-center justify-center flex-shrink-0",
 				children: /* @__PURE__ */ jsx("svg", {
-					className: "w-3 h-3 text-emerald-400",
+					className: "w-3 h-3 text-[var(--accent-success)]",
 					fill: "currentColor",
 					viewBox: "0 0 20 20",
 					"aria-hidden": "true",
@@ -326,7 +326,7 @@ function PassedComparison({ comparison }) {
 				})
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "flex-1 text-sm text-slate-300 truncate",
+				className: "flex-1 text-sm text-[var(--text-secondary)] truncate",
 				children: name
 			}),
 			/* @__PURE__ */ jsx(MetaInfo, { properties })
@@ -346,11 +346,11 @@ function SectionHeader({ title, count, icon, colorClass }) {
 				children: icon
 			}),
 			/* @__PURE__ */ jsx("h3", {
-				className: "text-sm font-semibold text-slate-300 uppercase tracking-wider",
+				className: "text-sm font-semibold text-[var(--text-secondary)] uppercase tracking-wider",
 				children: title
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				className: "text-sm text-slate-500 font-mono",
+				className: "text-sm text-[var(--text-muted)] font-mono",
 				children: [
 					"(",
 					count,
@@ -368,26 +368,26 @@ function SummaryBar({ stats }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: `
         flex flex-wrap items-center gap-6 p-4 rounded-xl mb-8
-        ${hasIssues ? "bg-slate-800/60 border border-slate-700/50" : "bg-emerald-500/10 border border-emerald-500/20"}
+        ${hasIssues ? "bg-[var(--vz-surface)] border border-[var(--vz-border)]" : "bg-[var(--accent-success-muted)] border border-[color-mix(in_srgb,var(--accent-success)_24%,transparent)]"}
       `,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-3",
 			children: hasIssues ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-				className: "w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center",
+				className: "w-10 h-10 rounded-full bg-[var(--accent-warning-muted)] flex items-center justify-center",
 				children: /* @__PURE__ */ jsx("span", {
-					className: "text-amber-400 text-lg",
+					className: "text-[var(--accent-warning)] text-lg",
 					children: "◐"
 				})
 			}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-				className: "text-white font-semibold",
+				className: "text-[var(--text-primary)] font-semibold",
 				children: "Review Required"
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-sm text-slate-400",
+				className: "text-sm text-[var(--text-tertiary)]",
 				children: [stats.failed + (stats.new || 0), " items need attention"]
 			})] })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-				className: "w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center",
+				className: "w-10 h-10 rounded-full bg-[var(--accent-success-muted)] flex items-center justify-center",
 				children: /* @__PURE__ */ jsx("svg", {
-					className: "w-5 h-5 text-emerald-400",
+					className: "w-5 h-5 text-[var(--accent-success)]",
 					fill: "currentColor",
 					viewBox: "0 0 20 20",
 					"aria-hidden": "true",
@@ -398,10 +398,10 @@ function SummaryBar({ stats }) {
 					})
 				})
 			}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-				className: "text-white font-semibold",
+				className: "text-[var(--text-primary)] font-semibold",
 				children: "All Tests Passed"
 			}), /* @__PURE__ */ jsx("div", {
-				className: "text-sm text-slate-400",
+				className: "text-sm text-[var(--text-tertiary)]",
 				children: "No visual changes detected"
 			})] })] })
 		}), /* @__PURE__ */ jsxs("div", {
@@ -410,40 +410,40 @@ function SummaryBar({ stats }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "text-center",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-2xl font-bold text-white tabular-nums",
+						className: "text-2xl font-bold text-[var(--text-primary)] tabular-nums",
 						children: stats.total
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-xs text-slate-500 uppercase tracking-wider",
+						className: "text-xs text-[var(--text-muted)] uppercase tracking-wider",
 						children: "Total"
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "text-center",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-2xl font-bold text-emerald-400 tabular-nums",
+						className: "text-2xl font-bold text-[var(--accent-success)] tabular-nums",
 						children: stats.passed
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-xs text-slate-500 uppercase tracking-wider",
+						className: "text-xs text-[var(--text-muted)] uppercase tracking-wider",
 						children: "Passed"
 					})]
 				}),
 				stats.failed > 0 && /* @__PURE__ */ jsxs("div", {
 					className: "text-center",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-2xl font-bold text-red-400 tabular-nums",
+						className: "text-2xl font-bold text-[var(--accent-danger)] tabular-nums",
 						children: stats.failed
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-xs text-slate-500 uppercase tracking-wider",
+						className: "text-xs text-[var(--text-muted)] uppercase tracking-wider",
 						children: "Changed"
 					})]
 				}),
 				(stats.new || 0) > 0 && /* @__PURE__ */ jsxs("div", {
 					className: "text-center",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-2xl font-bold text-blue-400 tabular-nums",
+						className: "text-2xl font-bold text-[var(--accent-media)] tabular-nums",
 						children: stats.new
 					}), /* @__PURE__ */ jsx("div", {
-						className: "text-xs text-slate-500 uppercase tracking-wider",
+						className: "text-xs text-[var(--text-muted)] uppercase tracking-wider",
 						children: "New"
 					})]
 				})
@@ -463,15 +463,15 @@ function formatTimestamp(timestamp) {
 }
 function Header({ timestamp }) {
 	return /* @__PURE__ */ jsx("header", {
-		className: "bg-slate-950/80 backdrop-blur-sm border-b border-slate-800/60 sticky top-0 z-10",
+		className: "bg-[var(--vz-bg)] border-b border-[var(--vz-border-subtle)] sticky top-0 z-10",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "max-w-6xl mx-auto px-6 py-4 flex items-center justify-between",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "w-9 h-9 bg-gradient-to-br from-amber-400 to-amber-600 rounded-lg flex items-center justify-center shadow-lg shadow-amber-500/20",
+					className: "w-9 h-9 bg-[var(--accent-brand)] rounded-lg flex items-center justify-center",
 					children: /* @__PURE__ */ jsxs("svg", {
-						className: "w-5 h-5 text-slate-900",
+						className: "w-5 h-5 text-[var(--vz-bg)]",
 						viewBox: "0 0 24 24",
 						fill: "currentColor",
 						"aria-hidden": "true",
@@ -482,14 +482,14 @@ function Header({ timestamp }) {
 						}), /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })]
 					})
 				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-					className: "text-lg font-semibold text-white tracking-tight",
+					className: "text-lg font-semibold text-[var(--text-primary)] tracking-tight",
 					children: "Vizzly"
 				}), /* @__PURE__ */ jsx("div", {
-					className: "text-xs text-slate-500",
+					className: "text-xs text-[var(--text-muted)]",
 					children: "Visual Test Report"
 				})] })]
 			}), timestamp && /* @__PURE__ */ jsx("div", {
-				className: "text-xs text-slate-500 tabular-nums",
+				className: "text-xs text-[var(--text-muted)] tabular-nums",
 				children: formatTimestamp(timestamp)
 			})]
 		})
@@ -497,14 +497,14 @@ function Header({ timestamp }) {
 }
 function StaticReportView({ reportData }) {
 	if (!reportData?.comparisons) return /* @__PURE__ */ jsx("div", {
-		className: "min-h-screen bg-slate-900 text-white flex items-center justify-center",
+		className: "min-h-screen bg-[var(--vz-bg)] text-[var(--text-primary)] flex items-center justify-center",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "text-xl font-medium mb-2",
 				children: "No Report Data"
 			}), /* @__PURE__ */ jsx("p", {
-				className: "text-slate-400",
+				className: "text-[var(--text-tertiary)]",
 				children: "No comparison data available for this report."
 			})]
 		})
@@ -522,7 +522,7 @@ function StaticReportView({ reportData }) {
 	let passed = comparisons.filter((c) => c.status === "passed");
 	let errors = comparisons.filter((c) => c.status === "error");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "min-h-screen bg-slate-900 text-white",
+		className: "min-h-screen bg-[var(--vz-bg)] text-[var(--text-primary)]",
 		children: [/* @__PURE__ */ jsx(Header, { timestamp: reportData.timestamp }), /* @__PURE__ */ jsxs("main", {
 			className: "max-w-6xl mx-auto px-6 py-8",
 			children: [
@@ -533,7 +533,7 @@ function StaticReportView({ reportData }) {
 						title: "Visual Changes",
 						count: failed.length,
 						icon: "◐",
-						colorClass: "text-red-400"
+						colorClass: "text-[var(--accent-danger)]"
 					}), /* @__PURE__ */ jsx("div", {
 						className: "space-y-2",
 						children: failed.map((comparison, index) => /* @__PURE__ */ jsx(FailedComparison, {
@@ -548,7 +548,7 @@ function StaticReportView({ reportData }) {
 						title: "New Screenshots",
 						count: newItems.length,
 						icon: "+",
-						colorClass: "text-blue-400"
+						colorClass: "text-[var(--accent-media)]"
 					}), /* @__PURE__ */ jsx("div", {
 						className: "space-y-2",
 						children: newItems.map((comparison, index) => /* @__PURE__ */ jsx(NewComparison, {
@@ -563,7 +563,7 @@ function StaticReportView({ reportData }) {
 						title: "Errors",
 						count: errors.length,
 						icon: "!",
-						colorClass: "text-orange-400"
+						colorClass: "text-[var(--accent-warning)]"
 					}), /* @__PURE__ */ jsx("div", {
 						className: "space-y-2",
 						children: errors.map((comparison, index) => /* @__PURE__ */ jsx(FailedComparison, {
@@ -582,15 +582,15 @@ function StaticReportView({ reportData }) {
 								className: "flex items-center gap-3 mb-3",
 								children: [
 									/* @__PURE__ */ jsx("span", {
-										className: "text-lg font-mono text-emerald-400",
+										className: "text-lg font-mono text-[var(--accent-success)]",
 										children: "✓"
 									}),
 									/* @__PURE__ */ jsx("h3", {
-										className: "text-sm font-semibold text-slate-300 uppercase tracking-wider",
+										className: "text-sm font-semibold text-[var(--text-secondary)] uppercase tracking-wider",
 										children: "Passed"
 									}),
 									/* @__PURE__ */ jsxs("span", {
-										className: "text-sm text-slate-500 font-mono",
+										className: "text-sm text-[var(--text-muted)] font-mono",
 										children: [
 											"(",
 											passed.length,
@@ -598,7 +598,7 @@ function StaticReportView({ reportData }) {
 										]
 									}),
 									/* @__PURE__ */ jsx("svg", {
-										className: "w-4 h-4 text-slate-500 transition-transform group-open:rotate-180 ml-auto",
+										className: "w-4 h-4 text-[var(--text-muted)] transition-transform group-open:rotate-180 ml-auto",
 										fill: "none",
 										viewBox: "0 0 24 24",
 										stroke: "currentColor",
@@ -619,15 +619,15 @@ function StaticReportView({ reportData }) {
 					})
 				}),
 				/* @__PURE__ */ jsx("footer", {
-					className: "mt-12 pt-6 border-t border-slate-800/60 text-center",
+					className: "mt-12 pt-6 border-t border-[var(--vz-border-subtle)] text-center",
 					children: /* @__PURE__ */ jsxs("p", {
-						className: "text-sm text-slate-500",
+						className: "text-sm text-[var(--text-muted)]",
 						children: [
 							"Visual regression report generated by",
 							" ",
 							/* @__PURE__ */ jsx("a", {
 								href: "https://vizzly.dev",
-								className: "text-amber-400 hover:text-amber-300 transition-colors",
+								className: "text-[var(--accent-brand)] hover:text-[var(--accent-brand-hover)] transition-colors",
 								children: "Vizzly"
 							})
 						]

package/dist/services/static-report-generator.js

@@ -25,7 +25,7 @@ function getReporterDistPath() {
   if (existsSync(join(distPath, 'reporter-bundle.css'))) {
     return distPath;
   }
-  throw new Error('Reporter bundle not found. Run "npm run build:reporter" first.');
+  throw new Error('Reporter bundle not found. Run "pnpm run build:reporter" first.');
 }
 
 /**
@@ -43,7 +43,7 @@ function getSSRModulePath() {
   if (existsSync(ssrPath)) {
     return ssrPath;
   }
-  throw new Error('SSR module not found. Run "npm run build:reporter-ssr" first.');
+  throw new Error('SSR module not found. Run "pnpm run build:reporter-ssr" first.');
 }
 
 /**

package/dist/tdd/tdd-service.js

@@ -317,8 +317,8 @@ export class TddService {
         output.warn('No screenshots found in baseline build');
         return null;
       }
-      output.info(`Using baseline from build: ${colors.cyan(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
-      output.info(`Checking ${colors.cyan(buildDetails.screenshots.length)} baseline screenshots...`);
+      output.info(`Using baseline from build: ${colors.info(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
+      output.info(`Checking ${colors.info(buildDetails.screenshots.length)} baseline screenshots...`);
 
       // Check existing baseline metadata for SHA comparison
       let existingBaseline = await this.loadBaseline();
@@ -589,8 +589,8 @@ export class TddService {
       output.warn('No screenshots found in baseline build');
       return null;
     }
-    output.info(`Using baseline from build: ${colors.cyan(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
-    output.info(`Checking ${colors.cyan(buildDetails.screenshots.length)} baseline screenshots...`);
+    output.info(`Using baseline from build: ${colors.info(baselineBuild.name || 'Unknown')} (${baselineBuild.id || 'Unknown ID'})`);
+    output.info(`Checking ${colors.info(buildDetails.screenshots.length)} baseline screenshots...`);
 
     // Check existing baseline metadata for SHA comparison
     let existingBaseline = await this.loadBaseline();
@@ -899,7 +899,7 @@ export class TddService {
       }
       return null;
     } else {
-      output.info(`Using existing baseline: ${colors.cyan(baseline.buildName)}`);
+      output.info(`Using existing baseline: ${colors.info(baseline.buildName)}`);
       return baseline;
     }
   }
@@ -1169,9 +1169,9 @@ export class TddService {
     output.print(`🐻 ${colors.bold(results.total)} screenshot${results.total !== 1 ? 's' : ''} compared`);
     output.blank();
 
-    // Passed section - use Observatory success color
+    // Passed section - use BearDen success color
     if (results.passed > 0) {
-      let successColor = colors.brand?.success || colors.green;
+      let successColor = colors.brand?.success || colors.success;
       if (output.isVerbose()) {
         // Verbose mode: show each screenshot
         for (let comp of passedComparisons) {
@@ -1184,10 +1184,10 @@ export class TddService {
       output.blank();
     }
 
-    // Failed comparisons with diff bars - use Observatory warning/danger colors
+    // Failed comparisons with diff bars - use BearDen warning/danger colors
     if (failedComparisons.length > 0) {
       let warningColor = colors.brand?.warning || colors.yellow;
-      let dangerColor = colors.brand?.danger || colors.red;
+      let dangerColor = colors.brand?.danger || colors.error;
       output.print(`  ${warningColor('◐')} ${warningColor(failedComparisons.length)} visual change${failedComparisons.length !== 1 ? 's' : ''} detected`);
 
       // Find longest name for alignment
@@ -1208,9 +1208,9 @@ export class TddService {
       output.blank();
     }
 
-    // New screenshots - use Observatory info color
+    // New screenshots - use BearDen info color
     if (newComparisons.length > 0) {
-      let infoColor = colors.brand?.info || colors.cyan;
+      let infoColor = colors.brand?.info || colors.info;
       let textMuted = colors.brand?.textMuted || colors.dim;
       output.print(`  ${infoColor('+')} ${infoColor(newComparisons.length)} new screenshot${newComparisons.length !== 1 ? 's' : ''}`);
       for (let comp of newComparisons) {
@@ -1219,9 +1219,9 @@ export class TddService {
       output.blank();
     }
 
-    // Errors - use Observatory danger color
+    // Errors - use BearDen danger color
     if (results.errors > 0) {
-      let dangerColor = colors.brand?.danger || colors.red;
+      let dangerColor = colors.brand?.danger || colors.error;
       let errorComparisons = this.comparisons.filter(c => c.status === 'error');
       output.print(`  ${dangerColor('!')} ${dangerColor(results.errors)} error${results.errors !== 1 ? 's' : ''}`);
       for (let comp of errorComparisons) {
@@ -1232,7 +1232,7 @@ export class TddService {
 
     // Dashboard link with prominent styling - detect if server is running
     if (hasChanges) {
-      let infoColor = colors.brand?.info || colors.cyan;
+      let infoColor = colors.brand?.info || colors.info;
       let textTertiary = colors.brand?.textTertiary || colors.dim;
 
       // Check if TDD server is already running