feat(theme): Gruvbox theme (#402)

* theme src

* theme package.json

* theme tsconfig.json

* theme readme

Author: su55y

themes/gruvbox/README.md

@@ -0,0 +1,68 @@
+<!--rehype:ignore:start-->
+
+# Gruvbox Dark Theme
+
+<!--rehype:ignore:end-->
+
+<!-- [![npm version]()]() -->
+
+<!-- <a href=""> -->
+<!--   <img width="436" alt="codemirror-theme-gruvbox-dark" src=""> -->
+<!-- </a> -->
+
+## Install
+
+```bash
+npm install @uiw/codemirror-theme-gruvbox-dark --save
+```
+
+## Usage
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror'
+import { gruvboxDark } from '@uiw/codemirror-theme-gruvbox-dark'
+import { javascript } from '@codemirror/lang-javascript'
+
+function App() {
+  return (
+    <CodeMirror
+      value="console.log('hello world!');"
+      height='200px'
+      theme={gruvboxDark}
+      extensions={[javascript({ jsx: true })]}
+    />
+  )
+}
+export default App
+```
+
+```js
+import { EditorView } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { javascript } from '@codemirror/lang-javascript'
+import { gruvboxDark } from '@uiw/codemirror-theme-gruvbox-dark'
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [gruvboxDark, javascript({ jsx: true })],
+})
+
+const view = new EditorView({
+  parent: document.querySelector('#editor'),
+  state,
+})
+```
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
+</a>
+
+Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+## License
+
+Licensed under the MIT License.

themes/gruvbox/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@uiw/codemirror-theme-gruvbox-dark",
+  "version": "4.13.0",
+  "description": "Theme gruvbox-dark for CodeMirror.",
+  "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox-dark",
+  "author": "kenny wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "scripts": {
+    "watch": "tsbb watch",
+    "build": "tsbb build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-codemirror.git"
+  },
+  "files": [
+    "src",
+    "esm",
+    "cjs"
+  ],
+  "dependencies": {
+    "@uiw/codemirror-themes": "4.13.0"
+  },
+  "keywords": [
+    "codemirror",
+    "codemirror6",
+    "theme",
+    "gruvbox",
+    "syntax",
+    "ide",
+    "code"
+  ],
+  "jest": {
+    "coverageReporters": [
+      "lcov",
+      "json-summary"
+    ]
+  }
+}

themes/gruvbox/src/index.ts

@@ -0,0 +1,38 @@
+/**
+ * @name gruvbox-dark
+ * @author morhetz
+ * Name: Gruvbox
+ * From github.com/codemirror/codemirror5/blob/master/theme/gruvbox-dark.css
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+
+export const gruvboxDark = createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#282828',
+    foreground: '#ebdbb2',
+    caret: '#ebdbb2',
+    selection: '#bdae93',
+    selectionMatch: '#bdae93',
+    lineHighlight: '#3c3836',
+    gutterBackground: '#282828',
+    gutterForeground: '#7c6f64',
+  },
+  styles: [
+    { tag: t.comment, color: '#928374' },
+    { tag: t.variableName, color: '#ebdbb2' },
+    { tag: [t.string, t.special(t.brace)], color: '#b8bb26' },
+    { tag: t.number, color: '#d3869b' },
+    { tag: t.bool, color: '#d3869b' },
+    { tag: t.null, color: '#d3869b' },
+    { tag: t.keyword, color: '#f84934' },
+    { tag: t.operator, color: '#ebdbb2' },
+    { tag: t.className, color: '#8ec07c' },
+    { tag: t.definition(t.typeName), color: '#f84934' },
+    { tag: t.typeName, color: '#f84934' },
+    { tag: t.angleBracket, color: '#fe8019' },
+    { tag: t.tagName, color: '#fe8019' },
+    { tag: t.attributeName, color: '#8ec07c' },
+  ],
+});

themes/gruvbox/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "./cjs",
+    "baseUrl": ".",
+    "noEmit": false
+  }
+}