From 2717cddd54becd621d824cf5a8d208cd49507cb6 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sun, 4 Dec 2022 23:14:55 +0800
Subject: [PATCH] feat(theme): add nord theme.
---
.github/workflows/ci.yml | 21 +++++-
core/README.md | 2 +-
themes/all/README.md | 1 +
themes/all/package.json | 1 +
themes/all/src/index.ts | 1 +
themes/nord/README.md | 71 +++++++++++++++++
themes/nord/package.json | 41 ++++++++++
themes/nord/src/index.ts | 113 ++++++++++++++++++++++++++++
themes/nord/tsconfig.json | 9 +++
themes/theme/README.md | 12 +++
www/package.json | 1 +
www/src/pages/theme/themes/Datas.ts | 4 +
12 files changed, 275 insertions(+), 2 deletions(-)
create mode 100644 themes/nord/README.md
create mode 100644 themes/nord/package.json
create mode 100644 themes/nord/src/index.ts
create mode 100644 themes/nord/tsconfig.json
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 31db9df72..a258e9e07 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -417,6 +417,12 @@ jobs:
path: themes/github/package.json
rename: "@uiwjs/codemirror-theme-github"
+ - run: npm publish
+ working-directory: themes/github
+ if: success() || failure()
+ env:
+ NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+
- name: Modify @uiw/codemirror-theme-gruvbox-dark => @uiwjs/codemirror-theme-gruvbox-dark
uses: jaywcjlove/github-action-package@main
if: success() || failure()
@@ -425,7 +431,20 @@ jobs:
rename: '@uiwjs/codemirror-theme-gruvbox-dark'
- run: npm publish
- working-directory: themes/github
+ working-directory: themes/gruvbox
+ if: success() || failure()
+ env:
+ NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+
+ - name: Modify @uiw/codemirror-theme-nord => @uiwjs/codemirror-theme-nord
+ uses: jaywcjlove/github-action-package@main
+ if: success() || failure()
+ with:
+ path: themes/nord/package.json
+ rename: '@uiwjs/codemirror-theme-nord'
+
+ - run: npm publish
+ working-directory: themes/nord
if: success() || failure()
env:
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/core/README.md b/core/README.md
index 6088dcef8..45bd3064f 100644
--- a/core/README.md
+++ b/core/README.md
@@ -50,7 +50,7 @@ npm install @uiw/react-codemirror --save
| `@uiw/codemirror-extensions-langs` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-langs.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-langs) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-langs.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-langs) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/languages) |
| `@uiw/codemirror-extensions-line-numbers-relative` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-line-numbers-relative.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-line-numbers-relative) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-line-numbers-relative.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-line-numbers-relative) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/line-numbers-relative) |
| `@uiw/codemirror-extensions-mentions` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-mentions.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-mentions) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-mentions.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-mentions) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/mentions) |
-| `@uiw/codemirror-extensions-zebra-stripes` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-zebra-stripes.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-zebra-stripes.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/mentions) |
+| `@uiw/codemirror-extensions-zebra-stripes` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-zebra-stripes.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-extensions-zebra-stripes.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/extensions/zebra-stripes) |
| `@uiw/codemirror-themes` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-themes.svg)](https://www.npmjs.com/package/@uiw/codemirror-themes) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-themes.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-themes) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/doc) |
| `@uiw/codemirror-themes-all` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-themes-all.svg)](https://www.npmjs.com/package/@uiw/codemirror-themes-all) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-themes-all.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-themes-all) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/all) |
| `@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) |
diff --git a/themes/all/README.md b/themes/all/README.md
index 1a4a3150a..7907fac87 100644
--- a/themes/all/README.md
+++ b/themes/all/README.md
@@ -70,6 +70,7 @@ export * from '@uiw/codemirror-theme-duotone';
export * from '@uiw/codemirror-theme-eclipse';
export * from '@uiw/codemirror-theme-github';
export * from '@uiw/codemirror-theme-gruvbox-dark';
+export * from '@uiw/codemirror-theme-nord';
export * from '@uiw/codemirror-theme-okaidia';
export * from '@uiw/codemirror-theme-sublime';
export * from '@uiw/codemirror-theme-vscode';
diff --git a/themes/all/package.json b/themes/all/package.json
index 942582081..f76043bd9 100644
--- a/themes/all/package.json
+++ b/themes/all/package.json
@@ -32,6 +32,7 @@
"@uiw/codemirror-theme-eclipse": "4.15.1",
"@uiw/codemirror-theme-github": "4.15.1",
"@uiw/codemirror-theme-gruvbox-dark": "4.15.1",
+ "@uiw/codemirror-theme-nord": "4.15.1",
"@uiw/codemirror-theme-okaidia": "4.15.1",
"@uiw/codemirror-theme-sublime": "4.15.1",
"@uiw/codemirror-theme-vscode": "4.15.1",
diff --git a/themes/all/src/index.ts b/themes/all/src/index.ts
index cb7587ed1..c81f8d125 100644
--- a/themes/all/src/index.ts
+++ b/themes/all/src/index.ts
@@ -9,6 +9,7 @@ export * from '@uiw/codemirror-theme-duotone';
export * from '@uiw/codemirror-theme-eclipse';
export * from '@uiw/codemirror-theme-github';
export * from '@uiw/codemirror-theme-gruvbox-dark';
+export * from '@uiw/codemirror-theme-nord';
export * from '@uiw/codemirror-theme-okaidia';
export * from '@uiw/codemirror-theme-sublime';
export * from '@uiw/codemirror-theme-vscode';
diff --git a/themes/nord/README.md b/themes/nord/README.md
new file mode 100644
index 000000000..335a80135
--- /dev/null
+++ b/themes/nord/README.md
@@ -0,0 +1,71 @@
+
+
+# Nord Theme
+
+
+
+[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord)
+
+
+
+
+
+## Install
+
+```bash
+npm install @uiw/codemirror-theme-nord --save
+```
+
+## Usage
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror';
+import { nord } from '@uiw/codemirror-theme-nord';
+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 { nord } from '@uiw/codemirror-theme-nord';
+
+const state = EditorState.create({
+ doc: 'my source code',
+ extensions: [nord, 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/nord/package.json b/themes/nord/package.json
new file mode 100644
index 000000000..283cdfc7d
--- /dev/null
+++ b/themes/nord/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "@uiw/codemirror-theme-nord",
+ "version": "4.15.1",
+ "description": "Theme nord for CodeMirror.",
+ "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/nord",
+ "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.15.1"
+ },
+ "keywords": [
+ "codemirror",
+ "codemirror6",
+ "theme",
+ "nord",
+ "syntax",
+ "ide",
+ "code"
+ ],
+ "jest": {
+ "coverageReporters": [
+ "lcov",
+ "json-summary"
+ ]
+ }
+}
diff --git a/themes/nord/src/index.ts b/themes/nord/src/index.ts
new file mode 100644
index 000000000..85d2306c0
--- /dev/null
+++ b/themes/nord/src/index.ts
@@ -0,0 +1,113 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from '@uiw/codemirror-themes';
+
+// Colors from https://www.nordtheme.com/docs/colors-and-palettes
+export const nord = createTheme({
+ theme: 'dark',
+ settings: {
+ background: '#2e3440',
+ foreground: '#FFFFFF',
+ caret: '#FFFFFF',
+ selection: '#3b4252',
+ selectionMatch: '#e5e9f0',
+ gutterBackground: '#2e3440',
+ gutterForeground: '#4c566a',
+ gutterActiveForeground: '#d8dee9',
+ lineHighlight: '#4c566a',
+ },
+ styles: [
+ { tag: t.keyword, color: '#5e81ac' },
+ {
+ tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+ color: '#88c0d0',
+ },
+ { tag: [t.variableName], color: '#8fbcbb' },
+ { tag: [t.function(t.variableName)], color: '#8fbcbb' },
+ { tag: [t.labelName], color: '#81a1c1' },
+ {
+ tag: [t.color, t.constant(t.name), t.standard(t.name)],
+ color: '#5e81ac',
+ },
+ { tag: [t.definition(t.name), t.separator], color: '#a3be8c' },
+ { tag: [t.brace], color: '#8fbcbb' },
+ {
+ tag: [t.annotation],
+ color: '#d30102',
+ },
+ {
+ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+ color: '#b48ead',
+ },
+ {
+ tag: [t.typeName, t.className],
+ color: '#ebcb8b',
+ },
+ {
+ tag: [t.operator, t.operatorKeyword],
+ color: '#a3be8c',
+ },
+ {
+ tag: [t.tagName],
+ color: '#b48ead',
+ },
+ {
+ tag: [t.squareBracket],
+ color: '#bf616a',
+ },
+ {
+ tag: [t.angleBracket],
+ color: '#d08770',
+ },
+ {
+ tag: [t.attributeName],
+ color: '#ebcb8b',
+ },
+ {
+ tag: [t.regexp],
+ color: '#5e81ac',
+ },
+ {
+ tag: [t.quote],
+ color: '#b48ead',
+ },
+ { tag: [t.string], color: '#a3be8c' },
+ {
+ tag: t.link,
+ color: '#a3be8c',
+ textDecoration: 'underline',
+ textUnderlinePosition: 'under',
+ },
+ {
+ tag: [t.url, t.escape, t.special(t.string)],
+ color: '#8fbcbb',
+ },
+ { tag: [t.meta], color: '#88c0d0' },
+ { tag: [t.monospace], color: '#d8dee9', fontStyle: 'italic' },
+ { tag: [t.comment], color: '#4c566a', fontStyle: 'italic' },
+ { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' },
+ { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' },
+ { tag: t.strikethrough, textDecoration: 'line-through' },
+ { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' },
+ { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' },
+ { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' },
+ {
+ tag: [t.heading2, t.heading3, t.heading4],
+ fontWeight: 'bold',
+ color: '#5e81ac',
+ },
+ {
+ tag: [t.heading5, t.heading6],
+ color: '#5e81ac',
+ },
+ { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' },
+ {
+ tag: [t.processingInstruction, t.inserted],
+ color: '#8fbcbb',
+ },
+ {
+ tag: [t.contentSeparator],
+ color: '#ebcb8b',
+ },
+ { tag: t.invalid, color: '#434c5e', borderBottom: `1px dotted #d30102` },
+ ],
+});
diff --git a/themes/nord/tsconfig.json b/themes/nord/tsconfig.json
new file mode 100644
index 000000000..d72ec3d49
--- /dev/null
+++ b/themes/nord/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 a6fcea1f4..b3f46d225 100644
--- a/themes/theme/README.md
+++ b/themes/theme/README.md
@@ -182,6 +182,18 @@ export default App;
+**gruvbox**
+
+
+
+
+
+**nord**
+
+
+
+
+
**okaidia**
diff --git a/www/package.json b/www/package.json
index 632a5cf15..c858ad41b 100644
--- a/www/package.json
+++ b/www/package.json
@@ -54,6 +54,7 @@
"@uiw/codemirror-theme-eclipse": "4.15.1",
"@uiw/codemirror-theme-github": "4.15.1",
"@uiw/codemirror-theme-gruvbox-dark": "4.15.1",
+ "@uiw/codemirror-theme-nord": "4.15.1",
"@uiw/codemirror-theme-okaidia": "4.15.1",
"@uiw/codemirror-theme-sublime": "4.15.1",
"@uiw/codemirror-theme-vscode": "4.15.1",
diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts
index 50fd4cb6e..5d83c8235 100644
--- a/www/src/pages/theme/themes/Datas.ts
+++ b/www/src/pages/theme/themes/Datas.ts
@@ -8,6 +8,7 @@ import darculaMd from '@uiw/codemirror-theme-darcula/README.md';
import duotoneMd from '@uiw/codemirror-theme-duotone/README.md';
import githubMd from '@uiw/codemirror-theme-github/README.md';
import gruvboxDarkMd from '@uiw/codemirror-theme-gruvbox-dark/README.md';
+import nordMd from '@uiw/codemirror-theme-nord/README.md';
import eclipseMd from '@uiw/codemirror-theme-eclipse/README.md';
import bespinMd from '@uiw/codemirror-theme-bespin/README.md';
import sublimeMd from '@uiw/codemirror-theme-sublime/README.md';
@@ -27,6 +28,7 @@ import { vscodeDark } from '@uiw/codemirror-theme-vscode';
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
import { gruvboxDark } from '@uiw/codemirror-theme-gruvbox-dark';
+import { nord } from '@uiw/codemirror-theme-nord';
import { sublime } from '@uiw/codemirror-theme-sublime';
import { xcodeLight, xcodeDark } from '@uiw/codemirror-theme-xcode';
@@ -44,6 +46,7 @@ export const mdSource = {
githubLight: githubMd.source,
githubDark: githubMd.source,
gruvboxDark: gruvboxDarkMd.source,
+ nord: nordMd.source,
okaidia: okaidiaMd.source,
sublime: sublimeMd.source,
vscodeDark: vscodeMd.source,
@@ -65,6 +68,7 @@ export const themeData = {
githubLight,
githubDark,
gruvboxDark,
+ nord,
okaidia,
sublime,
vscodeDark,