afb313fee0
This commit updates the theme colors in the Storybook configuration to use the new global color definitions. The changes include replacing greyscale colors with their corresponding gray colors for consistency. Additionally, the theme structure has been refactored to align with the updated token architecture, enhancing maintainability and ensuring a cohesive design system across the application.
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import "../src/icons.scss";
|
|
import "../src/index.scss";
|
|
import "../src/fonts.scss";
|
|
import { Preview } from "@storybook/react";
|
|
import { DocsContainer } from "@storybook/blocks";
|
|
|
|
import { CunninghamProvider } from "../src/components/Provider";
|
|
import {
|
|
BACKGROUND_COLOR_TO_THEME,
|
|
getThemeFromGlobals,
|
|
themes,
|
|
} from "./themes";
|
|
import React from "react";
|
|
|
|
export const DocsWithTheme = (props, context) => {
|
|
const theme = getThemeFromGlobals(props.context.store.userGlobals.globals);
|
|
return (
|
|
<CunninghamProvider theme={theme}>
|
|
<DocsContainer {...props} theme={themes[theme]} />
|
|
</CunninghamProvider>
|
|
);
|
|
};
|
|
|
|
const preview: Preview = {
|
|
decorators: [
|
|
(Story, context) => (
|
|
<CunninghamProvider theme={getThemeFromGlobals(context.globals)}>
|
|
<Story />
|
|
</CunninghamProvider>
|
|
),
|
|
],
|
|
parameters: {
|
|
backgrounds: {
|
|
default: null,
|
|
values: Object.entries(BACKGROUND_COLOR_TO_THEME).map((value) => ({
|
|
name: value[1],
|
|
value: value[0],
|
|
})),
|
|
},
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/,
|
|
},
|
|
},
|
|
docs: {
|
|
container: DocsWithTheme,
|
|
},
|
|
options: {
|
|
storySort: (a, b) => {
|
|
const roots = ["Getting Started", "Components", "Migrating"];
|
|
const gettingStartedOrder = [
|
|
"Installation",
|
|
"First steps",
|
|
"Customization",
|
|
"Theming",
|
|
"Colors",
|
|
"Spacings",
|
|
"Typography",
|
|
];
|
|
|
|
const aParts = a.title.split("/");
|
|
const bParts = b.title.split("/");
|
|
if (aParts[0] !== bParts[0]) {
|
|
return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
|
|
}
|
|
if (aParts[1] !== bParts[1]) {
|
|
if (aParts[0] === "Getting Started") {
|
|
return (
|
|
gettingStartedOrder.indexOf(aParts[1]) -
|
|
gettingStartedOrder.indexOf(bParts[1])
|
|
);
|
|
}
|
|
return aParts[1].localeCompare(bParts[1]);
|
|
}
|
|
return 0;
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export default preview;
|