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

fix: properly apply dark mode hover states in dropdown 

The previous implementation tried to conditionally set _hover colors
within a single css() call, but Panda CSS evaluates pseudo-selectors
at build time, not runtime.

Fixed by generating separate css() calls for dark and light modes,
allowing _hover and _focus states to properly use brand.900/brand.800
in dark mode instead of brand.50/brand.100.

🤖 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-11 05:31:08 -06:00
parent f9e2343ffb
commit 34553cebf7
1 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
View File

@ -325,7 +325,9 @@ export function OrientationPanel({
key={count}
data-action={`select-problems-${count}`}
onSelect={() => handleProblemsPerPageChange(count)}
className={css({
className={
isDark
? css({
display: 'flex',
alignItems: 'center',
gap: '3',
@ -334,14 +336,32 @@ export function OrientationPanel({
rounded: 'md',
cursor: 'pointer',
outline: 'none',
bg: isSelected ? (isDark ? 'brand.900' : 'brand.50') : 'transparent',
bg: isSelected ? 'brand.900' : 'transparent',
_hover: {
bg: isDark ? 'brand.900' : 'brand.50',
bg: 'brand.900',
},
_focus: {
bg: isDark ? 'brand.800' : 'brand.100',
bg: 'brand.800',
},
})}
})
: css({
display: 'flex',
alignItems: 'center',
gap: '3',
px: '3',
py: '2',
rounded: 'md',
cursor: 'pointer',
outline: 'none',
bg: isSelected ? 'brand.50' : 'transparent',
_hover: {
bg: 'brand.50',
},
_focus: {
bg: 'brand.100',
},
})
}
>
{/* Grid visualization */}
<div