diff options
author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2019-04-06 14:13:32 -0700 |
---|---|---|
committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2019-04-06 14:52:24 -0700 |
commit | 3cf0c3cd297b43c194d0d6820e13bcf8d8751fdc (patch) | |
tree | 3a1e411069dc439ce56baeb2c9e79ecf47da3075 /src/demo-component.js |
Init commit
Diffstat (limited to 'src/demo-component.js')
-rw-r--r-- | src/demo-component.js | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/src/demo-component.js b/src/demo-component.js new file mode 100644 index 0000000..ca95e29 --- /dev/null +++ b/src/demo-component.js @@ -0,0 +1,36 @@ +// In production, it's worth configuring things +// to handle the `css` prop at build time +/** @jsx jsx */ +import { jsx } from '@emotion/core' +import React from 'react' +import { SunlightTheme } from './sunlight-theme' +import { css } from '@emotion/core' +import colormap from 'colormap' + +const containerStyle = ({ colours }) => css` + color: ${colours.main}; +` + +const mainRange = colormap({ + colormap: 'autumn', + nshades: 11, + format: 'hex', + alpha: 1 +}) + +const colourMiddleware = theme => { + return { + ...theme, + colours: { + main: mainRange[theme.lightLevel] + } + } +} + +export const DemoComponent = ({ children }) => { + return ( + <SunlightTheme middleware={[colourMiddleware]}> + <div css={containerStyle}>{children}</div> + </SunlightTheme> + ) +} |