From 2eb3ff340613301df20bf14f5b461371a27d7f05 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sun, 19 Oct 2025 13:36:56 -0500
Subject: [PATCH] feat(tutorial): add fill color support for dark mode column
 posts and reckoning bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added fill property to ColumnPostStyle and ReckoningBarStyle interfaces in abacus-react to enable high-contrast colors in dark mode. Updated TutorialPlayer to set fill colors for column posts (30% white) and reckoning bar (40% white) when in dark theme mode.

This improves visibility of the abacus frame elements in dark mode on the homepage tutorial.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/tutorial/TutorialPlayer.tsx |  2 ++
 packages/abacus-react/src/AbacusReact.tsx           | 13 ++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/tutorial/TutorialPlayer.tsx b/apps/web/src/components/tutorial/TutorialPlayer.tsx
index 11785240..40725ff1 100644
--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -1106,11 +1106,13 @@ function TutorialPlayerContent({
     if (theme === 'dark') {
       // Column dividers (global for all columns)
       styles.columnPosts = {
+        fill: 'rgba(255, 255, 255, 0.3)', // High contrast fill for visibility
         stroke: 'rgba(255, 255, 255, 0.2)',
         strokeWidth: 2,
       }
       // Reckoning bar (horizontal middle bar)
       styles.reckoningBar = {
+        fill: 'rgba(255, 255, 255, 0.4)', // High contrast fill for visibility
         stroke: 'rgba(255, 255, 255, 0.25)',
         strokeWidth: 3,
       }
diff --git a/packages/abacus-react/src/AbacusReact.tsx b/packages/abacus-react/src/AbacusReact.tsx
index 3eb34305..b50dab0f 100644
--- a/packages/abacus-react/src/AbacusReact.tsx
+++ b/packages/abacus-react/src/AbacusReact.tsx
@@ -27,6 +27,7 @@ export interface BeadStyle {
 }
 
 export interface ColumnPostStyle {
+  fill?: string;
   stroke?: string;
   strokeWidth?: number;
   opacity?: number;
@@ -34,6 +35,7 @@ export interface ColumnPostStyle {
 }
 
 export interface ReckoningBarStyle {
+  fill?: string;
   stroke?: string;
   strokeWidth?: number;
   opacity?: number;
@@ -1979,7 +1981,10 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
           const columnStyles = customStyles?.columns?.[colIndex];
           const globalColumnPosts = customStyles?.columnPosts;
           const rodStyle = {
-            fill: "rgb(0, 0, 0, 0.1)", // Default Typst color
+            fill:
+              columnStyles?.columnPost?.fill ||
+              globalColumnPosts?.fill ||
+              "rgb(0, 0, 0, 0.1)", // Default Typst color
             stroke:
               columnStyles?.columnPost?.stroke ||
               globalColumnPosts?.stroke ||
@@ -2017,8 +2022,10 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
             (effectiveColumns - 1) * dimensions.rodSpacing + dimensions.beadSize
           }
           height={dimensions.barThickness}
-          fill="black" // Typst uses black
-          stroke="none"
+          fill={customStyles?.reckoningBar?.fill || "black"} // Typst default is black
+          stroke={customStyles?.reckoningBar?.stroke || "none"}
+          strokeWidth={customStyles?.reckoningBar?.strokeWidth ?? 0}
+          opacity={customStyles?.reckoningBar?.opacity ?? 1}
         />
 
         {/* Beads */}