From 477c8f1e03e5402c1534459e3847d01a0dc7521a Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:49:02 -0700
Subject: [PATCH] FN-6149: tokenize bare hex colors in dashboard CSS

Replace hard-coded dashboard hex colors with semantic tokens and guard the cleanup with regression coverage.

- swap bare hex colors in ScriptsModal.css for semantic custom properties
- swap bare hex colors in SettingsSyncLog.css for semantic custom properties
- add regression coverage for bare hex literals outside var() fallbacks in audited dashboard CSS
- add a patch changeset for @runfusion/fusion

Files changed:
 .changeset/fn-6149-css-tokenization.md               |  5 +++++
 .../dashboard-component-color-tokenization.test.ts   | 20 ++++++++++++++++++++
 packages/dashboard/app/components/ScriptsModal.css   |  4 ++--
 .../dashboard/app/components/SettingsSyncLog.css     |  4 ++--
 4 files changed, 29 insertions(+), 4 deletions(-)

Fusion-Task-Id: FN-6149

Fusion-Task-Lineage: 3a3ae466-7e53-484a-8785-c15a7f83aca7
---
 .changeset/fn-6149-css-tokenization.md        |  5 +++++
 ...board-component-color-tokenization.test.ts | 20 +++++++++++++++++++
 .../dashboard/app/components/ScriptsModal.css |  4 ++--
 .../app/components/SettingsSyncLog.css        |  4 ++--
 4 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fn-6149-css-tokenization.md

diff --git a/.changeset/fn-6149-css-tokenization.md b/.changeset/fn-6149-css-tokenization.md
new file mode 100644
index 0000000000..a2590b725f
--- /dev/null
+++ b/.changeset/fn-6149-css-tokenization.md
@@ -0,0 +1,5 @@
+---
+"@runfusion/fusion": patch
+---
+
+Tokenize bare hex colors in ScriptsModal and SettingsSyncLog CSS to use semantic custom properties.
diff --git a/packages/dashboard/app/__tests__/dashboard-component-color-tokenization.test.ts b/packages/dashboard/app/__tests__/dashboard-component-color-tokenization.test.ts
index 877f38174b..5ba455e274 100644
--- a/packages/dashboard/app/__tests__/dashboard-component-color-tokenization.test.ts
+++ b/packages/dashboard/app/__tests__/dashboard-component-color-tokenization.test.ts
@@ -15,8 +15,16 @@ const cleanedFiles = [
   "GitHubImportModal.css",
   "WorkspaceSelector.css",
   "AgentReflectionsTab.css",
+  "SettingsSyncLog.css",
 ];
 
+const bareHexCleanedFiles = ["ScriptsModal.css", "SettingsSyncLog.css"];
+const hexLiteralPattern = /#[0-9a-fA-F]{3,8}\b/;
+
+function stripVarCalls(line: string): string {
+  return line.replace(/var\([^)]*\)/g, "");
+}
+
 describe("dashboard component color tokenization", () => {
   it("keeps audited compliant files free of raw rgba()", () => {
     for (const file of auditedCompliant) {
@@ -32,6 +40,18 @@ describe("dashboard component color tokenization", () => {
     }
   });
 
+  it("keeps cleaned files free of bare hex outside var() fallbacks", () => {
+    for (const file of bareHexCleanedFiles) {
+      const source = readFileSync(resolve(root, file), "utf8");
+      const linesWithBareHex = source
+        .split(/\r?\n/)
+        .map((line, index) => ({ index: index + 1, strippedLine: stripVarCalls(line) }))
+        .filter(({ strippedLine }) => hexLiteralPattern.test(strippedLine));
+
+      expect(linesWithBareHex, `${file} has bare hex colors outside var() fallbacks`).toEqual([]);
+    }
+  });
+
   it("keeps CustomModelDropdown free of raw rgba()", () => {
     const source = readFileSync(resolve(root, "CustomModelDropdown.css"), "utf8");
     expect(source).not.toMatch(/rgba\(/);
diff --git a/packages/dashboard/app/components/ScriptsModal.css b/packages/dashboard/app/components/ScriptsModal.css
index 0daa916c9c..33be4d3ecd 100644
--- a/packages/dashboard/app/components/ScriptsModal.css
+++ b/packages/dashboard/app/components/ScriptsModal.css
@@ -4074,7 +4074,7 @@
 .changes-diff-patch .diff-hunk,
 .gm-diff-patch [data-prefix="@@"],
 .changes-diff-patch [data-prefix="@@"] {
-  color: #58a6ff;
+  color: var(--color-info, #58a6ff);
 }
 
 /* Block display for highlighted diff lines */
@@ -4110,7 +4110,7 @@
 [data-theme="light"] .changes-diff-patch .diff-hunk,
 [data-theme="light"] .gm-diff-patch [data-prefix="@@"],
 [data-theme="light"] .changes-diff-patch [data-prefix="@@"] {
-  color: #0969da;
+  color: var(--color-info, #0969da);
 }
 
 /* Light theme changed-files modal overrides */
diff --git a/packages/dashboard/app/components/SettingsSyncLog.css b/packages/dashboard/app/components/SettingsSyncLog.css
index 33419f51ea..70092fba36 100644
--- a/packages/dashboard/app/components/SettingsSyncLog.css
+++ b/packages/dashboard/app/components/SettingsSyncLog.css
@@ -112,8 +112,8 @@
 }
 
 .settings-sync-log__badge--conflict {
-  background: color-mix(in srgb, #d29922 14%, transparent);
-  color: #d29922;
+  background: color-mix(in srgb, var(--color-warning, #d29922) 14%, transparent);
+  color: var(--color-warning, #d29922);
 }
 
 .settings-sync-log__badge--error {