From bf8b784aca94ddfbd2c562d1f6ad0b8a32966b29 Mon Sep 17 00:00:00 2001
From: Kaleb Sitton <kalebsitton@gmail.com>
Date: Wed, 10 Jun 2026 11:49:47 -0500
Subject: [PATCH] refactor(ui): use design tokens instead of hardcoded colors
 on new login page

The new Tailwind login page hardcoded hex color values that exactly
duplicate the design tokens defined in components/tailwind.css. Swap them
for the corresponding var(--color-*) tokens so the page stays in sync with
the design system if the palette changes. The token values are identical to
the previously hardcoded hex, so there is no visual change.

The control-label color (#333333) and the alpha-channel rgba() shadows are
left as-is since they have no exact token equivalent.
---
 dojo/templates/dojo/login.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/dojo/templates/dojo/login.html b/dojo/templates/dojo/login.html
index 3e7d8c9a23d..d19e930fdf1 100644
--- a/dojo/templates/dojo/login.html
+++ b/dojo/templates/dojo/login.html
@@ -11,12 +11,12 @@
         align-items: center;
         justify-content: center;
         padding: 2rem 1rem;
-        background: linear-gradient(135deg, #e8f3fb 0%, #f7f8f9 50%, #fff 100%);
+        background: linear-gradient(135deg, var(--color-dd-primary-50) 0%, var(--color-surface-2) 50%, var(--color-surface) 100%);
     }
     .login-card {
         width: 100%;
         max-width: 26rem;
-        background: white;
+        background: var(--color-surface);
         border-radius: 0.75rem;
         box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 10px 15px -3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
         padding: 2.5rem 2rem;
@@ -33,14 +33,14 @@
         text-align: center;
         font-size: 1.375rem;
         font-weight: 600;
-        color: #191919;
+        color: var(--color-text);
         margin-bottom: 0.25rem;
         letter-spacing: -0.01em;
     }
     .login-card .login-subtitle {
         text-align: center;
         font-size: 0.875rem;
-        color: #666666;
+        color: var(--color-text-muted);
         margin-bottom: 1.75rem;
     }
     .login-card .form-group {
@@ -55,12 +55,12 @@
     .login-card .form-control {
         height: 2.75rem;
         font-size: 0.9375rem;
-        border-color: #DCDCDC;
+        border-color: var(--color-border);
         border-radius: 0.5rem;
         transition: border-color 150ms, box-shadow 150ms;
     }
     .login-card .form-control:focus {
-        border-color: #1779C5;
+        border-color: var(--color-dd-primary-500);
         box-shadow: 0 0 0 3px rgba(23, 121, 197, 0.12);
     }
     .login-btn {
@@ -69,13 +69,13 @@
         font-size: 0.9375rem;
         font-weight: 600;
         border-radius: 0.5rem;
-        background: #1779C5;
+        background: var(--color-dd-primary-500);
         color: white;
         border: none;
         transition: background-color 150ms, transform 100ms, box-shadow 150ms;
     }
     .login-btn:hover {
-        background: #204D87;
+        background: var(--color-dd-primary-700);
         box-shadow: 0 2px 8px rgba(0, 56, 100, 0.2);
     }
     .login-btn:active {
@@ -89,11 +89,11 @@
         font-size: 0.8125rem;
     }
     .login-links a {
-        color: #1779C5;
+        color: var(--color-dd-primary-500);
         font-weight: 500;
     }
     .login-links a:hover {
-        color: #204D87;
+        color: var(--color-dd-primary-700);
         text-decoration: underline;
     }
 {% endblock %}