Phase 1: Style refinements and component tweaks from Storybook review

Theme & styling:
- Add custom "inspector" color palette with dark navy primary
- Change primaryShade to { light: 7, dark: 8 }
- Add Input theme override to apply --inspector-input-background globally
- Add --inspector-input-background token (white in light, dark-9 in dark)
- Override --mantine-color-body in dark mode via cssVariablesResolver
  in both main.tsx and Storybook preview.tsx
- Add dark-mode CSS overrides for Select dropdown and option hover
- Add dark-mode CSS override for Accordion control hover
- Rename CSS variable --inspector-status-failed → --inspector-status-error

Component changes:
- CopyButton: increase icon font size to 24px, use --inspector-text-primary
  for high-contrast color (black/white per theme)
- TaskControls: remove onClearHistory (moved to TaskListPanel), fix Select
  clear button not disappearing by passing null instead of undefined
- TaskListPanel: add onClearCompleted callback, render "Clear" button
  next to Completed section header
- HistoryListPanel: move "Clear" button from toolbar to History section
  header, rename from "Clear All"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-17 19:26:21 -04:00
commit 658ef86944

View file

@ -1,4 +1,4 @@
import { createTheme } from "@mantine/core";
import { createTheme, type MantineColorsTuple } from "@mantine/core";
import {
ThemeActionIcon,
ThemeAlert,
@ -8,6 +8,7 @@ import {
ThemeCard,
ThemeCode,
ThemeFlex,
ThemeInput,
ThemePaper,
ThemeSelect,
ThemeSwitch,
@ -15,10 +16,26 @@ import {
ThemeUnstyledButton,
} from "./index";
const inspector: MantineColorsTuple = [
"#f0f3fa",
"#dee3ee",
"#b9c5de",
"#91a5cf",
"#7089c3",
"#5b78bb",
"#4f70b9",
"#405fa3",
"#375493",
"#121e36",
];
export const theme = createTheme({
colors: {
inspector,
},
/* ── Color ──────────────────────────────────────────────── */
primaryColor: "dark",
primaryShade: { light: 7, dark: 4 },
primaryColor: "inspector",
primaryShade: { light: 7, dark: 8 },
autoContrast: true,
/* ── Shape ──────────────────────────────────────────────── */
@ -43,6 +60,7 @@ export const theme = createTheme({
Card: ThemeCard,
Code: ThemeCode,
Flex: ThemeFlex,
Input: ThemeInput,
Paper: ThemePaper,
Select: ThemeSelect,
Switch: ThemeSwitch,