chore(release): 4.13.8 [skip ci]

## [4.13.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.7...v4.13.8) (2025-10-18)

### Bug Fixes

* use color instead of fill for numeral styling ([ea10c16](ea10c16811))

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [4.13.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.7...v4.13.8) (2025-10-18)
+
+
+### Bug Fixes
+
+* use color instead of fill for numeral styling ([ea10c16](https://github.com/antialias/soroban-abacus-flashcards/commit/ea10c16811eb969b9963417079c330ae9ff295ba))
+
+## [4.13.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.6...v4.13.7) (2025-10-18)
+
+
+### Bug Fixes
+
+* add dark color for abacus numerals ([73ff32c](https://github.com/antialias/soroban-abacus-flashcards/commit/73ff32c2432beb62710e57aa8b3b4793eca43fda)), closes [#1f2937](https://github.com/antialias/soroban-abacus-flashcards/issues/1f2937)
+* use app-wide abacus config and remove instruction text ([0a50c73](https://github.com/antialias/soroban-abacus-flashcards/commit/0a50c733b089c7c341f0fdef47da78d1c61a3cb5))
+
 ## [4.13.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.5...v4.13.6) (2025-10-18)
 
 

apps/web/src/app/page.tsx

@@ -3,12 +3,13 @@
 import { useState } from 'react'
 import Link from 'next/link'
 import { PageWithNav } from '@/components/PageWithNav'
-import { AbacusReact } from '@soroban/abacus-react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { css } from '../../styled-system/css'
 import { container, grid, hstack, stack } from '../../styled-system/patterns'
 
 export default function HomePage() {
   const [abacusValue, setAbacusValue] = useState(1234567)
+  const appConfig = useAbacusConfig()
   return (
     <PageWithNav navTitle="Soroban Mastery Platform" navEmoji="🧮">
       <div className={css({ bg: 'gray.900', minHeight: '100vh' })}>
@@ -53,9 +54,7 @@ export default function HomePage() {
               <div
                 className={css({
                   display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  gap: '4',
+                  justifyContent: 'center',
                   my: '10',
                   p: '8',
                   bg: 'white',
@@ -65,28 +64,24 @@ export default function HomePage() {
                   boxShadow: '0 25px 50px -12px rgba(139, 92, 246, 0.25)',
                 })}
               >
-                <div
-                  className={css({
-                    fontSize: 'lg',
-                    fontWeight: 'semibold',
-                    color: 'gray.700',
-                    mb: '2',
-                  })}
-                >
-                  Click the beads to interact!
-                </div>
                 <AbacusReact
                   value={abacusValue}
                   columns={7}
-                  beadShape="diamond"
-                  colorScheme="place-value"
-                  hideInactiveBeads={false}
+                  beadShape={appConfig.beadShape}
+                  colorScheme={appConfig.colorScheme}
+                  hideInactiveBeads={appConfig.hideInactiveBeads}
                   interactive={true}
                   animated={true}
                   soundEnabled={true}
                   soundVolume={0.4}
                   scaleFactor={2.2}
                   showNumbers={true}
+                  customStyles={{
+                    numerals: {
+                      color: '#1f2937',
+                      fontWeight: 'bold',
+                    },
+                  }}
                   onValueChange={(newValue: number) => setAbacusValue(newValue)}
                 />
               </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.13.6",
+  "version": "4.13.8",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [