default variant

.gitignore

@@ -2,3 +2,4 @@ node_modules
 *.log
 example/bundle.js
 dist
+.idea

README.md

@@ -198,3 +198,24 @@ Button.defaultProps = {
 <Button variant="success"/>
 <Button variant="warning"/>
 ```
+
+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};
+`;
+
+<Button variant="noVariant"/> // default
+<Button variant="default"/> // default
+```

example/src/App.js

@@ -54,6 +54,7 @@ export default class App extends React.Component {
           <Button kind="success" onClick={this.handleToggleMode}>Toggle Mode</Button>
           <Button kind="warning" onClick={this.handleToggleSize}>Toggle Size</Button>
           <Button kind="danger" onClick={this.handleToggleMode}>Toggle Mode</Button>
+          <Button kind="noKind" onClick={this.handleToggleMode}>Toggle Size</Button>
         </Box>
       </ThemeProvider>
     );

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)
   };
 };
 

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');
+  });
+});