feat(FN-844): add theme-driven logo and CTA button token system

- Add CSS custom properties (--kb-logo-accent, --kb-cta-*) for logo accent color and new-task action buttons
- Update logo.svg to use currentColor for theme-aware accent stroke
- Apply tokenized styling to Header logo, QuickEntryBox, InlineCreateCard, ListView, and Column new-task buttons
- Add theme-aware test assertions for logo and CTA buttons in Header, InlineCreateCard, ListView, and QuickEntryBox tests
- Document theme token system in dashboard README
This commit is contained in:
gsxdsm
2026-04-04 04:13:36 -07:00
parent c5bbb4bcb5
commit e4019c0c99
12 changed files with 111 additions and 16 deletions

View File

@@ -318,6 +318,27 @@ To add a new color theme:
3. Add the swatch class for the theme picker in the CSS
4. Update `ThemeSelector.tsx` with the new theme option
### Theme-Driven Logo and Task-Creation CTAs
The Fusion logo and all task-creation action buttons (including the "+ New Task" and "Save" buttons in board view, list view, and inline creation surfaces) are fully tokenized and respond to the active color theme. This ensures branding and task-creation affordances stay visually consistent across all 12 color themes and both light/dark modes.
**Theme tokens used:**
| Token | Purpose |
|-------|---------|
| `--logo-accent` | Fusion logo SVG fill color (defaults to `var(--todo)`) |
| `--cta-bg` / `--cta-bg-hover` | Task-creation CTA button background |
| `--cta-border` / `--cta-border-hover` | Task-creation CTA button border |
| `--cta-text` / `--cta-text-hover` | Task-creation CTA button text |
| `--cta-glow` | Box-shadow glow on hover |
**Semantic class:** `.btn-task-create` — used consistently on:
- Board column "+ New Task" button (`Column.tsx`)
- List view "+ New Task" button (`ListView.tsx`)
- Inline create card "Save" button (`InlineCreateCard.tsx`)
- Quick entry box "Save" button (`QuickEntryBox.tsx`)
All color themes automatically provide values for these tokens. Adding a new color theme requires only setting `--todo` (and optionally `--logo-accent` if the logo should differ from the todo column color).
## Performance Characteristics
The dashboard includes several runtime safeguards to stay responsive during long sessions and on larger boards: