diff --git a/.gitignore b/.gitignore
index c426448..d24ac11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules
*.log
example/bundle.js
dist
+.idea
diff --git a/README.md b/README.md
index edbbad3..560cfe1 100644
--- a/README.md
+++ b/README.md
@@ -198,3 +198,24 @@ Button.defaultProps = {
```
+
+if an undefined variant arrives, the default variant is used.
+
+```js
+import styled from 'styled-components';
+import theme from 'styled-theming';
+
+const backgroundColor = theme.variants('mode', 'variant', {
+ default: { light: 'gray', dark: 'darkgray' },
+ primary: { light: 'blue', dark: 'darkblue' },
+ success: { light: 'green', dark: 'darkgreen' },
+ warning: { light: 'orange', dark: 'darkorange' },
+});
+
+const Button = styled.button`
+ background-color: ${backgroundColor};
+`;
+
+ // default
+ // default
+```
\ No newline at end of file
diff --git a/example/src/App.js b/example/src/App.js
index dd01b8a..44ed90e 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -54,6 +54,7 @@ export default class App extends React.Component {
+
);
diff --git a/index.js b/index.js
index c2aed94..eb7345e 100644
--- a/index.js
+++ b/index.js
@@ -30,7 +30,11 @@ function theme(name, values) {
theme.variants = function(name, prop, values) {
return function(props) {
var variant = props[prop] && values[props[prop]];
- return variant && getThemeValue(name, props, variant);
+ var defaultVariant = props[prop] && values['default'];
+
+ return variant
+ ? getThemeValue(name, props, variant)
+ : getThemeValue(name, props, defaultVariant)
};
};
diff --git a/test.js b/test.js
index 75d6490..2a92e52 100644
--- a/test.js
+++ b/test.js
@@ -111,3 +111,36 @@ describe('theme.variants()', () => {
expect(fn({ kind: 'fancy', theme: { mode: themes => themes.dark } })).toBe('#0f0');
});
});
+
+describe('theme.variants()', () => {
+ const fn = theme.variants('mode', 'kind', {
+ default: { light: '#fff', dark: '#000' },
+ fancy: { light: '#f0f', dark: '#0f0' },
+ });
+
+ it('should create a function that returns a matching prop when passed a string', () => {
+ expect(fn({ kind: 'default', theme: { mode: 'light' } })).toBe('#fff');
+ expect(fn({ kind: 'default', theme: { mode: 'dark' } })).toBe('#000');
+ expect(fn({ kind: 'fancy', theme: { mode: 'light' } })).toBe('#f0f');
+ expect(fn({ kind: 'fancy', theme: { mode: 'dark' } })).toBe('#0f0');
+ });
+
+ it('should create a function that returns calls a passed function', () => {
+ expect(fn({ kind: 'default', theme: { mode: themes => themes.light } })).toBe('#fff');
+ expect(fn({ kind: 'default', theme: { mode: themes => themes.dark } })).toBe('#000');
+ expect(fn({ kind: 'fancy', theme: { mode: themes => themes.light } })).toBe('#f0f');
+ expect(fn({ kind: 'fancy', theme: { mode: themes => themes.dark } })).toBe('#0f0');
+ });
+});
+
+describe('defaultVariant', () => {
+ const fn = theme.variants('mode', 'kind', {
+ default: { light: '#fff', dark: '#000' },
+ fancy: { light: '#f0f', dark: '#0f0' },
+ });
+
+ it('should create a function that returns a matching prop when passed a string', () => {
+ expect(fn({ kind: 'test', theme: { mode: 'light' } })).toBe('#fff');
+ expect(fn({ kind: 'test', theme: { mode: 'dark' } })).toBe('#000');
+ });
+});
\ No newline at end of file