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",
|
"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\(/);
|
||||||
|
|||||||
@@ -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 */
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user