feat(docz-theme-default): include media queries facepaint

packages/docz-theme-default/src/config.ts

@@ -1,9 +1,11 @@
 import { styles } from './styles'
 import * as colors from './styles/colors'
 import { prismTheme } from './styles/prism-theme'
+import { mq } from './styles/responsive'
 
 export const config = {
   colors,
   styles,
   prismTheme,
+  mq,
 }

packages/docz-theme-default/src/styles/responsive.ts

@@ -0,0 +1,7 @@
+import facepaint from 'facepaint'
+
+export const mq = facepaint([
+  '@media(min-width: 420px)',
+  '@media(min-width: 920px)',
+  '@media(min-width: 1120px)'
+])

packages/docz-theme-default/src/types.d.ts

@@ -8,3 +8,31 @@ declare module '*.svg' {
   const content: any
   export default content
 }
+
+declare module "facepaint" {
+
+  interface Styles {
+    [ruleOrSelector: string]: string | number | Styles;
+  }
+
+  interface MqStyles {
+    [ruleOrSelector: string]: string | string[] | number | number[] | Styles;
+  }
+
+  type Mq = (styles: object) => Styles;
+
+  interface FacepaintSettings {
+    literal?: boolean;
+    overlap?: boolean;
+  }
+
+  type Facepaint = (
+    /** media queries to be applied across */
+    mediaQueries: [string, string, string],
+    settings?: FacepaintSettings
+  ) => Mq;
+
+  const facepaint: Facepaint;
+
+  export = facepaint;
+}