Draft new light theme

Author: savq

frontend/components/CellInput.js

@@ -98,18 +98,17 @@ const common_style_tags = [
     { tag: tags.comment, color: "var(--cm-color-comment)", fontStyle: "italic", filter: "none" },
     { tag: tags.keyword, color: "var(--cm-color-keyword)" },
     { tag: tags.variableName, color: "var(--cm-color-variable)", fontWeight: 700 },
-    { tag: tags.typeName, color: "var(--cm-color-type)", fontStyle: "italic" },
-    { tag: tags.typeOperator, color: "var(--cm-color-type)", fontStyle: "italic" },
+    { tag: tags.typeName, filter: "var(--cm-filter-type)" },
     { tag: tags.tagName, color: "var(--cm-color-tag)" }, // JS
     { tag: tags.propertyName, color: "var(--cm-color-symbol)", fontWeight: 700 },
     // TODO: tags.labelName
     { tag: tags.macroName, color: "var(--cm-color-macro)", fontWeight: 700 },
     { tag: tags.string, color: "var(--cm-color-string)" },
+    { tag: tags.special(tags.string), color: "var(--cm-color-command)" },
     { tag: tags.character, color: "var(--cm-color-literal)" },
     { tag: tags.literal, color: "var(--cm-color-literal)" },
     // TODO: tags.self, tags.null
     { tag: tags.atom, color: "var(--cm-color-symbol)" },
-    { tag: tags.unit, color: "var(--cm-color-tag)" }, // TODO: Remove
     // TODO? tags.operator
     { tag: tags.bracket, color: "var(--cm-color-bracket)" },
     { tag: tags.special(tags.brace), color: "var(--cm-color-macro)", fontWeight: 700 }, // interp

frontend/themes/light.css

@@ -191,17 +191,20 @@
 
         /* code highlighting */
         --cm-color-editor-text: #41323f;
-        --cm-color-comment:     #e96ba8;
-        --cm-color-symbol:      #b67a48;
-        --cm-color-literal:     #815ba4;
-        --cm-color-keyword:     #ef6155;
-        --cm-color-string:      #da5616;
-        --cm-color-variable:    #5668a4;
+        --cm-color-comment:     #b62a66;
+        --cm-color-keyword:     #b13e30;
+        --cm-color-symbol:      #9b570d;
+        --cm-color-command:     #607020;
+        --cm-color-macro:       #327644;
+        --cm-color-string:      #3a727b;
+        --cm-color-variable:    #5466a5;
+        --cm-color-literal:     #8e5189;
+        --cm-filter-type:        brightness(150%) saturate(50%);;
+
+        /* The colors below are not used in CellInput.js */
         --cm-color-var2:        #37768a;
-        --cm-color-macro:       #5c8c5f;
         --cm-color-builtin:     #5e7ad3;
         --cm-color-function:    #cc80ac;
-        --cm-color-type:        hsl(170deg 7% 56%);
         --cm-color-bracket:     #41323f;
         --cm-color-tag:         #ef6155;
         --cm-color-link:        #815ba4;