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) + + + 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; codemirror-theme-github light +**gruvbox** + + + codemirror-theme-gruvbox-dark + + +**nord** + + + codemirror-theme-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,