react-base16-styling - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

lib/colorConverters.js

@@ -8,2 +8,3 @@ "use strict";
 exports.rgb2yuv = rgb2yuv;
+
 function yuv2rgb(yuv) {
@@ -16,11 +17,8 @@ var y = yuv[0],
       b;
-
   r = y * 1 + u * 0 + v * 1.13983;
-  g = y * 1 + u * -0.39465 + v * -0.58060;
+  g = y * 1 + u * -0.39465 + v * -0.5806;
   b = y * 1 + u * 2.02311 + v * 0;
-
   r = Math.min(Math.max(0, r), 1);
   g = Math.min(Math.max(0, g), 1);
   b = Math.min(Math.max(0, b), 1);
-
   return [r * 255, g * 255, b * 255];
@@ -33,8 +31,6 @@ }
       b = rgb[2] / 255;
-
   var y = r * 0.299 + g * 0.587 + b * 0.114;
   var u = r * -0.14713 + g * -0.28886 + b * 0.436;
   var v = r * 0.615 + g * -0.51499 + b * -0.10001;
-
   return [y, u, v];
-};
+}

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,52 +6,46 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.getBase16Theme = exports.createStyling = exports.invertTheme = undefined;
+exports.invertTheme = exports.getBase16Theme = exports.createStyling = exports.invertBase16Theme = void 0;
 
-var _typeof2 = require('babel-runtime/helpers/typeof');
+var _lodash = _interopRequireDefault(require("lodash.curry"));
 
-var _typeof3 = _interopRequireDefault(_typeof2);
+var base16 = _interopRequireWildcard(require("base16"));
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _rgb2hex = _interopRequireDefault(require("pure-color/convert/rgb2hex"));
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _parse = _interopRequireDefault(require("pure-color/parse"));
 
-var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
+var _lodash2 = _interopRequireDefault(require("lodash.flow"));
 
-var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
+var _colorConverters = require("./colorConverters");
 
-var _keys = require('babel-runtime/core-js/object/keys');
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _keys2 = _interopRequireDefault(_keys);
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _lodash = require('lodash.curry');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _lodash2 = _interopRequireDefault(_lodash);
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _base = require('base16');
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-var base16 = _interopRequireWildcard(_base);
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var _rgb2hex = require('pure-color/convert/rgb2hex');
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _rgb2hex2 = _interopRequireDefault(_rgb2hex);
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-var _parse = require('pure-color/parse');
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-var _parse2 = _interopRequireDefault(_parse);
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-var _lodash3 = require('lodash.flow');
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-var _lodash4 = _interopRequireDefault(_lodash3);
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-var _colorConverters = require('./colorConverters');
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+var DEFAULT_BASE16 = base16["default"];
+var BASE16_KEYS = Object.keys(DEFAULT_BASE16); // we need a correcting factor, so that a dark, but not black background color
+// converts to bright enough inversed color
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var DEFAULT_BASE16 = base16.default;
-
-var BASE16_KEYS = (0, _keys2.default)(DEFAULT_BASE16);
-
-// we need a correcting factor, so that a dark, but not black background color
-// converts to bright enough inversed color
 var flip = function flip(x) {
@@ -61,4 +55,4 @@ return x < 0.25 ? 1 : x < 0.5 ? 0.9 - x : 1.1 - x;
 
-var invertColor = (0, _lodash4.default)(_parse2.default, _colorConverters.rgb2yuv, function (_ref) {
-  var _ref2 = (0, _slicedToArray3.default)(_ref, 3),
+var invertColor = (0, _lodash2["default"])(_parse["default"], _colorConverters.rgb2yuv, function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 3),
       y = _ref2[0],
@@ -69,3 +63,3 @@ u = _ref2[1],
   return [flip(y), u, v];
-}, _colorConverters.yuv2rgb, _rgb2hex2.default);
+}, _colorConverters.yuv2rgb, _rgb2hex["default"]);
 
@@ -76,3 +70,3 @@ var merger = function merger(styling) {
       className: [prevStyling.className, styling.className].filter(Boolean).join(' '),
-      style: (0, _extends3.default)({}, prevStyling.style || {}, styling.style || {})
+      style: _objectSpread(_objectSpread({}, prevStyling.style || {}), styling.style || {})
     };
@@ -86,2 +80,3 @@ };
   }
+
   if (defaultStyling === undefined) {
@@ -91,5 +86,6 @@ return customStyling;
 
-  var customType = typeof customStyling === 'undefined' ? 'undefined' : (0, _typeof3.default)(customStyling);
-  var defaultType = typeof defaultStyling === 'undefined' ? 'undefined' : (0, _typeof3.default)(defaultStyling);
+  var customType = _typeof(customStyling);
 
+  var defaultType = _typeof(defaultStyling);
+
   switch (customType) {
@@ -100,7 +96,12 @@ case 'string':
           return [defaultStyling, customStyling].filter(Boolean).join(' ');
+
         case 'object':
-          return merger({ className: customStyling, style: defaultStyling });
+          return merger({
+            className: customStyling,
+            style: defaultStyling
+          });
+
         case 'function':
           return function (styling) {
-            for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
               args[_key - 1] = arguments[_key];
@@ -111,14 +112,22 @@ }
               className: customStyling
-            })(defaultStyling.apply(undefined, [styling].concat(args)));
+            })(defaultStyling.apply(void 0, [styling].concat(args)));
           };
       }
+
+      break;
+
     case 'object':
       switch (defaultType) {
         case 'string':
-          return merger({ className: defaultStyling, style: customStyling });
+          return merger({
+            className: defaultStyling,
+            style: customStyling
+          });
+
         case 'object':
-          return (0, _extends3.default)({}, defaultStyling, customStyling);
+          return _objectSpread(_objectSpread({}, defaultStyling), customStyling);
+
         case 'function':
           return function (styling) {
-            for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+            for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
               args[_key2 - 1] = arguments[_key2];
@@ -129,5 +138,8 @@ }
               style: customStyling
-            })(defaultStyling.apply(undefined, [styling].concat(args)));
+            })(defaultStyling.apply(void 0, [styling].concat(args)));
           };
       }
+
+      break;
+
     case 'function':
@@ -137,29 +149,32 @@ switch (defaultType) {
           return function (styling) {
-            for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+            for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
               args[_key3 - 1] = arguments[_key3];
             }
 
-            return customStyling.apply(undefined, [merger(styling)({
+            return customStyling.apply(void 0, [merger(styling)({
               className: defaultStyling
             })].concat(args));
           };
+
         case 'object':
           return function (styling) {
-            for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+            for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
               args[_key4 - 1] = arguments[_key4];
             }
 
-            return customStyling.apply(undefined, [merger(styling)({
+            return customStyling.apply(void 0, [merger(styling)({
               style: defaultStyling
             })].concat(args));
           };
+
         case 'function':
           return function (styling) {
-            for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
+            for (var _len5 = arguments.length, args = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
               args[_key5 - 1] = arguments[_key5];
             }
 
-            return customStyling.apply(undefined, [defaultStyling.apply(undefined, [styling].concat(args))].concat(args));
+            return customStyling.apply(void 0, [defaultStyling.apply(void 0, [styling].concat(args))].concat(args));
           };
       }
+
   }
@@ -169,3 +184,4 @@ };
 var mergeStylings = function mergeStylings(customStylings, defaultStylings) {
-  var keys = (0, _keys2.default)(defaultStylings);
+  var keys = Object.keys(defaultStylings);
+
   for (var key in customStylings) {
@@ -181,3 +197,3 @@ if (keys.indexOf(key) === -1) keys.push(key);
 var getStylingByKeys = function getStylingByKeys(mergedStyling, keys) {
-  for (var _len6 = arguments.length, args = Array(_len6 > 2 ? _len6 - 2 : 0), _key6 = 2; _key6 < _len6; _key6++) {
+  for (var _len6 = arguments.length, args = new Array(_len6 > 2 ? _len6 - 2 : 0), _key6 = 2; _key6 < _len6; _key6++) {
     args[_key6 - 2] = arguments[_key6];
@@ -197,14 +213,16 @@ }
   }).filter(Boolean);
-
   var props = styles.reduce(function (obj, s) {
     if (typeof s === 'string') {
       obj.className = [obj.className, s].filter(Boolean).join(' ');
-    } else if ((typeof s === 'undefined' ? 'undefined' : (0, _typeof3.default)(s)) === 'object') {
-      obj.style = (0, _extends3.default)({}, obj.style, s);
+    } else if (_typeof(s) === 'object') {
+      obj.style = _objectSpread(_objectSpread({}, obj.style), s);
     } else if (typeof s === 'function') {
-      obj = (0, _extends3.default)({}, obj, s.apply(undefined, [obj].concat(args)));
+      obj = _objectSpread(_objectSpread({}, obj), s.apply(void 0, [obj].concat(args)));
     }
 
     return obj;
-  }, { className: '', style: {} });
+  }, {
+    className: '',
+    style: {}
+  });
 
@@ -215,3 +233,3 @@ if (!props.className) {
 
-  if ((0, _keys2.default)(props.style).length === 0) {
+  if (Object.keys(props.style).length === 0) {
     delete props.style;
@@ -223,24 +241,20 @@ }
 
-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 invertBase16Theme = function invertBase16Theme(base16Theme) {
+  return Object.keys(base16Theme).reduce(function (t, key) {
+    return t[key] = /^base/.test(key) ? invertColor(base16Theme[key]) : key === 'scheme' ? base16Theme[key] + ':inverted' : base16Theme[key], t;
   }, {});
 };
 
-var createStyling = exports.createStyling = (0, _lodash2.default)(function (getStylingFromBase16) {
-  for (var _len7 = arguments.length, args = Array(_len7 > 3 ? _len7 - 3 : 0), _key7 = 3; _key7 < _len7; _key7++) {
-    args[_key7 - 3] = arguments[_key7];
-  }
-
+exports.invertBase16Theme = invertBase16Theme;
+var createStyling = (0, _lodash["default"])(function (getStylingFromBase16) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var themeOrStyling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var _options$defaultBase = options.defaultBase16,
-      defaultBase16 = _options$defaultBase === undefined ? DEFAULT_BASE16 : _options$defaultBase,
+      defaultBase16 = _options$defaultBase === void 0 ? DEFAULT_BASE16 : _options$defaultBase,
       _options$base16Themes = options.base16Themes,
-      base16Themes = _options$base16Themes === undefined ? null : _options$base16Themes;
+      base16Themes = _options$base16Themes === void 0 ? null : _options$base16Themes;
+  var base16Theme = getBase16Theme(themeOrStyling, base16Themes);
 
-
-  var base16Theme = getBase16Theme(themeOrStyling, base16Themes);
   if (base16Theme) {
-    themeOrStyling = (0, _extends3.default)({}, base16Theme, themeOrStyling);
+    themeOrStyling = _objectSpread(_objectSpread({}, base16Theme), themeOrStyling);
   }
@@ -251,15 +265,17 @@
   }, {});
-
-  var customStyling = (0, _keys2.default)(themeOrStyling).reduce(function (s, key) {
+  var customStyling = Object.keys(themeOrStyling).reduce(function (s, key) {
     return BASE16_KEYS.indexOf(key) === -1 ? (s[key] = themeOrStyling[key], s) : s;
   }, {});
-
   var defaultStyling = getStylingFromBase16(theme);
-
   var mergedStyling = mergeStylings(customStyling, defaultStyling);
 
-  return (0, _lodash2.default)(getStylingByKeys, 2).apply(undefined, [mergedStyling].concat(args));
+  for (var _len7 = arguments.length, args = new Array(_len7 > 3 ? _len7 - 3 : 0), _key7 = 3; _key7 < _len7; _key7++) {
+    args[_key7 - 3] = arguments[_key7];
+  }
+
+  return (0, _lodash["default"])(getStylingByKeys, 2).apply(void 0, [mergedStyling].concat(args));
 }, 3);
+exports.createStyling = createStyling;
 
-var getBase16Theme = exports.getBase16Theme = function getBase16Theme(theme, base16Themes) {
+var getBase16Theme = function getBase16Theme(theme, base16Themes) {
   if (theme && theme.extend) {
@@ -271,3 +287,3 @@ theme = theme.extend;
     var _theme$split = theme.split(':'),
-        _theme$split2 = (0, _slicedToArray3.default)(_theme$split, 2),
+        _theme$split2 = _slicedToArray(_theme$split, 2),
         themeName = _theme$split2[0],
@@ -277,8 +293,35 @@ modifier = _theme$split2[1];
     theme = (base16Themes || {})[themeName] || base16[themeName];
+
     if (modifier === 'inverted') {
-      theme = invertTheme(theme);
+      theme = invertBase16Theme(theme);
     }
   }
 
-  return theme && theme.hasOwnProperty('base00') ? theme : undefined;
-};
+  return theme && Object.prototype.hasOwnProperty.call(theme, 'base00') ? theme : undefined;
+};
+
+exports.getBase16Theme = getBase16Theme;
+
+var invertTheme = function invertTheme(theme) {
+  if (typeof theme === 'string') {
+    return "".concat(theme, ":inverted");
+  }
+
+  if (theme && theme.extend) {
+    if (typeof theme.extend === 'string') {
+      return _objectSpread(_objectSpread({}, theme), {}, {
+        extend: "".concat(theme.extend, ":inverted")
+      });
+    }
+
+    return _objectSpread(_objectSpread({}, theme), {}, {
+      extend: invertBase16Theme(theme.extend)
+    });
+  }
+
+  if (theme) {
+    return invertBase16Theme(theme);
+  }
+};
+
+exports.invertTheme = invertTheme;

package.json

 {
   "name": "react-base16-styling",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "React styling with base16 color scheme support",
   "main": "lib/index.js",
   "scripts": {
-    "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 -s run lint && npm -s run test",
-    "version": "npm run build && git add -A .",
-    "postversion": "git push",
-    "prepublish": "npm run build",
-    "flow": "flow"
+    "clean": "rimraf lib",
+    "build": "babel src --out-dir lib",
+    "test": "jest",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run test && npm run clean && npm run build"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/alexkuz/react-base16-styling.git"
+    "url": "git+https://github.com/reduxjs/redux-devtools.git"
   },
@@ -31,36 +26,20 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/alexkuz/react-base16-styling/issues"
+    "url": "https://github.com/reduxjs/redux-devtools/issues"
   },
-  "homepage": "https://github.com/alexkuz/react-base16-styling#readme",
+  "homepage": "https://github.com/reduxjs/redux-devtools",
   "devDependencies": {
-    "ava": "^0.24.0",
-    "babel-cli": "^6.6.5",
-    "babel-core": "^6.7.4",
-    "babel-eslint": "^8.0.3",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.6.0",
-    "babel-preset-env": "^1.6.1",
-    "eslint": "^4.13.1",
-    "eslint-plugin-babel": "^4.1.0",
-    "eslint-plugin-flowtype": "^2.30.0",
-    "flow-bin": "^0.61.0",
-    "pre-commit": "^1.1.3"
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
+    "rimraf": "^3.0.2"
   },
   "dependencies": {
     "base16": "^1.0.0",
-    "lodash.curry": "^4.0.1",
-    "lodash.flow": "^3.3.0",
-    "pure-color": "^1.2.0"
+    "lodash.curry": "^4.1.1",
+    "lodash.flow": "^3.5.0",
+    "pure-color": "^1.3.0"
   },
-  "pre-commit": [
-    "lint",
-    "test"
-  ],
-  "ava": {
-    "require": [
-      "babel-register"
-    ],
-    "babel": "inherit"
-  }
+  "gitHead": "d8da887da86441c890e0820aa9f924f6ebbad8e7"
 }

README.md

@@ -10,3 +10,3 @@ # 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)
 ```
-npm i -S react-base16-styling
+yarn add react-base16-styling
 ```
@@ -23,3 +23,3 @@
     myComponent: {
-      backgroundColor: base16Theme.base00
+      backgroundColor: base16Theme.base00,
     },
@@ -31,6 +31,6 @@
           ...style,
-          backgroundColor: clickCount % 2 ? 'red' : 'blue'
-        }
-      }
-    }
+          backgroundColor: clickCount % 2 ? 'red' : 'blue',
+        },
+      };
+    },
   };
@@ -41,16 +41,18 @@ }
   defaultBase16: base16Themes.solarized,
-  base16Themes
+  base16Themes,
 });
 
 class MyComponent extends Component {
-  state = { clickCount: 0 }
+  state = { clickCount: 0 };
   render() {
     const { theme } = this.props;
     const { clickCount } = this.state;
-    
+
     const styling = createStylingFromTheme(theme);
-    
+
     return (
       <div {...styling('myComponent')}>
-        <a onClick={() => this.setState({ clickCount: clickCount + 1 })}>Click Me</a>
+        <a onClick={() => this.setState({ clickCount: clickCount + 1 })}>
+          Click Me
+        </a>
         <div {...styling('myComponentToggleColor', clickCount)}>
@@ -60,3 +62,3 @@ {clickCount}
       </div>
-    )
+    );
   }
@@ -72,14 +74,12 @@ }
 
-Argument | Signature | Description
-----|-----|-----
-`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. Theme name can have a modifier: `"themeName:inverted"` to invert theme colors (see [[#invertTheme]])
+| Argument                | Signature                         | Description                                                                                                                                                        |
+| ----------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `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. Theme name can have a modifier: `"themeName:inverted"` to invert theme colors (see [[#invertTheme]]) |
 
-Styling object values could be:
-    - objects (treated as style definitions)
-    - strings (class names)
-    - functions (they may be provided with additional parameters and should return object { style, className })
+Styling object values could be: - objects (treated as style definitions) - strings (class names) - functions (they may be provided with additional parameters and should return object { style, className })
 
 ## `getBase16Theme`
+
 ```js
@@ -91,3 +91,12 @@ function(themeOrStyling, base16Themes)
 
+## `invertBase16Theme`
+
+```js
+function(base16Theme)
+```
+
+Helper method that inverts `base16` theme colors, creating light theme out of dark one or vice versa.
+
 ## `invertTheme`
+
 ```js
@@ -97,2 +106,2 @@ function(theme)
 
-Helper method that inverts `base16` theme colors, creating light theme out of dark one or vice versa.
+Helper method that inverts a theme or styling object to be passed into the `themeOrStyling` parameter of [createStyling](#createstyling).

New alerts

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31658

increased by28.64%

Dev dependency count

6

decreased by-53.85%

Number of package files

10

increased by42.86%

Lines of code

666

increased by185.84%

Number of lines in readme file

100

increased by9.89%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• Updatedlodash.curry@^4.1.1

• Updatedlodash.flow@^3.5.0

• Updatedpure-color@^1.3.0