Frontend color theme

3 files changed, 124 insertions, 26 deletions

diff --git a/language-web/src/main/css/index.scss b/language-web/src/main/css/index.scss
index c92588b8..21a9c05b 100644
--- a/language-web/src/main/css/index.scss
+++ b/language-web/src/main/css/index.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@fontsource/roboto/scss/mixins' as Roboto;
 @use '@fontsource/jetbrains-mono/scss/mixins' as JetbrainsMono;
 
@@ -5,14 +6,16 @@
 @import 'codemirror/addon/hint/show-hint';
 @import 'codemirror/theme/material-darker';
 
-$robotoWeights: 300, 400, 500, 700;
-@each $weight in $robotoWeights {
+@import './themes';
+
+$fontWeights: 300, 400, 500, 700;
+@each $weight in $fontWeights {
   @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight);
   @include Roboto.fontFace($fontName: 'Roboto', $weight: $weight, $style: italic);
 }
 
-$jetbrainsMonoWeights: 400, 700;
-@each $weight in $jetbrainsMonoWeights {
+$monoFontWeights: 400, 700;
+@each $weight in $monoFontWeights {
   @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight);
   @include JetbrainsMono.fontFace($fontName: 'JetBrains Mono', $weight: $weight, $style: italic);
 }
@@ -35,8 +38,78 @@ body {
   text-rendering: optimizeLegibility;
 }
 
+@each $themeName, $theme in $themes {
+  .cm-s-problem-#{$themeName} {
+    &.CodeMirror {
+      background: map.get($theme, 'background');
+      color: map.get($theme, 'foreground');
+    }
+
+    .CodeMirror-gutters {
+      background: map.get($theme, 'background');
+      border: none;
+    }
+
+    .CodeMirror-cursor {
+      border-left: 1px solid map.get($theme, 'cursor');
+    }
+
+    div.CodeMirror-selected,
+    &.CodeMirror-focused div.CodeMirror-selected,
+    .CodeMirror-line::selection,
+    .CodeMirror-line > span::selection,
+    .CodeMirror-line > span > span::selection {
+      background: map.get($theme, 'selection');
+    }
+
+    .CodeMirror-guttermarker,
+    .CodeMirror-guttermarker-subtle,
+    .CodeMirror-linenumber {
+      color: map.get($theme, 'lineNumber');
+    }
+
+    .CodeMirror-activeline-background {
+      background: map.get($theme, 'currentLine');
+    }
+
+    .CodeMirror-activeline-gutter {
+      background: map.get($theme, 'currentLine');
+
+      .CodeMirror-guttermarker,
+      .CodeMirror-guttermarker-subtle,
+      .CodeMirror-linenumber {
+        color: map.get($theme, 'foreground');
+      }
+    }
+
+    .cm-keyword {
+      color: map.get($theme, 'keyword');
+    }
+
+    .cm-number {
+      color: map.get($theme, 'number');
+    }
+
+    .cm-lparen, .cm-rparen {
+      color: map.get($theme, 'delimiter');
+    }
+
+    .problem-predicate, .problem-class, .problem-reference, .problem-enum {
+      color: map.get($theme, 'predicate');
+    }
+
+    .problem-unique-node {
+      color: map.get($theme, 'uniqueNode');
+    }
+
+    .problem-variable {
+      color: map.get($theme, 'variable');
+    }
+  }
+}
+
 .CodeMirror-hints {
-  background: #333333;
+  background: #333;
   border: 0;
   border-radius: 4px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
@@ -107,38 +180,18 @@ li.CodeMirror-hint-active {
   background: rgba(128, 203, 196, 0.2);
 }
 
+
 .xtext-marker_write {
   background: rgba(255, 229, 100, 0.2);
 }
 
-.problem-class, .problem-enum {
-  @extend .cm-type;
-}
-
 .problem-abstract {
   font-style: italic;
 }
 
-.problem-reference {
-  @extend .cm-def;
-}
-
 .problem-containment {
         font-weight: 700;
 }
-
-.problem-unique-node {
-  @extend .cm-atom;
-}
-
 .problem-new-node {
   font-style: italic;
 }
-
-.problem-variable {
-  @extend .cm-variable;
-}
-
-.problem-singleton-variable {
-  opacity: 0.6;
-}
diff --git a/language-web/src/main/css/themeVariables.module.scss b/language-web/src/main/css/themeVariables.module.scss
new file mode 100644
index 00000000..85af4219
--- /dev/null
+++ b/language-web/src/main/css/themeVariables.module.scss
@@ -0,0 +1,9 @@
+@import './themes';
+
+:export {
+  @each $themeName, $theme in $themes {
+    @each $variable, $value in $theme {
+      #{$themeName}--#{$variable}: $value,
+    }
+  }
+}
diff --git a/language-web/src/main/css/themes.scss b/language-web/src/main/css/themes.scss
new file mode 100644
index 00000000..0118290d
--- /dev/null
+++ b/language-web/src/main/css/themes.scss
@@ -0,0 +1,36 @@
+$themes: (
+  'dark': (
+    'foreground': #abb2bf,
+    'background': #282c34,
+    'paper': #21252b,
+    'primary': #56b6c2,
+    'secondary': #ff5370,
+    'keyword': #56b6c2,
+    'predicate': #d6e9ff,
+    'variable': #c8ae9d,
+    'uniqueNode': #d6e9ff,
+    'number': #6e88a6,
+    'delimiter': #6f7682,
+    'cursor': #56b6c2,
+    'selection': #3e4452,
+    'currentLine': #2c323c,
+    'lineNumber': #5c6340,
+  ),
+  'light': (
+    'foreground': #abb2bf,
+    'background': #282c34,
+    'paper': #21252b,
+    'primary': #56b6c2,
+    'secondary': #ff5370,
+    'keyword': #56b6c2,
+    'predicate': #d6e9ff,
+    'variable': #c8ae9d,
+    'uniqueNode': #d6e9ff,
+    'number': #6e88a6,
+    'delimiter': #6f7682,
+    'cursor': #f3efe7,
+    'selection': #3e4452,
+    'currentLine': #2c323c,
+    'lineNumber': #5c6340,
+  ),
+);