From c93f3b979fb5987f58ad19027558a2d9f9d60d1d Mon Sep 17 00:00:00 2001
From: Kaleb Sitton <kalebsitton@gmail.com>
Date: Wed, 10 Jun 2026 12:46:22 -0500
Subject: [PATCH] fix(ui): use brand color tokens instead of hardcoded hex in
 new UI

Several new-UI templates hardcoded brand colors that should reference the
design tokens defined in components/tailwind.css:

- calendar.html: active engagement/test events used the legacy Bootstrap
  primary blue (#337ab7) instead of the brand blue.
- benchmark.html: table link color, same legacy #337ab7.
- base.html: sidebar background (#003864) and sub-nav link color (#82B0D9)
  hardcoded the Fuji Blue brand hues.

These now use the matching var(--color-dd-primary-*) tokens (500/900/200).
Token values are identical to the hardcoded hex, so there is no visual change.

Intentionally left as-is:
- The sidebar lighter link color (#C6DDF2): the matching shade
  (dd-primary-100) is not emitted in the compiled CSS, since Tailwind v4 only
  outputs theme variables referenced by a generated utility.
- PDF report templates also contain #337ab7, but CSS custom properties do not
  resolve in the PDF renderer.
- Generic white/black, neutral grays, and the custom #002a4d shade have no
  design token.

FullCalendar 3.10.5 applies the event color verbatim as an inline style, so
the variable resolves at render time. Verified in the running new UI: sidebar
bg = rgb(0,56,100), sub-nav link = rgb(130,176,217), calendar event =
rgb(23,121,197) -- each identical to the hex it replaced.
---
 dojo/templates/base.html           | 4 ++--
 dojo/templates/dojo/benchmark.html | 2 +-
 dojo/templates/dojo/calendar.html  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/dojo/templates/base.html b/dojo/templates/base.html
index cdafff35513..ee172a1f105 100644
--- a/dojo/templates/base.html
+++ b/dojo/templates/base.html
@@ -88,7 +88,7 @@
             #dd-sidebar {
                 scrollbar-width: thin;
                 scrollbar-color: rgba(255,255,255,0.2) transparent;
-                background: #003864;  /* Fuji Blue Hue 04 — deepest brand blue */
+                background: var(--color-dd-primary-900);  /* Fuji Blue Hue 04 — deepest brand blue */
             }
             /* Override dojo.css 'a' color inside sidebar */
             #dd-sidebar a,
@@ -103,7 +103,7 @@
             }
             /* Sub-nav items (inside expandable sections) */
             #dd-sidebar div[x-data] > div a {
-                color: #82B0D9;  /* Fuji Blue Hue 02 — medium light */
+                color: var(--color-dd-primary-200);  /* Fuji Blue Hue 02 — medium light */
                 font-size: 0.875rem;
             }
             #dd-sidebar div[x-data] > div a:hover {
diff --git a/dojo/templates/dojo/benchmark.html b/dojo/templates/dojo/benchmark.html
index b80354c0299..9d65087545a 100644
--- a/dojo/templates/dojo/benchmark.html
+++ b/dojo/templates/dojo/benchmark.html
@@ -381,7 +381,7 @@ <h4 id="modal-title" class="modal-title">{% trans "Benchmark Notes" %}</h4>
     }
 
     td p a {
-        color: #337ab7;
+        color: var(--color-dd-primary-500);
     }
 
     .table>tbody>tr>td,
diff --git a/dojo/templates/dojo/calendar.html b/dojo/templates/dojo/calendar.html
index f7d96cd058e..d76df1125fd 100644
--- a/dojo/templates/dojo/calendar.html
+++ b/dojo/templates/dojo/calendar.html
@@ -60,7 +60,7 @@
                                 start: '{{t.target_start|date:"c"}}',
                                 end: '{{t.target_end|date:"c"}}',
                                 url: '{% url 'view_test' t.id %}',
-                                color: {%  if t.engagement.active %}'#337ab7'{% else %}'#b9b9b9'{% endif %},
+                                color: {%  if t.engagement.active %}'var(--color-dd-primary-500)'{% else %}'#b9b9b9'{% endif %},
                                 overlap: true
                             },
                         {%  endfor %}
@@ -71,7 +71,7 @@
                                 start: '{{e.target_start|date:"c"}}',
                                 end: '{{e.target_end|date:"c"}}',
                                 url: '{% url 'view_engagement' e.id %}',
-                                color: {%  if e.active %}'#337ab7'{% else %}'#b9b9b9'{% endif %},
+                                color: {%  if e.active %}'var(--color-dd-primary-500)'{% else %}'#b9b9b9'{% endif %},
                                 overlap: true
                             },
                         {%  endfor %}