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:
5
.changeset/fn-6149-css-tokenization.md
Normal file
5
.changeset/fn-6149-css-tokenization.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
Tokenize bare hex colors in ScriptsModal and SettingsSyncLog CSS to use semantic custom properties.
|
||||
@@ -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\(/);
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user