diff --git a/docs/dashboard-guide.md b/docs/dashboard-guide.md index 980afeb232..e350c0d282 100644 --- a/docs/dashboard-guide.md +++ b/docs/dashboard-guide.md @@ -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. diff --git a/packages/dashboard/app/components/ThemeSelector.css b/packages/dashboard/app/components/ThemeSelector.css index 03ff59e6b9..aa8362f214 100644 --- a/packages/dashboard/app/components/ThemeSelector.css +++ b/packages/dashboard/app/components/ThemeSelector.css @@ -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; } diff --git a/packages/dashboard/app/hooks/__tests__/useTheme.test.ts b/packages/dashboard/app/hooks/__tests__/useTheme.test.ts index f334877f33..cac64ebc14 100644 --- a/packages/dashboard/app/hooks/__tests__/useTheme.test.ts +++ b/packages/dashboard/app/hooks/__tests__/useTheme.test.ts @@ -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"\] \{(?[\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); }); diff --git a/packages/dashboard/app/public/theme-data.css b/packages/dashboard/app/public/theme-data.css index 5c21c05036..a5fb639912 100644 --- a/packages/dashboard/app/public/theme-data.css +++ b/packages/dashboard/app/public/theme-data.css @@ -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 {