Merge pull request #63 from cssinjs/feature/theme-provider

Add ThemeProvider, fix Readme

Author: lttb

README.md

@@ -53,24 +53,23 @@ const ButtonContainer = styled(Container)({
 `styled-jss` has out of the box support for theme customization with the unified [theming](https://github.com/cssinjs/theming) package.
 
 ```js
-import {ThemeProvider} from 'theming'
-import styled from 'styled-jss'
+import styled, {ThemeProvider} from 'styled-jss'
 
-const Button = styled('button')(({theme}) => ({
+const Button = styled('button')(({margin, theme}) => ({
+  margin,
   color: theme.color,
-  'background-color': theme.backgroundColor,
-  margin: props.margin,
+  backgroundColor: theme.backgroundColor,
 }))
 
-const currentTheme = {
-  primary: {
+const themes = {
+  light: {
     color: 'black',
     backgroundColor: 'yellow',
   },
 }
 
 const App = () => (
-  <ThemeProvider theme={currentTheme}>
+  <ThemeProvider theme={themes.light}>
     <Button margin={20}>This is themed Button</Button>
   </ThemeProvider>
 )
@@ -80,46 +79,83 @@ export default App
 
 ## Composable styles
 
-You can compose your style-objects and style-functions.
+Example on the [CodeSandbox](https://codesandbox.io/s/y0162p38lv)
 
-```js
-import colors from 'my-colors'
+You can compose your style-objects and style-functions.
 
-/* let's declare some abstract mixins for example */
+Let's say this is our **mods.js**:
 
-const theme = ({theme}) => ({
-  color: colors[theme],
-  backgroundColor: colors.accent[theme],
+```js
+export const theme = ({ theme }) => ({
+  color: theme.colors.primary,
+  backgroundColor: theme.colors.secondary,
 })
 
-const font = ({bold}) => ({
-  font: {weight: bold ? 'bold' : 'normal', family: 'Arial'}
+export const font = ({ bold }) => ({
+  font: {
+    weight: bold ? 'bold' : 'normal',
+    family: 'Arial',
+  },
 })
 
-const size = ({size}) => ({
+export const size = ({ size = 'm' }) => ({
   s: {
     fontSize: 12,
-    lineHeight: 15,
+    lineHeight: 1.2,
   },
   m: {
     fontSize: 16,
-    lineHeight: 18
+    lineHeight: 1.5
   }
 })[size]
 
-const rounded = ({rounded}) => rounded && {borderRadius: 5}
+export const rounded = ({ rounded }) => rounded && { borderRadius: 5 }
+```
 
-/* now we can mix them to our Button Component */
+Now we can mix them to our **Button** Component:
 
-const Button = styled('button')(theme, size, font, rounded)
+```js
+import styled from 'styled-jss'
+import {theme, font, size, rounded} from 'mods'
 
-/* and that's it */
+const Button = styled('button')(
+  {
+    border: 0,
+    padding: [5, 10],
+    display: 'inline-block',
+  },
+  theme,
+  font,
+  size,
+  rounded,
+)
 
-<Button theme="action" size="s" rounded />
+export default Button
+```
 
-/* we can also compose object-styles as well */
+And Usage:
 
-const Button = styled('button')({margin: props => props.margin}, theme, size)
+```js
+import {ThemeProvider} from 'styled-jss'
+import Button from './components/Button'
+
+const theme = {
+  dark: {
+    colors: {
+      primary: 'white',
+      secondary: 'purple'
+    }
+  }
+}
+
+export default () => (
+  <ThemeProvider theme={theme.dark}>
+    <Button>normal button</Button>
+    <Button bold>bold button</Button>
+    <Button size="s">small button</Button>
+    <Button rounded>rounded button</Button>
+  </ThemeProvider>
+)
 ```
 
 ## Base Style Sheet

src/index.js

@@ -5,6 +5,8 @@ import createStyled from './createStyled'
 
 const jss: Function = createJss(preset())
 
+export {ThemeProvider} from 'theming'
+
 export const Styled = createStyled(jss)
 export default Styled()
 

src/tests/functional.spec.jsx

@@ -1,7 +1,6 @@
 import 'react-dom'
 import React from 'react'
 import Observable from 'zen-observable'
-import {ThemeProvider} from 'theming'
 import Enzyme, {mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
@@ -16,6 +15,7 @@ Enzyme.configure({adapter: new Adapter()})
 
 let Styled
 let styled
+let ThemeProvider
 
 const mockNameGenerators = () => {
   let styledCounter = 0
@@ -46,7 +46,7 @@ describe('functional tests', () => {
   beforeEach(() => {
     mockNameGenerators()
 
-    Styled = require('../').Styled
+    ;({ThemeProvider, Styled} = require('../'))
     styled = Styled()
   })