jxnblk/mdx-deck
1
1
Fork 0
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-09-20 03:18:57 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #395 from jxnblk/v3-themes

Browse Source 
Update themes for v3
This commit is contained in:
Brent Jackson 2019-07-16 16:43:35 -04:00 committed by GitHub
commit 932e176015
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 276 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/demo.mdx
View File

@ -3,14 +3,9 @@ import {
Invert, Split, SplitRight, FullScreenCode, Horizontal
} from 'mdx-deck'
import Counter from './Counter'
import { future } from '@mdx-deck/themes'
import future from '@mdx-deck/themes/future'
import aspect from '@mdx-deck/themes/aspect'
export const themes = [
future,
aspect,
]
export const themes = [ future ]
<Head>
<title>mdx-deck</title>
@ -109,7 +104,7 @@ class extends React.Component {
---
<Image
src='https://source.unsplash.com/random/768x2048'
src='https://source.unsplash.com/random/768x2048?new_york'
size='contain'
/>
@ -119,13 +114,13 @@ Testing object fit
---
<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20' />
<Image src='https://images.unsplash.com/photo-1462331940025-496dfbfc7564?new_york&w=2048&q=20' />
---
<Split>
![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20)
![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?new_york&w=2048&q=20)
## Split Layout
@ -135,7 +130,7 @@ Testing object fit
<SplitRight>
![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20)
![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?new_york&w=2048&q=20)
## Split Layout
@ -177,7 +172,7 @@ Testing object fit
---
![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&h=1024&q=20&fit=crop)
![](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?new_york&w=2048&h=1024&q=20&fit=crop)
Inline image

4
packages/gatsby-theme-next/src/components/deck.js
View File

@ -88,7 +88,7 @@ export default ({
const head = slides.head.children
const mergedTheme = mergeThemes(theme, ...themes)
const { components, ...mergedTheme } = mergeThemes(theme, ...themes)
let Mode = ({ children }) => <React.Fragment children={children} />
@ -114,7 +114,7 @@ export default ({
</Helmet>
<GoogleFont theme={mergedTheme} />
<Context.Provider value={context}>
<ThemeProvider theme={mergedTheme}>
<ThemeProvider components={components} theme={mergedTheme}>
<Global
styles={{
body: {

3
packages/gatsby-theme-next/src/components/full-screen-code.js
View File

@ -8,7 +8,8 @@ export const FullScreenCode = ({ ...props }) => (
width: '100%',
height: '100%',
pre: {
margin: 0,
// hack for prism styles
margin: '0 !important',
width: '100%',
height: '100%',
overflow: 'auto',

4
packages/gatsby-theme-next/src/components/image.js
View File

@ -2,8 +2,8 @@
import { jsx } from 'theme-ui'
export const Image = ({
width = '100vw',
height = '100vh',
width = '100%',
height = '100%',
size = 'cover',
src,
css,

3
packages/gatsby-theme-next/src/components/invert.js
View File

@ -13,6 +13,9 @@ export const Invert = ({ ...props }) => (
height: '100%',
color: 'background',
bg: 'text',
a: {
color: 'inherit',
},
}}
/>
)

36
packages/gatsby-theme-next/src/gatsby-plugin-theme-ui/components.js
View File

@ -9,6 +9,25 @@ import {
Split,
SplitRight,
} from '..'
// hack for gatsby-plugin-mdx caching bug
import {
dark,
future,
condensed,
yellow,
swiss,
poppins,
book,
script,
comic,
notes,
lobster,
hack,
rye,
big,
aspect,
aspect43,
} from '@mdx-deck/themes'
export default {
Appear,
@ -20,4 +39,21 @@ export default {
Invert,
Split,
SplitRight,
// hack for gatsby-plugin-mdx caching bug
dark,
future,
condensed,
yellow,
swiss,
poppins,
book,
script,
comic,
notes,
lobster,
hack,
rye,
big,
aspect,
aspect43,
}

7
packages/gatsby-theme-next/src/gatsby-plugin-theme-ui/index.js
View File

@ -51,6 +51,9 @@ export default {
h6: {
variant: 'text.heading',
},
a: {
color: 'primary',
},
ul: {
m: 0,
},
@ -65,6 +68,7 @@ export default {
},
pre: {
fontFamily: 'monospace',
p: 3,
},
img: {
maxWidth: '100%',
@ -92,5 +96,8 @@ export default {
borderBottom: '1px solid',
verticalAlign: 'top',
},
blockquote: {
fontWeight: 'bold',
},
},
}

12
packages/themes/aspect.js
View File

@ -1,16 +1,12 @@
import merge from 'lodash.merge'
export default theme => {
if (theme && theme.css) {
// remove responsive styles from built-in themes
delete theme.css['@media screen and (min-width:56em)']
delete theme.css['@media screen and (min-width:64em)']
}
return merge(theme, {
aspectRatio: 16 / 9,
css: {
fontSize: '1em',
styles: {
root: {
fontSize: ['1em', '1em', '1em', '1em'],
},
},
})
}

40
packages/themes/base.js
View File

@ -1,38 +1,2 @@
export default {
font: 'system-ui, sans-serif',
monospace: 'Menlo, monospace',
colors: {
text: '#000',
background: 'white',
link: '#07c',
pre: '#f0f',
preBackground: '#333',
code: '#f0f',
},
css: {
fontSize: '16px',
textAlign: 'center',
'@media screen and (min-width:56em)': {
fontSize: '32px',
},
'@media screen and (min-width:64em)': {
fontSize: '48px',
},
'@media print': {
fontSize: '40px',
},
'li > p': {
margin: 0,
},
},
pre: {
textAlign: 'left',
},
ol: {
textAlign: 'left',
},
ul: {
textAlign: 'left',
},
}
// kept for backwards compatibility
export default {}

28
packages/themes/big.js
View File

@ -1,24 +1,28 @@
import theme from './base'
const blue = '#0af'
export default {
...theme,
font: '"Bowlby One SC", sans-serif',
googleFont: 'https://fonts.googleapis.com/css?family=Bowlby+One+SC',
fonts: {
body: '"Bowlby One SC", sans-serif',
},
colors: {
text: '#dff',
background: '#011',
primary: blue,
blue,
link: blue,
pre: blue,
preBackground: '#000',
code: blue,
black: '#000',
},
heading: {
fontWeight: 600,
fontWeights: {
heading: 600,
bold: 600,
},
quote: {
fontWeight: 600,
styles: {
pre: {
color: 'primary',
bg: 'black',
},
code: {
color: 'primary',
},
},
}

25
packages/themes/book.js
View File

@ -1,29 +1,26 @@
import base from './base'
const white = '#fffceb'
const black = '#11111f'
const blue = '#2d5dd7'
export default {
...base,
font: '"Crimson Text", serif',
fonts: {
body: '"Crimson Text", serif',
},
googleFont: 'https://fonts.googleapis.com/css?family=Crimson+Text',
colors: {
text: black,
background: white,
link: blue,
},
css: {
textAlign: 'left',
fontSize: '1.5em',
'@media screen and (min-width:64em)': {
fontSize: '3em',
styles: {
root: {
textAlign: 'left',
fontSize: ['1.5em', '3em'],
},
},
Slide: {
'& > div': {
minWidth: '80vw',
minHeight: '60vh',
Slide: {
display: 'block',
padding: '2em',
textAlign: 'left',
},
},
}

21
packages/themes/code.js
View File

@ -1,19 +1,22 @@
import base from './base'
const blue = '#00cdf1'
const black = '#003d48'
const link = '#0800e3'
const primary = '#0800e3'
export default {
...base,
font: '"Source Code Pro", monospace',
monospace: '"Source Code Pro", monospace',
googleFont: 'https://fonts.googleapis.com/css?family=Source+Code+Pro',
fonts: {
body: '"Source Code Pro", monospace',
monospace: '"Source Code Pro", monospace',
},
colors: {
text: black,
background: blue,
link: link,
pre: blue,
preBackground: black,
primary,
},
styles: {
pre: {
color: 'background',
bg: 'text',
},
},
}

9
packages/themes/comic.js
View File

@ -1,16 +1,15 @@
import base from './base'
const white = '#fffceb'
const black = '#351e38'
const blue = '#2d5dd7'
export default {
...base,
font: '"Gloria Hallelujah", cursive',
googleFont: 'https://fonts.googleapis.com/css?family=Gloria+Hallelujah',
fonts: {
body: '"Gloria Hallelujah", cursive',
},
colors: {
text: black,
background: white,
link: blue,
primary: blue,
},
}

35
packages/themes/condensed.js
View File

@ -1,25 +1,34 @@
import theme from './base'
const blue = '#0af'
export default {
...theme,
font: '"Roboto Condensed", system-ui, sans-serif',
googleFont: 'https://fonts.googleapis.com/css?family=Roboto+Condensed',
monospace: '"Roboto Mono", monospace',
fonts: {
body: '"Roboto Condensed", system-ui, sans-serif',
monospace: '"Roboto Mono", monospace',
},
colors: {
text: '#fff',
background: '#000',
link: blue,
primary: blue,
pre: blue,
preBackground: '#111',
code: blue,
darkgray: '#111',
},
heading: {
textTransform: 'uppercase',
fontWeight: 600,
fontWeights: {
heading: 600,
bold: 600,
},
quote: {
fontWeight: 600,
text: {
heading: {
textTransform: 'uppercase',
},
},
styles: {
pre: {
color: 'primary',
bg: 'darkgray',
},
code: {
color: 'primary',
},
},
}

19
packages/themes/dark.js
View File

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

37
packages/themes/future.js
View File

@ -1,25 +1,32 @@
import theme from './base'
const blue = '#0af'
export default {
...theme,
font: '"Avenir Next", system-ui, sans-serif',
fonts: {
body: '"Avenir Next", system-ui, sans-serif',
},
colors: {
text: '#fff',
background: '#111',
blue,
link: blue,
pre: blue,
preBackground: '#000',
code: blue,
primary: blue,
black: '#000',
},
heading: {
textTransform: 'uppercase',
letterSpacing: '0.1em',
fontWeight: 600,
fontWeights: {
heading: 600,
bold: 600,
},
quote: {
fontWeight: 600,
text: {
heading: {
textTransform: 'uppercase',
letterSpacing: '0.1em',
},
},
styles: {
pre: {
color: 'primary',
bg: 'black',
},
code: {
color: 'primary',
},
},
}

41
packages/themes/hack.js
View File

@ -1,32 +1,33 @@
import base from './base'
const green = '#42ff71'
export default {
...base,
font: '"IBM Plex Mono", monospace',
monospace: '"IBM Plex Mono", monospace',
googleFont: 'https://fonts.googleapis.com/css?family=IBM+Plex+Mono',
fonts: {
body: '"IBM Plex Mono", monospace',
monospace: '"IBM Plex Mono", monospace',
},
colors: {
text: green,
background: '#000',
link: green,
pre: '#000',
preBackground: green,
code: '#000',
codeBackground: green,
primary: green,
},
css: {
textAlign: 'left',
fontSize: '1.5em',
'@media screen and (min-width:64em)': {
fontSize: '3em',
styles: {
root: {
textAlign: 'left',
fontSize: ['1.5em', null, '3em'],
},
},
Slide: {
'& > div': {
minWidth: '80vw',
minHeight: '60vh',
Slide: {
display: 'block',
padding: '2em',
textAlign: 'left',
},
pre: {
color: 'background',
bg: 'primary',
},
code: {
color: 'background',
bg: 'primary',
},
},
}

5
packages/themes/index.js
View File

@ -28,8 +28,3 @@ export { default as big } from './big'
// fixed aspect ratio
export { default as aspect } from './aspect'
export { default as aspect43 } from './aspect-4-3'
// super
// https://fonts.google.com/specimen/Creepster
// https://fonts.google.com/specimen/Pirata+One
// https://fonts.google.com/specimen/Merriweather

11
packages/themes/lobster.js
View File

@ -1,15 +1,14 @@
import base from './base'
const text = '#220011'
export default {
...base,
font: 'Lobster, cursive',
monospace: '"Roboto Mono", monospace',
googleFont: 'https://fonts.googleapis.com/css?family=Lobster|Roboto+Mono',
fonts: {
body: 'Lobster, cursive',
monospace: '"Roboto Mono", monospace',
},
colors: {
text: text,
background: 'tomato',
link: text,
primary: text,
},
}

19
packages/themes/notes.js
View File

@ -1,15 +1,16 @@
import base from './base'
export default {
...base,
font: '"Annie Use Your Telescope", cursive',
googleFont:
'https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope',
css: {
fontSize: '1.5em',
textAlign: 'center',
'@media screen and (min-width:64em)': {
fontSize: '4em',
fonts: {
body: '"Annie Use Your Telescope", cursive',
},
styles: {
root: {
fontSize: ['1.5em', null, '4em'],
textAlign: 'center',
},
pre: {
textAlign: 'left',
},
},
}

2
packages/themes/package.json
View File

@ -6,6 +6,6 @@
"license": "MIT",
"dependencies": {
"lodash.merge": "^4.6.1",
"react-syntax-highlighter": "^10.1.3"
"react-syntax-highlighter": "^11.0.2"
}
}

27
packages/themes/poppins.js
View File

@ -1,14 +1,23 @@
export default {
font: '"Poppins", sans-serif',
googleFont: 'https://fonts.googleapis.com/css?family=Poppins:400,900',
heading: {
fontWeight: 900,
letterSpacing: '-0.05em',
fonts: {
body: '"Poppins", sans-serif',
},
blockquote: {
fontSize: '1.75em',
textAlign: 'left',
fontWeight: 900,
letterSpacing: '-0.05em',
fontWeights: {
heading: 900,
bold: 900,
},
text: {
heading: {
fontWeight: 900,
letterSpacing: '-0.05em',
},
},
styles: {
blockquote: {
fontSize: '1.75em',
textAlign: 'left',
letterSpacing: '-0.05em',
},
},
}

17
packages/themes/rye.js
View File

@ -1,18 +1,19 @@
import base from './base'
const white = '#ffeec1'
export default {
...base,
font: '"Rye", serif',
monospace: '"Roboto Mono", monospace',
googleFont: 'https://fonts.googleapis.com/css?family=Rye|Roboto+Mono',
fonts: {
body: '"Rye", serif',
monospace: '"Roboto Mono", monospace',
},
colors: {
text: white,
background: 'black',
link: white,
primary: white,
},
h1: {
textTransform: 'uppercase',
styles: {
h1: {
textTransform: 'uppercase',
},
},
}

23
packages/themes/script.js
View File

@ -1,23 +1,24 @@
import theme from './base'
const cream = '#fe9'
const black = '#320'
export default {
...theme,
font: '"Yellowtail", cursive',
monospace: '"Roboto Mono", Menlo, monospace',
googleFont: 'https://fonts.googleapis.com/css?family=Yellowtail|Roboto+Mono',
fonts: {
body: '"Yellowtail", cursive',
monospace: '"Roboto Mono", Menlo, monospace',
},
colors: {
text: black,
background: cream,
link: black,
primary: black,
},
css: {
fontSize: '1.5em',
textAlign: 'center',
'@media screen and (min-width:64em)': {
fontSize: '4em',
styles: {
root: {
fontSize: ['1.5em', null, '4em'],
textAlign: 'center',
},
pre: {
textAlign: 'left',
},
},
}

27
packages/themes/swiss.js
View File

@ -1,28 +1,25 @@
import base from './base'
const white = '#fff'
const black = '#000'
const red = '#f00'
export default {
...base,
font: '"Helvetica Neue", Helvetica, Arial, sans-serif',
fonts: {
body: '"Helvetica Neue", Helvetica, Arial, sans-serif',
},
colors: {
text: black,
background: white,
link: red,
primary: red,
},
css: {
textAlign: 'left',
fontSize: '1.5em',
'@media screen and (min-width:64em)': {
fontSize: '3em',
styles: {
root: {
textAlign: 'left',
fontSize: ['1.5em', null, '3em'],
},
},
Slide: {
'& > div': {
minWidth: '80vw',
minHeight: '60vh',
Slide: {
display: 'block',
padding: '2em',
textAlign: 'left',
},
},
}

2
packages/themes/syntax-highlighter.js
View File

@ -4,7 +4,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter'
export const getLanguage = className => {
const match = /language-(\w*)/.exec(className || 'language-javascript')
let lang = 'javascript'
if (match.length > 1) {
if (match && match.length > 1) {
lang = match[1]
}
return lang

38
packages/themes/yellow.js
View File

@ -1,31 +1,31 @@
import theme from './base'
const yellow = '#fd0'
export default {
...theme,
font: '"Roboto Condensed", system-ui, sans-serif',
weights: [400, 700],
monospace: '"Roboto Mono", monospace',
googleFont:
'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto+Mono',
fonts: {
body: '"Roboto Condensed", system-ui, sans-serif',
monospace: '"Roboto Mono", monospace',
},
colors: {
text: '#000',
background: yellow,
link: '#333',
pre: yellow,
preBackground: '#000',
code: yellow,
codeBackground: '#000',
primary: '#333',
},
heading: {
textTransform: 'uppercase',
fontWeight: 700,
text: {
heading: {
textTransform: 'uppercase',
},
},
blockquote: {
fontWeight: 700,
},
pre: {
textAlign: 'left',
styles: {
pre: {
textAlign: 'left',
color: 'background',
bg: 'text',
},
code: {
color: 'background',
bg: 'text',
},
},
}

8
yarn.lock
View File

@ -11897,10 +11897,10 @@ react-swipeable@^5.3.0:
dependencies:
prop-types "^15.6.2"
react-syntax-highlighter@^10.1.3:
version "10.3.5"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-10.3.5.tgz#3b3e2d1eba92fb7988c3b50d22d2c74ae0263fdd"
integrity sha512-KR4YE7Q91bHEhvIxuvs/J3tJWfxTyBAAMS4fcMOR9h0C6SoCZIr1OUkVamHOqHMDEck4tdS9gp0D/vlAyPLftA==
react-syntax-highlighter@^11.0.2:
version "11.0.2"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
integrity sha512-kqmpM2OH5OodInbEADKARwccwSQWBfZi0970l5Jhp4h39q9Q65C4frNcnd6uHE5pR00W8pOWj9HDRntj2G4Rww==
dependencies:
"@babel/runtime" "^7.3.1"
highlight.js "~9.13.0"