Richie
f18e2ed2e4
- Create tailwind.config.js merging production tokens with design system palettes from Style Dictionary - Extend Style Dictionary to output tailwind-tokens.js module - Add PostCSS config and Tailwind directive CSS - Import Tailwind CSS in Storybook preview - Production breakpoints, colours, typography, spacing preserved - Design system brand/sage/neutral/red/amber/green/blue palettes added alongside production's generic color-1..6 naming Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
30 lines
653 B
TypeScript
30 lines
653 B
TypeScript
import React from 'react';
|
|
import type { Preview } from '@storybook/react';
|
|
import { ThemeProvider } from '@mui/material/styles';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import { theme } from '../src/theme';
|
|
import '../src/tailwind.css';
|
|
import '../src/theme/generated/tokens.css';
|
|
|
|
const preview: Preview = {
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
(Story) => (
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<Story />
|
|
</ThemeProvider>
|
|
),
|
|
],
|
|
parameters: {
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export default preview;
|