From 34553cebf7f9c232a37b2bef6bf4d8f1aad99748 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 11 Nov 2025 05:31:08 -0600
Subject: [PATCH] fix: properly apply dark mode hover states in dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../addition/components/OrientationPanel.tsx  | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx b/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
index 54b87ce9..95814e47 100644
--- a/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
@@ -325,23 +325,43 @@ export function OrientationPanel({
                           key={count}
                           data-action={`select-problems-${count}`}
                           onSelect={() => handleProblemsPerPageChange(count)}
-                          className={css({
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '3',
-                            px: '3',
-                            py: '2',
-                            rounded: 'md',
-                            cursor: 'pointer',
-                            outline: 'none',
-                            bg: isSelected ? (isDark ? 'brand.900' : 'brand.50') : 'transparent',
-                            _hover: {
-                              bg: isDark ? 'brand.900' : 'brand.50',
-                            },
-                            _focus: {
-                              bg: isDark ? 'brand.800' : 'brand.100',
-                            },
-                          })}
+                          className={
+                            isDark
+                              ? css({
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '3',
+                                  px: '3',
+                                  py: '2',
+                                  rounded: 'md',
+                                  cursor: 'pointer',
+                                  outline: 'none',
+                                  bg: isSelected ? 'brand.900' : 'transparent',
+                                  _hover: {
+                                    bg: 'brand.900',
+                                  },
+                                  _focus: {
+                                    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