@neo4j-cypher/react-codemirror 2.0.0-next.13 → 2.0.0-next.15

package/src/themes.ts

@@ -1,37 +1,19 @@
 import { Extension } from '@codemirror/state';
-import { light, mirage } from 'ayu';
+import { mirage } from 'ayu';
 import {
   createCypherTheme,
   ThemeOptions,
 } from './lang-cypher/createCypherTheme';
 import { tokens } from './ndlTokensCopy';
 
-/* ndl exports most tokens as hex colors but some tokens are exported as rgb colors, in the form of "10, 20, 30"
-   This should be fixed in version 2 of ndl.
-   Meanwhile we can use this function */
-const convertToHex = (color: string) => {
-  if (color.startsWith('#')) {
-    return color;
-  }
-
-  const rgb = color.match(/\d+/g);
-  if (!rgb) {
-    return color;
-  }
-  const [r, g, b] = rgb;
-  return `#${Number(r).toString(16)}${Number(g).toString(16)}${Number(
-    b,
-  ).toString(16)}`;
-};
-
 export const lightThemeConstants: ThemeOptions = {
   dark: false,
   editorSettings: {
-    background: light.editor.bg.hex(),
-    foreground: light.editor.fg.hex(),
-    gutterForeground: light.editor.gutter.normal.hex(),
-    selection: light.editor.selection.active.hex(),
-    textMatchingSelection: light.editor.findMatch.active.hex(),
+    background: '#FEFEFE',
+    foreground: '#545454',
+    gutterForeground: '#a3a7ae',
+    selection: tokens.colors.neutral['20'],
+    textMatchingSelection: tokens.colors.lavender['15'],
     cursor: '#000000',
     autoCompletionPanel: {
       selectedColor: '#cce2ff',
@@ -39,28 +21,25 @@ export const lightThemeConstants: ThemeOptions = {
       backgroundColor: '#F3F4F5',
     },
     searchPanel: {
-      background: tokens.palette.light.neutral.bg.default,
-      text: tokens.palette.light.neutral.text.default,
-      buttonHoverBackground: tokens.palette.light.neutral.bg.strong,
+      background: '#FEFEFE',
+      text: '#545454',
+      buttonHoverBackground: tokens.theme.light.palette.neutral.bg.strong,
     },
   },
   highlightStyles: {
-    comment: light.syntax.comment.hex(),
-    keyword: light.syntax.keyword.hex(),
-    keywordLiteral: light.syntax.keyword.hex(),
-    label: light.syntax.markup.hex(),
-    predicateFunction: light.syntax.func.hex(),
-    function: light.syntax.func.hex(),
-    procedure: light.syntax.func.hex(),
-    stringLiteral: light.syntax.string.hex(),
-    numberLiteral: light.syntax.constant.hex(),
-    booleanLiteral: light.syntax.constant.hex(),
-    operator: light.syntax.operator.hex(),
-    property: light.syntax.tag.hex(),
-    paramDollar: light.syntax.regexp.hex(),
-    paramValue: light.syntax.regexp.hex(),
-    namespace: light.syntax.special.hex(),
-    consoleCommand: light.editor.fg.hex(),
+    comment: '#a3a7ae',
+    keyword: '#008561',
+    keywordLiteral: '#008561',
+    label: '#de064e',
+    predicateFunction: '#0177b8',
+    function: '#0177b8',
+    procedure: '#0177b8',
+    stringLiteral: '#8c6b41',
+    numberLiteral: '#9a4fcb',
+    booleanLiteral: '#9a4fcb',
+    operator: '#008561',
+    property: '#0055ae',
+    paramValue: '#9a4fcb',
   },
 };
 
@@ -79,11 +58,9 @@ export const darkThemeConstants: ThemeOptions = {
       backgroundColor: '#1C212B',
     },
     searchPanel: {
-      background: convertToHex(tokens.palette.dark.neutral.bg.default),
-      text: convertToHex(tokens.palette.dark.neutral.text.default),
-      buttonHoverBackground: convertToHex(
-        tokens.palette.dark.neutral.bg.strong,
-      ),
+      background: tokens.theme.dark.palette.neutral.bg.default,
+      text: tokens.theme.dark.palette.neutral.text.default,
+      buttonHoverBackground: tokens.theme.dark.palette.neutral.bg.strong,
     },
   },
   highlightStyles: {