Adjust themes

docs/demo.mdx

@@ -5,11 +5,8 @@ import Counter from './Counter'
 import future from '@mdx-deck/themes/future'
 import aspect from '@mdx-deck/themes/aspect'
 
-import { hack } from '@mdx-deck/themes'
-
 export const themes = [
-  hack,
-  // future,
+  future,
   aspect,
 ]
 

packages/themes/aspect-4-3.js

@@ -1,6 +1,7 @@
+import merge from 'lodash.merge'
 import aspect from './aspect'
 
-export default {
-  ...aspect,
-  aspectRatio: 9 / 16,
-}
+export default theme =>
+  merge(theme, aspect(theme), {
+    aspectRatio: 9 / 16,
+  })

packages/themes/aspect.js

@@ -1,15 +1,25 @@
-export default {
-  aspectRatio: 9 / 16,
-  css: {
-    fontSize: '1em',
-    '@media screen and (min-width:56em)': {
-      fontSize: 'inherit',
+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: 9 / 16,
+    css: {
+      fontSize: '1em',
+      '@media screen and (min-width:56em)': {
+        fontSize: 'inherit',
+      },
+      '@media screen and (min-width:64em)': {
+        fontSize: 'inherit',
+      },
+      '@media print': {
+        fontSize: 'inherit',
+      },
     },
-    '@media screen and (min-width:64em)': {
-      fontSize: 'inherit',
-    },
-    '@media print': {
-      fontSize: 'inherit',
-    },
-  },
+  })
 }