feat: theme in options

ccontrols · Jun 12, 2020 · 9e4c527 · 9e4c527
1 parent e4b21af
commit 9e4c527
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/core/specification/src/configuration.ts b/core/specification/src/configuration.ts
@@ -88,9 +88,16 @@ export interface RunConfiguration {
    */
   siteImage?: string;
 
+  /**
+   * page types configurations
+   */
   pages?: PagesConfiguration;
 
-  blogsLabel?: string;
+  /**
+   * theme-ui theme configuration
+   */
+  theme?: { [key: string]: any };
+
   /**
    * story sorting function
    */

diff --git a/examples/gatsby/.config/runtime.js b/examples/gatsby/.config/runtime.js
@@ -8,7 +8,11 @@ module.exports = {
   siteDescription: `Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.`,
   siteLanguage: `en`,
   author: `@atanasster`,
-
+  theme: {
+    colors: {
+      //primary: 'pink',
+    }
+  },
   storySort: (a, b) => {
     const aDoc = a.split('/')[0];
     const aIndex = categories.findIndex(c => c === aDoc);

diff --git a/integrations/storybook/src/docs-page/DocsContainer.tsx b/integrations/storybook/src/docs-page/DocsContainer.tsx
@@ -12,18 +12,12 @@ import {
 import { store } from '@component-controls/store/live_store';
 import { useIsDark } from '../context/useIsDark';
 
-interface DocsContainerProps {
-  theme?: Theme;
-}
-export const PageContextContainer: FC<DocsContainerProps> = ({
-  children,
-  theme,
-}) => {
+export const PageContextContainer: FC = ({ children }) => {
   const options = React.useMemo(() => getGlobalOptions(), []);
   const storyId = useStoryId();
   const isDark = useIsDark();
   return (
-    <ThemeProvider theme={theme} dark={isDark}>
+    <ThemeProvider theme={store.config?.theme} dark={isDark}>
       <BlockContextProvider storyId={storyId} store={store} options={options}>
         <BlockPageContainer maxWidth="1000px">{children}</BlockPageContainer>
       </BlockContextProvider>

diff --git a/ui/app/src/AppContext/AppContext.tsx b/ui/app/src/AppContext/AppContext.tsx
@@ -1,10 +1,7 @@
 /** @jsx jsx */
 import { FC, useMemo } from 'react';
 import { jsx } from 'theme-ui';
-import {
-  ThemeProvider,
-  ThemeProviderProps,
-} from '@component-controls/components';
+import { ThemeProvider } from '@component-controls/components';
 import {
   SidebarContextProvider,
   LinkContextProvider,
@@ -15,19 +12,17 @@ import { LoadingStore } from '@component-controls/loader';
 import { loadStoryStore, Store } from '@component-controls/store';
 import { App } from '../App';
 
-export type AppContextProps = {
+export interface AppContextProps {
   docId?: string;
   store?: LoadingStore;
   linkClass: LinkContextProviderProps['linkClass'];
-} & ThemeProviderProps;
+}
 
 export const AppContext: FC<AppContextProps> = ({
   docId,
   children,
   store,
   linkClass,
-  components,
-  ...themeProps
 }) => {
   const storyStore = useMemo(
     () =>
@@ -39,7 +34,7 @@ export const AppContext: FC<AppContextProps> = ({
   );
 
   return (
-    <ThemeProvider components={components} {...themeProps}>
+    <ThemeProvider theme={storyStore.config?.theme}>
       <BlockContextProvider docId={docId} store={storyStore}>
         <SidebarContextProvider>
           <LinkContextProvider linkClass={linkClass}>