From e3f33ba25f26a5c584a9d3b9655a9307c3516245 Mon Sep 17 00:00:00 2001
From: donsiamese <donsiamese@gmail.com>
Date: Tue, 15 Oct 2024 16:35:11 +0200
Subject: [PATCH] Code snippet styling (#27)

* codeSnippet styling

* improve code snippet highlight styles
---
 src/components/CodeSnippet.css | 42 +++++++++++++++++++++++++++++++++-
 src/components/CodeSnippet.tsx | 37 +++++++++++++++++++++++++++++-
 2 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/src/components/CodeSnippet.css b/src/components/CodeSnippet.css
index 9999675..a999e6c 100644
--- a/src/components/CodeSnippet.css
+++ b/src/components/CodeSnippet.css
@@ -5,6 +5,7 @@
 .CodeSnippet .cm-editor {
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
+  /* box-shadow: none; */
 }
 
 .CodeSnippet button.copy-code {
@@ -13,7 +14,7 @@
   top: 1px;
   background: transparent;
   border: 0 none;
-  color: var(--impresso-color-yellow);
+  color: var(--impresso-color-black-rgba-50);
 }
 
 .CodeSnippet .btn {
@@ -21,3 +22,42 @@
   right: 0;
   bottom: 0.5rem;
 }
+
+.cm-line:not(span) {
+  color: #1e90d2;
+}
+.ͼ2 .cm-activeLine {
+  background-color: transparent !important;
+}
+.ͼ1.mc-focused {
+  outline: none;
+}
+
+.ͼ1.cm-focused {
+  outline: 1px solid rgba(var(--impresso-color-black-rgb), 0.2);
+}
+
+.ͼ1 .cm-activeLineGutter,
+.ͼ2 .cm-activeLineGutter {
+  background-color: transparent !important;
+}
+
+.cm-gutterElement {
+  position: relative;
+}
+
+.cm-gutterElement::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(var(--impresso-color-black-rgb), 0.08);
+  transform: translateX(100%);
+  transition: all 0.3s;
+}
+
+.cm-gutterElement.cm-activeLineGutter::after {
+  transform: translateX(0%);
+}
diff --git a/src/components/CodeSnippet.tsx b/src/components/CodeSnippet.tsx
index 81ba930..77c37ae 100644
--- a/src/components/CodeSnippet.tsx
+++ b/src/components/CodeSnippet.tsx
@@ -4,6 +4,8 @@ import type { ReactCodeMirrorRef } from "@uiw/react-codemirror"
 import { duotoneDark } from "@uiw/codemirror-theme-duotone"
 import { python } from "@codemirror/lang-python"
 import { Copy, CheckCircle } from "iconoir-react"
+import { createTheme } from "@uiw/codemirror-themes"
+import { tags as t } from "@lezer/highlight"
 
 import "./CodeSnippet.css"
 
@@ -13,6 +15,38 @@ export interface CodeSnippetProps {
   basicSetup?: any
 }
 
+const myTheme = createTheme({
+  theme: "light",
+  settings: {
+    background: "#fff9f2",
+    backgroundImage: "",
+    foreground: "#75baff",
+    caret: "#5d00ff",
+    selection: "#036dd626",
+    selectionMatch: "#036dd626",
+    lineHighlight: "#8a91991a",
+    gutterBorder: "1px solid #ffffff10",
+    gutterBackground: "#fff9f2",
+    gutterForeground: "#8a919966",
+  },
+  styles: [
+    { tag: t.comment, color: "#6c9d7c" },
+    { tag: t.variableName, color: "#9c48bd" },
+    { tag: [t.string, t.special(t.brace)], color: "#5c6166" },
+    { tag: t.number, color: "#5c6166" },
+    { tag: t.bool, color: "#5c6166" },
+    { tag: t.null, color: "#5c6166" },
+    { tag: t.keyword, color: "#5c6166" },
+    { tag: t.operator, color: "#5c6166" },
+    { tag: t.className, color: "#5c6166" },
+    { tag: t.definition(t.typeName), color: "#5c6166" },
+    { tag: t.typeName, color: "#5c6166" },
+    { tag: t.angleBracket, color: "#5c6166" },
+    { tag: t.tagName, color: "#5c6166" },
+    { tag: t.attributeName, color: "#5c6166" },
+  ],
+})
+
 const CodeSnippet: React.FC<CodeSnippetProps> = ({
   value = "",
   readonly = false,
@@ -61,7 +95,8 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
       <ReactCodeMirror
         ref={codeMirrorRef}
         value={value}
-        theme={duotoneDark}
+        // theme={duotoneDark}
+        theme={myTheme}
         readOnly={readonly}
         basicSetup={basicSetup}
         extensions={[python(), EditorView.lineWrapping]}