updating themes to use needle colors (#359)

neo4j · Feb 14, 2025 · a3e3e50 · a3e3e50
1 parent 68f55d4
commit a3e3e50
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 79 deletions.
diff --git a/.changeset/moody-rice-wave.md b/.changeset/moody-rice-wave.md
@@ -0,0 +1,5 @@
+---
+'@neo4j-cypher/react-codemirror': patch
+---
+
+updating themes to use needle colors
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-codemirror/package.json b/packages/react-codemirror/package.json
@@ -54,15 +54,14 @@
     "@neo4j-cypher/language-support": "2.0.0-next.15",
     "@types/prismjs": "^1.26.3",
     "@types/workerpool": "^6.4.7",
-    "ayu": "^8.0.1",
     "fastest-levenshtein": "^1.0.16",
     "lodash.debounce": "^4.0.8",
     "prismjs": "^1.29.0",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.0.4"
   },
   "devDependencies": {
-    "@neo4j-ndl/base": "^3.0.10",
+    "@neo4j-ndl/base": "^3.2.10",
     "@playwright/experimental-ct-react": "^1.45.3",
     "@playwright/test": "^1.45.3",
     "@types/lodash.debounce": "^4.0.9",

diff --git a/packages/react-codemirror/src/ndlTokensCopy.ts b/packages/react-codemirror/src/ndlTokensCopy.ts
@@ -57,6 +57,38 @@ export const tokens = {
       '11': '#478A6E',
       '12': '#ADE86B',
     },
+    code: {
+      light: {
+        comment: '#5E636A',
+        keyword: '#3F7824',
+        keywordLiteral: '#3F7824',
+        operator: '#3F7824',
+        label: '#D43300',
+        predicateFunction: '#0A6190',
+        function: '#0A6190',
+        procedure: '#0A6190',
+        stringLiteral: '#986400',
+        numberLiteral: '#754EC8',
+        booleanLiteral: '#754EC8',
+        paramValue: '#754EC8',
+        property: '#730E00',
+      },
+      dark: {
+        comment: '#959AA1',
+        keyword: '#FFC450',
+        keywordLiteral: '#FFC450',
+        operator: '#FFC450',
+        label: '#F96746',
+        predicateFunction: '#8FE3E8',
+        function: '#8FE3E8',
+        procedure: '#8FE3E8',
+        stringLiteral: '#90CB62',
+        numberLiteral: '#CCB4FF',
+        booleanLiteral: '#CCB4FF',
+        paramValue: '#CCB4FF',
+        property: '#FFAA97',
+      },
+    },
     graph: {
       '1': '#FFDF81',
       '2': '#C990C0',

diff --git a/packages/react-codemirror/src/themes.ts b/packages/react-codemirror/src/themes.ts
@@ -1,5 +1,4 @@
 import { Extension } from '@codemirror/state';
-import { mirage } from 'ayu';
 import {
   createCypherTheme,
   ThemeOptions,
@@ -27,31 +26,31 @@ export const lightThemeConstants: ThemeOptions = {
     },
   },
   highlightStyles: {
-    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',
+    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',
@@ -64,22 +63,19 @@ export const darkThemeConstants: ThemeOptions = {
     },
   },
   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(),
-    consoleCommand: mirage.editor.fg.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,
   },
 };