1 files changed, 105 insertions, 33 deletions

diff --git a/source/library/themes/light.ts b/source/library/themes/light.ts
index daaede2..3e20423 100644
--- a/source/library/themes/light.ts
+++ b/source/library/themes/light.ts
@@ -3,18 +3,19 @@
 
 /*** IMPORT ------------------------------------------- ***/
 
+import { color, yang } from "@inc/uchu";
+import { Decoration, drawSelection, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { EditorView } from "@codemirror/view";
 import { tags as t } from "@lezer/highlight";
 
-/*** EXPORT ------------------------------------------- ***/
+/*** UTILITY ------------------------------------------ ***/
 
-const BG = "#fafafa";
-const BORDER = "#e0e0e0";
-const FG = "#24292e";
-const GUTTER_BG = "#f3f3f3";
-const GUTTER_FG = "#9ca3af";
-const SELECTION = "#b3d4fc";
+const BG = yang;
+const BORDER = color("gray", 1);
+const FG = color("yin", 3);
+const GUTTER_BG = color("gray", 1);
+const GUTTER_FG = color("gray", 6);
+const SELECTION = color("yellow", 1);
 
 const base = EditorView.theme({
   "&": {
@@ -24,18 +25,21 @@ const base = EditorView.theme({
   "&.cm-focused": {
     outline: "none"
   },
+  "&.cm-focused .cm-matchingBracket": {
+    backgroundColor: color("gray", 1)
+  },
+  "&.cm-focused .cm-selectionBackground, ::selection": {
+    backgroundColor: SELECTION
+  },
   ".cm-activeLine": {
-    backgroundColor: "#f0f0f0"
+    backgroundColor: color("gray", 1)
   },
   ".cm-activeLineGutter": {
     backgroundColor: "transparent",
     color: FG
   },
   ".cm-content": {
-    caretColor: "#1f6feb"
-  },
-  ".cm-cursor, .cm-dropCursor": {
-    borderLeftColor: "#1f6feb"
+    padding: 0
   },
   ".cm-gutters": {
     backgroundColor: GUTTER_BG,
@@ -43,33 +47,101 @@ const base = EditorView.theme({
     borderRight: `1px solid ${BORDER}`,
     color: GUTTER_FG
   },
+  ".cm-lineNumbers .cm-gutterElement": {
+    padding: "0 5px 0 15px"
+  },
+  ".cm-lintPoint::after": {
+    borderBottomColor: color("red", 5)
+  },
   ".cm-matchingBracket": {
-    backgroundColor: "#dbeafe",
-    outline: "1px solid #93c5fd"
+    backgroundColor: color("gray", 1),
+    color: color("yin", 8),
+    outline: "none"
+  },
+  ".cm-scroller": {
+    fontSize: "0.8rem",
+    lineHeight: 1.3
   },
   ".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
     backgroundColor: SELECTION
   }
 }, { dark: false });
 
+const blockCaretTheme = EditorView.theme({
+  "&": {
+    caretColor: "transparent"
+  },
+  "& .cm-cursor": {
+    borderLeftColor: color("blue", 5),
+    borderLeftStyle: "solid",
+    borderLeftWidth: "1ch",
+    marginLeft: "0"
+  },
+  "& .cm-cursorLayer": {
+    mixBlendMode: "hard-light",
+    zIndex: "auto"
+  },
+  "& .cm-scroller": {
+    isolation: "isolate"
+  }
+});
+
 const highlight = HighlightStyle.define([
-  { color: "#d73a49", tag: t.keyword },
-  { color: "#6f42c1", tag: [t.name, t.deleted, t.character, t.macroName] },
-  { color: "#6f42c1", tag: [t.propertyName] },
-  { color: "#032f62", tag: [t.string, t.special(t.string)] },
-  { color: "#005cc5", tag: [t.number, t.bool, t.null, t.atom] },
-  { color: "#6a737d", fontStyle: "italic", tag: t.comment },
-  { color: "#22863a", tag: [t.typeName, t.className] },
-  { color: "#e36209", tag: [t.variableName, t.labelName] },
-  { color: "#d73a49", tag: [t.operator, t.operatorKeyword] },
-  { color: "#6a737d", tag: [t.meta, t.documentMeta] },
-  { color: "#22863a", tag: [t.tagName] },
-  { color: "#6f42c1", tag: [t.attributeName] },
-  { color: "#e36209", tag: [t.heading] },
-  { color: "#032f62", tag: [t.link] },
-  { fontWeight: "bold", tag: [t.strong] },
-  { fontStyle: "italic", tag: [t.emphasis] },
-  { tag: t.strikethrough, textDecoration: "line-through" }
+  {
+    color: color("yin", 8),
+    tag: [
+      t.atom,
+      t.attributeName,
+      t.bool,
+      t.character,
+      t.className,
+      t.comment,
+      t.deleted,
+      t.documentMeta,
+      t.keyword,
+      t.heading,
+      t.labelName,
+      t.link,
+      t.macroName,
+      t.meta,
+      t.name,
+      t.null,
+      t.operator,
+      t.operatorKeyword,
+      t.propertyName,
+      t.tagName,
+      t.typeName,
+      t.variableName
+    ]
+  },
+  {
+    backgroundColor: color("green", 1),
+    color: color("green", 9),
+    tag: [t.string, t.special(t.string)]
+  },
+  {
+    color: color("purple", 4),
+    tag: [t.number]
+  },
+  {
+    fontStyle: "italic",
+    tag: [t.comment, t.emphasis]
+  },
+  {
+    fontWeight: "bold",
+    tag: [t.strong]
+  },
+  {
+    tag: t.strikethrough,
+    textDecoration: "line-through"
+  }
 ]);
 
-export const lightTheme = [base, syntaxHighlighting(highlight)];
+/*** EXPORT ------------------------------------------- ***/
+
+export const lightTheme = [
+  drawSelection(),
+  base,
+  syntaxHighlighting(highlight),
+  blockCaretTheme
+];