83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
import type { Preview } from '@storybook/angular';
|
|
import '../src/styles.scss';
|
|
|
|
export const globalTypes = {
|
|
theme: {
|
|
name: 'Theme',
|
|
description: 'Global theme for components',
|
|
defaultValue: 'light',
|
|
toolbar: {
|
|
icon: 'paintbrush',
|
|
items: [
|
|
{ value: 'light', title: 'Light', icon: 'sun' },
|
|
{ value: 'dark', title: 'Dark', icon: 'moon' },
|
|
{ value: 'system', title: 'System', icon: 'browser' },
|
|
],
|
|
showName: true,
|
|
},
|
|
},
|
|
reduceMotion: {
|
|
name: 'Reduced Motion',
|
|
description: 'Toggle reduced-motion mode for motion tokens',
|
|
defaultValue: false,
|
|
toolbar: {
|
|
icon: 'contrast',
|
|
items: [
|
|
{ value: false, title: 'Motion enabled' },
|
|
{ value: true, title: 'Reduce motion' },
|
|
],
|
|
},
|
|
},
|
|
};
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
a11y: {
|
|
// Keep enabled; violations surface in the Storybook panel
|
|
disable: false,
|
|
},
|
|
backgrounds: {
|
|
default: 'light',
|
|
values: [
|
|
{ name: 'light', value: '#f6f8fb' },
|
|
{ name: 'dark', value: '#0f172a' },
|
|
],
|
|
},
|
|
},
|
|
decorators: [
|
|
(story, context) => {
|
|
const root = document.documentElement;
|
|
|
|
// Handle theme switching
|
|
const theme = context.globals.theme || 'light';
|
|
if (theme === 'system') {
|
|
// Follow system preference
|
|
root.removeAttribute('data-theme');
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
root.style.colorScheme = prefersDark ? 'dark' : 'light';
|
|
} else {
|
|
root.setAttribute('data-theme', theme);
|
|
root.style.colorScheme = theme;
|
|
}
|
|
|
|
// Handle reduced motion
|
|
if (context.globals.reduceMotion) {
|
|
root.dataset.reduceMotion = '1';
|
|
} else {
|
|
root.dataset.reduceMotion = '0';
|
|
}
|
|
|
|
return story();
|
|
},
|
|
],
|
|
};
|
|
|
|
export default preview;
|