From 722cb6af0b340139fdf823a5b0f795d45e084248 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 4 Dec 2025 19:47:24 +1000
Subject: [PATCH] fix: add CSS variables for status colors to playground
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added error, warning, success, and info color CSS variables to
playground globals.css so that Badge component variants display
with correct colors. The error variant will now show red as expected.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/playground/src/app/globals.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/apps/playground/src/app/globals.css b/apps/playground/src/app/globals.css
index b5c61c9..13600ad 100644
--- a/apps/playground/src/app/globals.css
+++ b/apps/playground/src/app/globals.css
@@ -1,3 +1,30 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  /* Light mode (default) */
+  :root {
+    /* Status Colors */
+    --error: 0 65% 51%; /* Red */
+    --error-foreground: 0 0% 100%; /* White text */
+    --warning: 36 100% 50%; /* Amber */
+    --warning-foreground: 0 0% 100%;
+    --success: 152 57% 45%; /* Green */
+    --success-foreground: 0 0% 100%;
+    --info: 210 100% 56%; /* Blue */
+    --info-foreground: 0 0% 100%;
+  }
+
+  /* Dark mode */
+  .dark {
+    --error: 0 65% 58%; /* Brighter red for dark mode */
+    --error-foreground: 0 0% 100%;
+    --warning: 36 100% 55%;
+    --warning-foreground: 0 0% 100%;
+    --success: 152 57% 50%;
+    --success-foreground: 0 0% 100%;
+    --info: 210 100% 60%;
+    --info-foreground: 0 0% 100%;
+  }
+}