From 128d339f3276a363f6c7484323f95ea6654eeadc Mon Sep 17 00:00:00 2001
From: Vincent <13386908+vinnyNC@users.noreply.github.com>
Date: Sun, 28 Sep 2025 23:23:39 -0400
Subject: [PATCH] Refactor color utility classes - added text and background
 color utilities for primary, secondary, muted, accent, error, and success
 states

---
 static/css/utilities.css | 72 ++++++++++++++++++++--------------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/static/css/utilities.css b/static/css/utilities.css
index 1f9c520..2df17a7 100644
--- a/static/css/utilities.css
+++ b/static/css/utilities.css
@@ -253,63 +253,63 @@
 }
 
 /* =================================================================
-   BORDER UTILITIES
+   COLOR UTILITY CLASSES
    ================================================================= */
 
-.rounded {
-    border-radius: var(--border-radius-base);
+.text-primary {
+    color: var(--text-primary);
 }
 
-.rounded-full {
-    border-radius: var(--border-radius-full);
+.text-secondary {
+    color: var(--text-secondary);
+}
+
+.text-muted {
+    color: var(--text-muted);
+}
+
+.text-accent {
+    color: var(--dodgers-gold-500);
+}
+
+.text-error {
+    color: var(--dodgers-red-500);
+}
+
+.text-success {
+    color: var(--dodgers-blue-500);
 }
 
 /* =================================================================
-   TRANSITIONS UTILITIES
+   BG-NEUTRAL UTILITIES
    ================================================================= */
 
-.transition {
-    transition: all var(--transition-base);
+.bg-white {
+    background-color: white;
 }
 
-.transition-fast {
-    transition: all var(--transition-fast);
+.bg-black {
+    background-color: black;
 }
 
-.transition-slow {
-    transition: all var(--transition-slow);
+.bg-gray-50 {
+    background-color: var(--gray-50);
 }
 
-/* =================================================================
-   RESPONSIVE UTILITIES
-   ================================================================= */
-
-/* Hide elements at different breakpoints */
-@media (max-width: 767px) {
-    .hidden-mobile {
-        display: none !important;
-    }
+.bg-gray-100 {
+    background-color: var(--gray-100);
 }
 
-@media (min-width: 768px) {
-    .hidden-tablet {
-        display: none !important;
-    }
+.bg-gray-200 {
+    background-color: var(--gray-200);
 }
 
-@media (max-width: 1023px) {
-    .hidden-tablet-up {
-        display: none !important;
-    }
+.bg-gray-800 {
+    background-color: var(--gray-800);
 }
 
-@media (min-width: 1024px) {
-    .hidden-desktop {
-        display: none !important;
-    }
-}
-
-/* =================================================================
+.bg-gray-900 {
+    background-color: var(--gray-900);
    MOBILE RESPONSIVE OVERRIDES
    ================================================================= */