antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tutorial): add fill color support for dark mode column posts and reckoning bar

Browse Source 
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>
This commit is contained in:
Thomas Hallock
2025-10-19 13:36:56 -05:00
parent efbe99a9e2
commit 2eb3ff3406
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/tutorial/TutorialPlayer.tsx
View File

@@ -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,
}

13
packages/abacus-react/src/AbacusReact.tsx
View File

@@ -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 */}