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. + + + codemirror-theme-nord + + +## 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; codemirror-theme-material +**noctis-lilac** + + + codemirror-theme-material + + **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)} -