diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7a772b8a3..5411180c4 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -131,6 +131,14 @@ jobs: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + - name: 📦 @uiw/codemirror-theme-red publish to NPM + run: npm publish --access public + working-directory: ./themes/red/ + continue-on-error: true + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + + - name: 📦 @uiw/codemirror-theme-solarized publish to NPM run: npm publish --access public working-directory: ./themes/solarized/ diff --git a/core/README.md b/core/README.md index 0554c24a6..6ee9ec626 100644 --- a/core/README.md +++ b/core/README.md @@ -74,6 +74,7 @@ npm install @uiw/react-codemirror --save | `@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-quietlight` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-quietlight.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-quietlight) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-quietlight.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-quietlight) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/quietlight) | +| `@uiw/codemirror-theme-red` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-red.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-red) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-red.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-red) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/red) | | `@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) | | `@uiw/codemirror-theme-sublime` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-sublime.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-sublime) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-sublime.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-sublime) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/sublime) | | `@uiw/codemirror-theme-tokyo-night` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-tokyo-night.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-tokyo-night.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-tokyo-night) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night) | diff --git a/themes/_scripts/main.mjs b/themes/_scripts/main.mjs index 525c2fc03..e20f404a5 100644 --- a/themes/_scripts/main.mjs +++ b/themes/_scripts/main.mjs @@ -93,14 +93,17 @@ function format(data = {}, dark = false) { const getString = (obj) => `export const config = ${JSON.stringify(obj, null, 2)};`; ;(async () => { - const themeQuietlight = format(require('./data/quietlight.json')) + const themeQuietlight = format(require('./data/quietlight.json')); let themePath = '../quietlight/src/color.ts'; await FS.writeFile(themePath, getString(themeQuietlight)); console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`); + const themeRed = format(require('./data/red.json')); + themePath = '../red/src/color.ts'; + await FS.writeFile(themePath, getString(themeRed)); + console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`); + - const themeRed = format(require('./data/red.json'), true) - console.log('~~~::', themeRed); const themeSolarizedDark = format(require('./data/solarized.dark.json'), true) console.log('~~~::', themeSolarizedDark); const themeSolarizedLight = format(require('./data/solarized.light.json')) diff --git a/themes/all/README.md b/themes/all/README.md index 1c16e3d57..6d16debbb 100644 --- a/themes/all/README.md +++ b/themes/all/README.md @@ -77,6 +77,7 @@ export * from '@uiw/codemirror-theme-noctis-lilac'; export * from '@uiw/codemirror-theme-nord'; export * from '@uiw/codemirror-theme-okaidia'; export * from '@uiw/codemirror-theme-quietlight'; +export * from '@uiw/codemirror-theme-red'; export * from '@uiw/codemirror-theme-solarized'; export * from '@uiw/codemirror-theme-sublime'; export * from '@uiw/codemirror-theme-tokyo-night'; @@ -216,6 +217,12 @@ export * from '@uiw/codemirror-theme-xcode'; codemirror-theme-okaidia +**red** + + + codemirror-theme-red + + **solarized** diff --git a/themes/all/src/index.ts b/themes/all/src/index.ts index 216568249..6a404d39c 100644 --- a/themes/all/src/index.ts +++ b/themes/all/src/index.ts @@ -14,6 +14,8 @@ 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-quietlight'; +export * from '@uiw/codemirror-theme-red'; export * from '@uiw/codemirror-theme-solarized'; export * from '@uiw/codemirror-theme-sublime'; export * from '@uiw/codemirror-theme-tokyo-night'; diff --git a/themes/quietlight/package.json b/themes/quietlight/package.json index 3e6c8dc20..fdce40af5 100644 --- a/themes/quietlight/package.json +++ b/themes/quietlight/package.json @@ -21,7 +21,7 @@ "cjs" ], "dependencies": { - "@uiw/codemirror-themes": "4.21.9" + "@uiw/codemirror-themes": "4.21.10" }, "keywords": [ "codemirror", diff --git a/themes/quietlight/src/index.ts b/themes/quietlight/src/index.ts index fc5b5bf5a..9a2b102a9 100644 --- a/themes/quietlight/src/index.ts +++ b/themes/quietlight/src/index.ts @@ -10,6 +10,7 @@ export const defaultSettingsQuietlight: CreateThemeOptions['settings'] = { selectionMatch: config.selection, gutterBackground: config.background, gutterForeground: config.foreground, + gutterBorder: 'transparent', lineHighlight: config.activeLine, }; diff --git a/themes/red/README.md b/themes/red/README.md new file mode 100644 index 000000000..26cc851d8 --- /dev/null +++ b/themes/red/README.md @@ -0,0 +1,96 @@ + + +# Red Theme + + + +[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-red.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-red) + +Red theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-red/themes/Red-color-theme.json). + + + codemirror-theme-red + + +## Install + +```bash +npm install @uiw/codemirror-theme-red --save +``` + +```jsx +import { red, redInit } from '@uiw/codemirror-theme-red'; + + + +``` + +## API + +```tsx +import { CreateThemeOptions } from '@uiw/codemirror-themes'; +export declare const defaultSettingsQuietlight: CreateThemeOptions['settings']; +export declare const redInit: (options?: Partial) => import('@codemirror/state').Extension; +export declare const red: import('@codemirror/state').Extension; +``` + +## Usage + +```jsx +import CodeMirror from '@uiw/react-codemirror'; +import { red } from '@uiw/codemirror-theme-red'; +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 { red } from '@uiw/codemirror-theme-red'; + +const state = EditorState.create({ + doc: 'my source code', + extensions: [red, 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/red/package.json b/themes/red/package.json new file mode 100644 index 000000000..e418282a0 --- /dev/null +++ b/themes/red/package.json @@ -0,0 +1,36 @@ +{ + "name": "@uiw/codemirror-theme-red", + "version": "4.21.10", + "description": "Theme red for CodeMirror.", + "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/red", + "author": "kenny wong ", + "license": "MIT", + "main": "./cjs/index.js", + "module": "./esm/index.js", + "scripts": { + "watch": "tsbb watch src/*.ts --use-babel", + "build": "tsbb build src/*.ts --use-babel" + }, + "repository": { + "type": "git", + "url": "https://github.com/uiwjs/react-codemirror.git" + }, + "files": [ + "src", + "esm", + "cjs" + ], + "dependencies": { + "@uiw/codemirror-themes": "4.21.10" + }, + "keywords": [ + "codemirror", + "codemirror-theme", + "codemirror6", + "theme", + "red", + "syntax", + "ide", + "code" + ] +} diff --git a/themes/red/src/color.ts b/themes/red/src/color.ts new file mode 100644 index 000000000..a10952b56 --- /dev/null +++ b/themes/red/src/color.ts @@ -0,0 +1,23 @@ +export const config = { + background: '#390000', + foreground: '#F8F8F8', + selection: '#750000', + cursor: '#970000', + dropdownBackground: '#580000', + activeLine: '#ff000033', + matchingBracket: '#ff000033', + keyword: '#f12727ff', + storage: '#ff6262ff', + variable: '#fb9a4bff', + parameter: '#fb9a4bff', + function: '#ffb454ff', + string: '#cd8d8dff', + constant: '#ec0d1e', + type: '#9df39fff', + class: '#fec758ff', + number: '#994646ff', + comment: '#e7c0c0ff', + heading: '#fec758ff', + invalid: '#ffffffff', + regexp: '#ffb454ff', +}; diff --git a/themes/red/src/index.ts b/themes/red/src/index.ts new file mode 100644 index 000000000..fe2bb6f0f --- /dev/null +++ b/themes/red/src/index.ts @@ -0,0 +1,50 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; +import { config } from './color'; + +export const defaultSettingsRed: CreateThemeOptions['settings'] = { + background: config.background, + foreground: config.foreground, + caret: config.cursor, + selection: config.selection, + selectionMatch: config.selection, + gutterBackground: config.background, + gutterForeground: config.foreground, + lineHighlight: config.activeLine, +}; + +export const redInit = (options?: Partial) => { + const { theme = 'dark', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + ...defaultSettingsRed, + ...settings, + }, + styles: [ + { tag: t.keyword, color: config.keyword }, + { tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable }, + { tag: [t.propertyName], color: config.function }, + { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string }, + { tag: [t.function(t.variableName), t.labelName], color: config.function }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant }, + { tag: [t.definition(t.name), t.separator], color: config.variable }, + { tag: [t.className], color: config.class }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number }, + { tag: [t.typeName], color: config.type, fontStyle: config.type }, + { tag: [t.operator, t.operatorKeyword], color: config.keyword }, + { tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp }, + { tag: [t.meta, t.comment], color: config.comment }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.heading, fontWeight: 'bold', color: config.heading }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable }, + { tag: t.invalid, color: config.invalid }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + ...styles, + ], + }); +}; + +export const red = redInit(); diff --git a/themes/red/tsconfig.json b/themes/red/tsconfig.json new file mode 100644 index 000000000..d72ec3d49 --- /dev/null +++ b/themes/red/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig", + "include": ["src"], + "compilerOptions": { + "outDir": "./cjs", + "baseUrl": ".", + "noEmit": false + } +} diff --git a/www/package.json b/www/package.json index 6691c6d36..9ea496e99 100644 --- a/www/package.json +++ b/www/package.json @@ -62,6 +62,7 @@ "@uiw/codemirror-theme-nord": "4.21.10", "@uiw/codemirror-theme-okaidia": "4.21.10", "@uiw/codemirror-theme-quietlight": "4.21.10", + "@uiw/codemirror-theme-red": "4.21.10", "@uiw/codemirror-theme-solarized": "4.21.10", "@uiw/codemirror-theme-sublime": "4.21.10", "@uiw/codemirror-theme-tokyo-night": "4.21.10", diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts index 49d034846..a39f2477e 100644 --- a/www/src/pages/theme/themes/Datas.ts +++ b/www/src/pages/theme/themes/Datas.ts @@ -16,6 +16,7 @@ import { githubLight, githubDark } from '@uiw/codemirror-theme-github'; import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark'; import { nord } from '@uiw/codemirror-theme-nord'; import { okaidia } from '@uiw/codemirror-theme-okaidia'; +import { red } from '@uiw/codemirror-theme-red'; import { quietlight } from '@uiw/codemirror-theme-quietlight'; import { solarizedLight, solarizedDark } from '@uiw/codemirror-theme-solarized'; import { sublime } from '@uiw/codemirror-theme-sublime'; @@ -47,6 +48,7 @@ export const themeData = { noctisLilac, nord, okaidia, + red, quietlight, solarizedLight, solarizedDark, diff --git a/www/src/router.tsx b/www/src/router.tsx index d6d5755c5..8b436cca2 100644 --- a/www/src/router.tsx +++ b/www/src/router.tsx @@ -439,6 +439,16 @@ export const routes: MenuRouteObject[] = [ /> ), }, + { + path: 'data/red', + label: 'red', + element: ( + import('@uiw/codemirror-theme-red/README.md')} + /> + ), + }, { path: 'data/solarized/light', label: 'solarized light',