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

fix(worksheets): use white text on colored backgrounds for readability 

Changed from light backgrounds with dark text to saturated backgrounds
with white text. This provides much better contrast and visibility.

Before: Light .100 backgrounds with dark .700-.800 text (invisible!)
After: Saturated .500-.600 backgrounds with white text (high contrast)

All difficulty levels now use white text on vibrant colored backgrounds:
- Emerald.500 + white text
- Cyan.500 + white text
- Purple.500 + white text
- Amber.500 + white text
- Red.600 + white text

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-07 18:20:27 -06:00
parent 984b75cb94
commit 2b7b8ecc87
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/src/app/create/worksheets/addition/difficultyProfiles.ts
View File

@ -366,13 +366,14 @@ export interface DifficultyProfile {
/** /**
* Color palette for difficulty levels (RGB values for interpolation) * Color palette for difficulty levels (RGB values for interpolation)
* Vibrant, distinct progression: emerald → cyan → purple → amber → crimson * Vibrant, distinct progression: emerald → cyan → purple → amber → crimson
* Darker backgrounds with white text for better contrast
*/ */
const DIFFICULTY_RGB = { const DIFFICULTY_RGB = {
beginner: { bg: [209, 250, 229], border: [16, 185, 129], text: [4, 120, 87] }, // emerald - fresh, encouraging beginner: { bg: [16, 185, 129], border: [5, 150, 105], text: [255, 255, 255] }, // emerald - fresh, encouraging
earlyLearner: { bg: [207, 250, 254], border: [6, 182, 212], text: [8, 145, 178] }, // cyan - calm, learning earlyLearner: { bg: [6, 182, 212], border: [8, 145, 178], text: [255, 255, 255] }, // cyan - calm, learning
intermediate: { bg: [243, 232, 255], border: [168, 85, 247], text: [107, 33, 168] }, // purple - transitional intermediate: { bg: [168, 85, 247], border: [147, 51, 234], text: [255, 255, 255] }, // purple - transitional
advanced: { bg: [254, 243, 199], border: [245, 158, 11], text: [146, 64, 14] }, // amber - warming up advanced: { bg: [245, 158, 11], border: [217, 119, 6], text: [255, 255, 255] }, // amber - warming up
expert: { bg: [254, 226, 226], border: [220, 38, 38], text: [153, 27, 27] }, // crimson - intense expert: { bg: [220, 38, 38], border: [185, 28, 28], text: [255, 255, 255] }, // crimson - intense
} as const } as const
/** /**
@ -380,11 +381,11 @@ const DIFFICULTY_RGB = {
* Used for preset buttons in dropdown menu * Used for preset buttons in dropdown menu
*/ */
export const DIFFICULTY_COLORS = { export const DIFFICULTY_COLORS = {
beginner: { bg: 'emerald.100', border: 'emerald.500', text: 'emerald.700' }, beginner: { bg: 'emerald.500', border: 'emerald.600', text: 'white' },
earlyLearner: { bg: 'cyan.100', border: 'cyan.500', text: 'cyan.700' }, earlyLearner: { bg: 'cyan.500', border: 'cyan.600', text: 'white' },
intermediate: { bg: 'purple.100', border: 'purple.500', text: 'purple.700' }, intermediate: { bg: 'purple.500', border: 'purple.600', text: 'white' },
advanced: { bg: 'amber.100', border: 'amber.500', text: 'amber.700' }, advanced: { bg: 'amber.500', border: 'amber.600', text: 'white' },
expert: { bg: 'red.100', border: 'red.600', text: 'red.800' }, expert: { bg: 'red.600', border: 'red.700', text: 'white' },
} as const } as const
/** /**