58f758842b
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
93 lines
7.1 KiB
TypeScript
93 lines
7.1 KiB
TypeScript
import { Monitor, Moon, Sun, type LucideIcon } from "lucide-react";
|
|
import type { ColorTheme, ThemeMode } from "@fusion/core";
|
|
|
|
/*
|
|
FNXC:Theme 2026-06-19-12:00:
|
|
The Settings theme grid and Command Center theme dropdown must share one source of truth for theme labels and swatch classes so color-chip affordances stay synchronized across both theme selectors.
|
|
*/
|
|
export const THEME_MODES: { value: ThemeMode; label: string; icon: LucideIcon }[] = [
|
|
{ value: "light", label: "Light", icon: Sun },
|
|
{ value: "dark", label: "Dark", icon: Moon },
|
|
{ value: "system", label: "System", icon: Monitor },
|
|
];
|
|
|
|
export const COLOR_THEMES: { value: ColorTheme; label: string; className: string }[] = [
|
|
{ value: "default", label: "Default", className: "theme-swatch-default" },
|
|
{ value: "ocean", label: "Ocean", className: "theme-swatch-ocean" },
|
|
{ value: "forest", label: "Forest", className: "theme-swatch-forest" },
|
|
{ value: "sunset", label: "Sunset", className: "theme-swatch-sunset" },
|
|
{ value: "zen", label: "Zen", className: "theme-swatch-zen" },
|
|
{ value: "berry", label: "Berry", className: "theme-swatch-berry" },
|
|
{ value: "high-contrast", label: "High Contrast", className: "theme-swatch-high-contrast" },
|
|
{ value: "industrial", label: "Industrial", className: "theme-swatch-industrial" },
|
|
{ value: "monochrome", label: "Mono", className: "theme-swatch-monochrome" },
|
|
{ value: "slate", label: "Slate", className: "theme-swatch-slate" },
|
|
{ value: "ash", label: "Ash", className: "theme-swatch-ash" },
|
|
{ value: "air", label: "Air", className: "theme-swatch-air" },
|
|
{ value: "graphite", label: "Graphite", className: "theme-swatch-graphite" },
|
|
{ value: "silver", label: "Silver", className: "theme-swatch-silver" },
|
|
{ value: "solarized", label: "Solarized", className: "theme-swatch-solarized" },
|
|
{ value: "factory", label: "Factory", className: "theme-swatch-factory" },
|
|
{ value: "factory-mono", label: "Factory Mono", className: "theme-swatch-factory-mono" },
|
|
{ value: "ayu", label: "Ayu", className: "theme-swatch-ayu" },
|
|
{ value: "one-dark", label: "One Dark", className: "theme-swatch-one-dark" },
|
|
{ value: "nord", label: "Nord", className: "theme-swatch-nord" },
|
|
{ value: "dracula", label: "Dracula", className: "theme-swatch-dracula" },
|
|
{ value: "gruvbox", label: "Gruvbox", className: "theme-swatch-gruvbox" },
|
|
{ value: "tokyo-night", label: "Tokyo Night", className: "theme-swatch-tokyo-night" },
|
|
{ value: "catppuccin-mocha", label: "Catppuccin Mocha", className: "theme-swatch-catppuccin-mocha" },
|
|
{ value: "github-dark", label: "GitHub Dark", className: "theme-swatch-github-dark" },
|
|
{ value: "everforest", label: "Everforest", className: "theme-swatch-everforest" },
|
|
{ value: "rose-pine", label: "Rosé Pine", className: "theme-swatch-rose-pine" },
|
|
{ value: "kanagawa", label: "Kanagawa", className: "theme-swatch-kanagawa" },
|
|
{ value: "night-owl", label: "Night Owl", className: "theme-swatch-night-owl" },
|
|
{ value: "palenight", label: "Palenight", className: "theme-swatch-palenight" },
|
|
{ value: "monokai-pro", label: "Monokai Pro", className: "theme-swatch-monokai-pro" },
|
|
{ value: "slime", label: "Slime", className: "theme-swatch-slime" },
|
|
{ value: "brutalist", label: "Brutalist", className: "theme-swatch-brutalist" },
|
|
{ value: "neon-city", label: "Neon City", className: "theme-swatch-neon-city" },
|
|
{ value: "parchment", label: "Parchment", className: "theme-swatch-parchment" },
|
|
{ value: "terminal", label: "Terminal", className: "theme-swatch-terminal" },
|
|
{ value: "glass", label: "Glass", className: "theme-swatch-glass" },
|
|
{ value: "horizon", label: "Horizon", className: "theme-swatch-horizon" },
|
|
{ value: "vitesse", label: "Vitesse", className: "theme-swatch-vitesse" },
|
|
{ value: "outrun", label: "Outrun", className: "theme-swatch-outrun" },
|
|
{ value: "snazzy", label: "Snazzy", className: "theme-swatch-snazzy" },
|
|
{ value: "porple", label: "Porple", className: "theme-swatch-porple" },
|
|
{ value: "espresso", label: "Espresso", className: "theme-swatch-espresso" },
|
|
{ value: "mars", label: "Mars", className: "theme-swatch-mars" },
|
|
{ value: "poimandres", label: "Poimandres", className: "theme-swatch-poimandres" },
|
|
{ value: "ember", label: "Ember", className: "theme-swatch-ember" },
|
|
{ value: "rust", label: "Rust", className: "theme-swatch-rust" },
|
|
{ value: "copper", label: "Copper", className: "theme-swatch-copper" },
|
|
{ value: "foundry", label: "Foundry", className: "theme-swatch-foundry" },
|
|
{ value: "carbon", label: "Carbon", className: "theme-swatch-carbon" },
|
|
{ value: "sandstone", label: "Sandstone", className: "theme-swatch-sandstone" },
|
|
{ value: "lagoon", label: "Lagoon", className: "theme-swatch-lagoon" },
|
|
{ value: "frost", label: "Frost", className: "theme-swatch-frost" },
|
|
{ value: "lavender", label: "Lavender", className: "theme-swatch-lavender" },
|
|
{ value: "neon-bloom", label: "Neon Bloom", className: "theme-swatch-neon-bloom" },
|
|
{ value: "sepia", label: "Sepia", className: "theme-swatch-sepia" },
|
|
{ value: "shadcn", label: "Shadcn", className: "theme-swatch-shadcn" },
|
|
{ value: "shadcn-custom", label: "Shadcn Custom", className: "theme-swatch-shadcn-custom" },
|
|
{ value: "shadcn-blue", label: "Shadcn Blue", className: "theme-swatch-shadcn-blue" },
|
|
{ value: "shadcn-green", label: "Shadcn Green", className: "theme-swatch-shadcn-green" },
|
|
{ value: "shadcn-red", label: "Shadcn Red", className: "theme-swatch-shadcn-red" },
|
|
{ value: "shadcn-purple", label: "Shadcn Purple", className: "theme-swatch-shadcn-purple" },
|
|
{ value: "shadcn-pink", label: "Shadcn Pink", className: "theme-swatch-shadcn-pink" },
|
|
{ value: "shadcn-orange", label: "Shadcn Orange", className: "theme-swatch-shadcn-orange" },
|
|
{ value: "shadcn-yellow", label: "Shadcn Yellow", className: "theme-swatch-shadcn-yellow" },
|
|
{ value: "shadcn-mono-red", label: "Shadcn Mono Red", className: "theme-swatch-shadcn-mono-red" },
|
|
{ value: "shadcn-mono-blue", label: "Shadcn Mono Blue", className: "theme-swatch-shadcn-mono-blue" },
|
|
{ value: "shadcn-mono-green", label: "Shadcn Mono Green", className: "theme-swatch-shadcn-mono-green" },
|
|
{ value: "shadcn-mono-purple", label: "Shadcn Mono Purple", className: "theme-swatch-shadcn-mono-purple" },
|
|
{ value: "shadcn-mono-pink", label: "Shadcn Mono Pink", className: "theme-swatch-shadcn-mono-pink" },
|
|
{ value: "shadcn-mono-orange", label: "Shadcn Mono Orange", className: "theme-swatch-shadcn-mono-orange" },
|
|
{ value: "shadcn-mono-yellow", label: "Shadcn Mono Yellow", className: "theme-swatch-shadcn-mono-yellow" },
|
|
{ value: "shadcn-black", label: "Shadcn Black", className: "theme-swatch-shadcn-black" },
|
|
/* FNXC:DashboardTheming 2026-06-20-00:00: Shadcn Gray is the fully-neutral zinc accent option; keep it adjacent to Shadcn Black so selectors mirror the core COLOR_THEMES order. */
|
|
{ value: "shadcn-gray", label: "Shadcn Gray", className: "theme-swatch-shadcn-gray" },
|
|
/* FNXC:DashboardTheming 2026-06-21-00:00: FN-6815 exposes the slate-neutral Shadcn Gray Blue option next to Shadcn Gray so users can pick a blue-tinted gray surface ramp rather than only a blue accent. */
|
|
{ value: "shadcn-gray-blue", label: "Shadcn Gray Blue", className: "theme-swatch-shadcn-gray-blue" },
|
|
];
|