@neo4j-cypher/react-codemirror 2.0.0-next.2 → 2.0.0-next.20

package/src/themes.ts

@@ -1,37 +1,18 @@
 import { Extension } from '@codemirror/state';
-import { light, mirage } from 'ayu';
 import {
   createCypherTheme,
   ThemeOptions,
-} from './lang-cypher/create-cypher-theme';
-import { tokens } from './ndl-tokens-copy';
-
-/* 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)}`;
-};
+} from './lang-cypher/createCypherTheme';
+import { tokens } from './ndlTokensCopy';
 
 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,68 +20,62 @@ 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(),
+    comment: tokens.palette.code.light.comment,
+    keyword: tokens.palette.code.light.keyword,
+    keywordLiteral: tokens.palette.code.light.keywordLiteral,
+    label: tokens.palette.code.light.label,
+    predicateFunction: tokens.palette.code.light.predicateFunction,
+    function: tokens.palette.code.light.function,
+    procedure: tokens.palette.code.light.procedure,
+    stringLiteral: tokens.palette.code.light.stringLiteral,
+    numberLiteral: tokens.palette.code.light.numberLiteral,
+    booleanLiteral: tokens.palette.code.light.booleanLiteral,
+    operator: tokens.palette.code.light.operator,
+    property: tokens.palette.code.light.property,
+    paramValue: tokens.palette.code.light.paramValue,
   },
 };
 
 export const darkThemeConstants: ThemeOptions = {
   dark: true,
   editorSettings: {
-    background: mirage.editor.bg.hex(),
-    foreground: mirage.editor.fg.hex(),
-    gutterForeground: mirage.editor.gutter.normal.hex(),
-    selection: mirage.editor.selection.active.hex(),
-    textMatchingSelection: mirage.editor.findMatch.active.hex(),
-    cursor: '#ffffff',
+    background: '#242936',
+    foreground: '#cccac2',
+    gutterForeground: '#8a919966',
+    selection: '#409fff40',
+    textMatchingSelection: '#695380',
+    cursor: tokens.colors.neutral['10'],
     autoCompletionPanel: {
       selectedColor: '#062f4a',
       matchingTextColor: '#0097fb',
       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: {
-    comment: mirage.syntax.comment.hex(),
-    keyword: mirage.syntax.keyword.hex(),
-    keywordLiteral: mirage.syntax.keyword.hex(),
-    label: mirage.syntax.markup.hex(),
-    predicateFunction: mirage.syntax.func.hex(),
-    function: mirage.syntax.func.hex(),
-    procedure: mirage.syntax.func.hex(),
-    stringLiteral: mirage.syntax.string.hex(),
-    numberLiteral: mirage.syntax.constant.hex(),
-    booleanLiteral: mirage.syntax.constant.hex(),
-    operator: mirage.syntax.operator.hex(),
-    property: mirage.syntax.tag.hex(),
-    paramDollar: mirage.syntax.regexp.hex(),
-    paramValue: mirage.syntax.regexp.hex(),
-    namespace: mirage.syntax.special.hex(),
+    comment: tokens.palette.code.dark.comment,
+    keyword: tokens.palette.code.dark.keyword,
+    keywordLiteral: tokens.palette.code.dark.keywordLiteral,
+    label: tokens.palette.code.dark.label,
+    predicateFunction: tokens.palette.code.dark.predicateFunction,
+    function: tokens.palette.code.dark.function,
+    procedure: tokens.palette.code.dark.procedure,
+    stringLiteral: tokens.palette.code.dark.stringLiteral,
+    numberLiteral: tokens.palette.code.dark.numberLiteral,
+    booleanLiteral: tokens.palette.code.dark.booleanLiteral,
+    operator: tokens.palette.code.dark.operator,
+    property: tokens.palette.code.dark.property,
+    paramValue: tokens.palette.code.dark.paramValue,
   },
 };
 

package/src/viteEnv.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />