From d0acb1c7e5c4db00e54db68f3225d10f6b1e30ec Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Fri, 6 Feb 2026 09:09:58 -0800
Subject: [PATCH] [WV2] Use variables for colors

---
 app/assets/stylesheets/wardrobe/show.css | 54 +++++++++++++-----------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/app/assets/stylesheets/wardrobe/show.css b/app/assets/stylesheets/wardrobe/show.css
index fcf158ba..64cfbf60 100644
--- a/app/assets/stylesheets/wardrobe/show.css
+++ b/app/assets/stylesheets/wardrobe/show.css
@@ -15,19 +15,19 @@ select,
   border-radius: 0.375rem;
   border: 1px solid #ddd;
   background: white;
-  color: #448844;
+  color: var(--color-primary);
   cursor: pointer;
   transition: all 0.2s;
 
   &:hover {
     background: #f9f9f9;
-    border-color: #448844;
+    border-color: var(--color-primary);
   }
 
   &:focus {
     outline: none;
-    border-color: #448844;
-    box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-primary-muted);
   }
 }
 
@@ -60,12 +60,12 @@ select,
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
   border: none;
-  background: #448844;
+  background: var(--color-primary);
   color: white;
   font-weight: 500;
 
   &:hover {
-    background: #357535;
+    background: var(--color-primary-hover);
   }
 
   &:focus {
@@ -110,7 +110,7 @@ select,
 
   &:focus {
     opacity: 1;
-    outline: 2px solid #448844;
+    outline: 2px solid var(--color-primary);
     outline-offset: 2px;
   }
 }
@@ -238,26 +238,26 @@ select,
     border-radius: 4px;
     border: 1px solid #ddd;
     background: white;
-    color: #448844;
+    color: var(--color-primary);
     text-decoration: none;
     transition: all 0.2s;
 
     &:hover {
       background: #f9f9f9;
-      border-color: #448844;
+      border-color: var(--color-primary);
     }
   }
 
   .current,
   em {
-    background: #448844;
+    background: var(--color-primary);
     color: white;
-    border-color: #448844;
+    border-color: var(--color-primary);
     font-style: normal;
 
     &:hover {
-      background: #448844;
-      border-color: #448844;
+      background: var(--color-primary);
+      border-color: var(--color-primary);
     }
   }
 
@@ -279,6 +279,12 @@ select,
    =================================================================== */
 
 body.wardrobe-v2 {
+  --color-primary: #448844;
+  --color-primary-hover: #357535;
+  --color-primary-muted: rgba(68, 136, 68, 0.1);
+  --color-accent: #48BB78;
+  --color-accent-glow: rgba(72, 187, 120, 0.4);
+
   margin: 0;
   padding: 0;
   height: 100vh;
@@ -595,8 +601,8 @@ pose-picker-popover {
 
     /* Selected state */
     input[type="radio"]:checked + .pose-thumbnail {
-      border-color: #48BB78;
-      box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.4);
+      border-color: var(--color-accent);
+      box-shadow: 0 0 0 3px var(--color-accent-glow);
       transform: scale(1.05);
     }
 
@@ -748,7 +754,7 @@ pose-picker-popover {
 
     /* Selected state */
     input[type="radio"]:checked + .style-option-content {
-      border-color: #48BB78;
+      border-color: var(--color-accent);
       box-shadow: 0 0 0 2px rgba(72, 187, 120, 0.3);
       background: rgba(72, 187, 120, 0.1);
     }
@@ -790,7 +796,7 @@ pose-picker-popover {
 
   h2 {
     font-size: 1.25rem;
-    color: #448844;
+    color: var(--color-primary);
     margin-top: 2rem;
   }
 
@@ -848,8 +854,8 @@ pose-picker-popover {
 
       &:focus {
         outline: none;
-        border-color: #448844;
-        box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px var(--color-primary-muted);
       }
     }
   }
@@ -923,7 +929,7 @@ pose-picker-popover {
   min-width: 0;
   font-size: 1.5rem;
   font-weight: bold;
-  color: #448844;
+  color: var(--color-primary);
   border: 1px solid transparent;
   border-radius: 6px;
   padding: 0.25rem 0.5rem;
@@ -937,9 +943,9 @@ pose-picker-popover {
 
   &:focus {
     outline: none;
-    border-color: #448844;
+    border-color: var(--color-primary);
     background: white;
-    box-shadow: 0 0 0 3px rgba(68, 136, 68, 0.1);
+    box-shadow: 0 0 0 3px var(--color-primary-muted);
   }
 
   &::placeholder {
@@ -963,7 +969,7 @@ pose-picker-popover {
 .outfit-name-static {
   font-size: 1.5rem;
   font-weight: bold;
-  color: #448844;
+  color: var(--color-primary);
   padding: 0.25rem 0.5rem;
   flex: 1;
   min-width: 0;
@@ -996,7 +1002,7 @@ outfit-rename-field[editing] .outfit-name-form {
 .outfit-rename-name {
   font-size: 1.5rem;
   font-weight: bold;
-  color: #448844;
+  color: var(--color-primary);
   padding: 0.25rem 0.5rem;
   overflow: hidden;
   text-overflow: ellipsis;