diff options
author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2019-04-06 19:13:02 -0700 |
---|---|---|
committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2019-04-06 19:13:02 -0700 |
commit | 7ad4c3511d409a12b892774150afbc52c715d2be (patch) | |
tree | 208b49fee7f66d3527e4c331f8fca9b4723d419d /src | |
parent | ac3be9cc96def85159db9a272f51fef3d825a8b0 (diff) |
Comments on demo
Diffstat (limited to 'src')
-rw-r--r-- | src/demo-component.js | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/src/demo-component.js b/src/demo-component.js index 15fe3ed..54a341e 100644 --- a/src/demo-component.js +++ b/src/demo-component.js @@ -1,15 +1,14 @@ // In production, it's worth configuring things -// to handle the `css` prop at build time +// to handle the `css` prop at build time, +// but for now, we use the `jsx` callback +// provided from `@emotion/core` /** @jsx jsx */ import { jsx } from '@emotion/core' import { SunlightTheme } from './sunlight-theme' import { css } from '@emotion/core' import colormap from 'colormap' -const containerStyle = ({ colours }) => css` - color: ${colours.main}; -` - +// define an array of 11 colours const mainRange = colormap({ colormap: 'autumn', nshades: 11, @@ -17,6 +16,14 @@ const mainRange = colormap({ alpha: 1 }) +// define an emotion style +const containerStyle = ({ colours }) => css` + color: ${colours.main}; +` + +// define a middleware function that translates +// the light level to a "theme" (some object +// that's useful for styles) const colourMiddleware = theme => { return { ...theme, @@ -27,6 +34,8 @@ const colourMiddleware = theme => { } export const DemoComponent = ({ children }) => { + // middleware is optional but encouraged + // for mapping light level to colours return ( <SunlightTheme middleware={[colourMiddleware]}> <div css={containerStyle}>{children}</div> |