Skip to content

Commit

Permalink
feat(theme): add nord theme.
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Dec 4, 2022
1 parent b9d6ef6 commit 2717cdd
Show file tree
Hide file tree
Showing 12 changed files with 275 additions and 2 deletions.
21 changes: 20 additions & 1 deletion .github/workflows/ci.yml
Expand Up @@ -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()
Expand All @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion core/README.md
Expand Up @@ -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) |
Expand Down
1 change: 1 addition & 0 deletions themes/all/README.md
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions themes/all/package.json
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions themes/all/src/index.ts
Expand Up @@ -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';
Expand Down
71 changes: 71 additions & 0 deletions themes/nord/README.md
@@ -0,0 +1,71 @@
<!--rehype:ignore:start-->

# Nord Theme

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

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

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">
<img width="436" alt="codemirror-theme-nord" src="https://user-images.githubusercontent.com/1680273/205498304-956bc719-1472-40f0-9c3f-21ac5b9f97a6.png">
</a>

## 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 (
<CodeMirror
value="console.log('hello world!');"
height="200px"
theme={nord}
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 { 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!

<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/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 <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.15.1"
},
"keywords": [
"codemirror",
"codemirror6",
"theme",
"nord",
"syntax",
"ide",
"code"
],
"jest": {
"coverageReporters": [
"lcov",
"json-summary"
]
}
}
113 changes: 113 additions & 0 deletions 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` },
],
});
9 changes: 9 additions & 0 deletions themes/nord/tsconfig.json
@@ -0,0 +1,9 @@
{
"extends": "../../tsconfig",
"include": ["src"],
"compilerOptions": {
"outDir": "./cjs",
"baseUrl": ".",
"noEmit": false
}
}
12 changes: 12 additions & 0 deletions themes/theme/README.md
Expand Up @@ -182,6 +182,18 @@ export default App;
<img width="436" alt="codemirror-theme-github light" src="https://user-images.githubusercontent.com/1680273/177048005-32794f23-8bff-4059-babf-21316d886e65.png">
</a>

**gruvbox**

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark">
<img width="436" alt="codemirror-theme-gruvbox-dark" src="https://user-images.githubusercontent.com/1680273/201111051-c38a73ca-a449-4c01-a4ff-4a675886ca9d.png">
</a>

**nord**

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">
<img width="436" alt="codemirror-theme-nord" src="https://user-images.githubusercontent.com/1680273/205498304-956bc719-1472-40f0-9c3f-21ac5b9f97a6.png">
</a>

**okaidia**

<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia">
Expand Down
1 change: 1 addition & 0 deletions www/package.json
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions www/src/pages/theme/themes/Datas.ts
Expand Up @@ -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';
Expand All @@ -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';

Expand All @@ -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,
Expand All @@ -65,6 +68,7 @@ export const themeData = {
githubLight,
githubDark,
gruvboxDark,
nord,
okaidia,
sublime,
vscodeDark,
Expand Down

0 comments on commit 2717cdd

Please sign in to comment.