Add themes

README.md

@@ -57,7 +57,20 @@ mdx-deck uses [styled-components][] for styling.
 
 ### Built-in Themes
 
-TK
+mdx-deck includes several built-in themes to change the look and feel of the presentation.
+
+```mdx
+export { dark as theme } from 'ok-cli/themes'
+
+# Dark Theme
+```
+
+The following themes are available:
+
+- `theme`: default theme with white background
+- `dark`: black background dark theme
+- `future`: dark theme with Avenir Next
+- `condensed`: dark theme with Avenir Next
 
 ### Custom Themes
 
@@ -108,7 +121,7 @@ export default {
 
 ### Custom Components
 
-mdx-deck includes default components for MDX, but to provide custom components to the [MDXProvider][], export a `components` object from your MDX file.
+mdx-deck includes default components for MDX, but to provide custom components to the [MDXProvider][], export a `components` object.
 
 ```mdx
 export { default as components } from './components'
@@ -152,7 +165,7 @@ mdx-deck build deck.mdx
 
 ## React API
 
-mdx-deck components can be used in any React application, such as [create-react-app][] or [next.js][].
+mdx-deck components can also be used in any React application, such as [create-react-app][] or [next.js][].
 
 ### Webpack Loader
 

docs/index.mdx

@@ -1,6 +1,8 @@
 import Layout from './Layout'
 import { Image } from '../src'
 
+export { future as theme } from '../src/themes'
+
 # mdx-deck
 
 MDX-based presention decks

package.json

@@ -15,6 +15,7 @@
   "author": "Brent Jackson",
   "license": "MIT",
   "dependencies": {
+    "@compositor/webfont": "^1.0.37",
     "@mdx-js/tag": "^0.14.1",
     "chalk": "^2.4.1",
     "clipboardy": "^1.2.3",

src/index.js

@@ -1,16 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { MDXProvider } from '@mdx-js/tag'
-import styled, { ThemeProvider } from 'styled-components'
+import styled, { ThemeProvider, withTheme } from 'styled-components'
 import { space, width, height, color } from 'styled-system'
 import debounce from 'lodash.debounce'
+import webfont from '@compositor/webfont'
 
-import defaultTheme from './theme'
+import defaultTheme from './themes'
 import defaultComponents from './components'
 
-export { default as theme } from './theme'
-export { default as components } from './components'
 export { default as Image } from './Image'
+export { default as components } from './components'
+
+// themes
+export { default as theme } from './themes'
+export * as themes from './themes'
 
 export const inc = state => ({ index: (state.index + 1) % state.length })
 export const dec = state => state.index > 0
@@ -54,18 +58,16 @@ Slide.defaultProps = {
   px: [ 4, 5, 6 ],
   pt: [ 3, 4 ],
   pb: [ 4, 5 ],
-  color: 'text',
-  bg: 'background'
 }
 
 const Dot = styled.button([], {
   appearance: 'none',
-  background: 'transparent',
   border: '4px solid transparent',
   backgroundClip: 'padding-box',
   borderRadius: '9999px',
   width: '8px',
   height: '8px',
+  color: 'inherit',
   '&:focus': {
     outline: 'none',
     boxShadow: '0 0 0 1px'
@@ -114,8 +116,32 @@ export const Root = styled.div([], {
   }) : null,
   props => props.theme.css,
   width,
-  height
+  height,
+  color
 )
+Root.defaultProps = {
+  color: 'text',
+  bg: 'background'
+}
+
+export const GoogleFonts = withTheme(({ theme }) => {
+  const links = [
+    webfont.getURL(theme.font),
+    webfont.getURL(theme.monospace)
+  ].filter(Boolean)
+  if (!links.length) return false
+  return (
+    <React.Fragment>
+      {links.map((href, i) => (
+        <link
+          key={i}
+          href={href}
+          rel='stylesheet'
+        />
+      ))}
+    </React.Fragment>
+  )
+})
 
 export class SlideDeck extends React.Component {
   static propTypes = {
@@ -183,6 +209,7 @@ export class SlideDeck extends React.Component {
       <ThemeProvider theme={theme}>
         <MDXProvider components={components}>
           <Root width={width} height={height}>
+            <GoogleFonts />
             <Carousel index={index}>
               {slides.map((Component, i) => (
                 <Slide key={i} id={'slide-' + i}>

src/theme.js → src/themes/base.js

@@ -1,5 +1,5 @@
 export default {
-  // font: '"Avenir Next", sans-serif',
+  font: 'system-ui, sans-serif',
   monospace: 'Menlo, monospace',
   fontSizes: [
     16, 24, 32, 48, 64, 96, 128
@@ -8,15 +8,11 @@ export default {
     text: '#000',
     background: 'transparent',
     link: '#07c',
-    heading: '#000',
-    quote: '#000',
     pre: '#f0f',
     preBackground: '#333',
     code: '#f0f',
-    codeBackground: 'transparent',
   },
   css: {
     fontSize: '32px',
-    // textAlign: 'center'
   },
 }

src/themes/condensed.js

@@ -0,0 +1,24 @@
+import theme from './base'
+
+const blue = '#0af'
+
+export default {
+  ...theme,
+  font: '"Roboto Condensed", system-ui, sans-serif',
+  monospace: '"Roboto Mono", monospace',
+  colors: {
+    text: '#fff',
+    background: '#000',
+    link: blue,
+    pre: blue,
+    preBackground: '#111',
+    code: blue,
+  },
+  heading: {
+    textTransform: 'uppercase',
+    fontWeight: 600
+  },
+  quote: {
+    fontWeight: 600
+  }
+}

src/themes/dark.js

@@ -0,0 +1,13 @@
+import theme from './base'
+
+export default {
+  ...theme,
+  colors: {
+    text: '#fff',
+    background: '#000',
+    link: '#08f',
+    pre: '#f0f',
+    preBackground: '#333',
+    code: '#f0f',
+  },
+}

src/themes/future.js

@@ -0,0 +1,26 @@
+import theme from './base'
+
+const blue = '#0af'
+export default {
+  ...theme,
+  font: '"Avenir Next", system-ui, sans-serif',
+  colors: {
+    text: '#fff',
+    background: '#111',
+    link: blue,
+    pre: blue,
+    preBackground: '#000',
+    code: blue,
+  },
+  css: {
+    textAlign: 'center'
+  },
+  heading: {
+    textTransform: 'uppercase',
+    letterSpacing: '0.1em',
+    fontWeight: 600
+  },
+  quote: {
+    fontWeight: 600
+  }
+}

src/themes/index.js

@@ -0,0 +1,4 @@
+export { default } from './base'
+export { default as dark } from './dark'
+export { default as future } from './future'
+export { default as condensed } from './condensed'

themes.js

@@ -0,0 +1 @@
+module.exports = require('./dist/themes')