From 852a3af8543280520c4c2b905f2a695302c790d7 Mon Sep 17 00:00:00 2001
From: michael <operations@dangerousthings.com>
Date: Wed, 4 Mar 2026 10:34:31 -0800
Subject: [PATCH] Fix hardcoded colors in classic tokens and form components

Replace hardcoded hex/opacity values with CSS custom properties for
proper theming support across brands.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/tokens/src/brands/classic.ts    | 2 +-
 packages/web/src/components/forms-dt.css | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/tokens/src/brands/classic.ts b/packages/tokens/src/brands/classic.ts
index 0c78530..8b8f4db 100644
--- a/packages/tokens/src/brands/classic.ts
+++ b/packages/tokens/src/brands/classic.ts
@@ -40,7 +40,7 @@ export const classic: BrandTokens = {
     primary: "#0891b2",
     primaryDim: "#0e7490",
     secondary: "#c026d3",
-    accent: "#00ff88",
+    accent: "#059669",
     other: "#c026d3",
 
     success: "#16a34a",
diff --git a/packages/web/src/components/forms-dt.css b/packages/web/src/components/forms-dt.css
index 2c35547..dea8897 100644
--- a/packages/web/src/components/forms-dt.css
+++ b/packages/web/src/components/forms-dt.css
@@ -124,7 +124,7 @@
   left: 3px;
   width: 20px;
   height: 20px;
-  background: #ffffff;
+  background: var(--color-text-primary);
   transition: left var(--transition-fast);
 }
 
@@ -192,7 +192,7 @@
 .dt-progress {
   width: 100%;
   height: 4px;
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(var(--color-primary-rgb), 0.1);
   border-radius: 0;
   overflow: hidden;
 }
@@ -253,7 +253,7 @@
 }
 
 .dt-accordion-header:hover {
-  opacity: 0.7;
+  background: var(--color-surface-hover);
 }
 
 .dt-accordion-header[aria-expanded="true"] {
@@ -312,7 +312,7 @@
 }
 
 .dt-stepper-btn:hover {
-  opacity: 0.7;
+  background: rgba(var(--color-primary-rgb), 0.1);
 }
 
 .dt-stepper-btn:disabled {