Clean up styles

- Move globals out of Meta component
- Create style components for Reset and TypeSystem

components/Button.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import { PALETTE } from '../lib/constants'
+import { COLORS } from '../lib/constants'
 
 export default (props) => (
   <div onClick={props.onClick} className="toolbar-btn" style={Object.assign({
-    background: PALETTE.EDITOR_BG,
+    background: COLORS.BLACK,
     color: props.color,
     border: `0.5px solid ${props.color}`
   }, props.style)}>

components/Carbon.js

@@ -2,8 +2,9 @@ import { EOL } from 'os'
 import React from 'react'
 import domtoimage from 'dom-to-image'
 import CodeMirror from 'react-codemirror'
-import WindowControls from '../components/WindowControls'
 import Spinner from 'react-spinner'
+import WindowControls from '../components/WindowControls'
+import { COLORS } from '../lib/constants'
 
 const DEFAULT_SETTINGS = {
   paddingVertical: '50px',
@@ -15,7 +16,7 @@ const DEFAULT_SETTINGS = {
   language: 'javascript'
 }
 
-class CodeImage extends React.Component {
+class Carbon extends React.Component {
   constructor (props) {
     super(props)
 
@@ -69,6 +70,37 @@ class CodeImage extends React.Component {
             value={this.props.children}
             options={options}
           />
+          <style jsx>{`
+            #container :global(.cm-s-dracula .CodeMirror-cursor) {
+              border-left: solid 2px #159588;
+            }
+
+            #container :global(.CodeMirror__container.dropshadow) {
+              box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
+              border-radius: 5px;
+            }
+
+            #container :global(.CodeMirror__container .CodeMirror) {
+              height: auto;
+              min-width: 680px;
+              padding: 24px 18px;
+              border-radius: 5px;
+              font-family: Hack, monospace !important;
+              font-size: 0.7rem;
+            }
+
+            #container :global(.window-theme__sharp > .CodeMirror) {
+              border-radius: 0px;
+            }
+
+            #container :global(.window-theme__bw > .CodeMirror) {
+              border: 2px solid ${COLORS.SECONDARY};
+            }
+
+            #container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
+              padding-top: 40px;
+            }
+          `}</style>
         </div>
       )
     }
@@ -89,4 +121,4 @@ class CodeImage extends React.Component {
   }
 }
 
-export default CodeImage
+export default Carbon

components/ColorPicker.js

@@ -2,7 +2,7 @@ import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import { TwitterPicker } from 'react-color'
 import WindowPointer from './WindowPointer'
-import { PALETTE } from '../lib/constants'
+import { COLORS } from '../lib/constants'
 
 class ColorPicker extends React.Component {
   constructor() {
@@ -46,7 +46,7 @@ class ColorPicker extends React.Component {
             display: flex;
             height: 100%;
             width: 72px;
-            border: 0.5px solid ${PALETTE.SECONDARY};
+            border: 0.5px solid ${COLORS.SECONDARY};
             border-radius: 3px;
           }
 
@@ -58,7 +58,7 @@ class ColorPicker extends React.Component {
             cursor: default;
             height: 100%;
             width: 36px;
-            border-right: 0.5px solid ${PALETTE.SECONDARY};
+            border-right: 0.5px solid ${COLORS.SECONDARY};
           }
 
           .bg-color {
@@ -73,6 +73,33 @@ class ColorPicker extends React.Component {
             margin-left: 36px;
             margin-top: 4px;
           }
+
+          /* react-color overrides */
+          .colorpicker-picker :global(.twitter-picker) {
+            width: 278px !important;
+            border: 0.5px solid ${COLORS.SECONDARY} !important;
+            border-radius: 3px !important;
+            background: #1A1A1A !important;
+          }
+
+          .colorpicker-picker > :global(div > div:nth-child(3) > div:nth-child(11)) {
+            background: #1A1A1A !important;
+            border: 0.5px solid ${COLORS.SECONDARY} !important;
+            border-right: none !important;
+            border-radius: 3px 0 0 3px !important;
+            color: ${COLORS.SECONDARY} !important;
+          }
+
+          .colorpicker-picker > :global(div > div:nth-child(3) > div:nth-child(12) > input) {
+            background: rgba(255, 255, 255, 0.165) !important;
+            height: 30px !important;
+            width: 108px !important;
+            color: #fff !important;
+          }
+
+          .colorpicker-picker > :global(div > div:nth-child(3) > span > div) {
+            border-radius: 2px !important;
+          }
         `}</style>
       </div>
     )

components/Dropdown.js

@@ -2,7 +2,7 @@ import React from 'react'
 import enhanceWithClickOutside from 'react-click-outside'
 import ArrowDown from './svg/Arrowdown'
 import Checkmark from './svg/Checkmark'
-import { PALETTE } from '../lib/constants'
+import { COLORS } from '../lib/constants'
 
 class Dropdown extends React.Component {
   constructor(props) {
@@ -40,10 +40,10 @@ class Dropdown extends React.Component {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            background: ${PALETTE.EDITOR_BG};
+            background: ${COLORS.BLACK};
             user-select: none;
             padding: 8px 16px;
-            border-bottom: 0.5px solid ${PALETTE.SECONDARY};
+            border-bottom: 0.5px solid ${COLORS.SECONDARY};
           }
 
           .dropdown-list-item:last-of-type {
@@ -90,7 +90,7 @@ class Dropdown extends React.Component {
 
           .dropdown-display {
             height: 100%;
-            border: 1px solid ${PALETTE.SECONDARY};
+            border: 1px solid ${COLORS.SECONDARY};
             border-radius: 3px;
             user-select: none;
             padding: 8px 16px;
@@ -108,7 +108,7 @@ class Dropdown extends React.Component {
           .dropdown-list {
             display: none;
             margin-top: -1px;
-            border: 0.5px solid ${PALETTE.SECONDARY};
+            border: 0.5px solid ${COLORS.SECONDARY};
             border-radius: 0px 0px 3px 3px;
             max-height: 350px;
             overflow-y: scroll;

components/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
-import { PALETTE } from '../lib/constants'
+import { COLORS } from '../lib/constants'
 
 const Footer = (props) => (
   <div className="mt3">
@@ -14,7 +14,7 @@ const Footer = (props) => (
       div > div {
         text-align: center;
         font-size: 14px;
-        color: ${PALETTE.GRAY};
+        color: ${COLORS.GRAY};
       }
 
       a {
@@ -26,7 +26,7 @@ const Footer = (props) => (
       }
 
       .dawn-link {
-        color: ${PALETTE.PRIMARY};
+        color: ${COLORS.PRIMARY};
         text-decoration: none;
       }
 

components/Meta.js

@@ -1,11 +1,12 @@
 import Head from 'next/head'
-import { THEMES, PALETTE } from '../lib/constants'
+import { THEMES, COLORS } from '../lib/constants'
+import Reset from './style/Reset'
+import Typography from './style/Typography'
 
 export default () => (
   <div className="meta">
     <Head>
       <link rel="stylesheet" href='//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css' />
-      <link rel="stylesheet" href="/static/type-system.css" />
       {
         THEMES.map((theme, i) => (
           <link key={i} rel="stylesheet" href={`//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/${theme.id}.min.css`}/>
@@ -17,128 +18,12 @@ export default () => (
       <link rel="stylesheet" href="//cdn.jsdelivr.net/font-hack/2.020/css/hack-extended.min.css" />
       <link rel="stylesheet" type="text/css" href="/static/react-spinner.css" />
     </Head>
+    <Reset />
+    <Typography />
     <style jsx>{`
       .meta {
         display: none;
       }
     `}</style>
-    <style jsx global>{`
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-        color: #fff;
-        background: #121212;
-      }
-
-      h1, h2, h3, h4, h5, h6 {
-        font-weight: 500;
-      }
-
-      *, *:after, *:before {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-rendering: optimizeLegibility;
-      }
-
-      .link {
-        color: #fff;
-        text-decoration: none;
-        padding-bottom: 2px;
-        background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
-        background-size: 1px 1px;
-        background-position: 0 100%;
-        background-repeat: repeat-x;
-      }
-
-      .link:hover {
-        color: ${PALETTE.PRIMARY};
-        background: none;
-      }
-
-      ::selection {
-        background: rgba(255,255,255,.99);
-        color: #121212;
-      }
-
-      #toolbar > div {
-        margin-right: 8px; // TODO fix hack
-      }
-
-      #toolbar>div:last-child {
-        margin-right: 0px;
-      }
-
-      .settings-settings > div {
-        border-bottom: solid 1px ${PALETTE.SECONDARY};
-      }
-
-      .settings-settings > div:first-child {
-        border-bottom: none;
-      }
-
-      .selected svg {
-        border-radius: 3px;
-        border: solid 2px ${PALETTE.SECONDARY};
-      }
-
-      .CodeMirror__container.dropshadow {
-        box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
-        border-radius: 5px;
-      }
-
-      .CodeMirror__container .CodeMirror {
-        height: auto;
-        min-width: 680px;
-        padding: 24px 18px;
-        border-radius: 5px;
-        font-family: Hack, monospace !important;
-        font-size: 0.7rem;
-      }
-
-      .window-theme__sharp > .CodeMirror {
-        border-radius: 0px;
-      }
-
-      .window-theme__bw > .CodeMirror {
-        border: 2px solid ${PALETTE.SECONDARY};
-      }
-
-      .window-controls + .CodeMirror__container > .CodeMirror {
-        padding-top: 40px;
-      }
-
-      .cm-s-dracula .CodeMirror-cursor {
-          border-left: solid 2px #159588;
-      }
-
-      /* Colorpicker overrides */
-      .twitter-picker {
-        width: 278px !important;
-        border: 0.5px solid ${PALETTE.SECONDARY} !important;
-        border-radius: 3px !important;
-        background: #1A1A1A !important;
-      }
-
-      .colorpicker-picker > div > div:nth-child(3) > div:nth-child(11) {
-        background: #1A1A1A !important;
-        border: 0.5px solid ${PALETTE.SECONDARY} !important;
-        border-right: none !important;
-        border-radius: 3px 0 0 3px !important;
-        color: ${PALETTE.SECONDARY} !important;
-      }
-
-      #toolbar > div.colorpicker-container > div.colorpicker-picker > div > div:nth-child(3) > div:nth-child(12) > input {
-        background: rgba(255, 255, 255, 0.165) !important;
-        height: 30px !important;
-        width: 108px !important;
-        color: #fff !important;
-      }
-
-      #toolbar > div.colorpicker-container > div.colorpicker-picker > div > div:nth-child(3) > span > div {
-        border-radius: 2px !important;
-      }
-    `}</style>
   </div>
 )

components/Settings.js

@@ -5,7 +5,7 @@ import ThemeSelect from './ThemeSelect'
 import Slider from './Slider'
 import Toggle from './Toggle'
 import WindowPointer from './WindowPointer';
-import { PALETTE } from '../lib/constants'
+import { COLORS } from '../lib/constants'
 
 class Settings extends React.Component {
   constructor(props) {
@@ -63,7 +63,7 @@ class Settings extends React.Component {
             display: flex;
             justify-content: center;
             align-items: center;
-            border: 0.5px solid ${PALETTE.SECONDARY};
+            border: 0.5px solid ${COLORS.SECONDARY};
             border-radius: 3px;
             user-select: none;
             position: relative;
@@ -80,11 +80,20 @@ class Settings extends React.Component {
             position: absolute;
             top: 44px;
             left: 0;
-            border: 0.5px solid ${PALETTE.SECONDARY};
+            border: 0.5px solid ${COLORS.SECONDARY};
             width: 184px;
             border-radius: 3px;
-            background: ${PALETTE.EDITOR_BG};
+            background: ${COLORS.BLACK};
           }
+
+          .settings-settings > :global(div) {
+            border-bottom: solid 1px ${COLORS.SECONDARY};
+          }
+
+          .settings-settings > :global(div):first-child {
+            border-bottom: none;
+          }
+
         `}</style>
       </div>
     )

components/ThemeSelect.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { None, BW, Sharp } from './svg/WindowThemes'
+import { COLORS } from '../lib/constants'
 
 const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW }
 export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP)
@@ -37,6 +38,11 @@ export default class extends React.Component {
             .theme:last-of-type {
               margin-right: 0px;
             }
+
+            .selected :global(svg) {
+              border-radius: 3px;
+              border: solid 2px ${COLORS.SECONDARY};
+            }
           `}</style>
         </div>
       )

components/Toolbar.js

@@ -31,6 +31,14 @@ const Toolbar = (props) => (
         color: #fff;
       }
 
+      #toolbar > :global(div) {
+        margin-right: 8px;
+      }
+
+      #toolbar > :global(div):last-child {
+        margin-right: 0px;
+      }
+
       .buttons {
         display: flex;
         margin-left: auto;

components/dnd.js

@@ -15,7 +15,7 @@ export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({
   isOver: monitor.isOver(),
   canDrop: monitor.canDrop(),
   item: monitor.getItem()
-}))(CodeImage)
+}))(Carbon)
 
 
 let code = this.props.content

components/style/Reset.js

@@ -0,0 +1,106 @@
+import { COLORS } from '../../lib/constants'
+
+export default () =>
+  <style jsx global>{`
+    /* http://meyerweb.com/eric/tools/css/reset/
+    v2.0 | 20110126
+    License: none (public domain)
+    */
+
+    html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed,
+    figure, figcaption, footer, header, hgroup,
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+    	margin: 0;
+    	padding: 0;
+    	border: 0;
+    	font-size: 100%;
+    	font-weight: inherit;
+    	font-family: inherit;
+    	font-style: inherit;
+    	vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article, aside, details, figcaption, figure,
+    footer, header, hgroup, menu, nav, section {
+    	display: block;
+    }
+    ol, ul {
+    	list-style: none;
+    }
+    blockquote, q {
+    	quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+    	content: '';
+    	content: none;
+    }
+    table {
+    	border-collapse: collapse;
+    	border-spacing: 0;
+    }
+
+    html,
+    body {
+    	-webkit-font-smoothing: antialiased;
+    	-moz-osx-font-smoothing: grayscale;
+      text-rendering: optimizeLegibility;
+    	background: ${COLORS.BLACK};
+    	color: white;
+    	font-family: -apple-system,
+    					BlinkMacSystemFont,
+    					"Segoe UI",
+    					Roboto,
+    					Ubuntu,
+    					"Helvetica Neue",
+    					sans-serif;
+    	font-weight: 400;
+    	font-style: normal;
+    	text-transform: initial;
+    	letter-spacing: initial;
+    	overflow-x: hidden;
+    	overflow-y: auto;
+    }
+
+    * { box-sizing: border-box; }
+
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 500;
+    }
+
+    a {
+    	color: inherit;
+    	text-decoration: none;
+    	cursor: pointer;
+    }
+
+    *::selection {
+      background: rgba(255,255,255,.99);
+      color: #121212;
+    }
+
+    .link {
+      color: #fff;
+      text-decoration: none;
+      padding-bottom: 2px;
+      background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
+      background-size: 1px 1px;
+      background-position: 0 100%;
+      background-repeat: repeat-x;
+    }
+
+    .link:hover {
+      color: ${COLORS.PRIMARY};
+      background: none;
+    }
+`}</style>

components/style/Typography.js

@@ -0,0 +1,93 @@
+export default () =>
+  <style jsx global>{`
+    /* https://github.com/jxnblk/type-system
+    Brent Jackson
+    License: MIT
+    */
+    :root {
+      --h0: 4.5rem;
+      --h1: 3rem;
+      --h2: 2.25rem;
+      --h3: 1.5rem;
+      --h4: 1.125rem;
+      --h5: .75rem;
+
+      --lh: calc(4/3);
+      --mx: 32em;
+
+      --m1: calc(2/3 * 1em);
+      --m2: calc(4/3 * 1em);
+      --m3: calc(8/3 * 1em);
+      --m4: calc(16/3 * 1em);
+      --x1: .5rem;
+      --x2: 1rem;
+      --x3: 2rem;
+      --x4: 4rem;
+      --x5: 8rem;
+      --x6: 16rem;
+    }
+
+    body {
+      font-size: var(--h4);
+      line-height: var(--lh);
+      margin: 2rem;
+    }
+
+    h1, h2, h3 {
+      margin-top: var(--m1);
+      margin-bottom: 0;
+    }
+
+    h4, h5, h6,
+    p, dl, ol, ul, blockquote {
+      margin-top: var(--m2);
+      margin-bottom: var(--m2);
+    }
+
+    h1      { font-size: var(--h2) }
+    h2, h3  { font-size: var(--h3) }
+    h4      { font-size: var(--h4) }
+    h5, h6  { font-size: var(--h5) }
+
+    .h0 { font-size: var(--h0) }
+    .h1 { font-size: var(--h1) }
+    .h2 { font-size: var(--h2) }
+    .h3 { font-size: var(--h3) }
+    .h4 { font-size: var(--h4) }
+    .h5 { font-size: var(--h5) }
+    .h6 { font-size: var(--h5) }
+
+    @media screen and (min-width: 40em) {
+      .xh0 { font-size: var(--h0) }
+      .xh1 { font-size: var(--h1) }
+      .xh2 { font-size: var(--h2) }
+      .xh3 { font-size: var(--h3) }
+      .xh4 { font-size: var(--h4) }
+      .xh5 { font-size: var(--h5) }
+      .xh6 { font-size: var(--h5) }
+    }
+
+    .lh1 { line-height: 1 }
+    /* h0, h1, h3 */
+    .lh2 { line-height: calc(7/6 * 1em) }
+    /* For body copy */
+    .lh3 { line-height: calc(16/9 * 1em) }
+
+    .mt0 { margin-top:    0 }
+    .mb0 { margin-bottom: 0 }
+    .mt1 { margin-top:    var(--x1) }
+    .mb1 { margin-bottom: var(--x1) }
+    .mt2 { margin-top:    var(--x2) }
+    .mb2 { margin-bottom: var(--x2) }
+    .mt3 { margin-top:    var(--x3) }
+    .mb3 { margin-bottom: var(--x3) }
+    .mt4 { margin-top:    var(--x4) }
+    .mb4 { margin-bottom: var(--x4) }
+    .mt5 { margin-top:    var(--x5) }
+    .mb5 { margin-bottom: var(--x5) }
+    .mt6 { margin-top:    var(--x6) }
+    .mb6 { margin-bottom: var(--x6) }
+
+    .mx { max-width: var(--mx) }
+    .bold { font-weight: bold }
+  `}</style>

lib/constants.js

@@ -229,8 +229,8 @@ export const LANGUAGES = [
   }
 ]
 
-export const PALETTE = {
+export const COLORS = {
-  EDITOR_BG: '#121212',
+  BLACK: '#121212',
   PRIMARY: '#F8E81C',
   SECONDARY: '#fff',
   GRAY: '#b5b3a0'

pages/about.js

@@ -2,7 +2,7 @@ import Page from '../components/Page'
 import Meta from '../components/Meta'
 import Header from '../components/Header'
 import Footer from '../components/Footer'
-import { PALETTE } from '../lib/constants'
+import { COLORS } from '../lib/constants'
 
 export default () => (
   <Page>
@@ -34,7 +34,7 @@ export default () => (
     </div>
     <style jsx>{`
       p, li {
-        color: ${PALETTE.GRAY};
+        color: ${COLORS.GRAY};
       }
 
       span {

pages/editor.js

@@ -7,9 +7,9 @@ import domtoimage from 'dom-to-image'
 import Page from '../components/Page'
 import ReadFileDropContainer from '../components/ReadFileDropContainer'
 import Toolbar from '../components/Toolbar'
-import CodeImage from '../components/CodeImage'
+import Carbon from '../components/Carbon'
 import api from '../lib/api'
-import { THEMES, LANGUAGES, PALETTE, DEFAULT_CODE } from '../lib/constants'
+import { THEMES, LANGUAGES, COLORS, DEFAULT_CODE } from '../lib/constants'
 
 class Editor extends React.Component {
   /* pathname, asPath, err, req, res */
@@ -78,15 +78,15 @@ class Editor extends React.Component {
                 bg={this.state.background}
                 enabled={this.state}
               />
-              <CodeImage config={this.state}>
+              <Carbon config={this.state}>
                 {this.state.droppedContent || this.props.content || DEFAULT_CODE}
-              </CodeImage>
+              </Carbon>
             </div>
           </ReadFileDropContainer>
           <style jsx>{`
             #editor {
-              background: ${PALETTE.EDITOR_BG};
+              background: ${COLORS.BLACK};
-              border: 3px solid ${PALETTE.SECONDARY};
+              border: 3px solid ${COLORS.SECONDARY};
               border-radius: 8px;
               padding: 16px;
             }

static/type-system.css

@@ -23,7 +23,6 @@
 }
 
 body {
-  font-family: -apple-system, sans-serif;
   font-size: var(--h4);
   line-height: var(--lh);
   margin: 2rem;
@@ -86,4 +85,3 @@ h5, h6  { font-size: var(--h5) }
 
 .mx { max-width: var(--mx) }
 .bold { font-weight: bold }
-