feat: strategy to add page them in top level theme provider

packages/theme/src/baseTheme.ts

@@ -19,20 +19,28 @@ import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
 import { Overrides } from '@material-ui/core/styles/overrides';
 
 import {
-  BackstagePageTheme,
-  BackstagePageThemeOptions,
   BackstageTheme,
   BackstageThemeOptions,
   SimpleThemeOptions,
 } from './types';
 
+import { pageTheme } from './pageTheme';
+
 const DEFAULT_FONT_FAMILY =
   '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif';
 
 export function createThemeOptions(
   options: SimpleThemeOptions,
 ): BackstageThemeOptions {
-  const { palette, fontFamily = DEFAULT_FONT_FAMILY } = options;
+  const {
+    palette,
+    fontFamily = DEFAULT_FONT_FAMILY,
+    defaultPageTheme,
+  } = options;
+
+  if (!pageTheme[defaultPageTheme]) {
+    throw new Error(`${defaultPageTheme} is not defined in pageTheme.`);
+  }
 
   return {
     palette,
@@ -70,6 +78,9 @@ export function createThemeOptions(
         marginBottom: 10,
       },
     },
+    page: pageTheme[defaultPageTheme],
+    getPageTheme: ({ themeId }) =>
+      pageTheme[themeId] ?? pageTheme[defaultPageTheme],
   };
 }
 
@@ -244,15 +255,3 @@ export function createTheme(options: SimpleThemeOptions): BackstageTheme {
   const theme = { ...baseTheme, overrides };
   return theme;
 }
-
-export function createPageTheme(
-  options: BackstagePageThemeOptions,
-): BackstagePageTheme {
-  const baseTheme = createTheme(options);
-  const pageTheme = options.pageTheme;
-
-  return {
-    pageTheme,
-    baseTheme,
-  };
-}

packages/theme/src/index.ts

@@ -17,3 +17,4 @@
 export * from './themes';
 export * from './baseTheme';
 export * from './types';
+export * from './pageTheme';

packages/theme/src/themes.ts

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import { createTheme, createPageTheme } from './baseTheme';
-import { pageTheme } from './pageTheme';
+import { createTheme } from './baseTheme';
 import { yellow } from '@material-ui/core/colors';
 
 export const lightTheme = createTheme({
@@ -74,6 +73,7 @@ export const lightTheme = createTheme({
       indicator: '#9BF0E1',
     },
   },
+  defaultPageTheme: 'home',
 });
 
 export const darkTheme = createTheme({
@@ -132,9 +132,5 @@ export const darkTheme = createTheme({
       indicator: '#9BF0E1',
     },
   },
-});
-
-export const customPageTheme = createPageTheme({
-  pageTheme,
-  palette: lightTheme.palette,
+  defaultPageTheme: 'home',
 });

packages/theme/src/types.ts

@@ -72,12 +72,20 @@ type PaletteAdditions = {
 export type BackstagePalette = Palette & PaletteAdditions;
 export type BackstagePaletteOptions = PaletteOptions & PaletteAdditions;
 
+export type pageThemeOptions = {
+  themeId: string;
+};
+
 export interface BackstageTheme extends Theme {
   palette: BackstagePalette;
+  page: PageTheme;
+  getPageTheme: ({ themeId }: pageThemeOptions) => PageTheme;
 }
 
 export interface BackstageThemeOptions extends ThemeOptions {
   palette: BackstagePaletteOptions;
+  page: PageTheme;
+  getPageTheme: ({ themeId }: pageThemeOptions) => PageTheme;
 }
 
 /**
@@ -85,6 +93,7 @@ export interface BackstageThemeOptions extends ThemeOptions {
  */
 export type SimpleThemeOptions = {
   palette: BackstagePaletteOptions;
+  defaultPageTheme: string;
   fontFamily?: string;
 };
 
@@ -93,18 +102,3 @@ export type PageTheme = {
   shape: string;
   backgroundImage: string;
 };
-
-export type BackstagePage = Record<string, PageTheme>;
-
-export interface BackstagePageThemeOptions extends SimpleThemeOptions {
-  pageTheme: BackstagePage;
-}
-
-export interface BackstagePageTheme {
-  pageTheme: BackstagePage;
-  baseTheme: BackstageTheme;
-}
-
-export interface BackstagePageThemeConsumer extends BackstageTheme {
-  pageTheme: PageTheme;
-}