feat(theme): add basic theme.

themes/all/README.md

@@ -63,6 +63,7 @@ export * from '@uiw/codemirror-theme-abcdef';
 export * from '@uiw/codemirror-theme-androidstudio';
 export * from '@uiw/codemirror-theme-atomone';
 export * from '@uiw/codemirror-theme-aura';
+export * from '@uiw/codemirror-theme-basic';
 export * from '@uiw/codemirror-theme-bbedit';
 export * from '@uiw/codemirror-theme-bespin';
 export * from '@uiw/codemirror-theme-darcula';
@@ -110,6 +111,16 @@ export * from '@uiw/codemirror-theme-xcode';
   <img width="436" alt="codemirror-theme-aura" src="https://user-images.githubusercontent.com/1680273/206092773-8140fc6b-119f-4271-a821-7dc6bcbc1c63.png">
 </a>
 
+**basic**
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/dark">
+  <img width="436" alt="codemirror-theme-basic dark" src="https://github.com/uiwjs/react-codemirror/assets/1680273/977c1271-eca1-4f61-ad90-3a89f4ea4871">
+</a>
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/light">
+  <img width="436" alt="codemirror-theme-basic light" src="https://github.com/uiwjs/react-codemirror/assets/1680273/e5b43612-5190-4d5b-ab7a-0f5d369ad7e4">
+</a>
+
 **bbedit**
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/bbedit">

themes/all/package.json

@@ -25,6 +25,7 @@
     "@uiw/codemirror-theme-androidstudio": "4.21.9",
     "@uiw/codemirror-theme-atomone": "4.21.9",
     "@uiw/codemirror-theme-aura": "4.21.9",
+    "@uiw/codemirror-theme-basic": "4.21.9",
     "@uiw/codemirror-theme-bbedit": "4.21.9",
     "@uiw/codemirror-theme-bespin": "4.21.9",
     "@uiw/codemirror-theme-darcula": "4.21.9",

themes/basic/README.md

@@ -0,0 +1,106 @@
+<!--rehype:ignore:start-->
+
+# Basic Theme (dark/light)
+
+<!--rehype:ignore:end-->
+
+[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-basic.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-basic)
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/dark">
+  <img width="436" alt="codemirror-theme-basic dark" src="https://github.com/uiwjs/react-codemirror/assets/1680273/977c1271-eca1-4f61-ad90-3a89f4ea4871">
+</a>
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/light">
+  <img width="436" alt="codemirror-theme-basic light" src="https://github.com/uiwjs/react-codemirror/assets/1680273/e5b43612-5190-4d5b-ab7a-0f5d369ad7e4">
+</a>
+
+## Install
+
+```bash
+npm install @uiw/codemirror-theme-basic --save
+```
+
+```jsx
+import { basicLight, basicLightInit, basicDark, basicDarkInit } from '@uiw/codemirror-theme-basic';
+// Or
+import { basicDark, basicDarkInit } from '@uiw/codemirror-theme-basic/dark';
+import { basicLight, basicLightInit } from '@uiw/codemirror-theme-basic/light';
+
+<CodeMirror theme={basicLight} />
+<CodeMirror
+  theme={basicLightInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    }
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const defaultSettingsBasicLight: CreateThemeOptions['settings'];
+export declare const basicLightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
+export declare const basicLight: import('@codemirror/state').Extension;
+export declare const defaultSettingsBasicDark: CreateThemeOptions['settings'];
+export declare const basicDarkInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
+export declare const basicDark: import('@codemirror/state').Extension;
+```
+
+## Usage
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror';
+import { basicLight, basicDark } from '@uiw/codemirror-theme-basic';
+import { javascript } from '@codemirror/lang-javascript';
+
+function App() {
+  return (
+    <CodeMirror
+      value="console.log('hello world!');"
+      height="200px"
+      theme={basicLight}
+      extensions={[javascript({ jsx: true })]}
+      onChange={(value, viewUpdate) => {
+        console.log('value:', value);
+      }}
+    />
+  );
+}
+export default App;
+```
+
+```js
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { basicLight, basicDark } from '@uiw/codemirror-theme-basic';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [basicDark, 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.
+
+by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)

themes/basic/dark.d.ts

@@ -0,0 +1,6 @@
+declare module '@uiw/codemirror-theme-basic/dark' {
+  import { CreateThemeOptions } from '@uiw/codemirror-themes';
+  export const defaultSettingsBasicDark: CreateThemeOptions['settings'];
+  export const basicDarkInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
+  export const basicDark: import('@codemirror/state').Extension;
+}

themes/basic/light.d.ts

@@ -0,0 +1,6 @@
+declare module '@uiw/codemirror-theme-basic/light' {
+  import { CreateThemeOptions } from '@uiw/codemirror-themes';
+  export const defaultSettingsBasicLight: CreateThemeOptions['settings'];
+  export const basicLightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
+  export const basicLight: import('@codemirror/state').Extension;
+}

themes/basic/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@uiw/codemirror-theme-basic",
+  "version": "4.21.9",
+  "description": "Theme basic for CodeMirror.",
+  "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/basic/light",
+  "author": "kenny wong <[email protected]>",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "exports": {
+    "./README.md": "./README.md",
+    ".": {
+      "import": "./esm/index.js",
+      "types": "./cjs/index.d.ts",
+      "require": "./cjs/index.js"
+    },
+    "./light": {
+      "import": "./esm/light.js",
+      "types": "./cjs/light.d.ts",
+      "require": "./cjs/light.js"
+    },
+    "./dark": {
+      "import": "./esm/dark.js",
+      "types": "./cjs/dark.d.ts",
+      "require": "./cjs/dark.js"
+    }
+  },
+  "scripts": {
+    "watch": "tsbb watch src/*.ts --use-babel",
+    "build": "tsbb build src/*.ts --use-babel"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-codemirror.git"
+  },
+  "files": [
+    "src",
+    "esm",
+    "cjs"
+  ],
+  "dependencies": {
+    "@uiw/codemirror-themes": "4.21.9"
+  },
+  "keywords": [
+    "codemirror",
+    "codemirror6",
+    "theme",
+    "basic",
+    "syntax",
+    "ide",
+    "code"
+  ],
+  "jest": {
+    "coverageReporters": [
+      "lcov",
+      "json-summary"
+    ]
+  }
+}

themes/basic/src/dark.ts

@@ -0,0 +1,123 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+
+export const defaultSettingsBasicDark: CreateThemeOptions['settings'] = {
+  background: '#2E3235',
+  foreground: '#DDDDDD',
+  caret: '#DDDDDD',
+  selection: '#202325',
+  selectionMatch: '#B9D2FF30',
+  gutterBackground: '#292d30',
+  gutterForeground: '#808080',
+  gutterBorder: '1px solid #ffffff10',
+  lineHighlight: '#B9D2FF30',
+};
+
+export const basicDarkInit = (options?: Partial<CreateThemeOptions>) => {
+  const { theme = 'dark', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      ...defaultSettingsBasicDark,
+      ...settings,
+    },
+    styles: [
+      { tag: t.keyword, color: '#fda331' },
+      {
+        tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+        color: '#b5bd68',
+      },
+      { tag: [t.variableName], color: '#6fb3d2' },
+      { tag: [t.function(t.variableName)], color: '#fda331' },
+      { tag: [t.labelName], color: '#fc6d24' },
+      {
+        tag: [t.color, t.constant(t.name), t.standard(t.name)],
+        color: '#fda331',
+      },
+      { tag: [t.definition(t.name), t.separator], color: '#cc99cc' },
+      { tag: [t.brace], color: '#cc99cc' },
+      {
+        tag: [t.annotation],
+        color: '#fc6d24',
+      },
+      {
+        tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+        color: '#fda331',
+      },
+      {
+        tag: [t.typeName, t.className],
+        color: '#6fb3d2',
+      },
+      {
+        tag: [t.operator, t.operatorKeyword],
+        color: '#cc99cc',
+      },
+      {
+        tag: [t.tagName],
+        color: '#fda331',
+      },
+      {
+        tag: [t.squareBracket],
+        color: '#cc99cc',
+      },
+      {
+        tag: [t.angleBracket],
+        color: '#cc99cc',
+      },
+      {
+        tag: [t.attributeName],
+        color: '#6fb3d2',
+      },
+      {
+        tag: [t.regexp],
+        color: '#fda331',
+      },
+      {
+        tag: [t.quote],
+        color: '#DDDDDD',
+      },
+      { tag: [t.string], color: '#b5bd68' },
+      {
+        tag: t.link,
+        color: '#6987AF',
+        textDecoration: 'underline',
+        textUnderlinePosition: 'under',
+      },
+      {
+        tag: [t.url, t.escape, t.special(t.string)],
+        color: '#8abeb7',
+      },
+      { tag: [t.meta], color: '#A54543' },
+      { tag: [t.comment], color: '#808080', fontStyle: 'italic' },
+      { tag: t.monospace, color: '#DDDDDD' },
+      { tag: t.strong, fontWeight: 'bold', color: '#fda331' },
+      { tag: t.emphasis, fontStyle: 'italic', color: '#6fb3d2' },
+      { tag: t.strikethrough, textDecoration: 'line-through' },
+      { tag: t.heading, fontWeight: 'bold', color: '#DDDDDD' },
+      { tag: t.special(t.heading1), fontWeight: 'bold', color: '#DDDDDD' },
+      { tag: t.heading1, fontWeight: 'bold', color: '#DDDDDD' },
+      {
+        tag: [t.heading2, t.heading3, t.heading4],
+        fontWeight: 'bold',
+        color: '#DDDDDD',
+      },
+      {
+        tag: [t.heading5, t.heading6],
+        color: '#DDDDDD',
+      },
+      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#8abeb7' },
+      {
+        tag: [t.processingInstruction, t.inserted],
+        color: '#8abeb7',
+      },
+      {
+        tag: [t.contentSeparator],
+        color: '#6fb3d2',
+      },
+      { tag: t.invalid, color: '#B9D2FF', borderBottom: `1px dotted ${'#fc6d24'}` },
+      ...styles,
+    ],
+  });
+};
+
+export const basicDark = basicDarkInit();

themes/basic/src/index.ts

@@ -0,0 +1,2 @@
+export * from './dark';
+export * from './light';