Init commit

2 files changed, 57 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>
+  )
+}
diff --git a/src/sunlight-theme.js b/src/sunlight-theme.js
new file mode 100644
index 0000000..e640003
--- /dev/null
+++ b/src/sunlight-theme.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { useSunlight } from 'use-sunlight'
+import { ThemeProvider } from 'emotion-theming'
+
+const isFn = t => typeof t === 'function'
+
+const pipeReducer = (a, b) => arg => {
+  if (!isFn(a) || !isFn(b)) throw new Error('Middleware has to be function')
+  return b(a(arg))
+}
+const pipe = (...ops) => ops.reduce(pipeReducer)
+
+export const SunlightTheme = ({ children, middleware }) => {
+  const [lightLevel] = useSunlight()
+  const theme = { lightLevel }
+  // if we have at least one middleware function,
+  // them in a pipe (left to right),
+  const transformedTheme =
+    middleware && middleware.length ? pipe(...middleware)(theme) : theme
+  return <ThemeProvider theme={transformedTheme}>{children}</ThemeProvider>
+}