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>