@storybook/theming - npm Package Compare versions

Comparing version 5.0.0-rc.10 to 5.0.0-rc.11

dist/base.d.ts

@@ -60,2 +60,25 @@ import { easing, animation } from './animation';
 };
+export interface ThemeVars {
+    base: 'light' | 'dark';
+    colorPrimary?: string;
+    colorSecondary?: string;
+    appBg?: string;
+    appContentBg?: string;
+    appBorderColor?: string;
+    appBorderRadius?: number;
+    fontBase?: string;
+    fontCode?: string;
+    textColor?: string;
+    textInverseColor?: string;
+    barTextColor?: string;
+    barSelectedColor?: string;
+    barBg?: string;
+    inputBg?: string;
+    inputBorder?: string;
+    inputTextColor?: string;
+    inputBorderRadius?: number;
+    brandTitle?: string;
+    brandUrl?: string;
+    brandImage?: string;
+}
 export declare type Color = typeof color;
@@ -62,0 +85,0 @@ export declare type Background = typeof background;

dist/create.d.ts

@@ -1,29 +0,7 @@
-import { Theme } from './base';
+import { Theme, ThemeVars } from './base';
 interface Rest {
     [key: string]: any;
 }
-interface ThemeVar {
-    base?: 'light' | 'dark';
-    colorPrimary?: string;
-    colorSecondary?: string;
-    appBg?: string;
-    appContentBg?: string;
-    appBorderColor?: string;
-    appBorderRadius?: number;
-    fontBase?: string;
-    fontCode?: string;
-    textColor?: string;
-    textInverseColor?: string;
-    barTextColor?: string;
-    barSelectedColor?: string;
-    barBg?: string;
-    inputBg?: string;
-    inputBorder?: string;
-    inputTextColor?: string;
-    inputBorderRadius?: number;
-    brandTitle?: string;
-    brandUrl?: string;
-    brandImage?: string;
-}
-export declare const create: (vars: ThemeVar, rest?: Rest) => Theme;
+export declare const create: (vars?: ThemeVars, rest?: Rest) => ThemeVars;
+export declare const convert: (inherit?: ThemeVars) => Theme;
 export {};

dist/create.js

 "use strict";
-// This generates theme variables in the correct shape for the UI
 var __assign = (this && this.__assign) || function () {
@@ -14,8 +13,24 @@ __assign = Object.assign || function(t) {
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+// This generates theme variables in the correct shape for the UI
+var react_inspector_1 = require("react-inspector");
+var polished_1 = require("polished");
+var light_1 = __importDefault(require("./themes/light"));
+var dark_1 = __importDefault(require("./themes/dark"));
 var base_1 = require("./base");
 var animation_1 = require("./animation");
 var syntax_1 = require("./modules/syntax");
-var react_inspector_1 = require("react-inspector");
-var polished_1 = require("polished");
+var themes = { light: light_1.default, dark: dark_1.default };
 var createColors = function (vars) { return ({
@@ -77,38 +92,48 @@ // Changeable colors
 };
-exports.create = function (vars, rest) { return (__assign({ base: vars.base, color: createColors(vars), background: {
-        app: vars.appBg || base_1.background.app,
-        content: vars.appContentBg || base_1.color.lightest,
-        hoverable: vars.base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || base_1.background.hoverable,
-        positive: base_1.background.positive,
-        negative: base_1.background.negative,
-        warning: base_1.background.warning,
-    }, typography: {
-        fonts: {
-            base: vars.fontBase || base_1.typography.fonts.base,
-            mono: vars.fontCode || base_1.typography.fonts.mono,
-        },
-        weight: base_1.typography.weight,
-        size: base_1.typography.size,
-    }, animation: animation_1.animation,
-    easing: animation_1.easing, input: {
-        border: vars.inputBorder || base_1.color.border,
-        background: vars.inputBg || base_1.color.lightest,
-        color: vars.inputTextColor || base_1.color.defaultText,
-        borderRadius: vars.inputBorderRadius || vars.appBorderRadius || 4,
-    }, 
-    // UI
-    layoutMargin: 10, appBorderColor: vars.appBorderColor || base_1.color.border, appBorderRadius: vars.appBorderRadius || 4, 
-    // Toolbar default/active colors
-    barTextColor: vars.barTextColor || base_1.color.mediumdark, barSelectedColor: vars.barSelectedColor || base_1.color.secondary, barBg: vars.barBg || base_1.color.lightest, 
-    // Brand logo/text
-    brand: {
-        title: vars.brandTitle,
-        url: vars.brandUrl,
-        image: vars.brandImage,
-    }, code: syntax_1.create({
-        colors: vars.base === 'light' ? lightSyntaxColors : darkSyntaxColors,
-        mono: vars.fontCode || base_1.typography.fonts.mono,
-    }), 
-    // Addon actions theme
-    // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
-    addonActionsTheme: __assign({}, (vars.base === 'light' ? react_inspector_1.chromeLight : react_inspector_1.chromeDark), { BASE_FONT_FAMILY: vars.fontCode || base_1.typography.fonts.mono, BASE_FONT_SIZE: base_1.typography.size.s2 - 1, BASE_LINE_HEIGHT: '18px', BASE_BACKGROUND_COLOR: 'transparent', BASE_COLOR: vars.textColor || base_1.color.darkest, ARROW_COLOR: polished_1.opacify(0.2, vars.appBorderColor || base_1.color.border), ARROW_MARGIN_RIGHT: 4, ARROW_FONT_SIZE: 8, TREENODE_FONT_FAMILY: vars.fontCode || base_1.typography.fonts.mono, TREENODE_FONT_SIZE: base_1.typography.size.s2 - 1, TREENODE_LINE_HEIGHT: '18px', TREENODE_PADDING_LEFT: 12 }) }, (rest || {}))); };
+exports.create = function (vars, rest) {
+    if (vars === void 0) { vars = { base: 'light' }; }
+    var inherit = __assign({}, themes.light, (themes[vars.base] || {}), vars, { base: themes[vars.base] ? vars.base : 'light' });
+    return __assign({}, rest, inherit, { barSelectedColor: vars.barSelectedColor || inherit.colorSecondary });
+};
+exports.convert = function (inherit) {
+    if (inherit === void 0) { inherit = light_1.default; }
+    var base = inherit.base, colorPrimary = inherit.colorPrimary, colorSecondary = inherit.colorSecondary, appBg = inherit.appBg, appContentBg = inherit.appContentBg, appBorderColor = inherit.appBorderColor, appBorderRadius = inherit.appBorderRadius, fontBase = inherit.fontBase, fontCode = inherit.fontCode, textColor = inherit.textColor, textInverseColor = inherit.textInverseColor, barTextColor = inherit.barTextColor, barSelectedColor = inherit.barSelectedColor, barBg = inherit.barBg, inputBg = inherit.inputBg, inputBorder = inherit.inputBorder, inputTextColor = inherit.inputTextColor, inputBorderRadius = inherit.inputBorderRadius, brandTitle = inherit.brandTitle, brandUrl = inherit.brandUrl, brandImage = inherit.brandImage, rest = __rest(inherit, ["base", "colorPrimary", "colorSecondary", "appBg", "appContentBg", "appBorderColor", "appBorderRadius", "fontBase", "fontCode", "textColor", "textInverseColor", "barTextColor", "barSelectedColor", "barBg", "inputBg", "inputBorder", "inputTextColor", "inputBorderRadius", "brandTitle", "brandUrl", "brandImage"]);
+    return __assign({}, (rest || {}), { base: base, color: createColors(inherit), background: {
+            app: appBg,
+            content: appContentBg,
+            hoverable: base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || base_1.background.hoverable,
+            positive: base_1.background.positive,
+            negative: base_1.background.negative,
+            warning: base_1.background.warning,
+        }, typography: {
+            fonts: {
+                base: fontBase,
+                mono: fontCode,
+            },
+            weight: base_1.typography.weight,
+            size: base_1.typography.size,
+        }, animation: animation_1.animation,
+        easing: animation_1.easing, input: {
+            border: inputBorder,
+            background: inputBg,
+            color: inputTextColor,
+            borderRadius: inputBorderRadius,
+        }, 
+        // UI
+        layoutMargin: 10, appBorderColor: appBorderColor,
+        appBorderRadius: appBorderRadius,
+        // Toolbar default/active colors
+        barTextColor: barTextColor, barSelectedColor: barSelectedColor || colorSecondary, barBg: barBg, 
+        // Brand logo/text
+        brand: {
+            title: brandTitle,
+            url: brandUrl,
+            image: brandImage,
+        }, code: syntax_1.create({
+            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: __assign({}, (base === 'light' ? react_inspector_1.chromeLight : react_inspector_1.chromeDark), { BASE_FONT_FAMILY: fontCode, BASE_FONT_SIZE: base_1.typography.size.s2 - 1, BASE_LINE_HEIGHT: '18px', BASE_BACKGROUND_COLOR: 'transparent', BASE_COLOR: textColor, ARROW_COLOR: polished_1.opacify(0.2, appBorderColor), ARROW_MARGIN_RIGHT: 4, ARROW_FONT_SIZE: 8, TREENODE_FONT_FAMILY: fontCode, TREENODE_FONT_SIZE: base_1.typography.size.s2 - 1, TREENODE_LINE_HEIGHT: '18px', TREENODE_PADDING_LEFT: 12 }) });
+};

dist/ensure.d.ts

@@ -1,2 +0,2 @@
-import { Theme } from './base';
-export declare const ensure: (input: any) => Theme;
+import { Theme, ThemeVars } from './base';
+export declare const ensure: (input: ThemeVars) => Theme;

dist/ensure.js

@@ -6,13 +6,2 @@ "use strict";
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -25,36 +14,16 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var common_tags_1 = require("common-tags");
-var lodash_mergewith_1 = __importDefault(require("lodash.mergewith"));
-var lodash_isequal_1 = __importDefault(require("lodash.isequal"));
 var light_1 = __importDefault(require("./themes/light"));
-var base = __assign({}, light_1.default, { animation: {}, brand: {} });
-// merge with concatenating arrays, but no duplicates
-var merge = function (a, b) {
-    return lodash_mergewith_1.default({}, a, b, function (objValue, srcValue) {
-        if (Array.isArray(srcValue) && Array.isArray(objValue)) {
-            srcValue.forEach(function (s) {
-                var existing = objValue.find(function (o) { return o === s || lodash_isequal_1.default(o, s); });
-                if (!existing) {
-                    objValue.push(s);
-                }
-            });
-            return objValue;
-        }
-        if (Array.isArray(objValue)) {
-            return objValue;
-        }
-        return undefined;
-    });
-};
+var create_1 = require("./create");
 exports.ensure = function (input) {
     if (!input) {
-        return light_1.default;
+        return create_1.convert(light_1.default);
     }
     else {
-        var missing = deep_object_diff_1.deletedDiff(base, input);
+        var missing = deep_object_diff_1.deletedDiff(light_1.default, input);
         if (Object.keys(missing).length) {
             client_logger_1.logger.warn(common_tags_1.stripIndent(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          Your theme is missing properties, you should update your theme!\n\n          theme-data missing:\n        "], ["\n          Your theme is missing properties, you should update your theme!\n\n          theme-data missing:\n        "]))), missing);
         }
-        return merge(light_1.default, input);
+        return create_1.convert(input);
     }
 };
 var templateObject_1;

dist/index.d.ts

@@ -5,5 +5,5 @@ import styled from '@emotion/styled';
 declare const themes: {
-    dark: import("./base").Theme;
-    normal: import("./base").Theme;
-    light: import("./base").Theme;
+    dark: import("./base").ThemeVars;
+    normal: import("./base").ThemeVars;
+    light: import("./base").ThemeVars;
 };
@@ -10,0 +10,0 @@ export { themes };

dist/themes/dark.d.ts

@@ -1,2 +0,3 @@
-declare const _default: import("../base").Theme;
-export default _default;
+import { ThemeVars } from '../base';
+declare const theme: ThemeVars;
+export default theme;

dist/themes/dark.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var create_1 = require("../create");
 var base_1 = require("../base");
-exports.default = create_1.create({
-    // Is this a light theme or a dark theme?
+var theme = {
     base: 'dark',
@@ -31,2 +29,3 @@ // Storybook-specific color palette
     inputBorderRadius: 4,
-});
+};
+exports.default = theme;

dist/themes/light.d.ts

@@ -1,2 +0,3 @@
-declare const _default: import("../base").Theme;
-export default _default;
+import { ThemeVars } from '../base';
+declare const theme: ThemeVars;
+export default theme;

dist/themes/light.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var create_1 = require("../create");
 var base_1 = require("../base");
-exports.default = create_1.create({
-    // Is this a light theme or a dark theme?
+var theme = {
     base: 'light',
@@ -31,2 +29,3 @@ // Storybook-specific color palette
     inputBorderRadius: 4,
-});
+};
+exports.default = theme;

package.json

 {
   "name": "@storybook/theming",
-  "version": "5.0.0-rc.10",
+  "version": "5.0.0-rc.11",
   "description": "Core Storybook Components",
@@ -24,3 +24,3 @@ "keywords": [
     "@emotion/styled": "^10.0.7",
-    "@storybook/client-logger": "5.0.0-rc.10",
+    "@storybook/client-logger": "5.0.0-rc.11",
     "common-tags": "^1.8.0",
@@ -44,3 +44,3 @@ "deep-object-diff": "^1.1.0",
   },
-  "gitHead": "a464c6b23689223a452bd6fcb9956273d9b56023"
+  "gitHead": "2724eb7c21d0d28e9a5cf0abf314f2314f32d594"
 }

src/base.ts

@@ -97,2 +97,38 @@ import { easing, animation } from './animation';
 
+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;
@@ -99,0 +135,0 @@ export type Background = typeof background;

src/create.ts

 // This generates theme variables in the correct shape for the UI
+import { chromeLight, chromeDark } from 'react-inspector';
+import { opacify } from 'polished';
 
-import { Theme, Brand, color, Color, background, typography } from './base';
+import lightThemeVars from './themes/light';
+import darkThemeVars from './themes/dark';
+
+import { Theme, color, Color, background, typography, ThemeVars } from './base';
 import { easing, animation } from './animation';
 import { create as createSyntax } from './modules/syntax';
-import { chromeLight, chromeDark } from 'react-inspector';
-import { opacify } from 'polished';
 
+const themes: { light: ThemeVars; dark: ThemeVars } = { light: lightThemeVars, dark: darkThemeVars };
+
 interface Rest {
@@ -13,39 +18,3 @@ [key: string]: any;
 
-interface ThemeVar {
-  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;
-}
-
-const createColors = (vars: ThemeVar): Color => ({
+const createColors = (vars: ThemeVars): Color => ({
   // Changeable colors
@@ -114,74 +83,115 @@ primary: vars.colorPrimary,
 
-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,
+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 },
+  };
+};
 
-    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 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,
+    typography: {
+      fonts: {
+        base: fontBase,
+        mono: fontCode,
+      },
+      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,
-  },
+    input: {
+      border: inputBorder,
+      background: inputBg,
+      color: inputTextColor,
+      borderRadius: inputBorderRadius,
+    },
 
-  // UI
-  layoutMargin: 10,
-  appBorderColor: vars.appBorderColor || color.border,
-  appBorderRadius: vars.appBorderRadius || 4,
+    // UI
+    layoutMargin: 10,
+    appBorderColor,
+    appBorderRadius,
 
-  // Toolbar default/active colors
-  barTextColor: vars.barTextColor || color.mediumdark,
-  barSelectedColor: vars.barSelectedColor || color.secondary,
-  barBg: vars.barBg || color.lightest,
+    // Toolbar default/active colors
+    barTextColor,
+    barSelectedColor: barSelectedColor || colorSecondary,
+    barBg,
 
-  // Brand logo/text
-  brand: {
-    title: vars.brandTitle,
-    url: vars.brandUrl,
-    image: vars.brandImage,
-  },
+    // Brand logo/text
+    brand: {
+      title: brandTitle,
+      url: brandUrl,
+      image: brandImage,
+    },
 
-  code: createSyntax({
-    colors: vars.base === 'light' ? lightSyntaxColors : darkSyntaxColors,
-    mono: vars.fontCode || typography.fonts.mono,
-  }),
+    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: {
-    ...(vars.base === 'light' ? chromeLight : chromeDark),
+    // 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: 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 || {}),
-});
+      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,
+    },
+  };
+};

src/ensure.ts

@@ -6,38 +6,11 @@ import { logger } from '@storybook/client-logger';
 
-import mergeWith from 'lodash.mergewith';
-import isEqual from 'lodash.isequal';
-
 import light from './themes/light';
-import { Theme } from './base';
+import { Theme, ThemeVars } from './base';
+import { convert } from './create';
 
-const base = {
-  ...light,
-  animation: {},
-  brand: {},
-};
-
-// merge with concatenating arrays, but no duplicates
-const merge = (a: any, b: any) =>
-  mergeWith({}, a, b, (objValue: any, srcValue: any) => {
-    if (Array.isArray(srcValue) && Array.isArray(objValue)) {
-      srcValue.forEach(s => {
-        const existing = objValue.find(o => o === s || isEqual(o, s));
-        if (!existing) {
-          objValue.push(s);
-        }
-      });
-
-      return objValue;
-    }
-    if (Array.isArray(objValue)) {
-      return objValue;
-    }
-    return undefined;
-  });
-
-export const ensure = (input: any): Theme => {
+export const ensure = (input: ThemeVars): Theme => {
   if (!input) {
-    return light;
+    return convert(light);
   } else {
-    const missing = deletedDiff(base, input);
+    const missing = deletedDiff(light, input);
     if (Object.keys(missing).length) {
@@ -54,4 +27,4 @@ logger.warn(
 
-    return merge(light, input);
+    return convert(input);
   }
 };

src/themes/dark.ts

@@ -1,6 +0,4 @@
-import { create } from '../create';
-import { color, typography } from '../base';
+import { color, typography, ThemeVars } from '../base';
 
-export default create({
-  // Is this a light theme or a dark theme?
+const theme: ThemeVars = {
   base: 'dark',
@@ -36,2 +34,4 @@
   inputBorderRadius: 4,
-});
+};
+
+export default theme;

src/themes/light.ts

@@ -1,6 +0,4 @@
-import { create } from '../create';
-import { color, typography, background } from '../base';
+import { color, typography, background, ThemeVars } from '../base';
 
-export default create({
-  // Is this a light theme or a dark theme?
+const theme: ThemeVars = {
   base: 'light',
@@ -36,2 +34,4 @@
   inputBorderRadius: 4,
-});
+};
+
+export default theme;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57278

increased by16.53%

Number of package files

37

increased by5.71%

Lines of code

1803

increased by17%

Dependency changes

• + Added@storybook/client-logger@5.0.0-rc.11(transitive)

• - Removed@storybook/client-logger@5.0.0-rc.10(transitive)

• Updated@storybook/client-logger@5.0.0-rc.11