react-base16-styling - npm Package Compare versions

Comparing version 0.4.7 to 0.5.0

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.getBase16Theme = exports.createStyling = undefined;
+exports.getBase16Theme = exports.createStyling = exports.invertTheme = undefined;
 
@@ -59,2 +59,3 @@ var _typeof2 = require('babel-runtime/helpers/typeof');
 
+
 var BASE16_KEYS = (0, _keys2.default)(DEFAULT_BASE16);
@@ -77,9 +78,2 @@
 
-var invertThemeColors = function invertThemeColors(theme) {
-  return (0, _keys2.default)(theme).reduce(function (t, key) {
-    return (/^base/.test(key) ? (t[key] = invertColor(theme[key]), t) : t
-    );
-  }, {});
-};
-
 var merger = function merger(styling) {
@@ -177,3 +171,3 @@ return function (prevStyling) {
   for (var key in customStylings) {
-    if (keys.indexOf(key) == -1) keys.push(key);
+    if (keys.indexOf(key) === -1) keys.push(key);
   }
@@ -226,5 +220,11 @@
 
+var invertTheme = exports.invertTheme = function invertTheme(theme) {
+  return (0, _keys2.default)(theme).reduce(function (t, key) {
+    return t[key] = /^base/.test(key) ? invertColor(theme[key]) : key === 'scheme' ? theme[key] + ':inverted' : theme[key], t;
+  }, {});
+};
+
 var createStyling = exports.createStyling = (0, _lodash2.default)(function (getStylingFromBase16) {
-  for (var _len7 = arguments.length, args = Array(_len7 > 4 ? _len7 - 4 : 0), _key7 = 4; _key7 < _len7; _key7++) {
-    args[_key7 - 4] = arguments[_key7];
+  for (var _len7 = arguments.length, args = Array(_len7 > 3 ? _len7 - 3 : 0), _key7 = 3; _key7 < _len7; _key7++) {
+    args[_key7 - 3] = arguments[_key7];
   }
@@ -234,3 +234,2 @@
   var themeOrStyling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var invertTheme = arguments[3];
   var _options$defaultBase = options.defaultBase16,
@@ -255,3 +254,3 @@ defaultBase16 = _options$defaultBase === undefined ? DEFAULT_BASE16 : _options$defaultBase,
 
-  var defaultStyling = getStylingFromBase16(invertTheme ? invertThemeColors(theme) : theme);
+  var defaultStyling = getStylingFromBase16(theme);
 
@@ -261,3 +260,3 @@ var mergedStyling = mergeStylings(customStyling, defaultStyling);
   return (0, _lodash2.default)(getStylingByKeys, 2).apply(undefined, [mergedStyling].concat(args));
-}, 4);
+}, 3);
 
@@ -270,3 +269,11 @@ var getBase16Theme = exports.getBase16Theme = function getBase16Theme(theme, base16Themes) {
   if (typeof theme === 'string') {
-    theme = (base16Themes || {})[theme] || base16[theme];
+    var _theme$split = theme.split(':'),
+        _theme$split2 = (0, _slicedToArray3.default)(_theme$split, 2),
+        themeName = _theme$split2[0],
+        modifier = _theme$split2[1];
+
+    theme = (base16Themes || {})[themeName] || base16[themeName];
+    if (modifier === 'inverted') {
+      theme = invertTheme(theme);
+    }
   }
@@ -273,0 +280,0 @@

package.json

 {
   "name": "react-base16-styling",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "description": "React styling with base16 color scheme support",
   "main": "lib/index.js",
   "scripts": {
-    "build": "NODE_ENV=production babel src --out-dir lib",
-    "test": "npm test",
+    "build": "npm -s run build-lib && npm -s run build-flow",
+    "build-lib": "NODE_ENV=production babel src --out-dir lib",
+    "build-flow": "cp src/*.js.flow lib",
+    "test": "ava",
     "lint": "eslint src",
-    "preversion": "npm run lint",
+    "preversion": "npm -s run lint && npm -s run test",
     "version": "npm run build && git add -A .",
-    "postversion": "git push --tags",
-    "prepublish": "npm run build"
+    "postversion": "git push",
+    "prepublish": "npm run build",
+    "flow": "flow"
   },
@@ -32,10 +35,14 @@ "repository": {
   "devDependencies": {
+    "ava": "^0.18.2",
     "babel-cli": "^6.6.5",
     "babel-core": "^6.7.4",
     "babel-eslint": "^7.1.1",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.6.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-stage-0": "^6.5.0",
-    "eslint": "^3.14.1",
-    "eslint-plugin-babel": "^4.0.1",
+    "eslint": "^3.17.0",
+    "eslint-plugin-babel": "^4.1.0",
+    "eslint-plugin-flowtype": "^2.30.0",
+    "flow-bin": "^0.41.0",
     "pre-commit": "^1.1.3"
@@ -50,3 +57,12 @@ },
   },
-  "pre-commit": "lint"
+  "pre-commit": [
+    "lint",
+    "test"
+  ],
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
 }

README.md

@@ -1,2 +0,3 @@
-# react-base16-styling
+# react-base16-styling [![Build Status](https://img.shields.io/travis/alexkuz/react-base16-styling/master.svg)](https://travis-ci.org/alexkuz/react-base16-styling) [![Latest Stable Version](https://img.shields.io/npm/v/react-base16-styling.svg)](https://www.npmjs.com/package/react-base16-styling)
+
 React styling with base16 color scheme support
@@ -43,6 +44,6 @@
   render() {
-    const { theme, invertTheme } = this.props;
+    const { theme } = this.props;
     const { clickCount } = this.state;
     
-    const styling = createStylingFromTheme(theme, invertTheme);
+    const styling = createStylingFromTheme(theme);
     
@@ -64,3 +65,3 @@ return (
 ```js
-function(getStylingFromBase16, defaultStylingOptions, themeOrStyling, isLightTheme)
+function(getStylingFromBase16, defaultStylingOptions, themeOrStyling)
 ```
@@ -71,7 +72,5 @@
 `getStylingFromBase16` | `function(base16Theme)` | creates object with default stylings for your component, using provided base16 theme.
-`defaultStylingOptions` | `{ defaultBase16, base16Themes }` | optional parameters, allow to set default `base16` theme and additional `base16` themes for component
-`themeOrStyling` | `string` or `object` | `base16` theme name, `base16` theme object or styling object
-`invertTheme` | `boolean` | if `true`, theme colors are inverted, creating light version of the theme
+`defaultStylingOptions` | `{ defaultBase16, base16Themes }` | optional parameters, allow to set default `base16` theme and additional `base16` themes for component.
+`themeOrStyling` | `string` or `object` | `base16` theme name, `base16` theme object or styling object. Theme name can have a modifier: `"themeName:inverted"` to invert theme colors (see [[#invertTheme]])
 
-
 Styling object values could be:
@@ -88,1 +87,8 @@ - objects (treated as style definitions)
 Helper method that returns `base16` theme object if `themeOrStyling` is `base16` theme name or theme object.
+
+## `invertTheme`
+```js
+function(theme)
+```
+
+Helper method that inverts `base16` theme colors, creating light theme out of dark one or vice versa.

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

27575

increased by96.7%

Number of package files

7

increased by75%

Lines of code

343

increased by69.8%

Number of lines in readme file

91

increased by7.06%

Worsened metrics

Dev dependency count

13

increased by44.44%

No dependency changes