add custom GH theme

theme/src/components/code.js

@@ -1,7 +1,7 @@
 import { Absolute, Box, Relative, Text } from '@primer/components'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import Prism from '../prism'
-import githubTheme from 'prism-react-renderer/themes/github'
+import githubTheme from '../github'
 import React from 'react'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'

theme/src/components/live-code.js

@@ -1,6 +1,6 @@
 import {Absolute, BorderBox, Flex, Relative, Text} from '@primer/components'
 import htmlReactParser from 'html-react-parser'
-import githubTheme from 'prism-react-renderer/themes/github'
+import githubTheme from '../github'
 import React, {useState} from 'react'
 import reactElementToJsxString from 'react-element-to-jsx-string'
 import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live'

theme/src/github.js

@@ -0,0 +1,74 @@
+export default {
+  plain: {
+    color: "#393A34",
+    backgroundColor: "#f6f8fa",
+  },
+  styles: [
+    {
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "#999988",
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["namespace"],
+      style: {
+        opacity: 0.7,
+      },
+    },
+    {
+      types: ["string", "attr-value"],
+      style: {
+        color: "#e3116c",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#393A34",
+      },
+    },
+    {
+      types: [
+        "entity",
+        "url",
+        "symbol",
+        "number",
+        "boolean",
+        "variable",
+        "constant",
+        "property",
+        "regex",
+        "inserted",
+      ],
+      style: {
+        color: "#36acaa",
+      },
+    },
+    {
+      types: ["atrule", "keyword", "attr-name", "selector"],
+      style: {
+        color: "#00a4db",
+      },
+    },
+    {
+      types: ["function", "deleted", "tag"],
+      style: {
+        color: "#d73a49",
+      },
+    },
+    {
+      types: ["function-variable"],
+      style: {
+        color: "#6f42c1",
+      },
+    },
+    {
+      types: ["tag", "selector", "keyword"],
+      style: {
+        color: "#00009f",
+      },
+    },
+  ],
+};