FIX base theme initialization and theme bootup

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';
-
-  colorPrimary?: string;
-  colorSecondary?: string;
-
-  // UI
-  appBg?: string;
-  appContentBg?: string;
-  appBorderColor?: string;
-  appBorderRadius?: number;
+import { themeVars as lightThemeVars } from './themes/light-vars';
+import { themeVars as darkThemeVars } from './themes/dark-vars';
 
-  // 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 base: { 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,85 @@ 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): Theme => {
+  const inherit: ThemeVars = {
+    ...base.light,
+    ...(base[vars.base] || base.light),
+    ...vars,
+    ...{ base: base[vars.base] ? vars.base : 'light' },
+  };
+
+  return {
+    ...(rest || {}),
+
+    base: inherit.base,
+    color: createColors(inherit),
+    background: {
+      app: inherit.appBg,
+      content: inherit.appContentBg,
+      hoverable: inherit.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: inherit.fontBase,
+        mono: inherit.fontCode,
+      },
+      weight: typography.weight,
+      size: typography.size,
+    },
+    animation,
+    easing,
+
+    input: {
+      border: inherit.inputBorder,
+      background: inherit.inputBg,
+      color: inherit.inputTextColor,
+      borderRadius: inherit.inputBorderRadius,
+    },
+
+    // UI
+    layoutMargin: 10,
+    appBorderColor: inherit.appBorderColor,
+    appBorderRadius: inherit.appBorderRadius,
+
+    // Toolbar default/active colors
+    barTextColor: inherit.barTextColor,
+    barSelectedColor: inherit.barSelectedColor,
+    barBg: inherit.barBg,
+
+    // Brand logo/text
+    brand: {
+      title: inherit.brandTitle,
+      url: inherit.brandUrl,
+      image: inherit.brandImage,
+    },
+
+    code: createSyntax({
+      colors: inherit.base === 'light' ? lightSyntaxColors : darkSyntaxColors,
+      mono: inherit.fontCode,
+    }),
+
+    // Addon actions theme
+    // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
+    addonActionsTheme: {
+      ...(inherit.base === 'light' ? chromeLight : chromeDark),
+
+      BASE_FONT_FAMILY: inherit.fontCode,
+      BASE_FONT_SIZE: typography.size.s2 - 1,
+      BASE_LINE_HEIGHT: '18px',
+      BASE_BACKGROUND_COLOR: 'transparent',
+      BASE_COLOR: inherit.textColor,
+      ARROW_COLOR: opacify(0.2, inherit.appBorderColor),
+      ARROW_MARGIN_RIGHT: 4,
+      ARROW_FONT_SIZE: 8,
+      TREENODE_FONT_FAMILY: inherit.fontCode,
+      TREENODE_FONT_SIZE: typography.size.s2 - 1,
+      TREENODE_LINE_HEIGHT: '18px',
+      TREENODE_PADDING_LEFT: 12,
+    },
+  };
+};

lib/theming/src/tests/create.test.js

@@ -0,0 +1,109 @@
+import { create } from '../create';
+
+describe('create base', () => {
+  it('should create a theme with minimal viable theme', () => {
+    const result = create({ base: 'light' });
+
+    expect(result).toBeDefined();
+  });
+  it('should pick `light` when `base` is missing', () => {
+    const result = create({ base: undefined });
+
+    expect(result.base).toBe('light');
+  });
+  it('should pick `light` when nothing is given', () => {
+    const result = create();
+
+    expect(result.base).toBe('light');
+  });
+  it('should pick `dark` when base is dark', () => {
+    const result = create({ base: 'dark' });
+
+    expect(result.base).toBe('dark');
+  });
+  it('should pick `light` when base is a unknown value', () => {
+    const result = create({ base: 'foobar' });
+
+    expect(result.base).toBe('light');
+  });
+});
+
+describe('create merge', () => {
+  it('should merge colorPrimary', () => {
+    const result = create({ base: 'light', colorPrimary: 'orange' });
+
+    expect(result.color).toHaveProperty('primary', 'orange');
+  });
+  it('should merge colorSecondary', () => {
+    const result = create({ base: 'light', colorSecondary: 'orange' });
+
+    expect(result.color).toHaveProperty('secondary', 'orange');
+  });
+  it('should merge appBg', () => {
+    const result = create({ base: 'light', appBg: 'orange' });
+
+    expect(result.background).toHaveProperty('app', 'orange');
+  });
+});
+
+describe('create brand', () => {
+  it('should have default', () => {
+    const result = create({ base: 'light' });
+
+    expect(result.brand).toEqual({
+      image: undefined,
+      title: undefined,
+      url: undefined,
+    });
+  });
+  it('should accept null', () => {
+    const result = create({ base: 'light', brandTitle: null, brandUrl: null, brandImage: null });
+
+    expect(result.brand).toEqual({
+      image: null,
+      title: null,
+      url: null,
+    });
+  });
+  it('should accept values', () => {
+    const result = create({
+      base: 'light',
+      brandImage: 'https://placehold.it/350x150',
+      brandTitle: 'my custom storybook',
+      brandUrl: 'https://example.com',
+    });
+
+    expect(result.brand).toEqual({
+      image: 'https://placehold.it/350x150',
+      title: 'my custom storybook',
+      url: 'https://example.com',
+    });
+  });
+});
+
+describe('create extend', () => {
+  it('should allow custom props', () => {
+    const result = create(
+      {
+        base: 'light',
+      },
+      {
+        myCustomProperty: 42,
+      }
+    );
+
+    expect(result.myCustomProperty).toEqual(42);
+  });
+  it('should not allow overriding known properties with custom props', () => {
+    const result = create(
+      {
+        base: 'light',
+      },
+      {
+        base: 42,
+      }
+    );
+
+    expect(result.base).toEqual('light');
+  });
+});