From f30c552219ff6df73c480e858fbfb1514468ac0a Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 7 Dec 2022 12:18:04 +0800
Subject: [PATCH] feat(theme): add noctis-lilac theme.
---
core/README.md | 1 +
themes/all/package.json | 1 +
themes/all/src/index.ts | 1 +
themes/noctis-lilac/README.md | 95 +++++++++++++++++++++++++++++
themes/noctis-lilac/package.json | 41 +++++++++++++
themes/noctis-lilac/src/index.ts | 86 ++++++++++++++++++++++++++
themes/noctis-lilac/tsconfig.json | 9 +++
themes/theme/README.md | 6 ++
www/package.json | 1 +
www/src/pages/theme/home/index.tsx | 7 ++-
www/src/pages/theme/themes/Datas.ts | 4 ++
11 files changed, 251 insertions(+), 1 deletion(-)
create mode 100644 themes/noctis-lilac/README.md
create mode 100644 themes/noctis-lilac/package.json
create mode 100644 themes/noctis-lilac/src/index.ts
create mode 100644 themes/noctis-lilac/tsconfig.json
diff --git a/core/README.md b/core/README.md
index cd4ccc8b9..fa1950025 100644
--- a/core/README.md
+++ b/core/README.md
@@ -68,6 +68,7 @@ npm install @uiw/react-codemirror --save
| `@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) |
| `@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) |
| `@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) |
+| `@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) |
| `@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) |
| `@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) |
| `@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) |
diff --git a/themes/all/package.json b/themes/all/package.json
index ca506fe35..a745135b1 100644
--- a/themes/all/package.json
+++ b/themes/all/package.json
@@ -33,6 +33,7 @@
"@uiw/codemirror-theme-github": "4.18.0",
"@uiw/codemirror-theme-gruvbox-dark": "4.18.0",
"@uiw/codemirror-theme-material": "4.18.0",
+ "@uiw/codemirror-theme-noctis-lilac": "4.18.0",
"@uiw/codemirror-theme-nord": "4.18.0",
"@uiw/codemirror-theme-okaidia": "4.18.0",
"@uiw/codemirror-theme-solarized": "4.18.0",
diff --git a/themes/all/src/index.ts b/themes/all/src/index.ts
index f814177f8..ef52ec844 100644
--- a/themes/all/src/index.ts
+++ b/themes/all/src/index.ts
@@ -10,6 +10,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';
diff --git a/themes/noctis-lilac/README.md b/themes/noctis-lilac/README.md
new file mode 100644
index 000000000..72d772d0d
--- /dev/null
+++ b/themes/noctis-lilac/README.md
@@ -0,0 +1,95 @@
+
+
+# NoctisLilac Theme
+
+
+
+[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-noctis-lilac.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac)
+
+This package implements the [nord theme](https://www.nordtheme.com/) for the CodeMirror code editor.
+
+
+
+
+
+## Install
+
+```bash
+npm install @uiw/codemirror-theme-noctis-lilac --save
+```
+
+```jsx
+import { noctisLilac, noctisLilacInit } from '@uiw/codemirror-theme-noctis-lilac';
+
+
+
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const noctisLilacInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const noctisLilac: import('@codemirror/state').Extension;
+```
+
+## Usage
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror';
+import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
+import { javascript } from '@codemirror/lang-javascript';
+
+function App() {
+ return (
+ {
+ 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 { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
+
+const state = EditorState.create({
+ doc: 'my source code',
+ extensions: [noctisLilac, javascript({ jsx: true })],
+});
+
+const view = new EditorView({
+ parent: document.querySelector('#editor'),
+ state,
+});
+```
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+
+
+
+
+Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+## License
+
+Licensed under the MIT License.
diff --git a/themes/noctis-lilac/package.json b/themes/noctis-lilac/package.json
new file mode 100644
index 000000000..0451ea747
--- /dev/null
+++ b/themes/noctis-lilac/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "@uiw/codemirror-theme-noctis-lilac",
+ "version": "4.18.0",
+ "description": "Theme noctis-lilac for CodeMirror.",
+ "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac",
+ "author": "kenny wong ",
+ "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.0"
+ },
+ "keywords": [
+ "codemirror",
+ "codemirror6",
+ "theme",
+ "noctis-lilac",
+ "syntax",
+ "ide",
+ "code"
+ ],
+ "jest": {
+ "coverageReporters": [
+ "lcov",
+ "json-summary"
+ ]
+ }
+}
diff --git a/themes/noctis-lilac/src/index.ts b/themes/noctis-lilac/src/index.ts
new file mode 100644
index 000000000..80813aa72
--- /dev/null
+++ b/themes/noctis-lilac/src/index.ts
@@ -0,0 +1,86 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+
+export const noctisLilacInit = (options?: CreateThemeOptions) => {
+ const { theme = 'light', settings = {}, styles = [] } = options || {};
+ return createTheme({
+ theme: theme,
+ settings: {
+ background: '#f2f1f8',
+ foreground: '#0c006b',
+ caret: '#5c49e9',
+ selection: '#d5d1f2',
+ selectionMatch: '#d5d1f2',
+ gutterBackground: '#f2f1f8',
+ gutterForeground: '#0c006b70',
+ lineHighlight: '#e1def3',
+ ...settings,
+ },
+ styles: [
+ {
+ tag: t.comment,
+ color: '#9995b7',
+ },
+ {
+ tag: t.keyword,
+ color: '#ff5792',
+ fontWeight: 'bold',
+ },
+ {
+ tag: [t.definitionKeyword, t.modifier],
+ color: '#ff5792',
+ },
+ {
+ tag: [t.className, t.tagName, t.definition(t.typeName)],
+ color: '#0094f0',
+ },
+ {
+ tag: [t.number, t.bool, t.null, t.special(t.brace)],
+ color: '#5842ff',
+ },
+ {
+ tag: [t.definition(t.propertyName), t.function(t.variableName)],
+ color: '#0095a8',
+ },
+ {
+ tag: t.typeName,
+ color: '#b3694d',
+ },
+ {
+ tag: [t.propertyName, t.variableName],
+ color: '#fa8900',
+ },
+ {
+ tag: t.operator,
+ color: '#ff5792',
+ },
+ {
+ tag: t.self,
+ color: '#e64100',
+ },
+ {
+ tag: [t.string, t.regexp],
+ color: '#00b368',
+ },
+ {
+ tag: [t.paren, t.bracket],
+ color: '#0431fa',
+ },
+ {
+ tag: t.labelName,
+ color: '#00bdd6',
+ },
+ {
+ tag: t.attributeName,
+ color: '#e64100',
+ },
+ {
+ tag: t.angleBracket,
+ color: '#9995b7',
+ },
+ ...styles,
+ ],
+ });
+};
+
+export const noctisLilac = noctisLilacInit();
diff --git a/themes/noctis-lilac/tsconfig.json b/themes/noctis-lilac/tsconfig.json
new file mode 100644
index 000000000..d72ec3d49
--- /dev/null
+++ b/themes/noctis-lilac/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "../../tsconfig",
+ "include": ["src"],
+ "compilerOptions": {
+ "outDir": "./cjs",
+ "baseUrl": ".",
+ "noEmit": false
+ }
+}
diff --git a/themes/theme/README.md b/themes/theme/README.md
index 51271e01d..3c8b5c2a4 100644
--- a/themes/theme/README.md
+++ b/themes/theme/README.md
@@ -198,6 +198,12 @@ export default App;
+**noctis-lilac**
+
+
+
+
+
**nord**
diff --git a/www/package.json b/www/package.json
index 626a23f7a..47e1483f2 100644
--- a/www/package.json
+++ b/www/package.json
@@ -55,6 +55,7 @@
"@uiw/codemirror-theme-github": "4.18.0",
"@uiw/codemirror-theme-gruvbox-dark": "4.18.0",
"@uiw/codemirror-theme-material": "4.18.0",
+ "@uiw/codemirror-theme-noctis-lilac": "4.18.0",
"@uiw/codemirror-theme-nord": "4.18.0",
"@uiw/codemirror-theme-okaidia": "4.18.0",
"@uiw/codemirror-theme-solarized": "4.18.0",
diff --git a/www/src/pages/theme/home/index.tsx b/www/src/pages/theme/home/index.tsx
index 37aeb7845..dadfab21b 100644
--- a/www/src/pages/theme/home/index.tsx
+++ b/www/src/pages/theme/home/index.tsx
@@ -62,6 +62,11 @@ const Counter = () => {
return {value};
};`;
+const CodeEditor = styled(CodeMirror)`
+ border-radius: 0.375rem;
+ overflow: hidden;
+`;
+
export function ThemesHome() {
return (
@@ -74,7 +79,7 @@ export function ThemesHome() {
{toTitleCase(name)}
-