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
This commit is contained in:
gsxdsm
2026-06-09 18:49:02 -07:00
parent 4c9d6839bc
commit 477c8f1e03
4 changed files with 29 additions and 4 deletions

View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
Tokenize bare hex colors in ScriptsModal and SettingsSyncLog CSS to use semantic custom properties.

View File

@@ -15,8 +15,16 @@ const cleanedFiles = [
"GitHubImportModal.css", "GitHubImportModal.css",
"WorkspaceSelector.css", "WorkspaceSelector.css",
"AgentReflectionsTab.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", () => { describe("dashboard component color tokenization", () => {
it("keeps audited compliant files free of raw rgba()", () => { it("keeps audited compliant files free of raw rgba()", () => {
for (const file of auditedCompliant) { 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()", () => { it("keeps CustomModelDropdown free of raw rgba()", () => {
const source = readFileSync(resolve(root, "CustomModelDropdown.css"), "utf8"); const source = readFileSync(resolve(root, "CustomModelDropdown.css"), "utf8");
expect(source).not.toMatch(/rgba\(/); expect(source).not.toMatch(/rgba\(/);

View File

@@ -4074,7 +4074,7 @@
.changes-diff-patch .diff-hunk, .changes-diff-patch .diff-hunk,
.gm-diff-patch [data-prefix="@@"], .gm-diff-patch [data-prefix="@@"],
.changes-diff-patch [data-prefix="@@"] { .changes-diff-patch [data-prefix="@@"] {
color: #58a6ff; color: var(--color-info, #58a6ff);
} }
/* Block display for highlighted diff lines */ /* Block display for highlighted diff lines */
@@ -4110,7 +4110,7 @@
[data-theme="light"] .changes-diff-patch .diff-hunk, [data-theme="light"] .changes-diff-patch .diff-hunk,
[data-theme="light"] .gm-diff-patch [data-prefix="@@"], [data-theme="light"] .gm-diff-patch [data-prefix="@@"],
[data-theme="light"] .changes-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 */ /* Light theme changed-files modal overrides */

View File

@@ -112,8 +112,8 @@
} }
.settings-sync-log__badge--conflict { .settings-sync-log__badge--conflict {
background: color-mix(in srgb, #d29922 14%, transparent); background: color-mix(in srgb, var(--color-warning, #d29922) 14%, transparent);
color: #d29922; color: var(--color-warning, #d29922);
} }
.settings-sync-log__badge--error { .settings-sync-log__badge--error {