feat(material): add materialLightInit/materialDarkInit/materialLight …

…method to material theme.
uiwjs · Dec 7, 2022 · c488397 · c488397
1 parent fa35592
commit c488397
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 36 deletions.
diff --git a/core/README.md b/core/README.md
@@ -68,7 +68,7 @@ npm install @uiw/react-codemirror --save
 | `@uiw/codemirror-theme-eclipse`           | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-eclipse.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-eclipse.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse)                                         | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/eclipse)           |
 | `@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-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/dark)     |
 | `@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)           |

diff --git a/themes/material/README.md b/themes/material/README.md
@@ -8,18 +8,25 @@
 
 This package implements the [Material](https://material.io/tools/color/) Dark theme for the CodeMirror code editor.
 
-<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark">
   <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
 </a>
 
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/light">
+  <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206124615-b3896e2c-d299-4609-b1d9-523ea1cf9f5b.png">
+</a>
+
 ## Install
 
 ```bash
 npm install @uiw/codemirror-theme-material --save
 ```
 
 ```jsx
-import { material, materialInit } from '@uiw/codemirror-theme-material';
+import { materialDark, materialDarkInit, materialLight, materialLightInit } from '@uiw/codemirror-theme-material';
+
+// materialInit === materialDarkInit
+// material === materialDark
 
 <CodeMirror theme={material} />
 <CodeMirror
@@ -37,7 +44,11 @@ import { material, materialInit } from '@uiw/codemirror-theme-material';
 ```tsx
 import { CreateThemeOptions } from '@uiw/codemirror-themes';
 export declare const materialInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const materialDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const materialDark: import('@codemirror/state').Extension;
 export declare const material: import('@codemirror/state').Extension;
+export declare const materialLightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const materialLight: import('@codemirror/state').Extension;
 ```
 
 ## Usage

diff --git a/themes/material/src/index.ts b/themes/material/src/index.ts
@@ -116,4 +116,50 @@ export const materialInit = (options?: CreateThemeOptions) => {
   });
 };
 
+export const materialDarkInit = materialInit;
+export const materialDark = materialInit();
 export const material = materialInit();
+
+export const materialLightInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#FAFAFA',
+      foreground: '#90A4AE',
+      caret: '#272727',
+      selection: '#80CBC440',
+      selectionMatch: '#FAFAFA',
+      gutterBackground: '#FAFAFA',
+      gutterForeground: '#90A4AE',
+      gutterBorder: 'transparent',
+      lineHighlight: '#CCD7DA50',
+      ...settings,
+    },
+    styles: [
+      { tag: t.keyword, color: '#39ADB5' },
+      { tag: [t.name, t.deleted, t.character, t.macroName], color: '#90A4AE' },
+      { tag: [t.propertyName], color: '#6182B8' },
+      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#91B859' },
+      { tag: [t.function(t.variableName), t.labelName], color: '#6182B8' },
+      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#39ADB5' },
+      { tag: [t.definition(t.name), t.separator], color: '#90A4AE' },
+      { tag: [t.className], color: '#E2931D' },
+      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#F76D47' },
+      { tag: [t.typeName], color: '#E2931D', fontStyle: '#E2931D' },
+      { tag: [t.operator, t.operatorKeyword], color: '#39ADB5' },
+      { tag: [t.url, t.escape, t.regexp, t.link], color: '#91B859' },
+      { tag: [t.meta, t.comment], color: '#90A4AE' },
+      { tag: t.strong, fontWeight: 'bold' },
+      { tag: t.emphasis, fontStyle: 'italic' },
+      { tag: t.link, textDecoration: 'underline' },
+      { tag: t.heading, fontWeight: 'bold', color: '#39ADB5' },
+      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#90A4AE' },
+      { tag: t.invalid, color: '#E5393570' },
+      { tag: t.strikethrough, textDecoration: 'line-through' },
+      ...styles,
+    ],
+  });
+};
+
+export const materialLight = materialLightInit();
diff --git a/themes/theme/README.md b/themes/theme/README.md
@@ -200,10 +200,14 @@ export default App;
 
 **material**
 
-<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark">
   <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
 </a>
 
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/light">
+  <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206124615-b3896e2c-d299-4609-b1d9-523ea1cf9f5b.png">
+</a>
+
 **noctis-lilac**
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac">

diff --git a/www/src/pages/theme/home/index.tsx b/www/src/pages/theme/home/index.tsx
@@ -7,13 +7,7 @@ import { langs } from '@uiw/codemirror-extensions-langs';
 import { SiderMenus } from '../themes/SiderMenus';
 import { Warpper } from '../../../components/Warpper';
 import { themeData } from '../themes/Datas';
-import { toSnakeCase } from '../themes/Document';
-
-export const toTitleCase = (str: string = '') =>
-  str
-    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
-    ?.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-    .join(' ');
+import { toSnakeCase, toTitleCase } from '../../../utils/utils';
 
 const ThemesWarpper = styled.div`
   grid-template-columns: repeat(3, minmax(0, 1fr));

diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts
@@ -31,7 +31,7 @@ import { dracula } from '@uiw/codemirror-theme-dracula';
 import { darcula } from '@uiw/codemirror-theme-darcula';
 import { eclipse } from '@uiw/codemirror-theme-eclipse';
 import { bespin } from '@uiw/codemirror-theme-bespin';
-import { material } from '@uiw/codemirror-theme-material';
+import { materialLight, materialDark } from '@uiw/codemirror-theme-material';
 import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
@@ -62,7 +62,8 @@ export const mdSource = {
   githubDark: githubMd.source,
   gruvboxDark: gruvboxDarkMd.source,
   gruvboxLight: gruvboxDarkMd.source,
-  material: materialMd.source,
+  materialDark: materialMd.source,
+  materialLight: materialMd.source,
   noctisLilac: noctisLilacMd.source,
   nord: nordMd.source,
   okaidia: okaidiaMd.source,
@@ -93,7 +94,8 @@ export const themeData = {
   githubDark,
   gruvboxDark,
   gruvboxLight,
-  material,
+  materialLight,
+  materialDark,
   noctisLilac,
   nord,
   okaidia,

diff --git a/www/src/pages/theme/themes/Document.tsx b/www/src/pages/theme/themes/Document.tsx
@@ -4,13 +4,7 @@ import styled from 'styled-components';
 import { PreCode } from './PreCode';
 import { mdSource } from './Datas';
 import { Warpper } from '../../../components/Warpper';
-
-export const toSnakeCase = (str: string = '') =>
-  str
-    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
-    ?.map((x) => x.toLowerCase())
-    .join(',')
-    .split(',');
+import { toSnakeCase, toCamelCase } from '../../../utils/utils';
 
 export const Button = styled.button``;
 
@@ -42,11 +36,6 @@ interface DocumentProps {
 export const Document: FC<PropsWithChildren<DocumentProps>> = ({ children, themeName }) => {
   const [previewDoc, setPreviewDoc] = useState(false);
   const [source, setSource] = useState(mdSource.okaidia);
-  useEffect(() => {
-    if (themeName) {
-      setSource(mdSource[themeName as keyof typeof mdSource]);
-    }
-  }, [themeName]);
 
   let pkgName: string | undefined = themeName;
   if (/(gruvbox)/i.test(themeName || '')) {
@@ -55,6 +44,11 @@ export const Document: FC<PropsWithChildren<DocumentProps>> = ({ children, theme
     pkgName = themeName?.replace(/\s+?(dark|light)/gi, '');
   }
   const _name = toSnakeCase(pkgName || '') || [];
+  useEffect(() => {
+    if (themeName) {
+      setSource(mdSource[toCamelCase(themeName) as keyof typeof mdSource]);
+    }
+  }, [themeName]);
   return (
     <Warpper>
       <Header>

diff --git a/www/src/pages/theme/themes/SiderMenus.tsx b/www/src/pages/theme/themes/SiderMenus.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
-import { toSnakeCase } from './Document';
 import { Sider } from '../editor';
 import { themeData } from './Datas';
+import { toSnakeCase } from '../../../utils/utils';
 
 export const MenuItem = styled(NavLink)`
   cursor: pointer;

diff --git a/www/src/pages/theme/themes/index.tsx b/www/src/pages/theme/themes/index.tsx
@@ -4,15 +4,7 @@ import { Document } from './Document';
 import { Sample } from './Sample';
 import { themeData } from './Datas';
 import { SiderMenus } from './SiderMenus';
-
-export const toCamelCase = (str: string = '') => {
-  const s =
-    str
-      .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
-      ?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
-      .join('') || '';
-  return s.slice(0, 1).toLowerCase() + s.slice(1);
-};
+import { toCamelCase } from '../../../utils/utils';
 
 export const ThemeOkaidia = () => {
   const { name = '', ...other } = useParams();

diff --git a/www/src/utils/utils.ts b/www/src/utils/utils.ts
@@ -0,0 +1,21 @@
+export const toSnakeCase = (str: string = '') =>
+  str
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    ?.map((x) => x.toLowerCase())
+    .join(',')
+    .split(',');
+
+export const toTitleCase = (str: string = '') =>
+  str
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    ?.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+    .join(' ');
+
+export const toCamelCase = (str: string = '') => {
+  const s =
+    str
+      .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+      ?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
+      .join('') || '';
+  return s.slice(0, 1).toLowerCase() + s.slice(1);
+};