From 92d16e4f56fbeaf06966afd9024ed4b58ba98ecb Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sat, 8 Aug 2020 10:53:07 -0400
Subject: [PATCH] feat(react-base16-styling)!: add invertTheme helper (#565)
BREAKING CHANGE: rename previous invertTheme to invertBase16Theme
---
packages/react-base16-styling/README.md | 10 ++++++-
packages/react-base16-styling/src/index.js | 30 +++++++++++++++----
.../react-base16-styling/test/index.test.js | 4 +--
3 files changed, 35 insertions(+), 9 deletions(-)
diff --git a/packages/react-base16-styling/README.md b/packages/react-base16-styling/README.md
index 982a1398..22a32511 100644
--- a/packages/react-base16-styling/README.md
+++ b/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).
diff --git a/packages/react-base16-styling/src/index.js b/packages/react-base16-styling/src/index.js
index 621ccf39..c4519283 100644
--- a/packages/react-base16-styling/src/index.js
+++ b/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);
+ }
+};
diff --git a/packages/react-base16-styling/test/index.test.js b/packages/react-base16-styling/test/index.test.js
index 82bc4469..90719d9f 100644
--- a/packages/react-base16-styling/test/index.test.js
+++ b/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', () => {