diff options
| -rw-r--r-- | readme.md | 17 | ||||
| -rw-r--r-- | src/demo-component.js | 19 |
2 files changed, 28 insertions, 8 deletions
@@ -1,5 +1,7 @@ # sunlight-theme +A theme provider for `@emotion/core` and `emotion-theming` that supplies the level of sunlight with `use-sunlight`. Supports middleware via a prop. + ## Demo [https://optimistic-kalam-56c21b.netlify.com](https://optimistic-kalam-56c21b.netlify.com) @@ -7,10 +9,9 @@ ## Usage ```javascript -const containerStyle = ({ colours }) => css` - color: ${colours.main}; -` +// src/demo-component.js +// define an array of 11 colours const mainRange = colormap({ colormap: 'autumn', nshades: 11, @@ -18,6 +19,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, @@ -28,6 +37,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> 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> |