diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts index b16ffcb..c26d891 100644 --- a/packages/react/.storybook/main.ts +++ b/packages/react/.storybook/main.ts @@ -24,7 +24,7 @@ const config: StorybookConfig = { name: "@storybook/react-vite", options: {}, }, - staticDirs: ["../src"], + staticDirs: ["../src", "../public"], features: { storyStoreV7: true, }, diff --git a/packages/react/.storybook/manager.ts b/packages/react/.storybook/manager.ts new file mode 100644 index 0000000..a67f90b --- /dev/null +++ b/packages/react/.storybook/manager.ts @@ -0,0 +1,41 @@ +import { addons } from '@storybook/manager-api'; +import { create } from '@storybook/theming'; +import { defaultTokens } from '@openfun/cunningham-tokens'; + +const COLORS = defaultTokens.theme.colors; + +const theme = create({ + base: 'light', + brandUrl: 'https://github.com/openfun/cunningham', + brandImage: '/logo-cunningham.svg', + brandTitle: 'Cunningham', + brandTarget: '_self', + + + // + colorPrimary: COLORS["primary-400"], + colorSecondary: COLORS["primary-400"], + + // UI + appBg: COLORS["greyscale-100"], + appContentBg: COLORS["greyscale-000"], + appBorderColor: COLORS["greyscale-300"], + appBorderRadius: 4, + + // Text colors + textColor: COLORS["greyscale-900"], + textInverseColor: COLORS["greyscale-000"], + + // Toolbar default and active colors + barTextColor: COLORS["greyscale-500"], + barSelectedColor: COLORS["greyscale-900"], + barBg: COLORS["greyscale-000"], + + // Form colors + inputBg: COLORS["greyscale-000"], + inputBorder: COLORS["greyscale-300"], + inputTextColor: COLORS["greyscale-800"], + inputBorderRadius: 2, +}); + +addons.setConfig({ theme }); diff --git a/packages/react/public/logo-cunningham.svg b/packages/react/public/logo-cunningham.svg new file mode 100644 index 0000000..b5a5153 --- /dev/null +++ b/packages/react/public/logo-cunningham.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +