chore(release): 4.20.7 [skip ci]

## [4.20.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.6...v4.20.7) (2025-10-20)

### Bug Fixes

* **home:** use Panda CSS token() for dynamic colors and center arrows properly ([d52ba63](d52ba6373a))

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.20.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.6...v4.20.7) (2025-10-20)
+
+
+### Bug Fixes
+
+* **home:** use Panda CSS token() for dynamic colors and center arrows properly ([d52ba63](https://github.com/antialias/soroban-abacus-flashcards/commit/d52ba6373a4577655dc1e5f5ff4926af7f7d96c3))
+
+## [4.20.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.5...v4.20.6) (2025-10-20)
+
+
+### Bug Fixes
+
+* **homepage:** use inline styles for journey level colors ([5d85e89](https://github.com/antialias/soroban-abacus-flashcards/commit/5d85e898d65d44d8d09bee952fad44b5a9c0cd20)), closes [#4ade80](https://github.com/antialias/soroban-abacus-flashcards/issues/4ade80) [#60a5](https://github.com/antialias/soroban-abacus-flashcards/issues/60a5) [#a78](https://github.com/antialias/soroban-abacus-flashcards/issues/a78) [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24)
+
 ## [4.20.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.4...v4.20.5) (2025-10-20)
 
 

apps/web/.claude/PANDA_CSS_DYNAMIC_TOKENS.md

@@ -0,0 +1,76 @@
+# Panda CSS Dynamic Token Usage
+
+## Problem: Dynamic Color Tokens Not Working
+
+When using Panda CSS, color tokens like `blue.400`, `purple.400`, etc. don't work when used dynamically through variables in the `css()` function.
+
+## Root Cause
+
+Panda CSS's `css()` function requires **static values at build time**. It cannot process dynamic token references like:
+
+```typescript
+// ❌ This doesn't work
+const color = 'blue.400'
+css({ color: color })  // Panda can't resolve this at build time
+```
+
+The `css()` function performs static analysis during the build process to generate CSS classes. It cannot handle runtime-dynamic token paths.
+
+## Solution: Use the `token()` Function
+
+Panda CSS provides a `token()` function specifically for resolving token paths to their actual values at runtime:
+
+```typescript
+import { token } from '../../styled-system/tokens'
+
+// ✅ This works
+const stages = [
+  { level: '10 Kyu', label: 'Beginner', color: 'colors.green.400' },
+  { level: '5 Kyu', label: 'Intermediate', color: 'colors.blue.400' },
+  { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400' },
+  { level: 'Dan', label: 'Master', color: 'colors.amber.400' },
+] as const
+
+// Use with inline styles, not css()
+<div style={{ color: token(stage.color) }}>
+```
+
+## Important Notes
+
+1. **Use `as const`**: TypeScript needs the array marked as `const` so the token strings are treated as literal types, not generic strings. The `token()` function expects the `Token` literal type.
+
+2. **Use inline styles**: When using `token()`, apply colors via the `style` prop, not through the `css()` function:
+   ```typescript
+   // ✅ Correct
+   <div style={{ color: token(stage.color) }}>
+
+   // ❌ Won't work
+   <div className={css({ color: token(stage.color) })}>
+   ```
+
+3. **Static tokens in css()**: For static usage, you CAN use tokens directly in `css()`:
+   ```typescript
+   // ✅ This works because it's static
+   css({ color: 'blue.400' })
+   ```
+
+## How token() Works
+
+The `token()` function:
+- Takes a token path like `"colors.blue.400"`
+- Looks it up in the generated token registry (`styled-system/tokens/index.mjs`)
+- Returns the actual CSS value (e.g., `"#60a5fa"`)
+- Happens at runtime, not build time
+
+## Token Type Definition
+
+The `Token` type is a union of all valid token paths:
+```typescript
+type Token = "colors.blue.400" | "colors.green.400" | "colors.violet.400" | ...
+```
+
+This is defined in `styled-system/tokens/tokens.d.ts`.
+
+## Reference Implementation
+
+See `src/app/page.tsx` lines 404-434 for a working example of dynamic token usage in the "Your Journey" section.

apps/web/src/app/page.tsx

@@ -6,6 +6,7 @@ import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
 import { getTutorialForEditor } from '@/utils/tutorialConverter'
 import { css } from '../../styled-system/css'
 import { container, grid, hstack, stack } from '../../styled-system/patterns'
+import { token } from '../../styled-system/tokens'
 
 export default function HomePage() {
   // Extract just the "Friends of 5" step (2+3=5) for homepage demo
@@ -400,12 +401,14 @@ export default function HomePage() {
                   flexWrap: 'wrap',
                 })}
               >
-                {[
-                  { level: '10 Kyu', label: 'Beginner', color: 'green.400' },
-                  { level: '5 Kyu', label: 'Intermediate', color: 'blue.400' },
-                  { level: '1 Kyu', label: 'Advanced', color: 'purple.400' },
-                  { level: 'Dan', label: 'Master', color: 'yellow.400' },
-                ].map((stage, i) => (
+                {(
+                  [
+                    { level: '10 Kyu', label: 'Beginner', color: 'colors.green.400' },
+                    { level: '5 Kyu', label: 'Intermediate', color: 'colors.blue.400' },
+                    { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400' },
+                    { level: 'Dan', label: 'Master', color: 'colors.amber.400' },
+                  ] as const
+                ).map((stage, i) => (
                   <div
                     key={i}
                     className={stack({
@@ -419,17 +422,27 @@ export default function HomePage() {
                       className={css({
                         fontSize: 'xl',
                         fontWeight: 'bold',
-                        color: stage.color,
                       })}
+                      style={{ color: token(stage.color) }}
                     >
                       {stage.level}
                     </div>
-                    <div style={{ fontSize: '14px', color: '#e5e7eb' }}>{stage.label}</div>
+                    <div
+                      className={css({
+                        fontSize: 'sm',
+                        color: 'gray.300',
+                      })}
+                    >
+                      {stage.label}
+                    </div>
                     {i < 3 && (
                       <div
                         style={{
                           position: 'absolute',
-                          right: '-50%',
+                          left: '100%',
+                          marginLeft: '0.5rem',
+                          top: '50%',
+                          transform: 'translate(-50%, -50%)',
                           fontSize: '20px',
                           color: '#9ca3af',
                         }}

package.json

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