FIX base theme initialization and theme bootup

addons/knobs/src/components/__tests__/Panel.js

@@ -3,7 +3,7 @@ import { shallow, mount } from 'enzyme';
 import { STORY_CHANGED } from '@storybook/core-events';
 import { TabsState } from '@storybook/components';
 
-import { ThemeProvider, themes } from '@storybook/theming';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
 import Panel from '../Panel';
 import { CHANGE, SET } from '../../shared';
 import PropForm from '../PropForm';
@@ -191,7 +191,7 @@ describe('Panel', () => {
       // We have to do a full mount.
 
       const root = mount(
-        <ThemeProvider theme={themes.light}>
+        <ThemeProvider theme={convert(themes.light)}>
           <Panel channel={testChannel} api={testApi} active />
         </ThemeProvider>
       );
@@ -225,7 +225,7 @@ describe('Panel', () => {
 
     it('should have one tab per groupId and an empty ALL tab when all are defined', () => {
       const root = mount(
-        <ThemeProvider theme={themes.light}>
+        <ThemeProvider theme={convert(themes.light)}>
           <Panel channel={testChannel} api={testApi} active />
         </ThemeProvider>
       );
@@ -265,7 +265,7 @@ describe('Panel', () => {
 
     it('the ALL tab should have its own additional content when there are knobs both with and without a groupId', () => {
       const root = mount(
-        <ThemeProvider theme={themes.light}>
+        <ThemeProvider theme={convert(themes.light)}>
           <Panel channel={testChannel} api={testApi} active />
         </ThemeProvider>
       );

examples/official-storybook/config.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
-import { Global, ThemeProvider, themes, createReset } from '@storybook/theming';
+import { Global, ThemeProvider, themes, createReset, create, convert } from '@storybook/theming';
 
 import { withCssResources } from '@storybook/addon-cssresources';
 import { withA11y } from '@storybook/addon-a11y';
@@ -32,7 +32,7 @@ addDecorator(withA11y);
 addDecorator(withNotes);
 
 addDecorator(storyFn => (
-  <ThemeProvider theme={themes.normal}>
+  <ThemeProvider theme={convert(themes.light)}>
     <Global styles={createReset} />
     {storyFn()}
   </ThemeProvider>
@@ -49,9 +49,10 @@ addParameters({
   options: {
     hierarchySeparator: /\/|\./,
     hierarchyRootSeparator: '|',
+    theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }),
   },
   backgrounds: [
-    { name: 'storybook app', value: themes.normal.background.app, default: true },
+    { name: 'storybook app', value: themes.light.appBg, default: true },
     { name: 'light', value: '#eeeeee' },
     { name: 'dark', value: '#222222' },
   ],

lib/theming/src/base.ts

@@ -94,6 +94,42 @@ export const typography = {
   },
 };
 
+export interface ThemeVars {
+  base: 'light' | 'dark';
+
+  colorPrimary?: string;
+  colorSecondary?: string;
+
+  // UI
+  appBg?: string;
+  appContentBg?: string;
+  appBorderColor?: string;
+  appBorderRadius?: number;
+
+  // Typography
+  fontBase?: string;
+  fontCode?: string;
+
+  // Text colors
+  textColor?: string;
+  textInverseColor?: string;
+
+  // Toolbar default and active colors
+  barTextColor?: string;
+  barSelectedColor?: string;
+  barBg?: string;
+
+  // Form colors
+  inputBg?: string;
+  inputBorder?: string;
+  inputTextColor?: string;
+  inputBorderRadius?: number;
+
+  brandTitle?: string;
+  brandUrl?: string;
+  brandImage?: string;
+}
+
 export type Color = typeof color;
 export type Background = typeof background;
 export type Typography = typeof typography;

lib/theming/src/create.ts

@@ -1,52 +1,21 @@
 // This generates theme variables in the correct shape for the UI
-
-import { Theme, Brand, color, Color, background, typography } from './base';
-import { easing, animation } from './animation';
-import { create as createSyntax } from './modules/syntax';
 import { chromeLight, chromeDark } from 'react-inspector';
 import { opacify } from 'polished';
 
-interface Rest {
-  [key: string]: any;
-}
-
-interface ThemeVar {
-  base?: 'light' | 'dark';
+import lightThemeVars from './themes/light';
+import darkThemeVars from './themes/dark';
 
-  colorPrimary?: string;
-  colorSecondary?: string;
-
-  // UI
-  appBg?: string;
-  appContentBg?: string;
-  appBorderColor?: string;
-  appBorderRadius?: number;
-
-  // Typography
-  fontBase?: string;
-  fontCode?: string;
-
-  // Text colors
-  textColor?: string;
-  textInverseColor?: string;
-
-  // Toolbar default and active colors
-  barTextColor?: string;
-  barSelectedColor?: string;
-  barBg?: string;
+import { Theme, color, Color, background, typography, ThemeVars } from './base';
+import { easing, animation } from './animation';
+import { create as createSyntax } from './modules/syntax';
 
-  // Form colors
-  inputBg?: string;
-  inputBorder?: string;
-  inputTextColor?: string;
-  inputBorderRadius?: number;
+const themes: { light: ThemeVars; dark: ThemeVars } = { light: lightThemeVars, dark: darkThemeVars };
 
-  brandTitle?: string;
-  brandUrl?: string;
-  brandImage?: string;
+interface Rest {
+  [key: string]: any;
 }
 
-const createColors = (vars: ThemeVar): Color => ({
+const createColors = (vars: ThemeVars): Color => ({
   // Changeable colors
   primary: vars.colorPrimary,
   secondary: vars.colorSecondary,
@@ -110,76 +79,117 @@ const darkSyntaxColors = {
   blue2: '#00009f',
 };
 
-export const create = (vars: ThemeVar, rest?: Rest): Theme => ({
-  base: vars.base,
-  color: createColors(vars),
-  background: {
-    app: vars.appBg || background.app,
-    content: vars.appContentBg || color.lightest,
-    hoverable: vars.base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
-
-    positive: background.positive,
-    negative: background.negative,
-    warning: background.warning,
-  },
-  typography: {
-    fonts: {
-      base: vars.fontBase || typography.fonts.base,
-      mono: vars.fontCode || typography.fonts.mono,
+export const create = (vars: ThemeVars = { base: 'light' }, rest?: Rest): ThemeVars => {
+  const inherit: ThemeVars = {
+    ...themes.light,
+    ...(themes[vars.base] || {}),
+    ...vars,
+    ...{ base: themes[vars.base] ? vars.base : 'light' },
+  };
+  return {
+    ...rest,
+    ...inherit,
+    ...{ barSelectedColor: vars.barSelectedColor || inherit.colorSecondary },
+  };
+};
+
+export const convert = (inherit: ThemeVars = lightThemeVars): Theme => {
+  const {
+    base,
+    colorPrimary,
+    colorSecondary,
+    appBg,
+    appContentBg,
+    appBorderColor,
+    appBorderRadius,
+    fontBase,
+    fontCode,
+    textColor,
+    textInverseColor,
+    barTextColor,
+    barSelectedColor,
+    barBg,
+    inputBg,
+    inputBorder,
+    inputTextColor,
+    inputBorderRadius,
+    brandTitle,
+    brandUrl,
+    brandImage,
+    ...rest
+  } = inherit;
+
+  return {
+    ...(rest || {}),
+
+    base,
+    color: createColors(inherit),
+    background: {
+      app: appBg,
+      content: appContentBg,
+      hoverable: base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
+
+      positive: background.positive,
+      negative: background.negative,
+      warning: background.warning,
     },
-    weight: typography.weight,
-    size: typography.size,
-  },
-  animation,
-  easing,
-
-  input: {
-    border: vars.inputBorder || color.border,
-    background: vars.inputBg || color.lightest,
-    color: vars.inputTextColor || color.defaultText,
-    borderRadius: vars.inputBorderRadius || vars.appBorderRadius || 4,
-  },
-
-  // UI
-  layoutMargin: 10,
-  appBorderColor: vars.appBorderColor || color.border,
-  appBorderRadius: vars.appBorderRadius || 4,
-
-  // Toolbar default/active colors
-  barTextColor: vars.barTextColor || color.mediumdark,
-  barSelectedColor: vars.barSelectedColor || color.secondary,
-  barBg: vars.barBg || color.lightest,
-
-  // Brand logo/text
-  brand: {
-    title: vars.brandTitle,
-    url: vars.brandUrl,
-    image: vars.brandImage,
-  },
-
-  code: createSyntax({
-    colors: vars.base === 'light' ? lightSyntaxColors : darkSyntaxColors,
-    mono: vars.fontCode || typography.fonts.mono,
-  }),
-
-  // Addon actions theme
-  // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
-  addonActionsTheme: {
-    ...(vars.base === 'light' ? chromeLight : chromeDark),
-
-    BASE_FONT_FAMILY: vars.fontCode || typography.fonts.mono,
-    BASE_FONT_SIZE: typography.size.s2 - 1,
-    BASE_LINE_HEIGHT: '18px',
-    BASE_BACKGROUND_COLOR: 'transparent',
-    BASE_COLOR: vars.textColor || color.darkest,
-    ARROW_COLOR: opacify(0.2, vars.appBorderColor || color.border),
-    ARROW_MARGIN_RIGHT: 4,
-    ARROW_FONT_SIZE: 8,
-    TREENODE_FONT_FAMILY: vars.fontCode || typography.fonts.mono,
-    TREENODE_FONT_SIZE: typography.size.s2 - 1,
-    TREENODE_LINE_HEIGHT: '18px',
-    TREENODE_PADDING_LEFT: 12,
-  },
-
-  ...(rest || {}),
-});
+    typography: {
+      fonts: {
+        base: fontBase,
+        mono: fontCode,
+      },
+      weight: typography.weight,
+      size: typography.size,
+    },
+    animation,
+    easing,
+
+    input: {
+      border: inputBorder,
+      background: inputBg,
+      color: inputTextColor,
+      borderRadius: inputBorderRadius,
+    },
+
+    // UI
+    layoutMargin: 10,
+    appBorderColor,
+    appBorderRadius,
+
+    // Toolbar default/active colors
+    barTextColor,
+    barSelectedColor: barSelectedColor || colorSecondary,
+    barBg,
+
+    // Brand logo/text
+    brand: {
+      title: brandTitle,
+      url: brandUrl,
+      image: brandImage,
+    },
+
+    code: createSyntax({
+      colors: base === 'light' ? lightSyntaxColors : darkSyntaxColors,
+      mono: fontCode,
+    }),
+
+    // Addon actions theme
+    // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
+    addonActionsTheme: {
+      ...(base === 'light' ? chromeLight : chromeDark),
+
+      BASE_FONT_FAMILY: fontCode,
+      BASE_FONT_SIZE: typography.size.s2 - 1,
+      BASE_LINE_HEIGHT: '18px',
+      BASE_BACKGROUND_COLOR: 'transparent',
+      BASE_COLOR: textColor,
+      ARROW_COLOR: opacify(0.2, appBorderColor),
+      ARROW_MARGIN_RIGHT: 4,
+      ARROW_FONT_SIZE: 8,
+      TREENODE_FONT_FAMILY: fontCode,
+      TREENODE_FONT_SIZE: typography.size.s2 - 1,
+      TREENODE_LINE_HEIGHT: '18px',
+      TREENODE_PADDING_LEFT: 12,
+    },
+  };
+};