@storybook/theming - npm Package Compare versions

Comparing version 5.0.0-rc.2 to 5.0.0-rc.3

dist/base.d.ts

@@ -31,3 +31,3 @@ import { easing, animation } from './animation';
     app: string;
-    preview: string;
+    content: string;
     hoverable: string;
@@ -85,3 +85,3 @@ positive: string;
     barSelectedColor: string;
-    barBgColor: string;
+    barBg: string;
     brand: Brand;
@@ -88,0 +88,0 @@ code: {

dist/base.js

@@ -37,3 +37,3 @@ "use strict";
     app: '#F6F9FC',
-    preview: exports.color.lightest,
+    content: exports.color.lightest,
     hoverable: 'rgba(0,0,0,.05)',
@@ -40,0 +40,0 @@ // Notification, error, and warning backgrounds

dist/create.d.ts

@@ -6,5 +6,7 @@ import { Theme, Brand } from './base';
 interface ThemeVar {
+    base?: 'light' | 'dark';
     colorPrimary?: string;
     colorSecondary?: string;
     appBg?: string;
+    appContentBg?: string;
     appBorderColor?: string;
@@ -18,3 +20,3 @@ appBorderRadius?: number;
     barSelectedColor?: string;
-    barBgColor?: string;
+    barBg?: string;
     inputBg?: string;
@@ -21,0 +23,0 @@ inputBorder?: string;

dist/create.js

@@ -19,2 +19,3 @@ "use strict";
 var react_inspector_1 = require("react-inspector");
+var polished_1 = require("polished");
 var createColors = function (vars) { return ({
@@ -52,6 +53,30 @@ // Changeable colors
 }); };
-exports.create = function (vars, rest) { return (__assign({ color: createColors(vars), background: {
+var lightSyntaxColors = {
+    green1: '#008000',
+    red1: '#A31515',
+    red2: '#9a050f',
+    red3: '#800000',
+    red4: '#ff0000',
+    gray1: '#393A34',
+    cyan1: '#36acaa',
+    cyan2: '#2B91AF',
+    blue1: '#0000ff',
+    blue2: '#00009f',
+};
+var darkSyntaxColors = {
+    green1: '#7C7C7C',
+    red1: '#92C379',
+    red2: '#9a050f',
+    red3: '#A8FF60',
+    red4: '#96CBFE',
+    gray1: '#EDEDED',
+    cyan1: '#C6C5FE',
+    cyan2: '#FFFFB6',
+    blue1: '#B474DD',
+    blue2: '#00009f',
+};
+exports.create = function (vars, rest) { return (__assign({ base: vars.base, color: createColors(vars), background: {
         app: vars.appBg || base_1.background.app,
-        preview: base_1.color.lightest,
-        hoverable: base_1.background.hoverable,
+        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,
@@ -77,17 +102,6 @@ negative: base_1.background.negative,
     // Toolbar default/active colors
-    barTextColor: vars.barTextColor || base_1.color.mediumdark, barSelectedColor: vars.barSelectedColor || base_1.color.secondary, barBgColor: vars.barBgColor || base_1.color.lightest, 
+    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: vars.brand || null, code: syntax_1.create({
-        colors: {
-            green1: '#008000',
-            red1: '#A31515',
-            red2: '#9a050f',
-            red3: '#800000',
-            red4: '#ff0000',
-            gray1: '#393A34',
-            cyan1: '#36acaa',
-            cyan2: '#2B91AF',
-            blue1: '#0000ff',
-            blue2: '#00009f',
-        },
+        colors: vars.base === 'light' ? lightSyntaxColors : darkSyntaxColors,
         mono: vars.fontCode || base_1.typography.fonts.mono,
@@ -97,2 +111,2 @@ }),
     // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
-    addonActionsTheme: __assign({}, react_inspector_1.chromeLight, { 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: base_1.color.lightest, BASE_COLOR: vars.textColor || base_1.color.darkest, ARROW_COLOR: 'rgba(0,0,0,.2)', 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 || {}))); };
+    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), 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 || {}))); };

dist/global.d.ts

@@ -62,3 +62,3 @@ declare type Value = string | number;
         app: string;
-        preview: string;
+        content: string;
         hoverable: string;
@@ -65,0 +65,0 @@ positive: string;

dist/themes/dark.js

@@ -6,26 +6,29 @@ "use strict";
 exports.default = create_1.create({
+    // Is this a light theme or a dark theme?
+    base: 'dark',
     // 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,
+    // UI
+    appBg: '#2f2f2f',
+    appContentBg: '#333',
+    appBorderColor: 'rgba(255,255,255,.1)',
     appBorderRadius: 4,
-    // Typography
+    // Fonts
     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,
+    // Text colors
+    textColor: base_1.color.lightest,
+    textInverseColor: base_1.color.darkest,
+    // Toolbar default and active colors
+    barTextColor: '#999999',
     barSelectedColor: base_1.color.secondary,
-    inputBg: base_1.color.lightest,
-    inputBorder: base_1.color.border,
+    barBg: base_1.color.darkest,
+    // Form colors
+    inputBg: '#3f3f3f',
+    inputBorder: 'rgba(0,0,0,.3)',
+    inputTextColor: base_1.color.lightest,
+    inputBorderRadius: 4,
+    // Brand logo/text
+    brand: null,
 });

dist/themes/light.js

@@ -6,2 +6,4 @@ "use strict";
 exports.default = create_1.create({
+    // Is this a light theme or a dark theme?
+    base: 'light',
     // Storybook-specific color palette
@@ -12,2 +14,3 @@ colorPrimary: '#FF4785',
     appBg: base_1.background.app,
+    appContentBg: base_1.color.lightest,
     appBorderColor: base_1.color.border,
@@ -24,3 +27,3 @@ appBorderRadius: 4,
     barSelectedColor: base_1.color.secondary,
-    barBgColor: base_1.color.lightest,
+    barBg: base_1.color.lightest,
     // Form colors
@@ -27,0 +30,0 @@ inputBg: base_1.color.lightest,

package.json

 {
   "name": "@storybook/theming",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0-rc.3",
   "description": "Core Storybook Components",
@@ -27,2 +27,3 @@ "keywords": [
     "memoizerific": "^1.11.3",
+    "polished": "^2.3.3",
     "prop-types": "^15.6.2",
@@ -38,3 +39,3 @@ "react-inspector": "^2.3.1"
   },
-  "gitHead": "71b2c9e5798f3768acbeabecb45559c07138653c"
+  "gitHead": "698f32e49855a5b4643436b693706865329a5b7e"
 }

src/base.ts

@@ -43,3 +43,3 @@ import { easing, animation } from './animation';
   app: '#F6F9FC',
-  preview: color.lightest,
+  content: color.lightest,
   hoverable: 'rgba(0,0,0,.05)', // hover state for items in a list
@@ -129,3 +129,3 @@
   barSelectedColor: string;
-  barBgColor: string;
+  barBg: string;
 
@@ -132,0 +132,0 @@ // Brand logo/text

src/create.ts

@@ -6,3 +6,4 @@ // This generates theme variables in the correct shape for the UI
 import { create as createSyntax } from './modules/syntax';
-import { chromeLight } from 'react-inspector';
+import { chromeLight, chromeDark } from 'react-inspector';
+import { opacify } from 'polished';
 
@@ -14,2 +15,4 @@ interface Rest {
 interface ThemeVar {
+  base?: 'light' | 'dark';
+
   colorPrimary?: string;
@@ -20,2 +23,3 @@ colorSecondary?: string;
   appBg?: string;
+  appContentBg?: string;
   appBorderColor?: string;
@@ -35,3 +39,3 @@ appBorderRadius?: number;
   barSelectedColor?: string;
-  barBgColor?: string;
+  barBg?: string;
 
@@ -85,8 +89,35 @@ // Form colors
 
+const lightSyntaxColors = {
+  green1: '#008000',
+  red1: '#A31515',
+  red2: '#9a050f',
+  red3: '#800000',
+  red4: '#ff0000',
+  gray1: '#393A34',
+  cyan1: '#36acaa',
+  cyan2: '#2B91AF',
+  blue1: '#0000ff',
+  blue2: '#00009f',
+};
+
+const darkSyntaxColors = {
+  green1: '#7C7C7C',
+  red1: '#92C379',
+  red2: '#9a050f',
+  red3: '#A8FF60',
+  red4: '#96CBFE',
+  gray1: '#EDEDED',
+  cyan1: '#C6C5FE',
+  cyan2: '#FFFFB6',
+  blue1: '#B474DD',
+  blue2: '#00009f',
+};
+
 export const create = (vars: ThemeVar, rest?: Rest): Theme => ({
+  base: vars.base,
   color: createColors(vars),
   background: {
     app: vars.appBg || background.app,
-    preview: color.lightest,
-    hoverable: background.hoverable, // TODO: change so it responds to whether appColor is light or dark
+    content: vars.appContentBg || color.lightest,
+    hoverable: vars.base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,
 
@@ -123,3 +154,3 @@ positive: background.positive,
   barSelectedColor: vars.barSelectedColor || color.secondary,
-  barBgColor: vars.barBgColor || color.lightest,
+  barBg: vars.barBg || color.lightest,
 
@@ -130,14 +161,3 @@ // Brand logo/text
   code: createSyntax({
-    colors: {
-      green1: '#008000',
-      red1: '#A31515',
-      red2: '#9a050f',
-      red3: '#800000',
-      red4: '#ff0000',
-      gray1: '#393A34',
-      cyan1: '#36acaa',
-      cyan2: '#2B91AF',
-      blue1: '#0000ff',
-      blue2: '#00009f',
-    },
+    colors: vars.base === 'light' ? lightSyntaxColors : darkSyntaxColors,
     mono: vars.fontCode || typography.fonts.mono,
@@ -149,9 +169,10 @@ }),
   addonActionsTheme: {
-    ...chromeLight,
+    ...(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: color.lightest,
+    BASE_BACKGROUND_COLOR: 'transparent',
     BASE_COLOR: vars.textColor || color.darkest,
-    ARROW_COLOR: 'rgba(0,0,0,.2)',
+    ARROW_COLOR: opacify(0.2, vars.appBorderColor),
     ARROW_MARGIN_RIGHT: 4,
@@ -158,0 +179,0 @@ ARROW_FONT_SIZE: 8,

src/themes/dark.ts

 import { create } from '../create';
+import { color, typography } from '../base';
 
-import { color, typography, background } from '../base';
+export default create({
+  // Is this a light theme or a dark theme?
+  base: 'dark',
 
-export default create({
   // Storybook-specific color palette
   colorPrimary: '#FF4785', // coral
   colorSecondary: '#1EA7FD', // ocean
-  // colorTertiary: '#FAFBFC', // neutral buttons
-  // colorAncillary: '#22a699', // for code
 
-  // UI colors
-  appBg: background.app,
-  // bgHoverItem: background.hoverable,
-  appBorderColor: color.border,
+  // UI
+  appBg: '#2f2f2f',
+  appContentBg: '#333',
+  appBorderColor: 'rgba(255,255,255,.1)',
   appBorderRadius: 4,
 
-  // Typography
+  // Fonts
   fontBase: typography.fonts.base,
   fontCode: typography.fonts.mono,
-  // mainTextSize: typography.size.s2 - 1, // 13px
 
-  // Text colors (dark on light)
+  // Text colors
+  textColor: color.lightest,
+  textInverseColor: color.darkest,
 
-  textColor: color.darkest,
-  textInverseColor: color.lightest,
+  // Toolbar default and active colors
+  barTextColor: '#999999',
+  barSelectedColor: color.secondary,
+  barBg: color.darkest,
 
-  // Text colors (light on dark)
-  // inverseTextColor: color.lightest,
-  // inverseTextBgColor: color.mediumdark,
+  // Form colors
+  inputBg: '#3f3f3f',
+  inputBorder: 'rgba(0,0,0,.3)',
+  inputTextColor: color.lightest,
+  inputBorderRadius: 4,
 
-  barTextColor: color.mediumdark,
-  barSelectedColor: color.secondary,
-
-  inputBg: color.lightest,
-  inputBorder: color.border,
+  // Brand logo/text
+  brand: null,
 });

src/themes/light.ts

 import { create } from '../create';
-
 import { color, typography, background } from '../base';
 
 export default create({
+  // Is this a light theme or a dark theme?
+  base: 'light',
+
   // Storybook-specific color palette
@@ -12,2 +14,3 @@ colorPrimary: '#FF4785', // coral
   appBg: background.app,
+  appContentBg: color.lightest,
   appBorderColor: color.border,
@@ -27,3 +30,3 @@ appBorderRadius: 4,
   barSelectedColor: color.secondary,
-  barBgColor: color.lightest,
+  barBg: color.lightest,
 
@@ -30,0 +33,0 @@ // Form colors

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

50759

increased by2%

Lines of code

1582

increased by2.93%

Worsened metrics

Dependency count

10

increased by11.11%

Dependency changes

• + Addedpolished@^2.3.3

• + Addedpolished@2.3.3(transitive)