FN-6816: add shadcn custom color picker

Add a Shadcn Custom theme flow for editing and applying sanitized dashboard color tokens.

- Add a lazy-loaded Shadcn color picker modal with token defaults, reset controls, and validation tests.
- Persist sanitized custom color overrides through settings, pre-hydration theme bootstrapping, and Command Center/theme dropdown surfaces.
- Register the Shadcn Custom theme option in core types, schema, docs, theme CSS, and release notes.

Files changed:
 .changeset/fn-6816-shadcn-custom-colors.md         |   5 +
 docs/dashboard-guide.md                            |   2 +-
 docs/settings-reference.md                         |   3 +-
 packages/core/src/settings-schema.ts               |   1 +
 packages/core/src/types.ts                         |   4 +
 packages/dashboard/app/App.tsx                     |   7 +-
 packages/dashboard/app/components/AppModals.tsx    |   6 +
 .../dashboard/app/components/SettingsModal.tsx     |  12 ++
 .../dashboard/app/components/ShadcnColorPicker.css | 101 ++++++++++++++
 .../dashboard/app/components/ShadcnColorPicker.tsx |  95 +++++++++++++
 .../dashboard/app/components/ThemeDropdown.tsx     |  23 +++-
 .../dashboard/app/components/ThemeSelector.css     |  14 ++
 .../dashboard/app/components/ThemeSelector.tsx     |  19 ++-
 .../__tests__/ShadcnColorPicker.test.tsx           |  50 +++++++
 .../components/__tests__/ThemeDropdown.test.tsx    |  19 +++
 .../components/__tests__/ThemeSelector.test.tsx    |  64 +++++++++
 .../__tests__/shadcnCustomColors.test.ts           |  52 ++++++++
 .../components/command-center/CommandCenter.tsx    |  15 +++
 .../command-center/CommandCenterControls.tsx       |   8 +-
 .../settings/sections/AppearanceSection.tsx        |   8 +-
 .../dashboard/app/components/shadcnCustomColors.ts |  80 +++++++++++
 packages/dashboard/app/components/themeOptions.ts  |   1 +
 .../dashboard/app/hooks/__tests__/useTheme.test.ts | 108 +++++++++++++++
 packages/dashboard/app/hooks/useTheme.ts           |  91 ++++++++++++-
 packages/dashboard/app/index.html                  |  19 ++-
 packages/dashboard/app/public/theme-data.css       | 148 ++++++++++++++++++++-
 26 files changed, 938 insertions(+), 17 deletions(-)

Fusion-Task-Id: FN-6816

Fusion-Task-Lineage: f16baaa9-16f5-4526-8159-9a1ceff4f807
This commit is contained in:
gsxdsm
2026-06-21 16:13:54 -07:00
parent ef4889585f
commit 58f758842b
26 changed files with 938 additions and 17 deletions

View File

@@ -32,7 +32,8 @@ Defaults from `DEFAULT_GLOBAL_SETTINGS`; key scope from `GLOBAL_SETTINGS_KEYS`.
| Setting | Type | Default | Description |
|---|---|---:|---|
| `themeMode` | `"dark" \| "light" \| "system"` | `"dark"` | Dashboard theme mode. |
| `colorTheme` | `ColorTheme` | `"default"` | Dashboard color theme preset. |
| `colorTheme` | `ColorTheme` | `"default"` | Dashboard color theme preset. Use `"shadcn-custom"` to show the custom shadcn color picker in Settings → Appearance and the Command Center theme card. |
| `shadcnCustomColors` | `Record<string, string>` | `undefined` | Optional shadcn design-token override map for `"shadcn-custom"` only. Keys are CSS token names such as `--accent`, `--bg`, `--surface`, `--card`, `--border`, `--text`, `--text-muted`, workflow status tokens, and `--color-success`/`--color-warning`/`--color-error`; values must be sanitized `#RGB` or `#RRGGBB` hex colors. Missing or invalid entries fall back to the `shadcn-custom` base defaults and are not applied to other themes. |
| `language` | `"en" \| "zh-CN" \| "zh-TW" \| "fr" \| "es" \| "ko"` | `undefined` | UI language for the dashboard and TUI. When unset, the dashboard detects from localStorage → browser language and the CLI from `--lang` flag → environment locale, falling back to `en`. Validated at the store write boundary (`validateLocale`); invalid values are dropped. Reset to auto-detect via the dashboard's "Auto" language option or `fn settings set language auto` (clears the persisted key). |
| `dashboardFontScalePct` | `number` | `100` | Dashboard font scale percentage used by Appearance settings. Valid range: `85` to `125`; applied pre-hydration via document root font-size so board typography (column headers/counts, task cards, and quick-entry text) scales with the setting from first paint. |
| `defaultProvider` | `string` | `undefined` | Default AI provider. |