feat(react-base16-styling)!: add invertTheme helper (#565)

BREAKING CHANGE: rename previous invertTheme to invertBase16Theme

packages/react-base16-styling/README.md

@@ -82,10 +82,18 @@ function(themeOrStyling, base16Themes)
 
 Helper method that returns `base16` theme object if `themeOrStyling` is `base16` theme name or theme object.
 
+## `invertBase16Theme`
+
+```js
+function(base16Theme)
+```
+
+Helper method that inverts `base16` theme colors, creating light theme out of dark one or vice versa.
+
 ## `invertTheme`
 
 ```js
 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).

packages/react-base16-styling/src/index.js

@@ -148,14 +148,14 @@ const getStylingByKeys = (mergedStyling, keys, ...args) => {
   return props;
 };
 
-export const invertTheme = theme =>
-  Object.keys(theme).reduce(
+export const invertBase16Theme = base16Theme =>
+  Object.keys(base16Theme).reduce(
     (t, key) => (
       (t[key] = /^base/.test(key)
-        ? invertColor(theme[key])
+        ? invertColor(base16Theme[key])
         : key === 'scheme'
-        ? theme[key] + ':inverted'
-        : theme[key]),
+        ? base16Theme[key] + ':inverted'
+        : base16Theme[key]),
       t
     ),
     {}
@@ -204,9 +204,27 @@ export const getBase16Theme = (theme, base16Themes) => {
     const [themeName, modifier] = theme.split(':');
     theme = (base16Themes || {})[themeName] || base16[themeName];
     if (modifier === 'inverted') {
-      theme = invertTheme(theme);
+      theme = invertBase16Theme(theme);
     }
   }
 
   return theme && theme.hasOwnProperty('base00') ? theme : undefined;
 };
+
+export const invertTheme = theme => {
+  if (typeof theme === 'string') {
+    return `${theme}:inverted`;
+  }
+
+  if (theme && theme.extend) {
+    if (typeof theme.extend === 'string') {
+      return { ...theme, extend: `${theme.extend}:inverted` };
+    }
+
+    return { ...theme, extend: invertBase16Theme(theme.extend) };
+  }
+
+  if (theme) {
+    return invertBase16Theme(theme);
+  }
+};

packages/react-base16-styling/test/index.test.js

@@ -1,4 +1,4 @@
-import { createStyling, invertTheme, getBase16Theme } from '../src';
+import { createStyling, invertBase16Theme, getBase16Theme } from '../src';
 import apathy from 'base16/lib/apathy';
 
 const base16Theme = {
@@ -86,7 +86,7 @@ const getStylingFromBase16 = base16 => ({
 });
 
 test('invertTheme', () => {
-  expect(invertTheme(base16Theme)).toEqual(invertedBase16Theme);
+  expect(invertBase16Theme(base16Theme)).toEqual(invertedBase16Theme);
 });
 
 test('getBase16Theme', () => {