From d19b1e292562e0f23577884a09fd2bfb3e88776f Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 27 Nov 2025 23:14:41 +1000
Subject: [PATCH] fix(ui): replace Tailwind classes with direct SVG attributes
 in FlowDiagram
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert all SVG fill/stroke from Tailwind classes to direct attributes
- Use hsl(var(--css-custom-property)) for theme compatibility
- Add explicit fontSize, fontFamily, fontWeight instead of text-* classes
- Fixes text visibility issue where labels appeared as black rectangles

Resolves rendering bug where SVG text elements weren't displaying properly
due to improper CSS class application on SVG elements.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/ui/src/FlowDiagram/FlowDiagram.tsx | 121 +++++++++++++++-----
 1 file changed, 94 insertions(+), 27 deletions(-)

diff --git a/packages/ui/src/FlowDiagram/FlowDiagram.tsx b/packages/ui/src/FlowDiagram/FlowDiagram.tsx
index 8f48ed5..19787ba 100644
--- a/packages/ui/src/FlowDiagram/FlowDiagram.tsx
+++ b/packages/ui/src/FlowDiagram/FlowDiagram.tsx
@@ -48,16 +48,20 @@ export function FlowDiagram({
             y="20"
             width="100"
             height="60"
-            className="fill-surface stroke-foreground"
+            fill="hsl(var(--surface))"
+            stroke="hsl(var(--foreground))"
             strokeWidth="2"
             rx="0"
           />
           <text
             x="200"
             y="45"
-            className="text-sm font-mono font-bold fill-foreground"
+            fill="hsl(var(--foreground))"
             textAnchor="middle"
             dominantBaseline="middle"
+            fontSize="14"
+            fontFamily="monospace"
+            fontWeight="700"
           >
             AI Agent
           </text>
@@ -67,7 +71,7 @@ export function FlowDiagram({
         <path
           id="path1"
           d="M 200 80 L 200 130"
-          className="stroke-brutalist-accent"
+          stroke="hsl(var(--brutalist-accent))"
           strokeWidth="3"
           fill="none"
           markerEnd="url(#arrowhead)"
@@ -85,25 +89,31 @@ export function FlowDiagram({
             y="130"
             width="160"
             height="50"
-            className="fill-brutalist-accent/10 stroke-brutalist-accent"
+            fill="hsl(var(--brutalist-accent) / 0.1)"
+            stroke="hsl(var(--brutalist-accent))"
             strokeWidth="2"
             rx="0"
           />
           <text
             x="200"
             y="152"
-            className="text-xs font-mono font-bold fill-foreground"
+            fill="hsl(var(--foreground))"
             textAnchor="middle"
             dominantBaseline="middle"
+            fontSize="12"
+            fontFamily="monospace"
+            fontWeight="700"
           >
             Semantic Query
           </text>
           <text
             x="200"
             y="168"
-            className="text-xs font-mono fill-foreground-secondary"
+            fill="hsl(var(--foreground-secondary))"
             textAnchor="middle"
             dominantBaseline="middle"
+            fontSize="12"
+            fontFamily="monospace"
           >
             &quot;email, slack...&quot;
           </text>
@@ -113,7 +123,7 @@ export function FlowDiagram({
         <path
           id="path2"
           d="M 200 180 L 200 240"
-          className="stroke-brutalist-accent"
+          stroke="hsl(var(--brutalist-accent))"
           strokeWidth="3"
           fill="none"
           markerEnd="url(#arrowhead)"
@@ -131,34 +141,42 @@ export function FlowDiagram({
             y="240"
             width="200"
             height="80"
-            className="fill-surface stroke-foreground"
+            fill="hsl(var(--surface))"
+            stroke="hsl(var(--foreground))"
             strokeWidth="3"
             rx="0"
           />
           <text
             x="200"
             y="265"
-            className="text-base font-bold fill-foreground"
+            fill="hsl(var(--foreground))"
             textAnchor="middle"
             dominantBaseline="middle"
+            fontSize="16"
+            fontFamily="monospace"
+            fontWeight="700"
           >
             TPMJS REGISTRY
           </text>
           <text
             x="200"
             y="285"
-            className="text-xs font-mono fill-foreground-secondary"
+            fill="hsl(var(--foreground-secondary))"
             textAnchor="middle"
             dominantBaseline="middle"
+            fontSize="12"
+            fontFamily="monospace"
           >
             Dynamic Discovery
           </text>
           <text
             x="200"
             y="305"
-            className="text-xs font-mono fill-brutalist-accent"
+            fill="hsl(var(--brutalist-accent))"
             textAnchor="middle"
             dominantBaseline="middle"
+            fontSize="12"
+            fontFamily="monospace"
           >
             2,847 tools
           </text>
@@ -169,7 +187,8 @@ export function FlowDiagram({
           cx="200"
           cy="280"
           r="5"
-          className="fill-none stroke-brutalist-accent"
+          fill="none"
+          stroke="hsl(var(--brutalist-accent))"
           strokeWidth="2"
           opacity="0"
           style={{
@@ -181,7 +200,7 @@ export function FlowDiagram({
         <path
           id="path3a"
           d="M 150 320 L 80 380"
-          className="stroke-brutalist-accent"
+          stroke="hsl(var(--brutalist-accent))"
           strokeWidth="2"
           fill="none"
           markerEnd="url(#arrowhead)"
@@ -194,7 +213,7 @@ export function FlowDiagram({
         <path
           id="path3b"
           d="M 200 320 L 200 380"
-          className="stroke-brutalist-accent"
+          stroke="hsl(var(--brutalist-accent))"
           strokeWidth="2"
           fill="none"
           markerEnd="url(#arrowhead)"
@@ -207,7 +226,7 @@ export function FlowDiagram({
         <path
           id="path3c"
           d="M 250 320 L 320 380"
-          className="stroke-brutalist-accent"
+          stroke="hsl(var(--brutalist-accent))"
           strokeWidth="2"
           fill="none"
           markerEnd="url(#arrowhead)"
@@ -226,22 +245,38 @@ export function FlowDiagram({
             y="380"
             width="100"
             height="80"
-            className="fill-surface stroke-foreground"
+            fill="hsl(var(--surface))"
+            stroke="hsl(var(--foreground))"
             strokeWidth="2"
             rx="0"
           />
-          <text x="70" y="405" className="text-sm font-bold fill-foreground" textAnchor="middle">
+          <text
+            x="70"
+            y="405"
+            fill="hsl(var(--foreground))"
+            textAnchor="middle"
+            fontSize="14"
+            fontWeight="700"
+          >
             Email
           </text>
           <text
             x="70"
             y="425"
-            className="text-xs font-mono fill-foreground-secondary"
+            fill="hsl(var(--foreground-secondary))"
             textAnchor="middle"
+            fontSize="12"
+            fontFamily="monospace"
           >
             Tool
           </text>
-          <text x="70" y="445" className="text-xs fill-brutalist-accent" textAnchor="middle">
+          <text
+            x="70"
+            y="445"
+            fill="hsl(var(--brutalist-accent))"
+            textAnchor="middle"
+            fontSize="12"
+          >
             12K calls
           </text>
 
@@ -251,22 +286,38 @@ export function FlowDiagram({
             y="380"
             width="100"
             height="80"
-            className="fill-surface stroke-foreground"
+            fill="hsl(var(--surface))"
+            stroke="hsl(var(--foreground))"
             strokeWidth="2"
             rx="0"
           />
-          <text x="200" y="405" className="text-sm font-bold fill-foreground" textAnchor="middle">
+          <text
+            x="200"
+            y="405"
+            fill="hsl(var(--foreground))"
+            textAnchor="middle"
+            fontSize="14"
+            fontWeight="700"
+          >
             Slack
           </text>
           <text
             x="200"
             y="425"
-            className="text-xs font-mono fill-foreground-secondary"
+            fill="hsl(var(--foreground-secondary))"
             textAnchor="middle"
+            fontSize="12"
+            fontFamily="monospace"
           >
             Tool
           </text>
-          <text x="200" y="445" className="text-xs fill-brutalist-accent" textAnchor="middle">
+          <text
+            x="200"
+            y="445"
+            fill="hsl(var(--brutalist-accent))"
+            textAnchor="middle"
+            fontSize="12"
+          >
             8K calls
           </text>
 
@@ -276,22 +327,38 @@ export function FlowDiagram({
             y="380"
             width="100"
             height="80"
-            className="fill-surface stroke-foreground"
+            fill="hsl(var(--surface))"
+            stroke="hsl(var(--foreground))"
             strokeWidth="2"
             rx="0"
           />
-          <text x="330" y="405" className="text-sm font-bold fill-foreground" textAnchor="middle">
+          <text
+            x="330"
+            y="405"
+            fill="hsl(var(--foreground))"
+            textAnchor="middle"
+            fontSize="14"
+            fontWeight="700"
+          >
             Calendar
           </text>
           <text
             x="330"
             y="425"
-            className="text-xs font-mono fill-foreground-secondary"
+            fill="hsl(var(--foreground-secondary))"
             textAnchor="middle"
+            fontSize="12"
+            fontFamily="monospace"
           >
             Tool
           </text>
-          <text x="330" y="445" className="text-xs fill-brutalist-accent" textAnchor="middle">
+          <text
+            x="330"
+            y="445"
+            fill="hsl(var(--brutalist-accent))"
+            textAnchor="middle"
+            fontSize="12"
+          >
             5K calls
           </text>
         </g>