658ef86944
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>
86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import type { Preview } from '@storybook/react-vite'
|
|
import { MantineProvider, useMantineColorScheme, type CSSVariablesResolver } from '@mantine/core'
|
|
import { Notifications } from '@mantine/notifications'
|
|
import '@mantine/core/styles.css'
|
|
import '@mantine/notifications/styles.css'
|
|
import '../src/App.css'
|
|
import { theme } from '../src/theme/theme'
|
|
import { useEffect } from 'react'
|
|
|
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
function ColorSchemeWrapper({
|
|
colorScheme,
|
|
children,
|
|
}: {
|
|
colorScheme: 'light' | 'dark'
|
|
children: React.ReactNode
|
|
}) {
|
|
const { setColorScheme } = useMantineColorScheme()
|
|
|
|
useEffect(() => {
|
|
setColorScheme(colorScheme)
|
|
}, [colorScheme, setColorScheme])
|
|
|
|
return <>{children}</>
|
|
}
|
|
|
|
const resolver: CSSVariablesResolver = () => ({
|
|
variables: {},
|
|
light: {},
|
|
dark: {
|
|
'--mantine-color-body': 'var(--mantine-color-dark-9)',
|
|
},
|
|
})
|
|
|
|
const preview: Preview = {
|
|
globalTypes: {
|
|
colorScheme: {
|
|
description: 'Mantine color scheme',
|
|
toolbar: {
|
|
title: 'Color Scheme',
|
|
icon: 'mirror',
|
|
items: [
|
|
{ value: 'light', title: 'Light', icon: 'sun' },
|
|
{ value: 'dark', title: 'Dark', icon: 'moon' },
|
|
],
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
},
|
|
initialGlobals: {
|
|
colorScheme: 'light',
|
|
},
|
|
decorators: [
|
|
(Story, context) => {
|
|
const isFullscreen = context.parameters?.layout === 'fullscreen'
|
|
return (
|
|
<MantineProvider theme={theme} defaultColorScheme="light" cssVariablesResolver={resolver}>
|
|
<ColorSchemeWrapper colorScheme={context.globals.colorScheme ?? 'light'}>
|
|
<Notifications position="top-right" />
|
|
{isFullscreen ? (
|
|
<div style={{ height: '100vh', overflow: 'hidden' }}>
|
|
<Story />
|
|
</div>
|
|
) : (
|
|
<Story />
|
|
)}
|
|
</ColorSchemeWrapper>
|
|
</MantineProvider>
|
|
)
|
|
},
|
|
],
|
|
parameters: {
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
a11y: {
|
|
test: 'todo',
|
|
},
|
|
layout: 'centered',
|
|
},
|
|
}
|
|
|
|
export default preview
|