Skip to content

Commit

Permalink
feat(theme): add aura theme.
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Dec 7, 2022
1 parent 6d1e81c commit e7c7f0f
Show file tree
Hide file tree
Showing 16 changed files with 214 additions and 2 deletions.
1 change: 1 addition & 0 deletions core/README.md
Expand Up @@ -59,6 +59,7 @@ npm install @uiw/react-codemirror --save
| `@uiw/codemirror-theme-abcdef` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-abcdef.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-abcdef) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-abcdef.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-abcdef) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/abcdef) |
| `@uiw/codemirror-theme-androidstudio` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-androidstudio.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-androidstudio) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-androidstudio.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-androidstudio) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/androidstudio) |
| `@uiw/codemirror-theme-atomone` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-atomone.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-atomone) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-atomone.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-atomone) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/atomone) |
| `@uiw/codemirror-theme-aura` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-aura.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-aura) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-aura.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-aura) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/aura) |
| `@uiw/codemirror-theme-bbedit` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-bbedit.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-bbedit) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-bbedit.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-bbedit) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/bbedit) |
| `@uiw/codemirror-theme-bespin` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-bespin.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-bespin) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-bespin.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-bespin) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/bespin) |
| `@uiw/codemirror-theme-duotone` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-duotone.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-duotone) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-duotone.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-duotone) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/light) |
Expand Down
2 changes: 2 additions & 0 deletions themes/all/README.md
Expand Up @@ -62,6 +62,7 @@ const view = new EditorView({
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-bbedit';
export * from '@uiw/codemirror-theme-bespin';
export * from '@uiw/codemirror-theme-darcula';
Expand All @@ -71,6 +72,7 @@ export * from '@uiw/codemirror-theme-eclipse';
export * from '@uiw/codemirror-theme-github';
export * from '@uiw/codemirror-theme-gruvbox-dark';
export * from '@uiw/codemirror-theme-material';
export * from '@uiw/codemirror-theme-noctis-lilac';
export * from '@uiw/codemirror-theme-nord';
export * from '@uiw/codemirror-theme-okaidia';
export * from '@uiw/codemirror-theme-solarized';
Expand Down
1 change: 1 addition & 0 deletions themes/all/package.json
Expand Up @@ -24,6 +24,7 @@
"@uiw/codemirror-theme-abcdef": "4.18.2",
"@uiw/codemirror-theme-androidstudio": "4.18.2",
"@uiw/codemirror-theme-atomone": "4.18.2",
"@uiw/codemirror-theme-aura": "4.18.2",
"@uiw/codemirror-theme-bbedit": "4.18.2",
"@uiw/codemirror-theme-bespin": "4.18.2",
"@uiw/codemirror-theme-darcula": "4.18.2",
Expand Down
1 change: 1 addition & 0 deletions themes/all/src/index.ts
@@ -1,6 +1,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-bbedit';
export * from '@uiw/codemirror-theme-bespin';
export * from '@uiw/codemirror-theme-darcula';
Expand Down
1 change: 1 addition & 0 deletions themes/atomone/src/index.ts
Expand Up @@ -19,6 +19,7 @@ export const atomoneInit = (options?: CreateThemeOptions) => {
selectionMatch: '#2B323D',
gutterBackground: '#272C35',
gutterForeground: '#465063',
gutterBorder: 'transparent',
lineHighlight: '#2B323D',
...settings,
},
Expand Down
97 changes: 97 additions & 0 deletions themes/aura/README.md
@@ -0,0 +1,97 @@
<!--rehype:ignore:start-->

# BBEdit Theme

<!--rehype:ignore:end-->

[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-aura.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-aura)

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/aura">
<img width="436" alt="codemirror-theme-aura" src="https://user-images.githubusercontent.com/1680273/206092773-8140fc6b-119f-4271-a821-7dc6bcbc1c63.png">
</a>

## Install

```bash
npm install @uiw/codemirror-theme-aura --save
```

```jsx
import { tags as t } from '@lezer/highlight';
import { aura, auraInit } from '@uiw/codemirror-theme-aura';

<CodeMirror theme={aura} />
<CodeMirror
theme={auraInit({
settings: {
caret: '#c6c6c6',
fontFamily: 'monospace',
},
styles: [
{ tag: t.comment, color: '#6272a4' },
]
})}
/>
```

## API

```tsx
import { CreateThemeOptions } from '@uiw/codemirror-themes';
export declare const auraInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
export declare const aura: import('@codemirror/state').Extension;
```

## Usage

```jsx
import CodeMirror from '@uiw/react-codemirror';
import { aura } from '@uiw/codemirror-theme-aura';
import { javascript } from '@codemirror/lang-javascript';

function App() {
return (
<CodeMirror
value="console.log('hello world!');"
height="200px"
theme={aura}
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 { aura } from '@uiw/codemirror-theme-aura';

const state = EditorState.create({
doc: 'my source code',
extensions: [aura, 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.
41 changes: 41 additions & 0 deletions themes/aura/package.json
@@ -0,0 +1,41 @@
{
"name": "@uiw/codemirror-theme-aura",
"version": "4.18.2",
"description": "Theme aura for CodeMirror.",
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/aura",
"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.18.2"
},
"keywords": [
"codemirror",
"codemirror6",
"theme",
"aura",
"syntax",
"ide",
"code"
],
"jest": {
"coverageReporters": [
"lcov",
"json-summary"
]
}
}
46 changes: 46 additions & 0 deletions themes/aura/src/index.ts
@@ -0,0 +1,46 @@
import { tags as t } from '@lezer/highlight';
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';

export const auraInit = (options?: CreateThemeOptions) => {
const { theme = 'dark', settings = {}, styles = [] } = options || {};
return createTheme({
theme: theme,
settings: {
background: '#21202e',
foreground: '#edecee',
caret: '#a277ff',
selection: '#3d375e7f',
selectionMatch: '#3d375e7f',
gutterBackground: '#21202e',
gutterForeground: '#edecee',
gutterBorder: 'transparent',
lineHighlight: '#a394f033',
...settings,
},
styles: [
{ tag: t.keyword, color: '#a277ff' },
{ tag: [t.name, t.deleted, t.character, t.macroName], color: '#edecee' },
{ tag: [t.propertyName], color: '#ffca85' },
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#61ffca' },
{ tag: [t.function(t.variableName), t.labelName], color: '#ffca85' },
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#61ffca' },
{ tag: [t.definition(t.name), t.separator], color: '#edecee' },
{ tag: [t.className], color: '#82e2ff' },
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#61ffca' },
{ tag: [t.typeName], color: '#82e2ff' },
{ tag: [t.operator, t.operatorKeyword], color: '#a277ff' },
{ tag: [t.url, t.escape, t.regexp, t.link], color: '#61ffca' },
{ tag: [t.meta, t.comment], color: '#6d6d6d' },
{ tag: t.strong, fontWeight: 'bold' },
{ tag: t.emphasis, fontStyle: 'italic' },
{ tag: t.link, textDecoration: 'underline' },
{ tag: t.heading, fontWeight: 'bold', color: '#a277ff' },
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#edecee' },
{ tag: t.invalid, color: '#ff6767' },
{ tag: t.strikethrough, textDecoration: 'line-through' },
...styles,
],
});
};

export const aura = auraInit();
9 changes: 9 additions & 0 deletions themes/aura/tsconfig.json
@@ -0,0 +1,9 @@
{
"extends": "../../tsconfig",
"include": ["src"],
"compilerOptions": {
"outDir": "./cjs",
"baseUrl": ".",
"noEmit": false
}
}
2 changes: 1 addition & 1 deletion themes/bbedit/src/index.ts
Expand Up @@ -13,8 +13,8 @@ export const bbeditInit = (options?: CreateThemeOptions) => {
selectionMatch: '#FFD420',
gutterBackground: '#f5f5f5',
gutterForeground: '#4D4D4C',
lineHighlight: '#00000012',
gutterBorder: 'transparent',
lineHighlight: '#00000012',
...settings,
},
styles: [
Expand Down
1 change: 1 addition & 0 deletions themes/darcula/src/index.ts
Expand Up @@ -19,6 +19,7 @@ export const darculaInit = (options?: CreateThemeOptions) => {
selectionMatch: 'rgba(255, 255, 255, 0.2)',
gutterBackground: 'rgba(255, 255, 255, 0.1)',
gutterForeground: '#999',
gutterBorder: 'transparent',
lineHighlight: 'rgba(255, 255, 255, 0.1)',
...settings,
},
Expand Down
1 change: 1 addition & 0 deletions themes/dracula/src/index.ts
Expand Up @@ -19,6 +19,7 @@ export const draculaInit = (options?: CreateThemeOptions) => {
selectionMatch: 'rgba(255, 255, 255, 0.2)',
gutterBackground: '#282a36',
gutterForeground: '#6D8A88',
gutterBorder: 'transparent',
lineHighlight: 'rgba(255, 255, 255, 0.1)',
...settings,
},
Expand Down
2 changes: 1 addition & 1 deletion themes/duotone/src/index.ts
Expand Up @@ -18,8 +18,8 @@ export const duotoneLightInit = (options?: CreateThemeOptions) => {
selectionMatch: '#e3dcce',
gutterBackground: '#faf8f5',
gutterForeground: '#cdc4b1',
lineHighlight: '#EFEFEF',
gutterBorder: 'transparent',
lineHighlight: '#EFEFEF',
...settings,
},
styles: [
Expand Down
6 changes: 6 additions & 0 deletions themes/theme/README.md
Expand Up @@ -132,6 +132,12 @@ export default App;
<img width="436" alt="codemirror-theme-androidstudio" src="https://user-images.githubusercontent.com/1680273/181795374-7a25cb90-5d77-4f86-9cbc-b1e12dc939d3.png">
</a>

**aura**

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/aura">
<img width="436" alt="codemirror-theme-aura" src="https://user-images.githubusercontent.com/1680273/206092773-8140fc6b-119f-4271-a821-7dc6bcbc1c63.png">
</a>

**bbedit**

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/bbedit">
Expand Down
1 change: 1 addition & 0 deletions www/package.json
Expand Up @@ -46,6 +46,7 @@
"@uiw/codemirror-theme-abcdef": "4.18.2",
"@uiw/codemirror-theme-androidstudio": "4.18.2",
"@uiw/codemirror-theme-atomone": "4.18.2",
"@uiw/codemirror-theme-aura": "4.18.2",
"@uiw/codemirror-theme-bbedit": "4.18.2",
"@uiw/codemirror-theme-bespin": "4.18.2",
"@uiw/codemirror-theme-darcula": "4.18.2",
Expand Down
4 changes: 4 additions & 0 deletions www/src/pages/theme/themes/Datas.ts
@@ -1,6 +1,7 @@
import abcdefMd from '@uiw/codemirror-theme-abcdef/README.md';
import androidstudioMd from '@uiw/codemirror-theme-androidstudio/README.md';
import atomoneMd from '@uiw/codemirror-theme-atomone/README.md';
import auraMd from '@uiw/codemirror-theme-aura/README.md';
import bbeditMd from '@uiw/codemirror-theme-bbedit/README.md';
import draculaMd from '@uiw/codemirror-theme-dracula/README.md';
import darculaMd from '@uiw/codemirror-theme-darcula/README.md';
Expand All @@ -21,6 +22,7 @@ import xcodeMd from '@uiw/codemirror-theme-xcode/README.md';
import { abcdef } from '@uiw/codemirror-theme-abcdef';
import { androidstudio } from '@uiw/codemirror-theme-androidstudio';
import { atomone } from '@uiw/codemirror-theme-atomone';
import { aura } from '@uiw/codemirror-theme-aura';
import { bbedit } from '@uiw/codemirror-theme-bbedit';
import { dracula } from '@uiw/codemirror-theme-dracula';
import { darcula } from '@uiw/codemirror-theme-darcula';
Expand All @@ -42,6 +44,7 @@ export const mdSource = {
abcdef: abcdefMd.source,
androidstudio: androidstudioMd.source,
atomone: atomoneMd.source,
aura: auraMd.source,
bbedit: bbeditMd.source,
bespin: bespinMd.source,
dracula: draculaMd.source,
Expand Down Expand Up @@ -69,6 +72,7 @@ export const themeData = {
abcdef,
androidstudio,
atomone,
aura,
bbedit,
bespin,
darcula,
Expand Down

0 comments on commit e7c7f0f

Please sign in to comment.