chore: update storybook theme configs

.editorconfig

@@ -4,10 +4,12 @@
 root = true
 
 [*]
-end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = true
+end_of_line = lf
+indent_size = 2
 insert_final_newline = true
+max_line_length = 90
+trim_trailing_whitespace = true
 
-[*.md]
+[*.{md,mdx}]
 trim_trailing_whitespace = false

.storybook/manager.ts

@@ -1,14 +1,16 @@
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming/create';
 
+import { theme } from './theme';
+
 /**
  * @see https://storybook.js.org/docs/configurations/options-parameter/
  */
 addons.setConfig({
   showAddonsPanel: false,
   panelPosition: 'bottom',
   theme: create({
-    base: 'dark',
+    ...theme,
     brandTitle: 'React Compare Slider',
     brandUrl: 'https://github.com/nerdyman/react-compare-slider',
     gridCellSize: 12,

.storybook/preview.ts

@@ -1,31 +1,24 @@
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { addDecorator, addParameters } from '@storybook/react';
-import { themes } from '@storybook/theming';
 import { withConsole } from '@storybook/addon-console';
 
+import { theme } from './theme';
+
 addDecorator((storyFn, context) => withConsole()(storyFn)(context));
 
 addParameters({
   controls: {
     hideNoControlsWarning: true,
   },
   docs: {
-    container: DocsContainer,
-    page: DocsPage,
-    inlineStories: false,
+    inlineStories: true,
+    theme,
   },
   options: {
     showRoots: true,
-    theme: {
-      ...themes.dark,
-      appBorderRadius: 3,
-      colorSecondary: '#b464fa',
-      barSelectedColor: '#b464fa',
-    } as any,
+    theme,
   },
   viewport: {
     viewports: INITIAL_VIEWPORTS,
-    // defaultViewport: 'Initial',
   },
 });

.storybook/theme.ts

@@ -0,0 +1,8 @@
+import { themes } from '@storybook/theming';
+
+export const theme = {
+  ...themes.dark,
+  appBorderRadius: 3,
+  colorSecondary: '#b464fa',
+  barSelectedColor: '#b464fa',
+};