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

FN-7401: add Glass Silver dashboard theme

Browse Source 
Adds a frosted silver/gray dashboard color theme across app, desktop, and release metadata.

- Register glass-silver in shared theme types, selector options, and startup validation hooks.
- Add Glass Silver CSS tokens, swatch styling, and dashboard/desktop stylesheet preload coverage.
- Cover theme registration, dropdown/selector rendering, theme persistence, and CSS token invariants with tests.
- Document the new dashboard theme and publish a minor changeset for @runfusion/fusion.

Files changed:
 .changeset/fn-7401-glass-silver-theme.md           |   7 +
 docs/dashboard-guide.md                            |   3 +-
 packages/core/src/types.ts                         |   2 +
 .../app/__tests__/glass-silver-theme.test.ts       | 155 ++++++++++++++++++++
 .../dashboard/app/components/ThemeSelector.css     |  14 ++
 .../components/__tests__/ThemeDropdown.test.tsx    |  13 ++
 .../components/__tests__/ThemeSelector.test.tsx    |  16 +++
 packages/dashboard/app/components/themeOptions.ts  |   1 +
 .../dashboard/app/hooks/__tests__/useTheme.test.ts |  15 ++
 packages/dashboard/app/index.html                  |   2 +-
 packages/dashboard/app/public/theme-data.css       | 156 +++++++++++++++++++++
 packages/desktop/src/renderer/index.html           |   1 +
 12 files changed, 383 insertions(+), 2 deletions(-)

Fusion-Task-Id: FN-7401

Fusion-Task-Lineage: e64f14cc-590e-458b-adf6-7c9baa488157

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-01 18:01:17 -07:00
parent 615431b1fb
commit a4049971e5
12 changed files with 383 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/dashboard-guide.md
View File

@@ -1584,8 +1584,9 @@ Non-Command-Center dashboard CSS uses `--text` as the canonical primary text tok
### Theme system
<!-- FNXC:DashboardTheming 2026-06-21-00:00: FN-6840 synced the user-facing theme docs to the shipped expanded Shadcn family, the Shadcn Custom color-picker preset, and the sidebar accent behavior that follows each theme's --accent token. -->
<!-- FNXC:DashboardTheming 2026-07-01-00:00: Glass Silver is the silver/gray frosted sibling of Glass and is selectable anywhere color themes are listed, so keep the inventory count and theme description in this guide aligned with COLOR_THEMES. -->
Dark/light modes via `data-theme`; 75 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, Shadcn Custom (the same base with sanitized per-token color-picker overrides), and its color family: Shadcn Blue/Green/Red/Purple/Pink/Orange/Yellow, Shadcn Mono Red/Blue/Green/Purple/Pink/Orange/Yellow (grayscale surfaces with color-specific accents; legacy `shadcn-mono` selections migrate to Shadcn Mono Red), Shadcn Black (pure black and white), Shadcn Gray (fully neutral zinc-gray accent), and Shadcn Gray Blue (blue-gray slate neutral surfaces with a muted slate-blue accent). Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening.
Dark/light modes via `data-theme`; 76 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, Shadcn Custom (the same base with sanitized per-token color-picker overrides), and its color family: Shadcn Blue/Green/Red/Purple/Pink/Orange/Yellow, Shadcn Mono Red/Blue/Green/Purple/Pink/Orange/Yellow (grayscale surfaces with color-specific accents; legacy `shadcn-mono` selections migrate to Shadcn Mono Red), Shadcn Black (pure black and white), Shadcn Gray (fully neutral zinc-gray accent), and Shadcn Gray Blue (blue-gray slate neutral surfaces with a muted slate-blue accent). Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening. Glass Silver preserves the Glass theme's frosted translucent surfaces and transparent modal overlay behavior while using silver and graphite accents instead of purple/pink.
Choose Shadcn variants from **Settings → Appearance** or from the Command Center **Overview** theme card; both selectors use the same `themeOptions.ts` labels and color-chip swatches. The left sidebar active-item highlight and resize accent use the active theme's `--accent`, so they follow the selected Shadcn accent instead of staying fixed blue.