Skip to content

Commit f30c552

Browse files
jaywcjlovejaywcjlove
committed
feat(theme): add noctis-lilac theme.
1 parent fea984f commit f30c552

File tree

11 files changed

+251
-1
lines changed

11 files changed

+251
-1
lines changed

‎core/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ npm install @uiw/react-codemirror --save
6868
| `@uiw/codemirror-theme-github` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-github.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-github) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-github.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-github) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/github) |
6969
| `@uiw/codemirror-theme-gruvbox-dark` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-gruvbox-dark.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-gruvbox-dark) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-gruvbox-dark.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-gruvbox-dark) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark) |
7070
| `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material) |
71+
| `@uiw/codemirror-theme-noctis-lilac` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-noctis-lilac.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-noctis-lilac.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac) |
7172
| `@uiw/codemirror-theme-nord` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-nord.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/nord) |
7273
| `@uiw/codemirror-theme-okaidia` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-okaidia.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-okaidia.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) |
7374
| `@uiw/codemirror-theme-solarized` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-solarized.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-solarized.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-solarized) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/dark) |

‎themes/all/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@uiw/codemirror-theme-github": "4.18.0",
3434
"@uiw/codemirror-theme-gruvbox-dark": "4.18.0",
3535
"@uiw/codemirror-theme-material": "4.18.0",
36+
"@uiw/codemirror-theme-noctis-lilac": "4.18.0",
3637
"@uiw/codemirror-theme-nord": "4.18.0",
3738
"@uiw/codemirror-theme-okaidia": "4.18.0",
3839
"@uiw/codemirror-theme-solarized": "4.18.0",

‎themes/all/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export * from '@uiw/codemirror-theme-eclipse';
1010
export * from '@uiw/codemirror-theme-github';
1111
export * from '@uiw/codemirror-theme-gruvbox-dark';
1212
export * from '@uiw/codemirror-theme-material';
13+
export * from '@uiw/codemirror-theme-noctis-lilac';
1314
export * from '@uiw/codemirror-theme-nord';
1415
export * from '@uiw/codemirror-theme-okaidia';
1516
export * from '@uiw/codemirror-theme-solarized';

‎themes/noctis-lilac/README.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!--rehype:ignore:start-->
2+
3+
# NoctisLilac Theme
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-noctis-lilac.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac)
8+
9+
This package implements the [nord theme](https://www.nordtheme.com/) for the CodeMirror code editor.
10+
11+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac">
12+
<img width="436" alt="codemirror-theme-nord" src="https://user-images.githubusercontent.com/1680273/206086882-b3525159-d987-4d7f-bad3-fdf3d4dbd06f.png">
13+
</a>
14+
15+
## Install
16+
17+
```bash
18+
npm install @uiw/codemirror-theme-noctis-lilac --save
19+
```
20+
21+
```jsx
22+
import { noctisLilac, noctisLilacInit } from '@uiw/codemirror-theme-noctis-lilac';
23+
24+
<CodeMirror theme={noctisLilac} />
25+
<CodeMirror
26+
theme={noctisLilacInit({
27+
settings: {
28+
caret: '#c6c6c6',
29+
fontFamily: 'monospace',
30+
}
31+
})}
32+
/>
33+
```
34+
35+
## API
36+
37+
```tsx
38+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
39+
export declare const noctisLilacInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
40+
export declare const noctisLilac: import('@codemirror/state').Extension;
41+
```
42+
43+
## Usage
44+
45+
```jsx
46+
import CodeMirror from '@uiw/react-codemirror';
47+
import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
48+
import { javascript } from '@codemirror/lang-javascript';
49+
50+
function App() {
51+
return (
52+
<CodeMirror
53+
value="console.log('hello world!');"
54+
height="200px"
55+
theme={noctisLilac}
56+
extensions={[javascript({ jsx: true })]}
57+
onChange={(value, viewUpdate) => {
58+
console.log('value:', value);
59+
}}
60+
/>
61+
);
62+
}
63+
export default App;
64+
```
65+
66+
```js
67+
import { EditorView } from '@codemirror/view';
68+
import { EditorState } from '@codemirror/state';
69+
import { javascript } from '@codemirror/lang-javascript';
70+
import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
71+
72+
const state = EditorState.create({
73+
doc: 'my source code',
74+
extensions: [noctisLilac, javascript({ jsx: true })],
75+
});
76+
77+
const view = new EditorView({
78+
parent: document.querySelector('#editor'),
79+
state,
80+
});
81+
```
82+
83+
## Contributors
84+
85+
As always, thanks to our amazing contributors!
86+
87+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
88+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
89+
</a>
90+
91+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
92+
93+
## License
94+
95+
Licensed under the MIT License.

‎themes/noctis-lilac/package.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "@uiw/codemirror-theme-noctis-lilac",
3+
"version": "4.18.0",
4+
"description": "Theme noctis-lilac for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac",
6+
"author": "kenny wong <[email protected]>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"scripts": {
11+
"watch": "tsbb watch",
12+
"build": "tsbb build"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/uiwjs/react-codemirror.git"
17+
},
18+
"files": [
19+
"src",
20+
"esm",
21+
"cjs"
22+
],
23+
"dependencies": {
24+
"@uiw/codemirror-themes": "4.18.0"
25+
},
26+
"keywords": [
27+
"codemirror",
28+
"codemirror6",
29+
"theme",
30+
"noctis-lilac",
31+
"syntax",
32+
"ide",
33+
"code"
34+
],
35+
"jest": {
36+
"coverageReporters": [
37+
"lcov",
38+
"json-summary"
39+
]
40+
}
41+
}

‎themes/noctis-lilac/src/index.ts

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { tags as t } from '@lezer/highlight';
2+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
3+
4+
export const noctisLilacInit = (options?: CreateThemeOptions) => {
5+
const { theme = 'light', settings = {}, styles = [] } = options || {};
6+
return createTheme({
7+
theme: theme,
8+
settings: {
9+
background: '#f2f1f8',
10+
foreground: '#0c006b',
11+
caret: '#5c49e9',
12+
selection: '#d5d1f2',
13+
selectionMatch: '#d5d1f2',
14+
gutterBackground: '#f2f1f8',
15+
gutterForeground: '#0c006b70',
16+
lineHighlight: '#e1def3',
17+
...settings,
18+
},
19+
styles: [
20+
{
21+
tag: t.comment,
22+
color: '#9995b7',
23+
},
24+
{
25+
tag: t.keyword,
26+
color: '#ff5792',
27+
fontWeight: 'bold',
28+
},
29+
{
30+
tag: [t.definitionKeyword, t.modifier],
31+
color: '#ff5792',
32+
},
33+
{
34+
tag: [t.className, t.tagName, t.definition(t.typeName)],
35+
color: '#0094f0',
36+
},
37+
{
38+
tag: [t.number, t.bool, t.null, t.special(t.brace)],
39+
color: '#5842ff',
40+
},
41+
{
42+
tag: [t.definition(t.propertyName), t.function(t.variableName)],
43+
color: '#0095a8',
44+
},
45+
{
46+
tag: t.typeName,
47+
color: '#b3694d',
48+
},
49+
{
50+
tag: [t.propertyName, t.variableName],
51+
color: '#fa8900',
52+
},
53+
{
54+
tag: t.operator,
55+
color: '#ff5792',
56+
},
57+
{
58+
tag: t.self,
59+
color: '#e64100',
60+
},
61+
{
62+
tag: [t.string, t.regexp],
63+
color: '#00b368',
64+
},
65+
{
66+
tag: [t.paren, t.bracket],
67+
color: '#0431fa',
68+
},
69+
{
70+
tag: t.labelName,
71+
color: '#00bdd6',
72+
},
73+
{
74+
tag: t.attributeName,
75+
color: '#e64100',
76+
},
77+
{
78+
tag: t.angleBracket,
79+
color: '#9995b7',
80+
},
81+
...styles,
82+
],
83+
});
84+
};
85+
86+
export const noctisLilac = noctisLilacInit();

‎themes/noctis-lilac/tsconfig.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig",
3+
"include": ["src"],
4+
"compilerOptions": {
5+
"outDir": "./cjs",
6+
"baseUrl": ".",
7+
"noEmit": false
8+
}
9+
}

‎themes/theme/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,12 @@ export default App;
198198
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
199199
</a>
200200

201+
**noctis-lilac**
202+
203+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac">
204+
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206086882-b3525159-d987-4d7f-bad3-fdf3d4dbd06f.png">
205+
</a>
206+
201207
**nord**
202208

203209
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">

‎www/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"@uiw/codemirror-theme-github": "4.18.0",
5656
"@uiw/codemirror-theme-gruvbox-dark": "4.18.0",
5757
"@uiw/codemirror-theme-material": "4.18.0",
58+
"@uiw/codemirror-theme-noctis-lilac": "4.18.0",
5859
"@uiw/codemirror-theme-nord": "4.18.0",
5960
"@uiw/codemirror-theme-okaidia": "4.18.0",
6061
"@uiw/codemirror-theme-solarized": "4.18.0",

‎www/src/pages/theme/home/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ const Counter = () => {
6262
return <span>{value}</span>;
6363
};`;
6464

65+
const CodeEditor = styled(CodeMirror)`
66+
border-radius: 0.375rem;
67+
overflow: hidden;
68+
`;
69+
6570
export function ThemesHome() {
6671
return (
6772
<Fragment>
@@ -74,7 +79,7 @@ export function ThemesHome() {
7479
<Link key={idx} to={`/theme/data/${_name}${_theme ? `/${_theme}` : ''}`}>
7580
<ThemeCard>
7681
<Title>{toTitleCase(name)}</Title>
77-
<CodeMirror
82+
<CodeEditor
7883
value={codeString}
7984
height="165px"
8085
theme={themeData[name as keyof typeof themeData]}

0 commit comments

Comments
 (0)