feat: css variable on themes

packages/hoppscotch-app/assets/scss/themes.scss

@@ -52,6 +52,48 @@
   --editor-theme: "twilight";
 }
 
+@mixin dark-editor-theme {
+  --editor-type-color: theme("colors.gray.800");
+  --editor-name-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.gray.600");
+  --editor-invalid-color: theme("colors.red.500");
+  --editor-separator-color: theme("colors.gray.500");
+  --editor-meta-color: theme("colors.gray.500");
+  --editor-variable-color: theme("colors.gray.500");
+  --editor-link-color: theme("colors.blue.500");
+  --editor-process-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.blue.500");
+  --editor-keyword-color: theme("colors.blue.500");
+}
+
+@mixin light-editor-theme {
+  --editor-type-color: theme("colors.gray.800");
+  --editor-name-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.gray.600");
+  --editor-invalid-color: theme("colors.red.500");
+  --editor-separator-color: theme("colors.gray.500");
+  --editor-meta-color: theme("colors.gray.500");
+  --editor-variable-color: theme("colors.gray.500");
+  --editor-link-color: theme("colors.blue.500");
+  --editor-process-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.blue.500");
+  --editor-keyword-color: theme("colors.blue.500");
+}
+
+@mixin black-editor-theme {
+  --editor-type-color: theme("colors.gray.800");
+  --editor-name-color: theme("colors.gray.600");
+  --editor-operator-color: theme("colors.gray.600");
+  --editor-invalid-color: theme("colors.red.500");
+  --editor-separator-color: theme("colors.gray.500");
+  --editor-meta-color: theme("colors.gray.500");
+  --editor-variable-color: theme("colors.gray.500");
+  --editor-link-color: theme("colors.blue.500");
+  --editor-process-color: theme("colors.blue.500");
+  --editor-constant-color: theme("colors.blue.500");
+  --editor-keyword-color: theme("colors.blue.500");
+}
+
 @mixin green-theme {
   --accent-color: theme("colors.green.500");
   --accent-light-color: theme("colors.green.400");
@@ -146,18 +188,22 @@
   @include base-theme;
   @include dark-theme;
   @include green-theme;
+  @include dark-editor-theme;
 }
 
 :root.light {
   @include light-theme;
+  @include light-editor-theme;
 }
 
 :root.dark {
   @include dark-theme;
+  @include dark-editor-theme;
 }
 
 :root.black {
   @include black-theme;
+  @include black-editor-theme;
 }
 
 :root[data-accent="blue"] {

packages/hoppscotch-app/helpers/editor/codemirror.ts

@@ -25,15 +25,7 @@ import "codemirror/addon/search/jump-to-line"
 import "codemirror/addon/dialog/dialog"
 import "codemirror/addon/selection/active-line"
 
-import {
+import { keymap, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view"
-  keymap,
-  highlightSpecialChars,
-  drawSelection,
-  highlightActiveLine,
-  EditorView,
-  ViewPlugin,
-  ViewUpdate,
-} from "@codemirror/view"
 import {
   Extension,
   EditorState,
@@ -41,23 +33,11 @@ import {
   EditorSelection,
   TransactionSpec,
 } from "@codemirror/state"
-import { history, historyKeymap } from "@codemirror/history"
+import { Language, LanguageSupport } from "@codemirror/language"
-import { foldKeymap } from "@codemirror/fold"
-import { indentOnInput, Language, LanguageSupport } from "@codemirror/language"
-import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
 import { defaultKeymap } from "@codemirror/commands"
-import { bracketMatching } from "@codemirror/matchbrackets"
+import { basicSetup } from "@codemirror/basic-setup"
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
+import { Completion, autocompletion } from "@codemirror/autocomplete"
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
+import { linter } from "@codemirror/lint"
-import {
-  completionKeymap,
-  Completion,
-  autocompletion,
-} from "@codemirror/autocomplete"
-import { commentKeymap } from "@codemirror/comment"
-import { rectangularSelection } from "@codemirror/rectangular-selection"
-import { defaultHighlightStyle } from "@codemirror/highlight"
-import { lintKeymap, linter } from "@codemirror/lint"
 
 import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
 
@@ -69,11 +49,7 @@ import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
-import { baseThemeFoldStyle } from "./themes/baseTheme"
+import { baseTheme, baseHighlightStyle } from "./themes/baseTheme"
-import { darkTheme, darkHighlightStyle } from "./themes/darkTheme"
-import { lightTheme, lightHighlightStyle } from "./themes/lightTheme"
-import { blackTheme, blackHighlightStyle } from "./themes/blackTheme"
-import { HoppBgColor } from "~/newstore/settings"
 
 type CodeMirrorOptions = {
   extendedEditorConfig: Omit<CodeMirror.EditorConfiguration, "value">
@@ -260,34 +236,6 @@ export function useCodemirror(
   }
 }
 
-export const basicSetup: Extension = [
-  lineNumbers(),
-  highlightActiveLineGutter(),
-  highlightSpecialChars(),
-  history(),
-  baseThemeFoldStyle,
-  drawSelection(),
-  EditorState.allowMultipleSelections.of(true),
-  indentOnInput(),
-  defaultHighlightStyle.fallback,
-  bracketMatching(),
-  closeBrackets(),
-  autocompletion(),
-  rectangularSelection(),
-  highlightActiveLine(),
-  highlightSelectionMatches(),
-  keymap.of([
-    ...closeBracketsKeymap,
-    ...defaultKeymap,
-    ...searchKeymap,
-    ...historyKeymap,
-    ...foldKeymap,
-    ...commentKeymap,
-    ...completionKeymap,
-    ...lintKeymap,
-  ]),
-]
-
 const hoppCompleterExt = (completer: Completer): Extension => {
   return autocompletion({
     override: [
@@ -373,43 +321,13 @@ const getEditorLanguage = (
     O.getOrElseW(() => [])
   )
 
-const getHightlightMode = (mode: HoppBgColor): Extension => {
-  switch (mode) {
-    case "light":
-      return lightHighlightStyle
-    case "dark":
-      return darkHighlightStyle
-    case "black":
-      return blackHighlightStyle
-    default:
-      return darkHighlightStyle
-  }
-}
-
-const getThemeExt = (mode: HoppBgColor): Extension => {
-  switch (mode) {
-    case "dark":
-      return darkTheme
-    case "black":
-      return blackTheme
-    case "light":
-      return lightTheme
-    case "system":
-      return darkTheme
-  }
-}
-
 export function useNewCodemirror(
   el: Ref<any | null>,
   value: Ref<string>,
   options: CodeMirrorOptions
 ): { cursor: Ref<{ line: number; ch: number }> } {
-  const { $colorMode } = useContext() as any
-
   const language = new Compartment()
   const lineWrapping = new Compartment()
-  const theming = new Compartment()
-  const highlightStyle = new Compartment()
 
   const cachedCursor = ref({
     line: 0,
@@ -425,8 +343,8 @@ export function useNewCodemirror(
     doc: value.value,
     extensions: [
       basicSetup,
-      theming.of(getThemeExt($colorMode.value)),
+      baseTheme,
-      highlightStyle.of(getHightlightMode($colorMode.value)),
+      baseHighlightStyle,
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
@@ -537,18 +455,6 @@ export function useNewCodemirror(
     }
   )
 
-  watch(
-    () => $colorMode.value,
-    (newVal) => {
-      dispatch({
-        effects: [
-          theming.reconfigure(getThemeExt(newVal)),
-          highlightStyle.reconfigure(getHightlightMode(newVal)),
-        ],
-      })
-    }
-  )
-
   watch(el, (newEl) => {
     if (view.value) {
       view.value.destroy()

packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

@@ -1,9 +1,138 @@
-import { Extension } from "@codemirror/state"
+import { EditorView } from "@codemirror/view"
+import { HighlightStyle, tags as t } from "@codemirror/highlight"
 import { foldGutter } from "@codemirror/fold"
 
-export const baseThemeFoldStyle = foldGutter({
+export const baseTheme = EditorView.theme(
+  {
+    "&": {
+      fontSize: "var(--body-font-size)",
+    },
+    ".cm-content": {
+      caretColor: "var(--secondary-light-color)",
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--secondary-light-color)",
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: "var(--primary-light-color)" },
+    ".cm-panels": {
+      backgroundColor: "var(--primary-dark-color)",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+    ".cm-searchMatch": {
+      backgroundColor: "var(--accent-light-color)",
+      outline: "1px solid var(--accent-dark-color)",
+    },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+      outline: "1px solid #515a6b",
+    },
+    ".cm-gutters": {
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+      borderColor: "var(--divider-light-color)",
+    },
+    ".cm-lineNumbers": {
+      minWidth: "3em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter": {
+      minWidth: "2em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter .cm-gutterElement": {
+      textAlign: "center",
+    },
+    ".cm-line": {
+      paddingLeft: "0.5em",
+      paddingRight: "0.5em",
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "var(--primary-dark-color)",
+    },
+  },
+  {
+    dark: !!"var(--editor-dark-mode)",
+  }
+)
+
+const editorTypeColor = "var(--editor-type-color)"
+const editorNameColor = "var(--editor-name-color)"
+const editorOperatorColor = "var(--editor-operator-color)"
+const editorInvalidColor = "var(--editor-invalid-color)"
+const editorSeparatorColor = "var(--editor-separator-color)"
+const editorMetaColor = "var(--editor-meta-color)"
+const editorVariableColor = "var(--editor-variable-color)"
+const editorLinkColor = "var(--editor-link-color)"
+const editorProcessColor = "var(--editor-process-color)"
+const editorConstantColor = "var(--editor-constant-color)"
+const editorKeywordColor = "var(--editor-keyword-color)"
+
+export const baseHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: editorKeywordColor },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: editorNameColor,
+  },
+  {
+    tag: [t.function(t.variableName), t.labelName],
+    color: editorVariableColor,
+  },
+  {
+    tag: [t.color, t.constant(t.name), t.standard(t.name)],
+    color: editorConstantColor,
+  },
+  { tag: [t.definition(t.name), t.separator], color: editorSeparatorColor },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: editorTypeColor,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: editorOperatorColor,
+  },
+  { tag: [t.meta, t.comment], color: editorMetaColor },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: editorLinkColor, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: editorNameColor },
+  {
+    tag: [t.atom, t.bool, t.special(t.variableName)],
+    color: editorConstantColor,
+  },
+  {
+    tag: [t.processingInstruction, t.string, t.inserted],
+    color: editorProcessColor,
+  },
+  { tag: t.invalid, color: editorInvalidColor },
+])
+
+export const baseFoldStyle = foldGutter({
   openText: "▾",
   closedText: "▸",
 })
-
-export const baseTheme: Extension = [baseThemeFoldStyle]

packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts

@@ -1,122 +0,0 @@
-import { EditorView } from "@codemirror/view"
-import { Extension } from "@codemirror/state"
-import { HighlightStyle, tags as t } from "@codemirror/highlight"
-
-const chalky = "#e5c07b"
-const coral = "#e06c75"
-const cyan = "#56b6c2"
-const invalid = "#ffffff"
-const ivory = "#abb2bf"
-const stone = "#7d8799"
-const malibu = "#61afef"
-const sage = "#98c379"
-const whiskey = "#d19a66"
-const violet = "#c678dd"
-
-export const blackTheme = EditorView.theme(
-  {
-    "&": {
-      fontSize: "var(--body-font-size)",
-    },
-    ".cm-content": {
-      caretColor: "var(--secondary-light-color)",
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "var(--secondary-light-color)",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-      { backgroundColor: "var(--primary-light-color)" },
-    ".cm-panels": {
-      backgroundColor: "var(--primary-dark-color)",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
-    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-
-    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
-    ".cm-searchMatch": {
-      backgroundColor: "#72a1ff59",
-      outline: "1px solid #457dff",
-    },
-    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      backgroundColor: "#bad0f847",
-      outline: "1px solid #515a6b",
-    },
-    ".cm-gutters": {
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-      borderColor: "var(--divider-light-color)",
-    },
-    ".cm-lineNumbers": {
-      minWidth: "3em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter": {
-      minWidth: "2em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter .cm-gutterElement": {
-      textAlign: "center",
-    },
-    ".cm-line": {
-      paddingLeft: "0.5em",
-      paddingRight: "0.5em",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--primary-dark-color)",
-    },
-  },
-  {
-    dark: true,
-  }
-)
-
-export const blackHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: violet },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  { tag: [t.function(t.variableName), t.labelName], color: malibu },
-  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
-  { tag: [t.definition(t.name), t.separator], color: ivory },
-  {
-    tag: [
-      t.typeName,
-      t.className,
-      t.number,
-      t.changed,
-      t.annotation,
-      t.modifier,
-      t.self,
-      t.namespace,
-    ],
-    color: chalky,
-  },
-  {
-    tag: [
-      t.operator,
-      t.operatorKeyword,
-      t.url,
-      t.escape,
-      t.regexp,
-      t.link,
-      t.special(t.string),
-    ],
-    color: cyan,
-  },
-  { tag: [t.meta, t.comment], color: stone },
-  { tag: t.strong, fontWeight: "bold" },
-  { tag: t.emphasis, fontStyle: "italic" },
-  { tag: t.strikethrough, textDecoration: "line-through" },
-  { tag: t.link, color: stone, textDecoration: "underline" },
-  { tag: t.heading, fontWeight: "bold", color: coral },
-  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
-  { tag: t.invalid, color: invalid },
-])
-
-export const blackMode: Extension = [blackTheme, blackHighlightStyle]

packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts

@@ -1,122 +0,0 @@
-import { EditorView } from "@codemirror/view"
-import { Extension } from "@codemirror/state"
-import { HighlightStyle, tags as t } from "@codemirror/highlight"
-
-const chalky = "#e5c07b"
-const coral = "#e06c75"
-const cyan = "#56b6c2"
-const invalid = "#ffffff"
-const ivory = "#abb2bf"
-const stone = "#7d8799"
-const malibu = "#61afef"
-const sage = "#98c379"
-const whiskey = "#d19a66"
-const violet = "#c678dd"
-
-export const darkTheme = EditorView.theme(
-  {
-    "&": {
-      fontSize: "var(--body-font-size)",
-    },
-    ".cm-content": {
-      caretColor: "var(--secondary-light-color)",
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "var(--secondary-light-color)",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-      { backgroundColor: "var(--primary-light-color)" },
-    ".cm-panels": {
-      backgroundColor: "var(--primary-dark-color)",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
-    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-
-    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
-    ".cm-searchMatch": {
-      backgroundColor: "#72a1ff59",
-      outline: "1px solid #457dff",
-    },
-    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      backgroundColor: "#bad0f847",
-      outline: "1px solid #515a6b",
-    },
-    ".cm-gutters": {
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-      borderColor: "var(--divider-light-color)",
-    },
-    ".cm-lineNumbers": {
-      minWidth: "3em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter": {
-      minWidth: "2em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter .cm-gutterElement": {
-      textAlign: "center",
-    },
-    ".cm-line": {
-      paddingLeft: "0.5em",
-      paddingRight: "0.5em",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--primary-dark-color)",
-    },
-  },
-  {
-    dark: true,
-  }
-)
-
-export const darkHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: violet },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  { tag: [t.function(t.variableName), t.labelName], color: malibu },
-  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
-  { tag: [t.definition(t.name), t.separator], color: ivory },
-  {
-    tag: [
-      t.typeName,
-      t.className,
-      t.number,
-      t.changed,
-      t.annotation,
-      t.modifier,
-      t.self,
-      t.namespace,
-    ],
-    color: chalky,
-  },
-  {
-    tag: [
-      t.operator,
-      t.operatorKeyword,
-      t.url,
-      t.escape,
-      t.regexp,
-      t.link,
-      t.special(t.string),
-    ],
-    color: cyan,
-  },
-  { tag: [t.meta, t.comment], color: stone },
-  { tag: t.strong, fontWeight: "bold" },
-  { tag: t.emphasis, fontStyle: "italic" },
-  { tag: t.strikethrough, textDecoration: "line-through" },
-  { tag: t.link, color: stone, textDecoration: "underline" },
-  { tag: t.heading, fontWeight: "bold", color: coral },
-  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
-  { tag: t.invalid, color: invalid },
-])
-
-export const darkMode: Extension = [darkTheme, darkHighlightStyle]

packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts

@@ -1,120 +0,0 @@
-import { EditorView } from "@codemirror/view"
-import { Extension } from "@codemirror/state"
-import { HighlightStyle, tags as t } from "@codemirror/highlight"
-
-const chalky = "#e5c07b"
-const coral = "#e06c75"
-const cyan = "#56b6c2"
-const invalid = "#ffffff"
-const ivory = "#abb2bf"
-const stone = "#7d8799"
-const malibu = "#61afef"
-const sage = "#98c379"
-const whiskey = "#d19a66"
-const violet = "#c678dd"
-
-export const lightTheme = EditorView.theme(
-  {
-    "&": {
-      fontSize: "var(--body-font-size)",
-    },
-    ".cm-content": {
-      caretColor: "var(--secondary-light-color)",
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "var(--secondary-light-color)",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
-      { backgroundColor: "var(--primary-light-color)" },
-    ".cm-panels": {
-      backgroundColor: "var(--primary-dark-color)",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
-    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-
-    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
-    ".cm-searchMatch": {
-      backgroundColor: "#72a1ff59",
-      outline: "1px solid #457dff",
-    },
-    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      backgroundColor: "#bad0f847",
-      outline: "1px solid #515a6b",
-    },
-    ".cm-gutters": {
-      fontFamily: "var(--font-mono)",
-      backgroundColor: "var(--primary-color)",
-      borderColor: "var(--divider-light-color)",
-    },
-    ".cm-lineNumbers": {
-      minWidth: "3em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter": {
-      minWidth: "2em",
-      color: "var(--secondary-light-color)",
-    },
-    ".cm-foldGutter .cm-gutterElement": {
-      textAlign: "center",
-    },
-    ".cm-line": {
-      paddingLeft: "0.5em",
-      paddingRight: "0.5em",
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "var(--primary-dark-color)",
-    },
-  },
-  { dark: false }
-)
-
-export const lightHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: violet },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  { tag: [t.function(t.variableName), t.labelName], color: malibu },
-  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
-  { tag: [t.definition(t.name), t.separator], color: ivory },
-  {
-    tag: [
-      t.typeName,
-      t.className,
-      t.number,
-      t.changed,
-      t.annotation,
-      t.modifier,
-      t.self,
-      t.namespace,
-    ],
-    color: chalky,
-  },
-  {
-    tag: [
-      t.operator,
-      t.operatorKeyword,
-      t.url,
-      t.escape,
-      t.regexp,
-      t.link,
-      t.special(t.string),
-    ],
-    color: cyan,
-  },
-  { tag: [t.meta, t.comment], color: stone },
-  { tag: t.strong, fontWeight: "bold" },
-  { tag: t.emphasis, fontStyle: "italic" },
-  { tag: t.strikethrough, textDecoration: "line-through" },
-  { tag: t.link, color: stone, textDecoration: "underline" },
-  { tag: t.heading, fontWeight: "bold", color: coral },
-  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
-  { tag: t.invalid, color: invalid },
-])
-
-export const lightMode: Extension = [lightHighlightStyle, lightHighlightStyle]

packages/hoppscotch-app/package.json

@@ -35,20 +35,13 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@codemirror/autocomplete": "^0.19.4",
-    "@codemirror/closebrackets": "^0.19.0",
+    "@codemirror/basic-setup": "^0.19.0",
     "@codemirror/commands": "^0.19.5",
-    "@codemirror/comment": "^0.19.0",
-    "@codemirror/fold": "^0.19.1",
     "@codemirror/gutter": "^0.19.4",
-    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/history": "^0.19.0",
     "@codemirror/lang-javascript": "^0.19.2",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/language": "^0.19.3",
     "@codemirror/lint": "^0.19.2",
-    "@codemirror/matchbrackets": "^0.19.3",
-    "@codemirror/rectangular-selection": "^0.19.1",
-    "@codemirror/search": "^0.19.2",
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.5",
     "@codemirror/view": "^0.19.12",

pnpm-lock.yaml

@@ -21,20 +21,13 @@ importers:
       '@babel/core': ^7.16.0
       '@babel/preset-env': ^7.16.0
       '@codemirror/autocomplete': ^0.19.4
-      '@codemirror/closebrackets': ^0.19.0
+      '@codemirror/basic-setup': ^0.19.0
       '@codemirror/commands': ^0.19.5
-      '@codemirror/comment': ^0.19.0
-      '@codemirror/fold': ^0.19.1
       '@codemirror/gutter': ^0.19.4
-      '@codemirror/highlight': ^0.19.6
-      '@codemirror/history': ^0.19.0
       '@codemirror/lang-javascript': ^0.19.2
       '@codemirror/lang-json': ^0.19.1
       '@codemirror/language': ^0.19.3
       '@codemirror/lint': ^0.19.2
-      '@codemirror/matchbrackets': ^0.19.3
-      '@codemirror/rectangular-selection': ^0.19.1
-      '@codemirror/search': ^0.19.2
       '@codemirror/state': ^0.19.3
       '@codemirror/text': ^0.19.5
       '@codemirror/view': ^0.19.12
@@ -144,20 +137,13 @@ importers:
     dependencies:
       '@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
       '@codemirror/autocomplete': 0.19.4
-      '@codemirror/closebrackets': 0.19.0
+      '@codemirror/basic-setup': 0.19.0
       '@codemirror/commands': 0.19.5
-      '@codemirror/comment': 0.19.0
-      '@codemirror/fold': 0.19.1
       '@codemirror/gutter': 0.19.4
-      '@codemirror/highlight': 0.19.6
-      '@codemirror/history': 0.19.0
       '@codemirror/lang-javascript': 0.19.2
       '@codemirror/lang-json': 0.19.1
       '@codemirror/language': 0.19.3
       '@codemirror/lint': 0.19.2
-      '@codemirror/matchbrackets': 0.19.3
-      '@codemirror/rectangular-selection': 0.19.1
-      '@codemirror/search': 0.19.2
       '@codemirror/state': 0.19.3
       '@codemirror/text': 0.19.5
       '@codemirror/view': 0.19.12
@@ -1740,6 +1726,26 @@ packages:
       '@lezer/common': 0.15.7
     dev: false
 
+  /@codemirror/basic-setup/0.19.0:
+    resolution: {integrity: sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==}
+    dependencies:
+      '@codemirror/autocomplete': 0.19.4
+      '@codemirror/closebrackets': 0.19.0
+      '@codemirror/commands': 0.19.5
+      '@codemirror/comment': 0.19.0
+      '@codemirror/fold': 0.19.1
+      '@codemirror/gutter': 0.19.4
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/history': 0.19.0
+      '@codemirror/language': 0.19.3
+      '@codemirror/lint': 0.19.2
+      '@codemirror/matchbrackets': 0.19.3
+      '@codemirror/rectangular-selection': 0.19.1
+      '@codemirror/search': 0.19.2
+      '@codemirror/state': 0.19.3
+      '@codemirror/view': 0.19.12
+    dev: false
+
   /@codemirror/closebrackets/0.19.0:
     resolution: {integrity: sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==}
     dependencies: