@storybook/theming - npm Package Compare versions

Comparing version 5.1.0-beta.1 to 5.1.0-rc.0

dist/convert.js

@@ -18,4 +18,2 @@ "use strict";
 
-var _reactInspector = require("react-inspector");
-
 var _polished = require("polished");
@@ -130,3 +128,3 @@
       app: appBg,
-      bar: _base.background.bar,
+      bar: barBg,
       content: appContentBg,
@@ -176,3 +174,3 @@ gridCellSize: gridCellSize || _base.background.gridCellSize,
     // API example https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js
-    addonActionsTheme: Object.assign({}, base === 'light' ? _reactInspector.chromeLight : _reactInspector.chromeDark, {
+    addonActionsTheme: Object.assign({}, base === 'light' ? _syntax.chromeLight : _syntax.chromeDark, {
       BASE_FONT_FAMILY: fontCode,
@@ -179,0 +177,0 @@ BASE_FONT_SIZE: _base.typography.size.s2 - 1,

dist/modules/syntax.d.ts

 interface ColorsHash {
     [key: string]: string;
 }
+export declare const chromeDark: {
+    BASE_FONT_FAMILY: string;
+    BASE_FONT_SIZE: string;
+    BASE_LINE_HEIGHT: number;
+    BASE_BACKGROUND_COLOR: string;
+    BASE_COLOR: string;
+    OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: number;
+    OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: number;
+    OBJECT_NAME_COLOR: string;
+    OBJECT_VALUE_NULL_COLOR: string;
+    OBJECT_VALUE_UNDEFINED_COLOR: string;
+    OBJECT_VALUE_REGEXP_COLOR: string;
+    OBJECT_VALUE_STRING_COLOR: string;
+    OBJECT_VALUE_SYMBOL_COLOR: string;
+    OBJECT_VALUE_NUMBER_COLOR: string;
+    OBJECT_VALUE_BOOLEAN_COLOR: string;
+    OBJECT_VALUE_FUNCTION_PREFIX_COLOR: string;
+    HTML_TAG_COLOR: string;
+    HTML_TAGNAME_COLOR: string;
+    HTML_TAGNAME_TEXT_TRANSFORM: string;
+    HTML_ATTRIBUTE_NAME_COLOR: string;
+    HTML_ATTRIBUTE_VALUE_COLOR: string;
+    HTML_COMMENT_COLOR: string;
+    HTML_DOCTYPE_COLOR: string;
+    ARROW_COLOR: string;
+    ARROW_MARGIN_RIGHT: number;
+    ARROW_FONT_SIZE: number;
+    ARROW_ANIMATION_DURATION: string;
+    TREENODE_FONT_FAMILY: string;
+    TREENODE_FONT_SIZE: string;
+    TREENODE_LINE_HEIGHT: number;
+    TREENODE_PADDING_LEFT: number;
+    TABLE_BORDER_COLOR: string;
+    TABLE_TH_BACKGROUND_COLOR: string;
+    TABLE_TH_HOVER_COLOR: string;
+    TABLE_SORT_ICON_COLOR: string;
+    TABLE_DATA_BACKGROUND_IMAGE: string;
+    TABLE_DATA_BACKGROUND_SIZE: string;
+};
+export declare const chromeLight: {
+    BASE_FONT_FAMILY: string;
+    BASE_FONT_SIZE: string;
+    BASE_LINE_HEIGHT: number;
+    BASE_BACKGROUND_COLOR: string;
+    BASE_COLOR: string;
+    OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: number;
+    OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: number;
+    OBJECT_NAME_COLOR: string;
+    OBJECT_VALUE_NULL_COLOR: string;
+    OBJECT_VALUE_UNDEFINED_COLOR: string;
+    OBJECT_VALUE_REGEXP_COLOR: string;
+    OBJECT_VALUE_STRING_COLOR: string;
+    OBJECT_VALUE_SYMBOL_COLOR: string;
+    OBJECT_VALUE_NUMBER_COLOR: string;
+    OBJECT_VALUE_BOOLEAN_COLOR: string;
+    OBJECT_VALUE_FUNCTION_PREFIX_COLOR: string;
+    HTML_TAG_COLOR: string;
+    HTML_TAGNAME_COLOR: string;
+    HTML_TAGNAME_TEXT_TRANSFORM: string;
+    HTML_ATTRIBUTE_NAME_COLOR: string;
+    HTML_ATTRIBUTE_VALUE_COLOR: string;
+    HTML_COMMENT_COLOR: string;
+    HTML_DOCTYPE_COLOR: string;
+    ARROW_COLOR: string;
+    ARROW_MARGIN_RIGHT: number;
+    ARROW_FONT_SIZE: number;
+    ARROW_ANIMATION_DURATION: string;
+    TREENODE_FONT_FAMILY: string;
+    TREENODE_FONT_SIZE: string;
+    TREENODE_LINE_HEIGHT: number;
+    TREENODE_PADDING_LEFT: number;
+    TABLE_BORDER_COLOR: string;
+    TABLE_TH_BACKGROUND_COLOR: string;
+    TABLE_TH_HOVER_COLOR: string;
+    TABLE_SORT_ICON_COLOR: string;
+    TABLE_DATA_BACKGROUND_IMAGE: string;
+    TABLE_DATA_BACKGROUND_SIZE: string;
+};
 export declare const create: ({ colors, mono }: {
@@ -5,0 +83,0 @@ colors: ColorsHash;

dist/modules/syntax.js

@@ -30,3 +30,3 @@ "use strict";
 });
-exports.create = void 0;
+exports.create = exports.chromeLight = exports.chromeDark = void 0;
 
@@ -45,2 +45,84 @@ var _utils = require("../utils");
 
+var chromeDark = {
+  BASE_FONT_FAMILY: 'Menlo, monospace',
+  BASE_FONT_SIZE: '11px',
+  BASE_LINE_HEIGHT: 1.2,
+  BASE_BACKGROUND_COLOR: 'rgb(36, 36, 36)',
+  BASE_COLOR: 'rgb(213, 213, 213)',
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(127, 127, 127)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(127, 127, 127)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_NUMBER_COLOR: 'hsl(252, 100%, 75%)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(252, 100%, 75%)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(85, 106, 242)',
+  HTML_TAG_COLOR: 'rgb(93, 176, 215)',
+  HTML_TAGNAME_COLOR: 'rgb(93, 176, 215)',
+  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
+  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(155, 187, 220)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(242, 151, 102)',
+  HTML_COMMENT_COLOR: 'rgb(137, 137, 137)',
+  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+  ARROW_COLOR: 'rgb(145, 145, 145)',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: '0',
+  TREENODE_FONT_FAMILY: 'Menlo, monospace',
+  TREENODE_FONT_SIZE: '11px',
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: 'rgb(85, 85, 85)',
+  TABLE_TH_BACKGROUND_COLOR: 'rgb(44, 44, 44)',
+  TABLE_TH_HOVER_COLOR: 'rgb(48, 48, 48)',
+  TABLE_SORT_ICON_COLOR: 'black',
+  // 'rgb(48, 57, 66)',
+  TABLE_DATA_BACKGROUND_IMAGE: 'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))',
+  TABLE_DATA_BACKGROUND_SIZE: '128px 32px'
+};
+exports.chromeDark = chromeDark;
+var chromeLight = {
+  BASE_FONT_FAMILY: 'Menlo, monospace',
+  BASE_FONT_SIZE: '11px',
+  BASE_LINE_HEIGHT: 1.2,
+  BASE_BACKGROUND_COLOR: 'white',
+  BASE_COLOR: 'black',
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
+  HTML_TAG_COLOR: 'rgb(168, 148, 166)',
+  HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
+  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
+  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(153, 69, 0)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(26, 26, 166)',
+  HTML_COMMENT_COLOR: 'rgb(35, 110, 37)',
+  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+  ARROW_COLOR: '#6e6e6e',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: '0',
+  TREENODE_FONT_FAMILY: 'Menlo, monospace',
+  TREENODE_FONT_SIZE: '11px',
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: '#aaa',
+  TABLE_TH_BACKGROUND_COLOR: '#eee',
+  TABLE_TH_HOVER_COLOR: 'hsla(0, 0%, 90%, 1)',
+  TABLE_SORT_ICON_COLOR: '#6e6e6e',
+  TABLE_DATA_BACKGROUND_IMAGE: 'linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))',
+  TABLE_DATA_BACKGROUND_SIZE: '128px 32px'
+};
+exports.chromeLight = chromeLight;
+
 var convertColors = function convertColors(colors) {
@@ -47,0 +129,0 @@ return Object.entries(colors).reduce(function (acc, _ref) {

package.json

 {
   "name": "@storybook/theming",
-  "version": "5.1.0-beta.1",
+  "version": "5.1.0-rc.0",
   "description": "Core Storybook Components",
@@ -26,3 +26,3 @@ "keywords": [
     "@emotion/styled": "^10.0.7",
-    "@storybook/client-logger": "5.1.0-beta.1",
+    "@storybook/client-logger": "5.1.0-rc.0",
     "common-tags": "^1.8.0",
@@ -36,5 +36,4 @@ "core-js": "^3.0.1",
     "memoizerific": "^1.11.3",
-    "polished": "^3.0.0",
-    "prop-types": "^15.7.2",
-    "react-inspector": "^3.0.2"
+    "polished": "^3.3.1",
+    "prop-types": "^15.7.2"
   },
@@ -48,3 +47,3 @@ "peerDependencies": {
   },
-  "gitHead": "e14539f7127f8dd8e4b9f10aa7d95fdecd86de2c"
+  "gitHead": "35ec834e893384fe1cfcd1fa008af619de2e9162"
 }

src/convert.ts

@@ -1,2 +0,1 @@
-import { chromeLight, chromeDark } from 'react-inspector';
 import { opacify } from 'polished';
@@ -7,3 +6,3 @@
 import { easing, animation } from './animation';
-import { create as createSyntax } from './modules/syntax';
+import { create as createSyntax, chromeLight, chromeDark } from './modules/syntax';
 
@@ -111,3 +110,3 @@ import lightThemeVars from './themes/light';
       app: appBg,
-      bar: background.bar,
+      bar: barBg,
       content: appContentBg,
@@ -114,0 +113,0 @@ gridCellSize: gridCellSize || background.gridCellSize,

src/modules/syntax.ts

@@ -12,2 +12,96 @@ import { mkColor } from '../utils';
 
+export const chromeDark = {
+  BASE_FONT_FAMILY: 'Menlo, monospace',
+  BASE_FONT_SIZE: '11px',
+  BASE_LINE_HEIGHT: 1.2,
+
+  BASE_BACKGROUND_COLOR: 'rgb(36, 36, 36)',
+  BASE_COLOR: 'rgb(213, 213, 213)',
+
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(127, 127, 127)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(127, 127, 127)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_NUMBER_COLOR: 'hsl(252, 100%, 75%)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(252, 100%, 75%)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(85, 106, 242)',
+
+  HTML_TAG_COLOR: 'rgb(93, 176, 215)',
+  HTML_TAGNAME_COLOR: 'rgb(93, 176, 215)',
+  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
+  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(155, 187, 220)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(242, 151, 102)',
+  HTML_COMMENT_COLOR: 'rgb(137, 137, 137)',
+  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+
+  ARROW_COLOR: 'rgb(145, 145, 145)',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: '0',
+
+  TREENODE_FONT_FAMILY: 'Menlo, monospace',
+  TREENODE_FONT_SIZE: '11px',
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+
+  TABLE_BORDER_COLOR: 'rgb(85, 85, 85)',
+  TABLE_TH_BACKGROUND_COLOR: 'rgb(44, 44, 44)',
+  TABLE_TH_HOVER_COLOR: 'rgb(48, 48, 48)',
+  TABLE_SORT_ICON_COLOR: 'black', // 'rgb(48, 57, 66)',
+  TABLE_DATA_BACKGROUND_IMAGE:
+    'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))',
+  TABLE_DATA_BACKGROUND_SIZE: '128px 32px',
+};
+
+export const chromeLight = {
+  BASE_FONT_FAMILY: 'Menlo, monospace',
+  BASE_FONT_SIZE: '11px',
+  BASE_LINE_HEIGHT: 1.2,
+
+  BASE_BACKGROUND_COLOR: 'white',
+  BASE_COLOR: 'black',
+
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
+
+  HTML_TAG_COLOR: 'rgb(168, 148, 166)',
+  HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
+  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
+  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(153, 69, 0)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(26, 26, 166)',
+  HTML_COMMENT_COLOR: 'rgb(35, 110, 37)',
+  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+
+  ARROW_COLOR: '#6e6e6e',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: '0',
+
+  TREENODE_FONT_FAMILY: 'Menlo, monospace',
+  TREENODE_FONT_SIZE: '11px',
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+
+  TABLE_BORDER_COLOR: '#aaa',
+  TABLE_TH_BACKGROUND_COLOR: '#eee',
+  TABLE_TH_HOVER_COLOR: 'hsla(0, 0%, 90%, 1)',
+  TABLE_SORT_ICON_COLOR: '#6e6e6e',
+  TABLE_DATA_BACKGROUND_IMAGE:
+    'linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))',
+  TABLE_DATA_BACKGROUND_SIZE: '128px 32px',
+};
+
 const convertColors = (colors: ColorsHash): ColorsObjectsHash =>
@@ -14,0 +108,0 @@ Object.entries(colors).reduce((acc, [k, v]) => ({ ...acc, [k]: mkColor(v) }), {});

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

78702

increased by13.34%

Dependency count

15

decreased by-6.25%

Lines of code

2405

increased by10.93%

Dependency changes

• + Added@storybook/client-logger@5.1.0-rc.0(transitive)

• - Removedreact-inspector@^3.0.2

• - Removed@storybook/client-logger@5.1.0-beta.1(transitive)

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedis-dom@1.1.0(transitive)

• - Removedis-object@1.0.2(transitive)

• - Removedis-window@1.0.2(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-inspector@3.0.2(transitive)

• - Removedregenerator-runtime@0.11.1(transitive)

• Updated@storybook/client-logger@5.1.0-rc.0

• Updatedpolished@^3.3.1