FN-001: add Velvet dashboard color theme
Add the Velvet plum/burgundy theme across dashboard and desktop startup. - Register Velvet in persisted theme options and pre-hydration validators - Define dark/light palette tokens, selector swatch, and regression coverage - Document the theme and add a minor CLI changeset Files changed: .changeset/fn-001-velvet-theme.md | 6 ++ docs/dashboard-guide.md | 5 +- docs/settings-reference.md | 2 +- packages/core/src/types/ui/execution-and-ui.ts | 2 + .../dashboard/app/__tests__/velvet-theme.test.ts | 101 +++++++++++++++++++++ .../dashboard/app/components/ThemeSelector.css | 14 +++ packages/dashboard/app/components/themeOptions.ts | 1 + packages/dashboard/app/index.html | 2 +- packages/dashboard/app/public/theme-data.css | 86 +++++++++++++++++- packages/desktop/src/renderer/index.html | 1 + 10 files changed, 215 insertions(+), 5 deletions(-) Fusion-Task-Id: FN-001 Fusion-Task-Lineage: a57d7458-b598-48e3-b4ed-cc082f32197d Co-authored-by: Fusion <noreply@runfusion.ai>
This commit is contained in:
Fusion Agent
6
.changeset/fn-001-velvet-theme.md
Normal file
6
.changeset/fn-001-velvet-theme.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@runfusion/fusion": minor
|
||||
---
|
||||
|
||||
summary: Add the Velvet color theme (plum/burgundy dark, blush-white light).
|
||||
category: feature
|
||||
@@ -2185,11 +2185,12 @@ Tokens in the table are stable. Renaming or removing one requires a deprecation
|
||||
<!-- FNXC:DashboardTheming 2026-07-31-23:58: Factory Light is a built-in persisted daylight industrial palette with bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart; keep this inventory and its count synchronized with COLOR_THEMES. -->
|
||||
<!-- FNXC:DashboardTheming 2026-07-31-21:28: Sage is a built-in persisted muted olive palette with soft green-gray surfaces and readable dark and light counterparts; keep this inventory and its count synchronized with COLOR_THEMES. -->
|
||||
<!-- FNXC:MidnightTheme 2026-08-03-02:05: Midnight is selectable and persists from the shared Settings and Command Center list across web and Electron startup; its deep-navy/violet dark palette has a cool pale light counterpart. -->
|
||||
<!-- FNXC:DashboardTheming 2026-08-18-05:45: Velvet is a persisted plum/burgundy palette with rose-gold dark-mode accents and a warm blush-white light counterpart; keep its inventory entry and count synchronized with COLOR_THEMES. -->
|
||||
<!-- FNXC:DashboardTheming 2026-07-21-12:20: FN-8471 keeps the Settings current-theme row and Command Center compact trigger on one filterable shared list so operators can discover any rendered theme name without changing the persisted selection until they choose an option. -->
|
||||
|
||||
Dark/light modes via `data-theme`; fresh installs default to System mode so the resolved theme follows `prefers-color-scheme` until the user explicitly chooses Light, Dark, or System. 88 color themes via `data-color-theme` (lazy-loaded from `app/public/theme-data.css`), including Cobalt (saturated blue), Clay (warm terracotta), Moss (muted forest green), Aurora (navy/teal/violet dark surfaces with a misty blue-white light counterpart), Calm (low-stimulation slate/sage dark surfaces with a misty blue-white light counterpart), Dawn (indigo/plum dark surfaces with muted amber accents and a dawn-white light counterpart), Sage (soft green-gray surfaces with a muted olive accent and readable dark/light ramps), Midnight (deep-navy surfaces with restrained violet/indigo accents and a cool pale light counterpart), Factory Dark (graphite/steel dark surfaces, cool gunmetal borders, and restrained safety-orange accents with a concrete-gray light counterpart), and Factory Light (bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart), 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 and Shadcn Mono Red/Blue/Green/Purple/Pink/Orange/Yellow (grayscale surfaces with color-specific accents; Shadcn Mono retains its selected id), 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.
|
||||
Dark/light modes via `data-theme`; fresh installs default to System mode so the resolved theme follows `prefers-color-scheme` until the user explicitly chooses Light, Dark, or System. 89 color themes via `data-color-theme` (lazy-loaded from `app/public/theme-data.css`), including Cobalt (saturated blue), Clay (warm terracotta), Moss (muted forest green), Aurora (navy/teal/violet dark surfaces with a misty blue-white light counterpart), Calm (low-stimulation slate/sage dark surfaces with a misty blue-white light counterpart), Dawn (indigo/plum dark surfaces with muted amber accents and a dawn-white light counterpart), Sage (soft green-gray surfaces with a muted olive accent and readable dark/light ramps), Midnight (deep-navy surfaces with restrained violet/indigo accents and a cool pale light counterpart), Velvet (deep plum/burgundy dark surfaces with rose-gold accents and a warm blush-white light counterpart), Factory Dark (graphite/steel dark surfaces, cool gunmetal borders, and restrained safety-orange accents with a concrete-gray light counterpart), and Factory Light (bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart), 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 and Shadcn Mono Red/Blue/Green/Purple/Pink/Orange/Yellow (grayscale surfaces with color-specific accents; Shadcn Mono retains its selected id), 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 color themes from **Settings → Appearance** or from the Command Center **Overview** theme card. Settings merges its selector into the current-theme row, which opens the full color-theme list; Command Center keeps the compact `ThemeDropdown` trigger. Both use the same filterable list: type a visible theme name to narrow the displayed labels and color-chip swatches, then select an option to change the theme. Filtering alone never changes the chosen theme. The selected color theme, including Midnight, persists in browser storage and is validated before React hydrates on both web and Electron startup. 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.
|
||||
Choose color themes from **Settings → Appearance** or from the Command Center **Overview** theme card. Settings merges its selector into the current-theme row, which opens the full color-theme list; Command Center keeps the compact `ThemeDropdown` trigger. Both use the same filterable list: type a visible theme name to narrow the displayed labels and color-chip swatches, then select an option to change the theme. Filtering alone never changes the chosen theme. The selected color theme, including Midnight and Velvet, persists in browser storage and is validated before React hydrates on both web and Electron startup. 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.
|
||||
|
||||
- **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.
|
||||
|
||||
@@ -75,7 +75,7 @@ Defaults from `DEFAULT_GLOBAL_SETTINGS`; key scope from `GLOBAL_SETTINGS_KEYS`.
|
||||
|---|---|---:|---|
|
||||
| <a id="anthropicauthpreference"></a>`anthropicAuthPreference` | `"api-key" \| "subscription"` | `"api-key"` | Which Anthropic credential wins when BOTH a raw API key and a Claude subscription OAuth login are configured. `"api-key"` keeps the historical precedence; `"subscription"` moves the raw key below the OAuth steps so a stale or revoked saved key cannot shadow a working subscription (the `401 invalid x-api-key` failure mode). Global, because credentials live in the global `~/.fusion/agent/auth.json`. Never removes a source — with one credential configured, resolution reaches it under either value. Surfaced in Settings → Authentication, where the two Anthropic cards show which credential is in use; the control appears only when both are connected. |
|
||||
| `themeMode` | `"dark" \| "light" \| "system"` | `"system"` | Dashboard theme mode. Fresh installs follow the operating system light/dark preference until the user chooses Light, Dark, or System. |
|
||||
| `colorTheme` | `ColorTheme` | `"shadcn-ember"` | Dashboard color theme preset. Aurora is a built-in navy/teal/violet palette with a misty light counterpart; Calm is a low-stimulation slate/sage palette with a misty light counterpart; Dawn uses indigo/plum dark surfaces, amber accents, and dawn-white light surfaces; Midnight uses deep-navy surfaces with restrained violet/indigo accents and a cool pale light counterpart; Factory Dark uses graphite/steel surfaces, cool gunmetal borders, and restrained safety-orange accents with a concrete-gray light counterpart; Factory Light uses bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart. Use `"shadcn-custom"` to show the separate custom shadcn color picker in Settings → Appearance and the Command Center theme card. |
|
||||
| `colorTheme` | `ColorTheme` | `"shadcn-ember"` | Dashboard color theme preset. Aurora is a built-in navy/teal/violet palette with a misty light counterpart; Calm is a low-stimulation slate/sage palette with a misty light counterpart; Dawn uses indigo/plum dark surfaces, amber accents, and dawn-white light surfaces; Midnight uses deep-navy surfaces with restrained violet/indigo accents and a cool pale light counterpart; Velvet uses deep plum/burgundy dark surfaces with rose-gold accents and a warm blush-white light counterpart; Factory Dark uses graphite/steel surfaces, cool gunmetal borders, and restrained safety-orange accents with a concrete-gray light counterpart; Factory Light uses bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart. Use `"shadcn-custom"` to show the separate 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" \| "pt-BR"` | `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. |
|
||||
|
||||
@@ -149,6 +149,8 @@ export const COLOR_THEMES = [
|
||||
Midnight is a persisted selectable dashboard theme. Keep its id and order synchronized with selector metadata and both web/Electron first-paint validators so saved choices survive before hydration, while shadcn-ember remains the unset default.
|
||||
*/
|
||||
"midnight",
|
||||
// FNXC:DashboardTheming 2026-08-18-05:45: Velvet is persisted immediately after Midnight; keep this ID and order synchronized across core, selector metadata, and both first-paint validators so saved selections survive pre-hydration validation.
|
||||
"velvet",
|
||||
// FNXC:DashboardTheming 2026-07-31-20:39: Factory Dark must stay order-synchronized across core, selector metadata, and both first-paint validators so saved preferences survive pre-hydration validation.
|
||||
"factory-dark",
|
||||
// FNXC:DashboardTheming 2026-07-31-23:51: Factory Light must stay order-synchronized across core, selector metadata, and both first-paint validators so saved preferences survive pre-hydration validation.
|
||||
|
||||
101
packages/dashboard/app/__tests__/velvet-theme.test.ts
Normal file
101
packages/dashboard/app/__tests__/velvet-theme.test.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
import { readFileSync } from "node:fs";
|
||||
import path from "node:path";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { COLOR_THEMES as CORE_COLOR_THEMES } from "@fusion/core";
|
||||
import { COLOR_THEMES as DASHBOARD_COLOR_THEMES } from "../components/themeOptions";
|
||||
|
||||
const themeDataPath = path.resolve(__dirname, "../public/theme-data.css");
|
||||
const themeSelectorPath = path.resolve(__dirname, "../components/ThemeSelector.css");
|
||||
const dashboardIndexPath = path.resolve(__dirname, "../index.html");
|
||||
const desktopIndexPath = path.resolve(__dirname, "../../../desktop/src/renderer/index.html");
|
||||
|
||||
/*
|
||||
FNXC:DashboardTheming 2026-08-18-05:45:
|
||||
Velvet is valid only when persistence, first-paint validators, selector metadata, tokens, and globally resolvable previews agree. This source contract catches a partial registration before a saved operator preference can flash or fall back.
|
||||
*/
|
||||
describe("Velvet color theme", () => {
|
||||
const themeData = readFileSync(themeDataPath, "utf-8");
|
||||
const themeSelector = readFileSync(themeSelectorPath, "utf-8");
|
||||
const dashboardIndexHtml = readFileSync(dashboardIndexPath, "utf-8");
|
||||
const desktopIndexHtml = readFileSync(desktopIndexPath, "utf-8");
|
||||
|
||||
it("keeps persisted, selector, and first-paint registries in exact order", () => {
|
||||
const coreIds = [...CORE_COLOR_THEMES];
|
||||
const dashboardIds = DASHBOARD_COLOR_THEMES.map((theme) => theme.value);
|
||||
const dashboardValidThemes = extractValidThemes(dashboardIndexHtml);
|
||||
const desktopValidThemes = extractValidThemes(desktopIndexHtml);
|
||||
|
||||
expect(CORE_COLOR_THEMES.filter((theme) => theme === "velvet")).toHaveLength(1);
|
||||
expect(DASHBOARD_COLOR_THEMES).toContainEqual({
|
||||
value: "velvet",
|
||||
label: "Velvet",
|
||||
className: "theme-swatch-velvet",
|
||||
});
|
||||
expect(dashboardIds).toEqual(coreIds);
|
||||
expect(dashboardValidThemes).toEqual(coreIds);
|
||||
expect(desktopValidThemes).toEqual(coreIds);
|
||||
for (const ids of [coreIds, dashboardIds, dashboardValidThemes, desktopValidThemes]) {
|
||||
expect(new Set(ids).size).toBe(ids.length);
|
||||
}
|
||||
expect(dashboardIndexHtml).toContain("colorTheme = 'shadcn-ember'");
|
||||
expect(desktopIndexHtml).toContain('colorTheme = "shadcn-ember"');
|
||||
});
|
||||
|
||||
it("defines complete readable dark and light Velvet token blocks", () => {
|
||||
const darkBlock = extractSelectorBlock(themeData, '[data-color-theme="velvet"]');
|
||||
const lightBlock = extractSelectorBlock(themeData, '[data-color-theme="velvet"][data-theme="light"]');
|
||||
const requiredTokens = [
|
||||
"--bg:", "--surface:", "--card:", "--card-hover:", "--surface-hover:", "--border:",
|
||||
"--text:", "--text-muted:", "--text-dim:", "--todo:", "--in-progress:", "--in-progress-rgb:",
|
||||
"--in-review:", "--triage:", "--done:", "--color-success:", "--color-warning:",
|
||||
"--color-error:", "--color-info:", "--cta-bg:", "--cta-border:", "--cta-text:",
|
||||
"--cta-bg-hover:", "--cta-border-hover:", "--cta-glow:", "--accent:", "--accent-text:",
|
||||
"--logo-accent:", "--shadow-glow:", "--focus-ring:", "--focus-ring-strong:",
|
||||
];
|
||||
|
||||
for (const block of [darkBlock, lightBlock]) {
|
||||
for (const token of requiredTokens) expect(block).toContain(token);
|
||||
}
|
||||
expect(darkBlock).toContain("--bg: #1d1418;");
|
||||
expect(darkBlock).toContain("--accent: #c99a89;");
|
||||
expect(lightBlock).toContain("--bg: #f9f3f2;");
|
||||
expect(lightBlock).toContain("--accent: #8a4a55;");
|
||||
});
|
||||
|
||||
it("uses mode-specific global Velvet preview properties for an unselected swatch", () => {
|
||||
const darkGlobals = extractSelectorBlock(themeData, ":root");
|
||||
const lightGlobals = extractSelectorBlock(themeData, '[data-theme="light"]');
|
||||
const darkSwatch = extractSelectorBlock(themeSelector, ".theme-swatch-velvet");
|
||||
const lightSwatch = extractSelectorBlock(themeSelector, '[data-theme="light"] .theme-swatch-velvet');
|
||||
|
||||
for (const block of [darkGlobals, lightGlobals]) {
|
||||
for (const sample of [1, 2, 3, 4]) expect(block).toContain(`--velvet-swatch-sample-${sample}:`);
|
||||
}
|
||||
for (const block of [darkSwatch, lightSwatch]) {
|
||||
for (const sample of [1, 2, 3, 4]) {
|
||||
expect(block).toContain(`--swatch-sample-${sample}: var(--velvet-swatch-sample-${sample});`);
|
||||
}
|
||||
expect(block).not.toContain("var(--accent)");
|
||||
expect(block).not.toContain("var(--bg)");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function extractValidThemes(html: string): string[] {
|
||||
const match = html.match(/var validThemes = \[([\s\S]*?)\];/);
|
||||
if (!match) throw new Error("Could not find pre-hydration validThemes array");
|
||||
return [...match[1].matchAll(/["']([^"']+)["']/g)].map((themeMatch) => themeMatch[1]);
|
||||
}
|
||||
|
||||
function extractSelectorBlock(css: string, selector: string): string {
|
||||
const startIdx = css.indexOf(`${selector} {`);
|
||||
if (startIdx === -1) throw new Error(`Could not find selector block: ${selector}`);
|
||||
const openBraceIdx = css.indexOf("{", startIdx);
|
||||
let depth = 1;
|
||||
for (let index = openBraceIdx + 1; index < css.length; index++) {
|
||||
if (css[index] === "{") depth++;
|
||||
if (css[index] === "}") depth--;
|
||||
if (depth === 0) return css.slice(startIdx, index + 1);
|
||||
}
|
||||
throw new Error(`Could not find closing brace for selector block: ${selector}`);
|
||||
}
|
||||
@@ -319,6 +319,13 @@
|
||||
--swatch-sample-4: var(--midnight-swatch-sample-4);
|
||||
}
|
||||
|
||||
.theme-swatch-velvet {
|
||||
--swatch-sample-1: var(--velvet-swatch-sample-1);
|
||||
--swatch-sample-2: var(--velvet-swatch-sample-2);
|
||||
--swatch-sample-3: var(--velvet-swatch-sample-3);
|
||||
--swatch-sample-4: var(--velvet-swatch-sample-4);
|
||||
}
|
||||
|
||||
.theme-swatch-aurora {
|
||||
--swatch-sample-1: var(--aurora-swatch-sample-1);
|
||||
--swatch-sample-2: var(--aurora-swatch-sample-2);
|
||||
@@ -1195,6 +1202,13 @@
|
||||
--swatch-sample-4: var(--midnight-swatch-sample-4);
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-velvet {
|
||||
--swatch-sample-1: var(--velvet-swatch-sample-1);
|
||||
--swatch-sample-2: var(--velvet-swatch-sample-2);
|
||||
--swatch-sample-3: var(--velvet-swatch-sample-3);
|
||||
--swatch-sample-4: var(--velvet-swatch-sample-4);
|
||||
}
|
||||
|
||||
[data-theme="light"] .theme-swatch-aurora {
|
||||
--swatch-sample-1: var(--aurora-swatch-sample-1);
|
||||
--swatch-sample-2: var(--aurora-swatch-sample-2);
|
||||
|
||||
@@ -80,6 +80,7 @@ export const COLOR_THEMES: { value: ColorTheme; label: string; className: string
|
||||
{ value: "dawn", label: "Dawn", className: "theme-swatch-dawn" },
|
||||
{ value: "sage", label: "Sage", className: "theme-swatch-sage" },
|
||||
{ value: "midnight", label: "Midnight", className: "theme-swatch-midnight" },
|
||||
{ value: "velvet", label: "Velvet", className: "theme-swatch-velvet" },
|
||||
{ value: "factory-dark", label: "Factory Dark", className: "theme-swatch-factory-dark" },
|
||||
{ value: "factory-light", label: "Factory Light", className: "theme-swatch-factory-light" },
|
||||
{ value: "shadcn", label: "Shadcn", className: "theme-swatch-shadcn" },
|
||||
|
||||
@@ -164,7 +164,7 @@
|
||||
mode = 'system';
|
||||
}
|
||||
var colorTheme = localStorage.getItem('kb-dashboard-color-theme') || 'shadcn-ember';
|
||||
var validThemes = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'];
|
||||
var validThemes = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'velvet', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'];
|
||||
// FNXC:DashboardTheming 2026-06-30-00:00: Unset startup theme is Shadcn Ember; explicit stored legacy ids such as "default" and "ocean" remain valid and must not be migrated.
|
||||
// FNXC:DashboardTheming 2026-07-16-14:30: FN-8146 restores Shadcn Mono as a distinct persisted choice, so bootstrap must retain its stored id instead of remapping it to Mono Red.
|
||||
// FNXC:MidnightTheme 2026-08-03-02:05: Web first paint must accept persisted Midnight before React hydrates; invalid or unset values still fall back to Shadcn Ember.
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
Theme token translucency uses color-mix(in srgb, var(--token) N%, transparent) or exact literal color-mix values for glass surfaces. Raw RGB alpha color functions are banned outside var() fallbacks by FN-6489.
|
||||
============================================================ */
|
||||
|
||||
/* Aurora, Calm, Dawn, Sage, Midnight, Factory Dark, and Factory Light swatches stay globally resolvable while a different theme is active. */
|
||||
/* Aurora, Calm, Dawn, Sage, Midnight, Velvet, Factory Dark, and Factory Light swatches stay globally resolvable while a different theme is active. */
|
||||
:root {
|
||||
--aurora-swatch-sample-1: #0a1022;
|
||||
--aurora-swatch-sample-2: #162044;
|
||||
@@ -30,6 +30,10 @@
|
||||
--midnight-swatch-sample-2: #1b2450;
|
||||
--midnight-swatch-sample-3: #a78bfa;
|
||||
--midnight-swatch-sample-4: #67d4e8;
|
||||
--velvet-swatch-sample-1: #1d1418;
|
||||
--velvet-swatch-sample-2: #2b1d24;
|
||||
--velvet-swatch-sample-3: #c99a89;
|
||||
--velvet-swatch-sample-4: #b66b7d;
|
||||
--factory-dark-swatch-sample-1: #0d0f10;
|
||||
--factory-dark-swatch-sample-2: #1a1d1f;
|
||||
--factory-dark-swatch-sample-3: #e89532;
|
||||
@@ -61,6 +65,10 @@
|
||||
--midnight-swatch-sample-2: #e2e6fa;
|
||||
--midnight-swatch-sample-3: #5134a3;
|
||||
--midnight-swatch-sample-4: #16778c;
|
||||
--velvet-swatch-sample-1: #f9f3f2;
|
||||
--velvet-swatch-sample-2: #f0e2e0;
|
||||
--velvet-swatch-sample-3: #8a4a55;
|
||||
--velvet-swatch-sample-4: #a9636f;
|
||||
--factory-dark-swatch-sample-1: #eceef0;
|
||||
--factory-dark-swatch-sample-2: #d9dde0;
|
||||
--factory-dark-swatch-sample-3: #a95612;
|
||||
@@ -7512,6 +7520,82 @@ Midnight gives operators deep-navy surfaces with restrained violet/indigo accent
|
||||
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
|
||||
}
|
||||
|
||||
/*
|
||||
FNXC:DashboardTheming 2026-08-18-05:45:
|
||||
Velvet gives operators deep plum and burgundy surfaces with rose-gold actions in dark mode, plus a warm blush-white light counterpart. Keep complete semantic and interaction token sets in both modes so persisted theme selection never inherits colors from another theme.
|
||||
*/
|
||||
[data-color-theme="velvet"] {
|
||||
--bg: #1d1418;
|
||||
--surface: #241a20;
|
||||
--card: #2b1d24;
|
||||
--card-hover: #382631;
|
||||
--surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
|
||||
--border: #5c414c;
|
||||
--text: #fff4f0;
|
||||
--text-muted: #dfc4be;
|
||||
--text-dim: #aa8b90;
|
||||
|
||||
--todo: #d4a5a5;
|
||||
--in-progress: #d89a82;
|
||||
--in-progress-rgb: 216, 154, 130;
|
||||
--in-review: #c493b7;
|
||||
--triage: #e1b66f;
|
||||
--done: #a99a9d;
|
||||
--color-success: #9fc79b;
|
||||
--color-warning: #e1b66f;
|
||||
--color-error: #ed8c95;
|
||||
--color-info: #d89a82;
|
||||
|
||||
--cta-bg: #c99a89;
|
||||
--cta-border: #e5bbab;
|
||||
--cta-text: #1d1418;
|
||||
--cta-bg-hover: #d9aa99;
|
||||
--cta-border-hover: #f3d0c3;
|
||||
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 30%, transparent);
|
||||
--accent: #c99a89;
|
||||
--accent-text: #1d1418;
|
||||
--logo-accent: var(--accent);
|
||||
--shadow-glow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
|
||||
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
|
||||
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 36%, transparent);
|
||||
}
|
||||
|
||||
[data-color-theme="velvet"][data-theme="light"] {
|
||||
--bg: #f9f3f2;
|
||||
--surface: #f3e8e6;
|
||||
--card: #fffaf8;
|
||||
--card-hover: #f0e2e0;
|
||||
--surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
|
||||
--border: #d9bfc0;
|
||||
--text: #321d25;
|
||||
--text-muted: #704d57;
|
||||
--text-dim: #98757b;
|
||||
|
||||
--todo: #93616b;
|
||||
--in-progress: #a65348;
|
||||
--in-progress-rgb: 166, 83, 72;
|
||||
--in-review: #81578a;
|
||||
--triage: #8a611e;
|
||||
--done: #816b70;
|
||||
--color-success: #4d7951;
|
||||
--color-warning: #8a611e;
|
||||
--color-error: #ad4050;
|
||||
--color-info: #9c544a;
|
||||
|
||||
--cta-bg: #8a4a55;
|
||||
--cta-border: #713a45;
|
||||
--cta-text: #ffffff;
|
||||
--cta-bg-hover: #743c47;
|
||||
--cta-border-hover: #5d2f38;
|
||||
--cta-glow: 0 0 8px color-mix(in srgb, var(--cta-border) 24%, transparent);
|
||||
--accent: #8a4a55;
|
||||
--accent-text: #ffffff;
|
||||
--logo-accent: var(--accent);
|
||||
--shadow-glow: 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
--focus-ring-strong: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
|
||||
}
|
||||
|
||||
[data-color-theme="aurora"] {
|
||||
--bg: #0a1022;
|
||||
--surface: #101a35;
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
"dawn",
|
||||
"sage",
|
||||
"midnight",
|
||||
"velvet",
|
||||
"factory-dark",
|
||||
"factory-light",
|
||||
"shadcn",
|
||||
|
||||
Reference in New Issue
Block a user