simplify codemirror styling

Author: tsnobip

src/components/CodeMirror.res

@@ -152,6 +152,9 @@ module CM6 = {
     @send
     external dispatchEffects: (editorView, dispatchEffectsArg) => unit = "dispatch"
 
+    @module("@codemirror/view") @scope("EditorView") @val
+    external theme: {..} => extension = "theme"
+
     @module("@codemirror/view") @scope("EditorView") @val
     external lineWrapping: extension = "lineWrapping"
 
@@ -380,6 +383,7 @@ module CM6 = {
       module TagStyle = {
         type t = {
           tag: array<tag>,
+          class?: string,
           color?: string,
           fontStyle?: string,
           fontWeight?: string,
@@ -392,52 +396,39 @@ module CM6 = {
 
       let default = define([
         {
-          tag: [Tags.keyword],
-          color: "#708",
-        },
-        {
-          tag: [Tags.atom, Tags.bool, Tags.url, Tags.contentSeparator, Tags.labelName],
-          color: "#219",
-        },
-        {
-          tag: [Tags.literal, Tags.inserted],
-          color: "#164",
-        },
-        {
-          tag: [Tags.string, Tags.special(Tags.string), Tags.deleted],
-          color: "#a11",
-        },
-        {
-          tag: [Tags.regexp, Tags.escape],
-          color: "#040",
+          tag: [Tags.keyword, Tags.moduleKeyword, Tags.operator],
+          class: "text-berry-dark-50",
         },
         {
-          tag: [Tags.definition(Tags.variableName)],
-          color: "#00f",
+          tag: [
+            Tags.variableName,
+            Tags.definition(Tags.propertyName),
+            Tags.tagName,
+            Tags.labelName,
+            Tags.definition(Tags.variableName),
+            Tags.definition(Tags.typeName),
+          ],
+          class: "text-gray-30",
         },
         {
-          tag: [Tags.local(Tags.variableName)],
-          color: "#30a",
+          tag: [Tags.bool, Tags.atom, Tags.typeName, Tags.special(Tags.tagName)],
+          class: "text-orange-dark",
         },
         {
-          tag: [Tags.typeName, Tags.namespace],
-          color: "#085",
+          tag: [Tags.string, Tags.special(Tags.string), Tags.number],
+          class: "text-turtle-dark",
         },
         {
-          tag: [Tags.special(Tags.variableName), Tags.macroName],
-          color: "#256",
-        },
-        {
-          tag: [Tags.definition(Tags.propertyName)],
-          color: "#00c",
+          tag: [Tags.comment],
+          class: "text-gray-60",
         },
         {
-          tag: [Tags.comment],
-          color: "#940",
+          tag: [Tags.definition(Tags.namespace)],
+          class: "text-orange",
         },
         {
-          tag: [Tags.invalid],
-          color: "#f00",
+          tag: [Tags.namespace, Tags.annotation],
+          class: "text-water-dark",
         },
       ])
     }
@@ -611,6 +602,16 @@ let createEditor = (config: editorConfig): editorInstance => {
   let extensions = [
     CM6.Compartment.make(languageConf, (language: CM6.extension)),
     CM6.Commands.history(),
+    CM6.EditorView.theme({
+      ".cm-content": {
+        "lineHeight": "1.5",
+      },
+      ".cm-line": {
+        "lineHeight": "1.5",
+      },
+      ".cm-gutters": {"backgroundColor": "inherit"},
+      ".cm-gutters.cm-gutters-before": {"border": "none"},
+    }),
     CM6.EditorView.drawSelection(),
     CM6.EditorView.dropCursor(),
     CM6.Language.bracketMatching(),

styles/main.css

@@ -299,256 +299,6 @@
   }
 }
 
-.CodeMirror {
-  background-color: inherit !important;
-  color: inherit !important;
-  height: 100% !important;
-}
-
-.CodeMirror-gutters .errors {
-  /*@apply bg-white text-red-500;*/
-  @apply w-6;
-  background-color: inherit;
-}
-
-/*.CodeMirror-scroll {*/
-/*min-height: 40vh;*/
-/*}*/
-
-.cm-s-material.CodeMirror {
-  /*background-color: #263238;*/
-  @apply font-mono;
-  /*py-8;*/
-}
-
-.cm-s-material .CodeMirror-gutters {
-  /*@apply  text-gray-80;*/
-  border: none;
-  background-color: inherit;
-  color: inherit;
-}
-
-/*.CodeMirror pre.CodeMirror-line,*/
-/*.CodeMirror pre.CodeMirror-line-like {*/
-/*}*/
-
-.cm-s-material .CodeMirror-guttermarker,
-.cm-s-material .CodeMirror-guttermarker-subtle,
-.cm-s-material .CodeMirror-linenumber {
-  @apply text-gray-80;
-}
-
-.cm-s-material .CodeMirror-cursor {
-  border-left: 1px solid #ffcc00;
-}
-
-.cm-s-material div.CodeMirror-selected {
-  background: rgba(128, 203, 196, 0.2);
-}
-
-.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
-  background: rgba(128, 203, 196, 0.2);
-}
-
-.cm-s-material .CodeMirror-line::selection,
-.cm-s-material .CodeMirror-line > span::selection,
-.cm-s-material .CodeMirror-line > span > span::selection {
-  background: rgba(128, 203, 196, 0.2);
-}
-
-.cm-s-material .CodeMirror-line::-moz-selection,
-.cm-s-material .CodeMirror-line > span::-moz-selection,
-.cm-s-material .CodeMirror-line > span > span::-moz-selection {
-  background: rgba(128, 203, 196, 0.2);
-}
-
-.cm-s-material .CodeMirror-activeline-background {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.cm-s-material .cm-keyword {
-  @apply text-berry-dark-50;
-}
-
-.cm-s-material .cm-keyword2 {
-  @apply text-water-dark;
-}
-
-.cm-s-material .cm-variant-constructor {
-  @apply text-orange-dark;
-}
-
-.cm-s-material .cm-module {
-  @apply text-water-dark;
-}
-
-.cm-s-material .cm-operator {
-  @apply text-berry-dark-50;
-}
-
-.cm-s-material .cm-variable-2 {
-  color: #eeffff;
-}
-
-.cm-s-material .cm-variable-3,
-.cm-s-material .cm-type {
-  color: #f07178;
-}
-
-.cm-s-material .cm-builtin {
-  @apply text-orange-dark;
-}
-
-.cm-s-material .cm-decorator {
-  @apply text-water-dark;
-}
-
-.cm-s-material .cm-type-annotation {
-  @apply text-gray-40;
-}
-
-.cm-s-material .cm-atom {
-  @apply text-orange-dark;
-}
-
-.cm-s-material .cm-number {
-  @apply text-turtle-dark;
-}
-
-.cm-s-material .cm-def {
-  @apply text-gray-30;
-}
-
-.cm-s-material .cm-string {
-  @apply text-turtle-dark;
-}
-
-.cm-s-material .cm-string-2 {
-  @apply text-turtle-dark;
-}
-
-.cm-s-material .cm-comment {
-  @apply text-gray-60;
-}
-
-.cm-s-material .cm-variable {
-  @apply text-gray-30;
-}
-
-.cm-s-material .cm-tag {
-  color: #ff5370;
-}
-
-.cm-s-material .cm-meta {
-  color: #ffcb6b;
-}
-
-.cm-s-material .cm-attribute {
-  color: #c792ea;
-}
-
-.cm-s-material .cm-property {
-  color: #c792ea;
-}
-
-.cm-s-material .cm-qualifier {
-  color: #decb6b;
-}
-
-.cm-s-material .cm-variable-3,
-.cm-s-material .cm-type {
-  color: #decb6b;
-}
-
-.cm-s-material .cm-error {
-  color: rgba(255, 255, 255, 1);
-  background-color: #ff5370;
-}
-
-.cm-s-material .CodeMirror-matchingbracket {
-  text-decoration: underline;
-  color: white !important;
-}
-
-/* simplescrollbars style */
-.CodeMirror-simplescroll-horizontal div,
-.CodeMirror-simplescroll-vertical div {
-  position: absolute;
-  background: #ccc;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border: 1px solid #bbb;
-  border-radius: 2px;
-}
-
-.CodeMirror-simplescroll-horizontal,
-.CodeMirror-simplescroll-vertical {
-  position: absolute;
-  z-index: 6;
-  background: #eee;
-}
-
-.CodeMirror-simplescroll-horizontal {
-  bottom: 0;
-  left: 0;
-  height: 8px;
-}
-
-.CodeMirror-simplescroll-horizontal div {
-  bottom: 0;
-  height: 100%;
-}
-
-.CodeMirror-simplescroll-vertical {
-  right: 0;
-  top: 0;
-  width: 8px;
-}
-
-.CodeMirror-simplescroll-vertical div {
-  right: 0;
-  width: 100%;
-}
-
-.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler,
-.CodeMirror-overlayscroll .CodeMirror-gutter-filler {
-  display: none;
-}
-
-.CodeMirror-overlayscroll-horizontal div,
-.CodeMirror-overlayscroll-vertical div {
-  position: absolute;
-  background: #bcd;
-  border-radius: 3px;
-}
-
-.CodeMirror-overlayscroll-horizontal,
-.CodeMirror-overlayscroll-vertical {
-  position: absolute;
-  z-index: 6;
-}
-
-.CodeMirror-overlayscroll-horizontal {
-  bottom: 0;
-  left: 0;
-  height: 6px;
-}
-
-.CodeMirror-overlayscroll-horizontal div {
-  bottom: 0;
-  height: 100%;
-}
-
-.CodeMirror-overlayscroll-vertical {
-  right: 0;
-  top: 0;
-  width: 6px;
-}
-
-.CodeMirror-overlayscroll-vertical div {
-  right: 0;
-  width: 100%;
-}
 
 .wrapper {
   position: relative;