@storybook/theming - npm Package Compare versions

Comparing version 5.0.0-beta.1 to 5.0.0-beta.2

dist/animation.d.ts

@@ -10,2 +10,3 @@ export declare const easing: {
     inlineGlow: import("@emotion/utils").SerializedStyles;
+    hoverable: import("@emotion/utils").SerializedStyles;
 };

dist/animation.js

@@ -17,2 +17,4 @@ "use strict";
 var inlineGlow = core_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  animation: ", " 1.5s ease-in-out infinite;\n  background: ", ";\n  color: transparent;\n  cursor: progress;\n"], ["\n  animation: ", " 1.5s ease-in-out infinite;\n  background: ", ";\n  color: transparent;\n  cursor: progress;\n"])), glow, base_1.color.border);
+// hover & active state for links and buttons
+var hoverable = core_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  transition: all 150ms ease-out;\n  transform: translate3d(0, 0, 0);\n\n  &:hover {\n    transform: translate3d(0, -2px, 0);\n  }\n\n  &:active {\n    transform: translate3d(0, 0, 0);\n  }\n"], ["\n  transition: all 150ms ease-out;\n  transform: translate3d(0, 0, 0);\n\n  &:hover {\n    transform: translate3d(0, -2px, 0);\n  }\n\n  &:active {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
 exports.animation = {
@@ -24,3 +26,4 @@ rotate360: rotate360,
     inlineGlow: inlineGlow,
+    hoverable: hoverable,
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

dist/base.d.ts

 import { easing, animation } from './animation';
-export declare const baseFonts: {
-    fontFamily: string;
-    color: string;
-    WebkitFontSmoothing: string;
-};
-export declare const monoFonts: {
-    fontFamily: string;
-    color: string;
-    WebkitFontSmoothing: string;
-};
 export declare const color: {
@@ -16,2 +6,3 @@ primary: string;
     tertiary: string;
+    ancillary: string;
     orange: string;
@@ -34,8 +25,11 @@ gold: string;
     positive: string;
-    danger: string;
     negative: string;
+    warning: string;
+    defaultText: string;
+    inverseText: string;
 };
 export declare const background: {
     app: string;
-    appInverse: string;
+    preview: string;
+    hoverable: string;
     positive: string;
@@ -46,56 +40,54 @@ negative: string;
 export declare const typography: {
+    fonts: {
+        base: string;
+        mono: string;
+    };
     weight: {
-        regular: string;
-        bold: string;
-        black: string;
+        regular: number;
+        bold: number;
+        black: number;
     };
     size: {
-        s1: string;
-        s2: string;
-        s3: string;
-        m1: string;
-        m2: string;
-        m3: string;
-        l1: string;
-        l2: string;
-        l3: string;
-        code: string;
+        s1: number;
+        s2: number;
+        s3: number;
+        m1: number;
+        m2: number;
+        m3: number;
+        l1: number;
+        l2: number;
+        l3: number;
+        code: number;
     };
 };
+export declare type Color = typeof color;
+export declare type Background = typeof background;
+export declare type Typography = typeof typography;
+export declare type Animation = typeof animation;
+export declare type Easing = typeof easing;
+export declare type TextSize = number | string;
+export declare type Brand = string;
 export interface Theme {
-    color: typeof color;
-    background: typeof background;
-    typography: typeof typography;
-    easing: typeof easing;
-    animation: typeof animation;
-    mainBackground: string;
-    mainBorder: string;
-    mainBorderColor: string;
-    mainBorderRadius: number;
-    mainFill: string;
-    mainTextFace: string;
-    mainTextColor: string;
-    mainTextSize: number;
-    monoTextFace: string;
-    dimmedTextColor: string;
-    inputFill: string;
-    barFill: string;
+    color: Color;
+    background: Background;
+    typography: Typography;
+    animation: Animation;
+    easing: Easing;
+    input: {
+        border: string;
+        background: string;
+        color: string;
+        borderRadius: number;
+    };
+    layoutMargin: number;
+    appBorderColor: string;
+    appBorderRadius: number;
     barTextColor: string;
     barSelectedColor: string;
-    layoutMargin: number;
-    asideFill: string;
-    asideSelected: {
-        [key: string]: string | number;
-    };
-    asideHover: {
-        [key: string]: string | number;
-    };
-    brand: (() => object) | null;
+    barBgColor: string;
+    brand: Brand;
     code: {
         [key: string]: string | object;
     };
-    addonActionsTheme: {
-        [key: string]: string | object;
-    };
-    menuHighlightColor: string;
+    [key: string]: any;
 }

dist/base.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.baseFonts = {
-    fontFamily: [
-        '"Nunito Sans"',
-        '-apple-system',
-        '".SFNSText-Regular"',
-        '"San Francisco"',
-        'BlinkMacSystemFont',
-        '"Segoe UI"',
-        '"Helvetica Neue"',
-        'Helvetica',
-        'Arial',
-        'sans-serif',
-    ].join(', '),
-    color: '#444',
-    WebkitFontSmoothing: 'antialiased',
-};
-exports.monoFonts = {
-    fontFamily: [
-        '"Operator Mono"',
-        '"Fira Code Retina"',
-        '"Fira Code"',
-        '"FiraCode-Retina"',
-        '"Andale Mono"',
-        '"Lucida Console"',
-        'Consolas',
-        'Monaco',
-        'monospace',
-    ].join(', '),
-    color: '#444',
-    WebkitFontSmoothing: 'antialiased',
-};
 exports.color = {
@@ -38,3 +7,5 @@ // Official color palette
     secondary: '#1EA7FD',
-    tertiary: '#DDDDDD',
+    tertiary: '#FAFBFC',
+    ancillary: '#22a699',
+    // Complimentary
     orange: '#FC521F',
@@ -56,11 +27,15 @@ gold: '#FFAE00',
     darkest: '#333333',
-    border: 'rgba(0,0,0,.05)',
+    // For borders
+    border: 'rgba(0,0,0,.1)',
     // Status
     positive: '#66BF3C',
-    danger: '#FC521F',
     negative: '#FF4400',
+    warning: '#E69D00',
+    defaultText: '#333333',
+    inverseText: '#FFFFFF',
 };
 exports.background = {
     app: '#F6F9FC',
-    appInverse: '#7A8997',
+    preview: exports.color.lightest,
+    hoverable: 'rgba(0,0,0,.05)',
     // Notification, error, and warning backgrounds
@@ -72,19 +47,44 @@ positive: '#E1FFD4',
 exports.typography = {
+    fonts: {
+        base: [
+            '"Nunito Sans"',
+            '-apple-system',
+            '".SFNSText-Regular"',
+            '"San Francisco"',
+            'BlinkMacSystemFont',
+            '"Segoe UI"',
+            '"Helvetica Neue"',
+            'Helvetica',
+            'Arial',
+            'sans-serif',
+        ].join(', '),
+        mono: [
+            '"Operator Mono"',
+            '"Fira Code Retina"',
+            '"Fira Code"',
+            '"FiraCode-Retina"',
+            '"Andale Mono"',
+            '"Lucida Console"',
+            'Consolas',
+            'Monaco',
+            'monospace',
+        ].join(', '),
+    },
     weight: {
-        regular: '400',
-        bold: '700',
-        black: '900',
+        regular: 400,
+        bold: 700,
+        black: 900,
     },
     size: {
-        s1: '12',
-        s2: '14',
-        s3: '16',
-        m1: '20',
-        m2: '24',
-        m3: '28',
-        l1: '32',
-        l2: '40',
-        l3: '48',
-        code: '90',
+        s1: 12,
+        s2: 14,
+        s3: 16,
+        m1: 20,
+        m2: 24,
+        m3: 28,
+        l1: 32,
+        l2: 40,
+        l3: 48,
+        code: 90,
     },
 };

dist/index.d.ts

@@ -12,1 +12,2 @@ import styled from '@emotion/styled';
 export * from 'emotion-theming';
+export { createGlobal, createReset } from './global';

dist/index.js

@@ -22,1 +22,4 @@ "use strict";
 __export(require("emotion-theming"));
+var global_1 = require("./global");
+exports.createGlobal = global_1.createGlobal;
+exports.createReset = global_1.createReset;

dist/themes/dark.d.ts

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

dist/themes/dark.js

 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_inspector_1 = require("react-inspector");
-var light_syntax_1 = require("./light-syntax");
+var create_1 = require("../create");
 var base_1 = require("../base");
-var animation_1 = require("../animation");
-var background = {
-    app: '#F6F9FC',
-    appInverse: '#7A8997',
-    positive: '#E1FFD4',
-    negative: '#FEDED2',
-    warning: '#FFF5CF',
-};
-var main = {
-    mainBackground: '#1F1F1F',
-    mainBorder: '1px solid rgba(255, 255, 255, 0.1)',
-    mainBorderColor: 'rgba(255, 255, 255, 0.1)',
-    mainBorderRadius: 4,
-    mainFill: 'rgba(255,255,255,0.01)',
-    mainTextFace: base_1.baseFonts.fontFamily,
-    mainTextColor: '#efefef',
-    mainTextSize: 13,
-};
-var bar = {
-    barFill: 'rgba(255,255,255,1)',
+exports.default = create_1.create({
+    // Storybook-specific color palette
+    colorPrimary: '#FF4785',
+    colorSecondary: '#1EA7FD',
+    // colorTertiary: '#FAFBFC', // neutral buttons
+    // colorAncillary: '#22a699', // for code
+    // UI colors
+    appBg: base_1.background.app,
+    // bgHoverItem: background.hoverable,
+    appBorderColor: base_1.color.border,
+    appBorderRadius: 4,
+    // Typography
+    fontBase: base_1.typography.fonts.base,
+    fontCode: base_1.typography.fonts.mono,
+    // mainTextSize: typography.size.s2 - 1, // 13px
+    // Text colors (dark on light)
+    textColor: base_1.color.darkest,
+    textInverseColor: base_1.color.lightest,
+    // Text colors (light on dark)
+    // inverseTextColor: color.lightest,
+    // inverseTextBgColor: color.mediumdark,
     barTextColor: base_1.color.mediumdark,
     barSelectedColor: base_1.color.secondary,
-};
-var layout = {
-    layoutMargin: 10,
-};
-var aside = {
-    asideFill: 'transparent',
-    asideSelected: {
-        background: base_1.color.secondary,
-        color: base_1.color.lightest,
-    },
-    asideHover: {
-        background: '#EAF3FC',
-    },
-};
-var mono = {
-    monoTextFace: base_1.monoFonts.fontFamily,
-};
-var dark = __assign({}, main, bar, layout, mono, aside, { color: base_1.color,
-    background: background,
-    typography: base_1.typography,
-    easing: animation_1.easing,
-    animation: animation_1.animation, inputFill: 'rgba(0,0,0,0.1)', dimmedTextColor: 'rgba(0,0,0,0.4)', menuHighlightColor: '#199EFF', monoTextFace: base_1.monoFonts.fontFamily, brand: null, code: light_syntax_1.create({
-        colors: {
-            green1: '#008000',
-            red1: '#A31515',
-            red2: '#9a050f',
-            red3: '#800000',
-            red4: '#ff0000',
-            gray1: '#393A34',
-            cyan1: '#36acaa',
-            cyan2: '#2B91AF',
-            blue1: '#0000ff',
-            blue2: '#00009f',
-        },
-        mono: mono,
-    }), addonActionsTheme: __assign({}, react_inspector_1.chromeDark, { BASE_FONT_FAMILY: base_1.monoFonts.fontFamily, BASE_BACKGROUND_COLOR: 'transparent' }) });
-exports.default = dark;
+    inputBg: base_1.color.lightest,
+    inputBorder: base_1.color.border,
+});

dist/themes/light.d.ts

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

dist/themes/light.js

 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_inspector_1 = require("react-inspector");
-var light_syntax_1 = require("./light-syntax");
+var create_1 = require("../create");
 var base_1 = require("../base");
-var animation_1 = require("../animation");
-var main = {
-    mainBackground: '#f6f9fc linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.1))',
-    mainBorder: '1px solid rgba(0,0,0,0.1)',
-    mainBorderColor: 'rgba(0,0,0,0.1)',
-    mainBorderRadius: 4,
-    mainFill: 'rgba(255,255,255,0.89)',
-    mainTextFace: base_1.baseFonts.fontFamily,
-    mainTextColor: base_1.baseFonts.color,
-    mainTextSize: 13,
-};
-var bar = {
-    barFill: 'rgba(255,255,255,1)',
+exports.default = create_1.create({
+    // Storybook-specific color palette
+    colorPrimary: '#FF4785',
+    colorSecondary: '#1EA7FD',
+    // UI
+    appBg: base_1.background.app,
+    appBorderColor: base_1.color.border,
+    appBorderRadius: 4,
+    // Fonts
+    fontBase: base_1.typography.fonts.base,
+    fontCode: base_1.typography.fonts.mono,
+    // Text colors
+    textColor: base_1.color.darkest,
+    textInverseColor: base_1.color.lightest,
+    // Toolbar default and active colors
     barTextColor: base_1.color.mediumdark,
     barSelectedColor: base_1.color.secondary,
-};
-var layout = {
-    layoutMargin: 10,
-};
-var aside = {
-    asideFill: 'transparent',
-    asideSelected: {
-        background: base_1.color.secondary,
-        color: base_1.color.lightest,
-    },
-    asideHover: {
-        background: '#EAF3FC',
-    },
-};
-var mono = {
-    monoTextFace: base_1.monoFonts.fontFamily,
-};
-var light = __assign({}, main, bar, layout, mono, aside, { 
-    // DOM: official global style vars
-    color: base_1.color,
-    background: base_1.background,
-    typography: base_1.typography,
-    easing: animation_1.easing,
-    animation: animation_1.animation, inputFill: 'rgba(0,0,0,0.1)', dimmedTextColor: 'rgba(0,0,0,0.4)', menuHighlightColor: '#199EFF', monoTextFace: base_1.monoFonts.fontFamily, brand: null, code: light_syntax_1.create({
-        colors: {
-            green1: '#008000',
-            red1: '#A31515',
-            red2: '#9a050f',
-            red3: '#800000',
-            red4: '#ff0000',
-            gray1: '#393A34',
-            cyan1: '#36acaa',
-            cyan2: '#2B91AF',
-            blue1: '#0000ff',
-            blue2: '#00009f',
-        },
-        mono: mono,
-    }), addonActionsTheme: __assign({}, react_inspector_1.chromeLight, { BASE_FONT_FAMILY: base_1.monoFonts.fontFamily, BASE_BACKGROUND_COLOR: 'transparent' }) });
-exports.default = light;
+    barBgColor: base_1.color.lightest,
+    // Form colors
+    inputBg: base_1.color.lightest,
+    inputBorder: base_1.color.border,
+    inputTextColor: base_1.color.darkest,
+    inputBorderRadius: 4,
+    // Brand logo/text
+    brand: null,
+});

package.json

 {
   "name": "@storybook/theming",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.2",
   "description": "Core Storybook Components",
@@ -26,2 +26,3 @@ "keywords": [
     "global": "^4.3.2",
+    "memoizerific": "^1.11.3",
     "prop-types": "^15.6.2",
@@ -37,3 +38,3 @@ "react-inspector": "^2.3.1"
   },
-  "gitHead": "a146ec37a28ede67f24a9181a6be7c3df5f7448e"
+  "gitHead": "025b9f48886bce334035c83f136e06c7a7625838"
 }

src/animation.ts

@@ -42,2 +42,16 @@ import { css, keyframes } from '@emotion/core';
 
+// hover & active state for links and buttons
+const hoverable = css`
+  transition: all 150ms ease-out;
+  transform: translate3d(0, 0, 0);
+
+  &:hover {
+    transform: translate3d(0, -2px, 0);
+  }
+
+  &:active {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
 export const animation = {
@@ -49,2 +63,3 @@ rotate360,
   inlineGlow,
+  hoverable,
 };

src/base.ts

 import { easing, animation } from './animation';
 
-export const baseFonts = {
-  fontFamily: [
-    '"Nunito Sans"',
-    '-apple-system',
-    '".SFNSText-Regular"',
-    '"San Francisco"',
-    'BlinkMacSystemFont',
-    '"Segoe UI"',
-    '"Helvetica Neue"',
-    'Helvetica',
-    'Arial',
-    'sans-serif',
-  ].join(', '),
-  color: '#444',
-  WebkitFontSmoothing: 'antialiased',
-};
-
-export const monoFonts = {
-  fontFamily: [
-    '"Operator Mono"',
-    '"Fira Code Retina"',
-    '"Fira Code"',
-    '"FiraCode-Retina"',
-    '"Andale Mono"',
-    '"Lucida Console"',
-    'Consolas',
-    'Monaco',
-    'monospace',
-  ].join(', '),
-  color: '#444',
-  WebkitFontSmoothing: 'antialiased',
-};
-
 export const color = {
@@ -40,4 +7,6 @@ // Official color palette
   secondary: '#1EA7FD', // ocean
-  tertiary: '#DDDDDD',
+  tertiary: '#FAFBFC',
+  ancillary: '#22a699', // for code
 
+  // Complimentary
   orange: '#FC521F',
@@ -61,8 +30,12 @@ gold: '#FFAE00',
 
-  border: 'rgba(0,0,0,.05)',
+  // For borders
+  border: 'rgba(0,0,0,.1)',
 
   // Status
   positive: '#66BF3C',
-  danger: '#FC521F',
   negative: '#FF4400',
+  warning: '#E69D00',
+
+  defaultText: '#333333',
+  inverseText: '#FFFFFF',
 };
@@ -72,3 +45,4 @@
   app: '#F6F9FC',
-  appInverse: '#7A8997',
+  preview: color.lightest,
+  hoverable: 'rgba(0,0,0,.05)', // hover state for items in a list
 
@@ -82,58 +56,82 @@ // Notification, error, and warning backgrounds
 export const typography = {
+  fonts: {
+    base: [
+      '"Nunito Sans"',
+      '-apple-system',
+      '".SFNSText-Regular"',
+      '"San Francisco"',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      '"Helvetica Neue"',
+      'Helvetica',
+      'Arial',
+      'sans-serif',
+    ].join(', '),
+    mono: [
+      '"Operator Mono"',
+      '"Fira Code Retina"',
+      '"Fira Code"',
+      '"FiraCode-Retina"',
+      '"Andale Mono"',
+      '"Lucida Console"',
+      'Consolas',
+      'Monaco',
+      'monospace',
+    ].join(', '),
+  },
   weight: {
-    regular: '400',
-    bold: '700',
-    black: '900',
+    regular: 400,
+    bold: 700,
+    black: 900,
   },
   size: {
-    s1: '12',
-    s2: '14',
-    s3: '16',
-    m1: '20',
-    m2: '24',
-    m3: '28',
-    l1: '32',
-    l2: '40',
-    l3: '48',
-    code: '90',
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 24,
+    m3: 28,
+    l1: 32,
+    l2: 40,
+    l3: 48,
+    code: 90,
   },
 };
 
+export type Color = typeof color;
+export type Background = typeof background;
+export type Typography = typeof typography;
+export type Animation = typeof animation;
+export type Easing = typeof easing;
+
+export type TextSize = number | string;
+export type Brand = string;
+
 export interface Theme {
-  color: typeof color;
-  background: typeof background;
-  typography: typeof typography;
-  easing: typeof easing;
-  animation: typeof animation;
+  color: Color;
+  background: Background;
+  typography: Typography;
+  animation: Animation;
+  easing: Easing;
 
-  mainBackground: string;
-  mainBorder: string;
-  mainBorderColor: string;
-  mainBorderRadius: number;
-  mainFill: string;
-  mainTextFace: string;
-  mainTextColor: string;
-  mainTextSize: number;
+  input: {
+    border: string;
+    background: string;
+    color: string;
+    borderRadius: number;
+  };
 
-  monoTextFace: string;
+  // UI
+  layoutMargin: number;
+  appBorderColor: string;
+  appBorderRadius: number;
 
-  dimmedTextColor: string;
-  inputFill: string;
-
-  barFill: string;
+  // Toolbar default/active colors
   barTextColor: string;
   barSelectedColor: string;
+  barBgColor: string;
 
-  layoutMargin: number;
+  // Brand logo/text
+  brand: Brand;
 
-  asideFill: string;
-  asideSelected: {
-    [key: string]: string | number;
-  };
-  asideHover: {
-    [key: string]: string | number;
-  };
-
-  brand: (() => object) | null;
-
   code: {
@@ -143,8 +141,3 @@ [key: string]: string | object;
 
-  addonActionsTheme: {
-    [key: string]: string | object;
-  };
-
-  // unknown if still used
-  menuHighlightColor: string;
+  [key: string]: any;
 }

src/index.ts

 import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import dark from './themes/dark';
@@ -19,1 +20,3 @@ import light from './themes/light';
 export * from 'emotion-theming';
+
+export { createGlobal, createReset } from './global';

src/themes/dark.ts

@@ -1,93 +0,37 @@
-import { chromeDark } from 'react-inspector';
-import { create as createSyntax } from './light-syntax';
+import { create } from '../create';
 
-import { baseFonts, monoFonts, color, Theme, typography } from '../base';
-import { easing, animation } from '../animation';
+import { color, typography, background } from '../base';
 
-const background = {
-  app: '#F6F9FC',
-  appInverse: '#7A8997',
-  positive: '#E1FFD4',
-  negative: '#FEDED2',
-  warning: '#FFF5CF',
-};
+export default create({
+  // Storybook-specific color palette
+  colorPrimary: '#FF4785', // coral
+  colorSecondary: '#1EA7FD', // ocean
+  // colorTertiary: '#FAFBFC', // neutral buttons
+  // colorAncillary: '#22a699', // for code
 
-const main = {
-  mainBackground: '#1F1F1F',
-  mainBorder: '1px solid rgba(255, 255, 255, 0.1)',
-  mainBorderColor: 'rgba(255, 255, 255, 0.1)',
-  mainBorderRadius: 4,
-  mainFill: 'rgba(255,255,255,0.01)',
-  mainTextFace: baseFonts.fontFamily,
-  mainTextColor: '#efefef',
-  mainTextSize: 13,
-};
+  // UI colors
+  appBg: background.app,
+  // bgHoverItem: background.hoverable,
+  appBorderColor: color.border,
+  appBorderRadius: 4,
 
-const bar = {
-  barFill: 'rgba(255,255,255,1)',
-  barTextColor: color.mediumdark,
-  barSelectedColor: color.secondary,
-};
+  // Typography
+  fontBase: typography.fonts.base,
+  fontCode: typography.fonts.mono,
+  // mainTextSize: typography.size.s2 - 1, // 13px
 
-const layout = {
-  layoutMargin: 10,
-};
+  // Text colors (dark on light)
 
-const aside = {
-  asideFill: 'transparent',
-  asideSelected: {
-    background: color.secondary,
-    color: color.lightest,
-  },
-  asideHover: {
-    background: '#EAF3FC',
-  },
-};
+  textColor: color.darkest,
+  textInverseColor: color.lightest,
 
-const mono = {
-  monoTextFace: monoFonts.fontFamily,
-};
+  // Text colors (light on dark)
+  // inverseTextColor: color.lightest,
+  // inverseTextBgColor: color.mediumdark,
 
-const dark: Theme = {
-  ...main,
-  ...bar,
-  ...layout,
-  ...mono,
-  ...aside,
+  barTextColor: color.mediumdark,
+  barSelectedColor: color.secondary,
 
-  color,
-  background,
-  typography,
-  easing,
-  animation,
-
-  inputFill: 'rgba(0,0,0,0.1)',
-  dimmedTextColor: 'rgba(0,0,0,0.4)',
-  menuHighlightColor: '#199EFF',
-  monoTextFace: monoFonts.fontFamily,
-
-  brand: null,
-
-  code: createSyntax({
-    colors: {
-      green1: '#008000',
-      red1: '#A31515',
-      red2: '#9a050f',
-      red3: '#800000',
-      red4: '#ff0000',
-      gray1: '#393A34',
-      cyan1: '#36acaa',
-      cyan2: '#2B91AF',
-      blue1: '#0000ff',
-      blue2: '#00009f',
-    },
-    mono,
-  }),
-  addonActionsTheme: {
-    ...chromeDark,
-    BASE_FONT_FAMILY: monoFonts.fontFamily,
-    BASE_BACKGROUND_COLOR: 'transparent',
-  },
-};
-
-export default dark;
+  inputBg: color.lightest,
+  inputBorder: color.border,
+});

src/themes/light.ts

@@ -1,86 +0,36 @@
-import { chromeLight } from 'react-inspector';
-import { create as createSyntax } from './light-syntax';
+import { create } from '../create';
 
-import { baseFonts, monoFonts, color, background, typography, Theme } from '../base';
-import { easing, animation } from '../animation';
+import { color, typography, background } from '../base';
 
-const main = {
-  mainBackground: '#f6f9fc linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.1))',
-  mainBorder: '1px solid rgba(0,0,0,0.1)',
-  mainBorderColor: 'rgba(0,0,0,0.1)',
-  mainBorderRadius: 4,
-  mainFill: 'rgba(255,255,255,0.89)',
-  mainTextFace: baseFonts.fontFamily,
-  mainTextColor: baseFonts.color,
-  mainTextSize: 13,
-};
+export default create({
+  // Storybook-specific color palette
+  colorPrimary: '#FF4785', // coral
+  colorSecondary: '#1EA7FD', // ocean
 
-const bar = {
-  barFill: 'rgba(255,255,255,1)',
-  barTextColor: color.mediumdark,
-  barSelectedColor: color.secondary,
-};
+  // UI
+  appBg: background.app,
+  appBorderColor: color.border,
+  appBorderRadius: 4,
 
-const layout = {
-  layoutMargin: 10,
-};
+  // Fonts
+  fontBase: typography.fonts.base,
+  fontCode: typography.fonts.mono,
 
-const aside = {
-  asideFill: 'transparent',
-  asideSelected: {
-    background: color.secondary,
-    color: color.lightest,
-  },
-  asideHover: {
-    background: '#EAF3FC',
-  },
-};
+  // Text colors
+  textColor: color.darkest,
+  textInverseColor: color.lightest,
 
-const mono = {
-  monoTextFace: monoFonts.fontFamily,
-};
+  // Toolbar default and active colors
+  barTextColor: color.mediumdark,
+  barSelectedColor: color.secondary,
+  barBgColor: color.lightest,
 
-const light: Theme = {
-  ...main,
-  ...bar,
-  ...layout,
-  ...mono,
-  ...aside,
+  // Form colors
+  inputBg: color.lightest,
+  inputBorder: color.border,
+  inputTextColor: color.darkest,
+  inputBorderRadius: 4,
 
-  // DOM: official global style vars
-  color,
-  background,
-  typography,
-  easing,
-  animation,
-
-  inputFill: 'rgba(0,0,0,0.1)',
-  dimmedTextColor: 'rgba(0,0,0,0.4)',
-  menuHighlightColor: '#199EFF',
-  monoTextFace: monoFonts.fontFamily,
-
+  // Brand logo/text
   brand: null,
-
-  code: createSyntax({
-    colors: {
-      green1: '#008000',
-      red1: '#A31515',
-      red2: '#9a050f',
-      red3: '#800000',
-      red4: '#ff0000',
-      gray1: '#393A34',
-      cyan1: '#36acaa',
-      cyan2: '#2B91AF',
-      blue1: '#0000ff',
-      blue2: '#00009f',
-    },
-    mono,
-  }),
-  addonActionsTheme: {
-    ...chromeLight,
-    BASE_FONT_FAMILY: monoFonts.fontFamily,
-    BASE_BACKGROUND_COLOR: 'transparent',
-  },
-};
-
-export default light;
+});

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

49786

increased by11.93%

Number of package files

36

increased by9.09%

Lines of code

1539

increased by6.43%

Worsened metrics

Dependency count

9

increased by12.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmemoizerific@^1.11.3

• + Addedmap-or-similar@1.5.0(transitive)

• + Addedmemoizerific@1.11.3(transitive)