From 34a377d91b37ad47968b85aedd112f9fcf72ad63 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sat, 18 Oct 2025 19:03:16 -0500
Subject: [PATCH] docs(arcade): fix incorrect Tailwind references - use Panda
 CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Corrected documentation and comments that incorrectly referenced
Tailwind CSS. This project uses Panda CSS for styling.

Fixed in:
- `/src/lib/arcade/game-themes.ts` - Updated all comments
- `.claude/GAME_THEMES.md` - Fixed documentation references

The color system uses Panda CSS's preset colors (blue.100, blue.200, etc.)
not Tailwind. The hex values are the same, but we should be accurate
about which framework we're using.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/.claude/GAME_THEMES.md        |  4 ++--
 apps/web/src/lib/arcade/game-themes.ts | 24 ++++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/web/.claude/GAME_THEMES.md b/apps/web/.claude/GAME_THEMES.md
index 7101f1bd..98ebda84 100644
--- a/apps/web/.claude/GAME_THEMES.md
+++ b/apps/web/.claude/GAME_THEMES.md
@@ -47,7 +47,7 @@ That's it! The theme automatically provides:
 
 ## Available Themes
 
-All themes use Tailwind's 100-200 color range for soft pastel appearance:
+All themes use Panda CSS's 100-200 color range for soft pastel appearance:
 
 | Theme | Color Range | Use Case |
 |-------|-------------|----------|
@@ -119,7 +119,7 @@ export const GAME_THEMES = {
   // ... existing themes
   mycolor: {
     color: 'mycolor',
-    gradient: 'linear-gradient(135deg, #lighter, #darker)', // Use Tailwind 100-200
+    gradient: 'linear-gradient(135deg, #lighter, #darker)', // Use Panda CSS 100-200 range
     borderColor: 'mycolor.200',
   },
 } as const satisfies Record<string, GameTheme>
diff --git a/apps/web/src/lib/arcade/game-themes.ts b/apps/web/src/lib/arcade/game-themes.ts
index a370dc4e..2f465faa 100644
--- a/apps/web/src/lib/arcade/game-themes.ts
+++ b/apps/web/src/lib/arcade/game-themes.ts
@@ -4,7 +4,7 @@
  * Use these presets to ensure consistent, professional appearance
  * across all game cards on the /arcade game chooser.
  *
- * All gradients use Tailwind's 100-200 color range for soft pastel appearance.
+ * All gradients use Panda CSS's 100-200 color range for soft pastel appearance.
  */
 
 export interface GameTheme {
@@ -15,57 +15,57 @@ export interface GameTheme {
 
 /**
  * Standard theme presets
- * These match Tailwind's color system and provide consistent styling
+ * These use Panda CSS's color system and provide consistent styling
  */
 export const GAME_THEMES = {
   blue: {
     color: 'blue',
-    gradient: 'linear-gradient(135deg, #dbeafe, #bfdbfe)', // blue-100 to blue-200
+    gradient: 'linear-gradient(135deg, #dbeafe, #bfdbfe)', // blue.100 to blue.200
     borderColor: 'blue.200',
   },
   purple: {
     color: 'purple',
-    gradient: 'linear-gradient(135deg, #e9d5ff, #ddd6fe)', // purple-100 to purple-200
+    gradient: 'linear-gradient(135deg, #e9d5ff, #ddd6fe)', // purple.100 to purple.200
     borderColor: 'purple.200',
   },
   green: {
     color: 'green',
-    gradient: 'linear-gradient(135deg, #d1fae5, #a7f3d0)', // green-100 to green-200
+    gradient: 'linear-gradient(135deg, #d1fae5, #a7f3d0)', // green.100 to green.200
     borderColor: 'green.200',
   },
   teal: {
     color: 'teal',
-    gradient: 'linear-gradient(135deg, #ccfbf1, #99f6e4)', // teal-100 to teal-200
+    gradient: 'linear-gradient(135deg, #ccfbf1, #99f6e4)', // teal.100 to teal.200
     borderColor: 'teal.200',
   },
   indigo: {
     color: 'indigo',
-    gradient: 'linear-gradient(135deg, #e0e7ff, #c7d2fe)', // indigo-100 to indigo-200
+    gradient: 'linear-gradient(135deg, #e0e7ff, #c7d2fe)', // indigo.100 to indigo.200
     borderColor: 'indigo.200',
   },
   pink: {
     color: 'pink',
-    gradient: 'linear-gradient(135deg, #fce7f3, #fbcfe8)', // pink-100 to pink-200
+    gradient: 'linear-gradient(135deg, #fce7f3, #fbcfe8)', // pink.100 to pink.200
     borderColor: 'pink.200',
   },
   orange: {
     color: 'orange',
-    gradient: 'linear-gradient(135deg, #ffedd5, #fed7aa)', // orange-100 to orange-200
+    gradient: 'linear-gradient(135deg, #ffedd5, #fed7aa)', // orange.100 to orange.200
     borderColor: 'orange.200',
   },
   yellow: {
     color: 'yellow',
-    gradient: 'linear-gradient(135deg, #fef3c7, #fde68a)', // yellow-100 to yellow-200
+    gradient: 'linear-gradient(135deg, #fef3c7, #fde68a)', // yellow.100 to yellow.200
     borderColor: 'yellow.200',
   },
   red: {
     color: 'red',
-    gradient: 'linear-gradient(135deg, #fee2e2, #fecaca)', // red-100 to red-200
+    gradient: 'linear-gradient(135deg, #fee2e2, #fecaca)', // red.100 to red.200
     borderColor: 'red.200',
   },
   gray: {
     color: 'gray',
-    gradient: 'linear-gradient(135deg, #f3f4f6, #e5e7eb)', // gray-100 to gray-200
+    gradient: 'linear-gradient(135deg, #f3f4f6, #e5e7eb)', // gray.100 to gray.200
     borderColor: 'gray.200',
   },
 } as const satisfies Record<string, GameTheme>