root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-4274): finalize tokenized skills/runtime css

Browse Source 
Fusion-Task-Id: FN-4274
Fusion-Task-Lineage: 13806cfa-9911-4084-a439-dc4d91076062
This commit is contained in:
Fusion
2026-05-13 09:12:54 -07:00
committed by gsxdsm
parent e787036b80
commit 60b9ec2651
3 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/dashboard/app/components/SkillsView.css
View File

@@ -1,4 +1,5 @@
/* === Skills View === */
/* font-size values intentionally raw — no --font-size-* tokens defined yet */
.skills-view {
display: flex;
flex-direction: column;
@@ -10,7 +11,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) 20px;
padding: var(--space-lg);
border-bottom: 1px solid var(--border);
background: var(--surface);
flex-wrap: wrap;
@@ -43,7 +44,7 @@
.skills-view-content {
flex: 1;
overflow-y: auto;
padding: 20px;
padding: var(--space-lg);
}
.skills-view-section {
@@ -90,7 +91,7 @@
.skills-view-item-info {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--space-xs);
min-width: 0;
flex: 1;
}
@@ -285,7 +286,7 @@
.skills-view-detail {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--todo);
border-left: var(--space-xs) solid var(--todo);
border-radius: var(--radius-md);
margin: var(--space-sm) 0 var(--space-md) 0;
padding: var(--space-lg);
@@ -460,7 +461,7 @@
.skills-view-detail-content {
font-size: 11px;
max-height: calc(60dvh - 200px);
max-height: calc(60dvh - (var(--space-2xl) * 6 + var(--space-xs)));
-webkit-overflow-scrolling: touch;
}

16
packages/dashboard/app/components/__tests__/SkillsView.css.test.ts Normal file
View File

@@ -0,0 +1,16 @@
import { describe, expect, it } from "vitest";
import { loadAllAppCss } from "../../test/cssFixture";
describe("SkillsView/runtime-card token guardrails", () => {
it("does not use forbidden runtime fallback literals/tokens", async () => {
const css = await loadAllAppCss();
expect(css).not.toContain("var(--accent-green");
expect(css).not.toContain("var(--accent-red");
expect(css).not.toContain("var(--space-xxs");
expect(css).not.toContain("var(--accent-green, #22c55e)");
expect(css).not.toContain("var(--accent-red, #ef4444)");
expect(css).not.toContain("var(--accent, #4f46e5)");
});
});

25
packages/dashboard/app/styles.css
View File

@@ -625,6 +625,7 @@ html .column.drag-over * {
* Runtime provider settings card — unified layout used by Hermes / OpenClaw /
* Paperclip cards. Header (large logo + name + status), description, form,
* footer action row.
* font-size values intentionally raw — no --font-size-* tokens defined yet
* ------------------------------------------------------------------------- */
.runtime-card {
@@ -645,8 +646,8 @@ html .column.drag-over * {
.runtime-card__logo {
flex: 0 0 auto;
width: 44px;
height: 44px;
width: 44px; /* matches mobile touch-target convention from AGENTS.md (no --touch-target token defined) */
height: 44px; /* matches mobile touch-target convention from AGENTS.md (no --touch-target token defined) */
display: inline-flex;
align-items: center;
justify-content: center;
@@ -657,7 +658,7 @@ html .column.drag-over * {
.runtime-card__title {
display: flex;
flex-direction: column;
gap: 2px;
gap: var(--space-xs);
flex: 1;
min-width: 0;
}
@@ -676,11 +677,11 @@ html .column.drag-over * {
}
.runtime-card__status--ok {
color: var(--accent-green, #22c55e);
color: var(--color-success);
}
.runtime-card__status--err {
color: var(--accent-red, #ef4444);
color: var(--color-error);
}
.runtime-card__status--neutral {
@@ -710,7 +711,7 @@ html .column.drag-over * {
.runtime-card__tabs {
display: flex;
gap: var(--space-xxs, 2px);
gap: var(--space-xs);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-sm);
}
@@ -734,7 +735,7 @@ html .column.drag-over * {
.runtime-card__tab[aria-selected="true"] {
color: var(--text);
border-bottom-color: var(--accent, #4f46e5);
border-bottom-color: var(--accent);
}
.runtime-card__footer {
@@ -756,13 +757,13 @@ html .column.drag-over * {
}
.runtime-card__toast--ok {
background: color-mix(in srgb, var(--accent-green, #22c55e) 12%, transparent);
color: var(--accent-green, #22c55e);
background: color-mix(in srgb, var(--color-success) 12%, transparent);
color: var(--color-success);
}
.runtime-card__toast--err {
background: color-mix(in srgb, var(--accent-red, #ef4444) 12%, transparent);
color: var(--accent-red, #ef4444);
background: color-mix(in srgb, var(--color-error) 12%, transparent);
color: var(--color-error);
}
.runtime-card__cobrand {
@@ -771,7 +772,7 @@ html .column.drag-over * {
gap: var(--space-xs);
font-size: 0.75rem;
color: var(--text-muted);
margin-top: var(--space-xxs, 2px);
margin-top: var(--space-xs);
}
.runtime-card__cobrand-mark {