Fix tablist variants invisible under Prism theme (use ResolveEffectivePalette)

Copilot · jongalloway · web-flow · commit 0c502870a8de · 2026-03-25T05:46:59.000Z
Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com> Agent-Logs-Url: https://github.com/jongalloway/DiagramForge/sessions/12c9ed1a-2f39-46e4-b841-f62269df8ebb
diff --git a/src/DiagramForge/Layout/DefaultLayoutEngine.TabList.cs b/src/DiagramForge/Layout/DefaultLayoutEngine.TabList.cs
@@ -110,15 +110,14 @@ private static void LayoutTabListCards(
             theme.NodePadding * 2.5 + maxItemCount * descLineHeight + theme.NodePadding);
         double rowGap = Math.Max(theme.NodePadding * 1.6, 16);
 
-        string[] palette = theme.NodePalette is { Count: > 0 }
-            ? [.. theme.NodePalette]
-            : [theme.NodeFillColor];
+        var effectivePalette = ThemePaletteResolver.ResolveEffectivePalette(theme);
+        bool useFallbackPalette = !ReferenceEquals(effectivePalette, theme.NodePalette);
 
         for (int i = 0; i < titleNodes.Count; i++)
         {
             var titleNode = titleNodes[i];
             double rowY = pad + titleOffset + i * (cardHeight + rowGap);
-            string catFill = palette[i % palette.Length];
+            string catFill = effectivePalette[i % effectivePalette.Count];
 
             // Accent block: vibrant saturated color
             string accentFill = ColorUtils.Vibrant(catFill, 2.5);
@@ -137,7 +136,8 @@ private static void LayoutTabListCards(
             titleNode.Label.FontSize = titleFontSize;
             titleNode.Label.FontWeight = "bold";
             titleNode.Label.Color = accentTextColor;
-            titleNode.Metadata["render:noGradient"] = true;
+            if (!useFallbackPalette)
+                titleNode.Metadata["render:noGradient"] = true;
             titleNode.Metadata["tablist:band"] = true;
             titleNode.Metadata["tablist:layout"] = "cards";
             titleNode.Metadata["tablist:accentWidth"] = accentWidth;
@@ -214,15 +214,14 @@ private static void LayoutTabListStacked(
             theme.NodePadding * 2 + titleFontSize * 1.3 + maxItemCount * descLineHeight + theme.NodePadding);
         double rowGap = 6; // Narrow gap for stacked infographic feel
 
-        string[] palette = theme.NodePalette is { Count: > 0 }
-            ? [.. theme.NodePalette]
-            : [theme.NodeFillColor];
+        var effectivePalette = ThemePaletteResolver.ResolveEffectivePalette(theme);
+        bool useFallbackPalette = !ReferenceEquals(effectivePalette, theme.NodePalette);
 
         for (int i = 0; i < titleNodes.Count; i++)
         {
             var titleNode = titleNodes[i];
             double rowY = pad + titleOffset + i * (bandHeight + rowGap);
-            string catFill = palette[i % palette.Length];
+            string catFill = effectivePalette[i % effectivePalette.Count];
 
             // Number tab: vivid saturated color
             string tabFill = ColorUtils.Vibrant(catFill, 2.5);
@@ -245,7 +244,8 @@ private static void LayoutTabListStacked(
             titleNode.Label.FontSize = numberFontSize;
             titleNode.Label.FontWeight = "bold";
             titleNode.Label.Color = tabTextColor;
-            titleNode.Metadata["render:noGradient"] = true;
+            if (!useFallbackPalette)
+                titleNode.Metadata["render:noGradient"] = true;
             titleNode.Metadata["tablist:band"] = true;
             titleNode.Metadata["tablist:layout"] = "stacked";
             titleNode.Metadata["tablist:accentWidth"] = tabWidth;
@@ -324,9 +324,8 @@ private static void LayoutTabListFlat(
         double totalWidth = accentLineWidth + accentLineGap + barWidth;
         double categoryGap = theme.NodePadding * 1.2;
 
-        string[] palette = theme.NodePalette is { Count: > 0 }
-            ? [.. theme.NodePalette]
-            : [theme.NodeFillColor];
+        var effectivePalette = ThemePaletteResolver.ResolveEffectivePalette(theme);
+        bool useFallbackPalette = !ReferenceEquals(effectivePalette, theme.NodePalette);
 
         double curY = pad + titleOffset;
 
@@ -337,7 +336,7 @@ private static void LayoutTabListFlat(
             var items = itemsByCategory.TryGetValue(catIdx, out var list) ? list : [];
             int itemCount = items.Count;
 
-            string catFill = palette[i % palette.Length];
+            string catFill = effectivePalette[i % effectivePalette.Count];
             string titleBarFill = ColorUtils.Vibrant(catFill, 2.0);
             string titleBarTextColor = ColorUtils.ChooseTextColor(titleBarFill);
 
@@ -354,12 +353,13 @@ private static void LayoutTabListFlat(
             titleNode.Label.FontSize = titleFontSize;
             titleNode.Label.FontWeight = "bold";
             titleNode.Label.Color = titleBarTextColor;
-            titleNode.Metadata["render:noGradient"] = true;
+            if (!useFallbackPalette)
+                titleNode.Metadata["render:noGradient"] = true;
             titleNode.Metadata["tablist:band"] = true;
             titleNode.Metadata["tablist:layout"] = "flat";
             titleNode.Metadata["tablist:accentLineWidth"] = accentLineWidth;
             titleNode.Metadata["tablist:accentLineGap"] = accentLineGap;
-            titleNode.Metadata["tablist:accentColor"] = ColorUtils.Vibrant(palette[0], 2.5);
+            titleNode.Metadata["tablist:accentColor"] = ColorUtils.Vibrant(effectivePalette[0], 2.5);
             titleNode.Metadata["tablist:barWidth"] = barWidth;
             titleNode.Metadata["tablist:titleBarHeight"] = titleBarHeight;
             titleNode.Metadata["tablist:descFontSize"] = descFontSize;
diff --git a/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-cards-prism.expected.svg b/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-cards-prism.expected.svg
@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="570.72" height="589.60" viewBox="0 0 570.72 589.60">
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#64748B"/>
+    </marker>
+    <marker id="arrowhead-open" markerWidth="12" markerHeight="9" refX="11" refY="4.50" orient="auto">
+      <polygon points="0 0, 12 4.50, 0 9" fill="#FFFFFF" stroke="#64748B" stroke-width="1.50"/>
+    </marker>
+    <marker id="arrowhead-filled-diamond" markerWidth="14" markerHeight="9" refX="1" refY="4.50" orient="auto">
+      <polygon points="1 4.50, 7 1, 13 4.50, 7 8" fill="#64748B"/>
+    </marker>
+    <marker id="arrowhead-open-diamond" markerWidth="14" markerHeight="9" refX="1" refY="4.50" orient="auto">
+      <polygon points="1 4.50, 7 1, 13 4.50, 7 8" fill="#FFFFFF" stroke="#64748B" stroke-width="1.50"/>
+    </marker>
+  </defs>
+  <rect width="570.72" height="589.60" fill="#FFFFFF" rx="10.00" ry="10.00"/>
+  <text x="285.36" y="20.00" text-anchor="middle" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" font-weight="bold" fill="#111827">Cloud Architecture Layers</text>
+  <g transform="translate(24.00,47.00)">
+    <defs>
+      <linearGradient id="node-0-stroke-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#2563EB"/>
+        <stop offset="33%" stop-color="#7C3AED"/>
+        <stop offset="67%" stop-color="#DB2777"/>
+        <stop offset="100%" stop-color="#F59E0B"/>
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" width="522.72" height="109.50" rx="10.00" ry="10.00" fill="#E4ECFC" stroke="#9CB8F6" stroke-width="1.50"/>
+    <rect x="0" y="0" width="162.72" height="109.50" rx="10.00" ry="10.00" fill="#09A4FF" stroke="url(#node-0-stroke-gradient)" stroke-width="1.50"/>
+    <text x="186.72" y="34.50" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Web frontend (React)</text>
+    <text x="186.72" y="57.00" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Mobile clients (iOS, Android)</text>
+    <text x="186.72" y="79.50" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  CDN-cached static assets</text>
+    <text x="81.36" y="60.91" text-anchor="middle" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="17.60" font-weight="bold" fill="#0F172A">Presentation</text>
+  </g>
+  <g transform="translate(24.00,175.70)">
+    <defs>
+      <linearGradient id="node-4-stroke-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#2563EB"/>
+        <stop offset="33%" stop-color="#7C3AED"/>
+        <stop offset="67%" stop-color="#DB2777"/>
+        <stop offset="100%" stop-color="#F59E0B"/>
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" width="522.72" height="109.50" rx="10.00" ry="10.00" fill="#E9EAFC" stroke="#ADB0F6" stroke-width="1.50"/>
+    <rect x="0" y="0" width="162.72" height="109.50" rx="10.00" ry="10.00" fill="#1224FF" stroke="url(#node-4-stroke-gradient)" stroke-width="1.50"/>
+    <text x="186.72" y="34.50" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Rate limiting &amp; auth</text>
+    <text x="186.72" y="57.00" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Request routing</text>
+    <text x="186.72" y="79.50" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Response caching</text>
+    <text x="81.36" y="60.91" text-anchor="middle" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="17.60" font-weight="bold" fill="#F8FAFC">API Gateway</text>
+  </g>
+  <g transform="translate(24.00,304.40)">
+    <defs>
+      <linearGradient id="node-8-stroke-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#2563EB"/>
+        <stop offset="33%" stop-color="#7C3AED"/>
+        <stop offset="67%" stop-color="#DB2777"/>
+        <stop offset="100%" stop-color="#F59E0B"/>
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" width="522.72" height="109.50" rx="10.00" ry="10.00" fill="#EDE8FC" stroke="#BEA9F6" stroke-width="1.50"/>
+    <rect x="0" y="0" width="162.72" height="109.50" rx="10.00" ry="10.00" fill="#8810FF" stroke="url(#node-8-stroke-gradient)" stroke-width="1.50"/>
+    <text x="186.72" y="34.50" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  User service</text>
+    <text x="186.72" y="57.00" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Order service</text>
+    <text x="186.72" y="79.50" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Notification service</text>
+    <text x="81.36" y="60.91" text-anchor="middle" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="17.60" font-weight="bold" fill="#F8FAFC">Services</text>
+  </g>
+  <g transform="translate(24.00,433.10)">
+    <defs>
+      <linearGradient id="node-12-stroke-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#2563EB"/>
+        <stop offset="33%" stop-color="#7C3AED"/>
+        <stop offset="67%" stop-color="#DB2777"/>
+        <stop offset="100%" stop-color="#F59E0B"/>
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" width="522.72" height="109.50" rx="10.00" ry="10.00" fill="#F2E6F8" stroke="#D0A4E7" stroke-width="1.50"/>
+    <rect x="0" y="0" width="162.72" height="109.50" rx="10.00" ry="10.00" fill="#FF0DFF" stroke="url(#node-12-stroke-gradient)" stroke-width="1.50"/>
+    <text x="186.72" y="34.50" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Relational DB (Postgres)</text>
+    <text x="186.72" y="57.00" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Cache layer (Redis)</text>
+    <text x="186.72" y="79.50" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#0F172A">•  Object storage (S3)</text>
+    <text x="81.36" y="60.91" text-anchor="middle" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="17.60" font-weight="bold" fill="#F8FAFC">Data</text>
+  </g>
+</svg>
diff --git a/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-cards-prism.input b/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-cards-prism.input
@@ -0,0 +1,26 @@
+---
+theme: prism
+---
+diagram: tablist
+title: Cloud Architecture Layers
+categories:
+  - title: Presentation
+    items:
+      - Web frontend (React)
+      - Mobile clients (iOS, Android)
+      - CDN-cached static assets
+  - title: API Gateway
+    items:
+      - Rate limiting & auth
+      - Request routing
+      - Response caching
+  - title: Services
+    items:
+      - User service
+      - Order service
+      - Notification service
+  - title: Data
+    items:
+      - Relational DB (Postgres)
+      - Cache layer (Redis)
+      - Object storage (S3)
diff --git a/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-flat-prism.expected.svg b/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-flat-prism.expected.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="485.00" height="500.32" viewBox="0 0 485.00 500.32">
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#64748B"/>
+    </marker>
+    <marker id="arrowhead-open" markerWidth="12" markerHeight="9" refX="11" refY="4.50" orient="auto">
+      <polygon points="0 0, 12 4.50, 0 9" fill="#FFFFFF" stroke="#64748B" stroke-width="1.50"/>
+    </marker>
+    <marker id="arrowhead-filled-diamond" markerWidth="14" markerHeight="9" refX="1" refY="4.50" orient="auto">
+      <polygon points="1 4.50, 7 1, 13 4.50, 7 8" fill="#64748B"/>
+    </marker>
+    <marker id="arrowhead-open-diamond" markerWidth="14" markerHeight="9" refX="1" refY="4.50" orient="auto">
+      <polygon points="1 4.50, 7 1, 13 4.50, 7 8" fill="#FFFFFF" stroke="#64748B" stroke-width="1.50"/>
+    </marker>
+  </defs>
+  <rect width="485.00" height="500.32" fill="#FFFFFF" rx="10.00" ry="10.00"/>
+  <text x="242.50" y="20.00" text-anchor="middle" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" font-weight="bold" fill="#111827">Project Phases</text>
+  <g transform="translate(24.00,47.00)">
+    <defs>
+      <linearGradient id="node-0-stroke-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#2563EB"/>
+        <stop offset="33%" stop-color="#7C3AED"/>
+        <stop offset="67%" stop-color="#DB2777"/>
+        <stop offset="100%" stop-color="#F59E0B"/>
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" width="5.00" height="125.84" rx="2.50" ry="2.50" fill="#09A4FF" stroke="none"/>
+    <rect x="17.00" y="0" width="420.00" height="41.84" rx="10.00" ry="10.00" fill="#0985FF" stroke="none"/>
+    <text x="35.00" y="27.08" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="17.60" font-weight="bold" fill="#F8FAFC">Discovery</text>
+    <text x="35.00" y="66.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Stakeholder interviews</text>
+    <text x="35.00" y="90.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Requirements gathering</text>
+    <text x="35.00" y="114.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Competitive analysis</text>
+  </g>
+  <g transform="translate(24.00,187.24)">
+    <defs>
+      <linearGradient id="node-4-stroke-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#2563EB"/>
+        <stop offset="33%" stop-color="#7C3AED"/>
+        <stop offset="67%" stop-color="#DB2777"/>
+        <stop offset="100%" stop-color="#F59E0B"/>
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" width="5.00" height="125.84" rx="2.50" ry="2.50" fill="#09A4FF" stroke="none"/>
+    <rect x="17.00" y="0" width="420.00" height="41.84" rx="10.00" ry="10.00" fill="#1220FF" stroke="none"/>
+    <text x="35.00" y="27.08" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="17.60" font-weight="bold" fill="#F8FAFC">Design</text>
+    <text x="35.00" y="66.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Wireframes &amp; prototypes</text>
+    <text x="35.00" y="90.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Design system setup</text>
+    <text x="35.00" y="114.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Accessibility review</text>
+  </g>
+  <g transform="translate(24.00,327.48)">
+    <defs>
+      <linearGradient id="node-8-stroke-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stop-color="#2563EB"/>
+        <stop offset="33%" stop-color="#7C3AED"/>
+        <stop offset="67%" stop-color="#DB2777"/>
+        <stop offset="100%" stop-color="#F59E0B"/>
+      </linearGradient>
+    </defs>
+    <rect x="0" y="0" width="5.00" height="125.84" rx="2.50" ry="2.50" fill="#09A4FF" stroke="none"/>
+    <rect x="17.00" y="0" width="420.00" height="41.84" rx="10.00" ry="10.00" fill="#7010FF" stroke="none"/>
+    <text x="35.00" y="27.08" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="17.60" font-weight="bold" fill="#F8FAFC">Development</text>
+    <text x="35.00" y="66.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Sprint planning</text>
+    <text x="35.00" y="90.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Feature implementation</text>
+    <text x="35.00" y="114.44" text-anchor="start" font-family="&quot;Segoe UI&quot;, Inter, Arial, sans-serif" font-size="15.00" fill="#111827">•  Code review process</text>
+  </g>
+</svg>
diff --git a/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-flat-prism.input b/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-flat-prism.input
@@ -0,0 +1,22 @@
+---
+theme: prism
+---
+diagram: tablist
+layout: flat
+title: Project Phases
+categories:
+  - title: Discovery
+    items:
+      - Stakeholder interviews
+      - Requirements gathering
+      - Competitive analysis
+  - title: Design
+    items:
+      - Wireframes & prototypes
+      - Design system setup
+      - Accessibility review
+  - title: Development
+    items:
+      - Sprint planning
+      - Feature implementation
+      - Code review process
diff --git a/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-stacked-prism.expected.svg b/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-stacked-prism.expected.svg
diff --git a/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-stacked-prism.input b/tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-stacked-prism.input
