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>
+  )
+}