fix(gatsby-theme-notes): fix styling clash with gatsby-theme-blog (#2…

…1656)



Co-authored-by: Laurie Barth <laurie@LauriesrkLaptop.fios-router.home>

packages/gatsby-theme-notes/package.json

@@ -44,6 +44,7 @@
     "gatsby-source-filesystem": "^2.1.48",
     "is-present": "^1.0.0",
     "react-feather": "^1.1.6",
-    "theme-ui": "^0.2.49"
+    "theme-ui": "^0.2.49",
+    "@theme-ui/prism": "^0.2.50"
   }
 }

packages/gatsby-theme-notes/src/gatsby-plugin-theme-ui/colors.js

@@ -0,0 +1,45 @@
+const purple60 = `#663399`
+const purple30 = `#D9BAE8`
+const grey90 = `#232129`
+const black80 = `#1B1F23`
+const white = `#fff`
+const lightWhite = `rgba(255, 255, 255, 0.86)`
+const opaqueLightYellow = `rgba(255, 229, 100, 0.2)`
+const opaqueLightWhite = `hsla(0, 0%, 100%, 0.2)`
+const lightGray = `hsla(0, 0%, 0%, 0.2)`
+
+export default {
+  text: grey90,
+  background: white,
+  primary: purple60,
+  secondary: black80,
+  muted: lightGray,
+  highlight: opaqueLightYellow,
+  heading: grey90,
+  prism: {
+    background: `#011627`,
+    comment: `#809393`,
+    string: `#addb67`,
+    var: `#d6deeb`,
+    number: `#f78c6c`,
+    constant: `#82aaff`,
+    punctuation: `#c792ea`,
+    className: `#ffc98b`,
+    tag: `#ffa7c4`,
+    boolean: `#ff5874`,
+    property: `#80cbc4`,
+    namespace: `#b2ccd6`,
+    highlight: `hsla(207, 95%, 15%, 1)`,
+  },
+  modes: {
+    dark: {
+      text: lightWhite,
+      background: grey90,
+      primary: purple30,
+      secondary: lightWhite,
+      muted: opaqueLightWhite,
+      highlight: purple60,
+      heading: white,
+    },
+  },
+}

packages/gatsby-theme-notes/src/gatsby-plugin-theme-ui/components.js

@@ -0,0 +1,27 @@
+/** @jsx jsx */
+import { jsx } from "theme-ui"
+import { preToCodeBlock } from "mdx-utils"
+import PrismCodeBlock from "@theme-ui/prism"
+
+import headings from "../components/headings"
+
+const CodeBlock = preProps => {
+  const props = preToCodeBlock(preProps)
+
+  if (props) {
+    const { codeString, ...restProps } = props
+
+    return (
+      <div sx={{ mb: 2 }}>
+        <PrismCodeBlock {...restProps}>{codeString}</PrismCodeBlock>
+      </div>
+    )
+  } else {
+    return <pre {...preProps} />
+  }
+}
+
+export default {
+  pre: CodeBlock,
+  ...headings,
+}

packages/gatsby-theme-notes/src/gatsby-plugin-theme-ui/index.js

@@ -1,48 +1,19 @@
-const primary = `rebeccapurple`
-const blue = `#3c58e8`
+import merge from "deepmerge"
+import typography from "./typography"
+import colors from "./colors"
+import styles from "./styles"
+import prism from "./prism"
 
-export default {
+export default merge(typography, {
   initialColorMode: `light`,
-  colors: {
-    primary,
-    secondary: `#444`,
-    text: `#000`,
-    heading: `#000`,
-    background: `#fff`,
-    link: blue,
-    muted: `#888`,
-    highlight: `tomato`,
-    blue,
-  },
+  colors,
   fonts: {
-    body: `system-ui, sans-serif`,
-  },
-  lineHeights: {
-    body: 1.5,
+    heading: `Montserrat, sans-serif`,
+    monospace: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,
   },
-  styles: {
-    root: {
-      fontFamily: `body`,
-      lineHeight: `body`,
-    },
-    a: {
-      color: blue,
-      "&:hover": {
-        color: `secondary`,
-      },
-    },
-    img: {
-      maxWidth: `100%`,
-    },
-    pre: {
-      text: primary,
-      background: `#f6f3f9`,
-      overflowX: `scroll`,
-      p: 2,
-    },
-    code: {
-      text: primary,
-      background: `#f6f3f9`,
-    },
+  sizes: {
+    container: 672,
   },
-}
+  styles,
+  prism,
+})

packages/gatsby-theme-notes/src/gatsby-plugin-theme-ui/prism.js

@@ -0,0 +1,38 @@
+export default {
+  ".attr-name": {
+    fontStyle: `italic`,
+  },
+  ".comment": {
+    color: `prism.comment`,
+  },
+  ".attr-name, .string, .url": {
+    color: `prism.string`,
+  },
+  ".variable": {
+    color: `prism.var`,
+  },
+  ".number": {
+    color: `prism.number`,
+  },
+  ".builtin, .char, .constant, .function": {
+    color: `prism.constant`,
+  },
+  ".punctuation, .selector, .doctype": {
+    color: `prism.punctuation`,
+  },
+  ".class-name": {
+    color: `prism.className`,
+  },
+  ".tag, .operator, .keyword": {
+    color: `prism.tag`,
+  },
+  ".boolean": {
+    color: `prism.boolean`,
+  },
+  ".property": {
+    color: `prism.property`,
+  },
+  ".namespace": {
+    color: `prism.namespace`,
+  },
+}

packages/gatsby-theme-notes/src/gatsby-plugin-theme-ui/styles.js

@@ -0,0 +1,56 @@
+export default {
+  root: {
+    fontFamily: `body`,
+  },
+  pre: {
+    variant: `prism`,
+    fontFamily: `monospace`,
+    tabSize: 4,
+    hyphens: `none`,
+    marginBottom: 2,
+    color: `white`,
+    bg: `prism.background`,
+    overflow: `auto`,
+    borderRadius: 10,
+    p: 3,
+  },
+  code: {
+    fontFamily: `monospace`,
+    // from typography overrideThemeStyles
+    // "h1 code, h2 code, h3 code, h4 code, h5 code, h6 code"
+    fontSize: `inherit`,
+  },
+  inlineCode: {
+    borderRadius: `0.3em`,
+    color: `secondary`,
+    bg: `highlight`,
+    paddingTop: `0.15em`,
+    paddingBottom: `0.05em`,
+    paddingX: `0.2em`,
+  },
+  // from typography overrideThemeStyles
+  a: {
+    color: `primary`,
+  },
+  hr: {
+    borderColor: `muted`,
+  },
+  p: {
+    code: {
+      fontSize: `inherit`,
+    },
+  },
+  li: {
+    code: {
+      fontSize: `inherit`,
+    },
+  },
+  blockquote: {
+    color: `inherit`,
+    borderLeftColor: `inherit`,
+    opacity: 0.8,
+    "&.translation": {
+      fontSize: `1em`,
+    },
+  },
+}

packages/gatsby-theme-notes/src/gatsby-plugin-theme-ui/typography.js

@@ -0,0 +1,6 @@
+import "typeface-montserrat"
+import "typeface-merriweather"
+import { toTheme } from "@theme-ui/typography"
+import wordpress2016 from "typography-theme-wordpress-2016"
+
+export default toTheme(wordpress2016)