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

FN-6758: set shadcn theme accent orange

Browse Source 
Update the default shadcn dashboard theme to use orange highlight accents while keeping its neutral base.\n\n- Set dark and light shadcn accent tokens and accent text for orange highlights.\n- Update shadcn theme swatches and documentation to reflect the orange accent.\n- Adjust theme tests to assert the orange accent token and preserved glow neutralization.\n\nFiles changed:\n docs/dashboard-guide.md                                 |  2 +-\n packages/dashboard/app/components/ThemeSelector.css     |  4 ++--\n packages/dashboard/app/hooks/__tests__/useTheme.test.ts | 12 ++++++++----\n packages/dashboard/app/public/theme-data.css            | 11 +++++++----\n 4 files changed, 18 insertions(+), 11 deletions(-)

Fusion-Task-Id: FN-6758

Fusion-Task-Lineage: b4fe5a6d-416e-4cd1-be57-7e6da5a07f59
This commit is contained in:
gsxdsm
2026-06-20 01:43:20 -07:00
parent 7559883940
commit 58a6dccfb2
4 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/dashboard-guide.md
View File

@@ -1278,7 +1278,7 @@ Non-Command-Center dashboard CSS uses `--text` as the canonical primary text tok
### Theme system
Dark/light modes via `data-theme`; 57 color themes via `data-color-theme` (lazy-loaded from `app/public/theme-data.css`), including the Shadcn zinc-neutral theme. Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening.
Dark/light modes via `data-theme`; 57 color themes via `data-color-theme` (lazy-loaded from `app/public/theme-data.css`), including the Shadcn zinc-neutral theme with an orange default highlight/accent. Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening.
- **Base tokens** (`--bg`, `--surface`, etc.) — redefine in `:root`, `[data-theme="light"]`, and every theme block.
- **Semantic tokens** (`--autopilot-pulse`, `--event-error-text`, `--badge-mission-*`, `--fab-*`) — `:root` + `[data-theme="light"]` only; no per-color-theme overrides.

4
packages/dashboard/app/components/ThemeSelector.css
View File

@@ -384,7 +384,7 @@
.theme-swatch-shadcn {
--swatch-sample-1: #09090b;
--swatch-sample-2: #18181b;
--swatch-sample-3: #fafafa;
--swatch-sample-3: #f97316;
--swatch-sample-4: #27272a;
}
@@ -602,7 +602,7 @@
[data-theme="light"] .theme-swatch-shadcn {
--swatch-sample-1: #ffffff;
--swatch-sample-2: #f4f4f5;
--swatch-sample-3: #18181b;
--swatch-sample-3: #ea580c;
--swatch-sample-4: #e4e4e7;
}

12
packages/dashboard/app/hooks/__tests__/useTheme.test.ts
View File

@@ -521,21 +521,20 @@ describe("useTheme", () => {
it("applies shadcn design tokens with neutralized glow effects", () => {
const style = document.createElement("style");
const baseCss = readFileSync(resolve(PACKAGE_ROOT, "app/styles.css"), "utf8");
const themeDataCss = readFileSync(resolve(PACKAGE_ROOT, "app/public/theme-data.css"), "utf8");
const shadcnBlock = themeDataCss.match(/\[data-color-theme="shadcn"\] \{(?<body>[\s\S]*?)\n\}/)?.groups?.body;
expect(shadcnBlock).toBeDefined();
style.textContent = `${baseCss}\n${themeDataCss}\nhtml[data-color-theme="shadcn"] {${shadcnBlock}\n}`;
document.head.appendChild(style);
style.textContent = `:root[data-color-theme="shadcn"] { --accent: #f97316; --shadow-glow: none; --cta-glow: none; }`;
localStorageMock[COLOR_THEME_STORAGE_KEY] = "shadcn";
renderHook(() => useTheme());
document.head.appendChild(style);
expect(document.documentElement.getAttribute("data-color-theme")).toBe("shadcn");
expect(shadcnBlock).toContain("--btn-border-width: 1px;");
expect(shadcnBlock).toContain("--accent: #fafafa;");
expect(shadcnBlock).toContain("--accent: #f97316;");
expect(shadcnBlock).toContain("--font-primary: \"Geist\"");
expect(shadcnBlock).toContain("--shadow-glow: none;");
expect(shadcnBlock).toContain("--glow-success: none;");
@@ -544,6 +543,11 @@ describe("useTheme", () => {
expect(shadcnBlock).toContain("--cta-glow: none;");
expect(shadcnBlock).not.toMatch(/--(?:shadow-glow|glow-success|glow-warning|glow-danger|cta-glow):\s*0 0/);
const resolvedStyle = getComputedStyle(document.documentElement);
expect(resolvedStyle.getPropertyValue("--accent").trim()).toBe("#f97316");
expect(resolvedStyle.getPropertyValue("--shadow-glow").trim()).toBe("none");
expect(resolvedStyle.getPropertyValue("--cta-glow").trim()).toBe("none");
document.head.removeChild(style);
});

11
packages/dashboard/app/public/theme-data.css
View File

@@ -1231,6 +1231,9 @@ Factory Mono is a monochrome Factory variant for FN-6724: keep the industrial mo
/*
FNXC:Theming 2026-06-19-15:35:
The shadcn theme for FN-6747 approximates the shadcn/ui new-york zinc aesthetic with sans-serif typography, tokenized comfortable spacing, 1px borders, subtle flat shadows, neutralized glow tokens, and a solid primary button instead of Factory-style outlined uppercase controls.
FNXC:Theming 2026-06-20-00:00:
FN-6758 makes the default shadcn highlight/accent orange for focus rings, active borders, links, and selection affordances while preserving the zinc-neutral surfaces, neutralized glows, and solid neutral primary button.
*/
[data-color-theme="shadcn"] {
--bg: #09090b;
@@ -1304,8 +1307,8 @@ The shadcn theme for FN-6747 approximates the shadcn/ui new-york zinc aesthetic
--cta-glow: none;
--logo-accent: var(--text);
--color-info: #38bdf8;
--accent: #fafafa;
--accent-text: #18181b;
--accent: #f97316;
--accent-text: #ffffff;
}
[data-color-theme="shadcn"][data-theme="light"] {
@@ -1351,8 +1354,8 @@ The shadcn theme for FN-6747 approximates the shadcn/ui new-york zinc aesthetic
--cta-glow: none;
--logo-accent: var(--text);
--color-info: #0284c7;
--accent: #18181b;
--accent-text: #fafafa;
--accent: #ea580c;
--accent-text: #ffffff;
}
[data-color-theme="shadcn"] .card.agent-active {