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,38 @@
+## [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)
+
+
+### Bug Fixes
+
+* **docker:** include Panda CSS styled-system in production image ([57fabff](https://github.com/antialias/soroban-abacus-flashcards/commit/57fabffe605d953b4a4d7e05032401cbf1ab2d14))
+
+## [4.20.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.3...v4.20.4) (2025-10-19)
+
+
+### Bug Fixes
+
+* **homepage:** use inline styles for Your Journey text contrast ([8e51390](https://github.com/antialias/soroban-abacus-flashcards/commit/8e5139001818d7013e1b2654ac707f7429316d58)), closes [#e5e7](https://github.com/antialias/soroban-abacus-flashcards/issues/e5e7) [#e5e7](https://github.com/antialias/soroban-abacus-flashcards/issues/e5e7) [#9ca3](https://github.com/antialias/soroban-abacus-flashcards/issues/9ca3) [#d1d5](https://github.com/antialias/soroban-abacus-flashcards/issues/d1d5)
+
+## [4.20.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.2...v4.20.3) (2025-10-19)
+
+
+### Bug Fixes
+
+* **homepage:** use explicit RGBA colors for Your Journey text ([9c51cc9](https://github.com/antialias/soroban-abacus-flashcards/commit/9c51cc94eec4efcab9c0b9d1190f5b79c0c7d365))
+
 ## [4.20.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.1...v4.20.2) (2025-10-19)
 
 

Dockerfile

@@ -59,6 +59,9 @@ RUN adduser --system --uid 1001 nextjs
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next ./apps/web/.next
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
 
+# Copy Panda CSS generated styles
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/styled-system ./apps/web/styled-system
+
 # Copy server files (compiled from TypeScript)
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/server.js ./apps/web/
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/dist ./apps/web/dist

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
@@ -379,9 +380,7 @@ export default function HomePage() {
               >
                 Your Journey
               </h2>
-              <p className={css({ color: 'gray.200', fontSize: 'md' })}>
-                Progress from beginner to master
-              </p>
+              <p style={{ color: '#e5e7eb', fontSize: '16px' }}>Progress from beginner to master</p>
             </div>
 
             <div
@@ -402,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({
@@ -421,20 +422,32 @@ export default function HomePage() {
                       className={css({
                         fontSize: 'xl',
                         fontWeight: 'bold',
-                        color: stage.color,
                       })}
+                      style={{ color: token(stage.color) }}
                     >
                       {stage.level}
                     </div>
-                    <div className={css({ fontSize: 'sm', color: 'gray.200' })}>{stage.label}</div>
+                    <div
+                      className={css({
+                        fontSize: 'sm',
+                        color: 'gray.300',
+                      })}
+                    >
+                      {stage.label}
+                    </div>
                     {i < 3 && (
                       <div
+                        style={{
+                          position: 'absolute',
+                          left: '100%',
+                          marginLeft: '0.5rem',
+                          top: '50%',
+                          transform: 'translate(-50%, -50%)',
+                          fontSize: '20px',
+                          color: '#9ca3af',
+                        }}
                         className={css({
                           display: { base: 'none', md: 'block' },
-                          position: 'absolute',
-                          right: '-50%',
-                          fontSize: 'xl',
-                          color: 'gray.400',
                         })}
                       >
                         →
@@ -444,12 +457,14 @@ export default function HomePage() {
                 ))}
               </div>
               <div
+                style={{
+                  textAlign: 'center',
+                  fontSize: '14px',
+                  color: '#d1d5db',
+                  fontStyle: 'italic',
+                }}
                 className={css({
                   mt: '6',
-                  textAlign: 'center',
-                  fontSize: 'sm',
-                  color: 'gray.300',
-                  fontStyle: 'italic',
                 })}
               >
                 You'll progress through all these levels eventually ↑

package.json

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