From 9c9bfa2b77341fa816555482f15b8ac94d27e8f8 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 9 Feb 2022 23:35:49 +0100
Subject: [PATCH] Update code editor to material 3 look (#11628)

---
 src/resources/codemirror.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts
index ffd7d1d7f8..3b69e471b5 100644
--- a/src/resources/codemirror.ts
+++ b/src/resources/codemirror.ts
@@ -41,8 +41,10 @@ export const theme = EditorView.theme({
   "&": {
     color: "var(--primary-text-color)",
     backgroundColor:
-      "var(--code-editor-background-color, var(--card-background-color))",
+      "var(--code-editor-background-color, var(--mdc-text-field-fill-color, whitesmoke))",
     "& ::selection": { backgroundColor: "rgba(var(--rgb-primary-color), 0.3)" },
+    borderRadius:
+      "var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0px 0px",
     caretColor: "var(--secondary-text-color)",
     height: "var(--code-mirror-height, auto)",
     maxHeight: "var(--code-mirror-max-height, unset)",
@@ -64,7 +66,10 @@ export const theme = EditorView.theme({
 
   ".cm-scroller": { outline: "none" },
 
-  ".cm-content": { caretColor: "var(--secondary-text-color)" },
+  ".cm-content": {
+    caretColor: "var(--secondary-text-color)",
+    paddingTop: "16px",
+  },
 
   ".cm-panels": {
     backgroundColor: "var(--primary-background-color)",
@@ -166,7 +171,7 @@ export const theme = EditorView.theme({
 
   ".cm-gutters": {
     backgroundColor:
-      "var(--paper-dialog-background-color, var(--primary-background-color))",
+      "var(--code-editor-gutter-color, var(--mdc-text-field-fill-color, whitesmoke))",
     color: "var(--paper-dialog-color, var(--secondary-text-color))",
     border: "none",
     borderRight: