From 88d436bbe23df38637f0b13e8f21f98ca01e13b2 Mon Sep 17 00:00:00 2001
From: krut_ni <nils.kruthoff@dlr.de>
Date: Wed, 8 Jul 2026 21:50:57 +0200
Subject: [PATCH] styled code editor and lua tokens with dedicated dark and
 light theme

---
 app/MindWork AI Studio/wwwroot/app.css | 72 ++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/app/MindWork AI Studio/wwwroot/app.css b/app/MindWork AI Studio/wwwroot/app.css
index a6631ea6..aa53a34b 100644
--- a/app/MindWork AI Studio/wwwroot/app.css	
+++ b/app/MindWork AI Studio/wwwroot/app.css	
@@ -34,6 +34,16 @@
     src: url('fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+/* JetBrainsMono-Regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400;
+    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+
 .mud-text-list .mud-list-item-icon {
     margin-top: 4px;
 }
@@ -192,3 +202,65 @@
     margin-left: 0 !important;
     margin-right: 0 !important;
 }
+
+.code-editor {
+    min-height: 32rem;
+    height: 62vh;
+    width: 100%;
+    overflow: auto;
+    padding: 0.8rem;
+    border: 1px solid var(--mw-code-editor-border, rgba(0,0,0,0.11764705882352941));
+    border-radius: 4px;
+    background: var(--mw-code-editor-background, rgba(255,255,255,1));
+    color: var(--mw-code-editor-foreground, rgba(66,66,66,1));
+    caret-color: var(--mw-code-editor-foreground, rgba(66,66,66,1));
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.65rem;
+    line-height: 1.45;
+    white-space: pre;
+    tab-size: 4;
+    outline: none;
+}
+
+.code-editor .lua-comment {
+    color: var(--mw-code-editor-comment, #6a9955);
+    font-style: italic;
+}
+
+.code-editor .lua-string {
+    color: var(--mw-code-editor-string, #a31515);
+}
+
+.code-editor .lua-number {
+    color: var(--mw-code-editor-number, #098658);
+}
+
+.code-editor .lua-keyword {
+    color: var(--mw-code-editor-keyword, #0000ff);
+    font-weight: 600;
+}
+
+.code-editor .lua-literal {
+    color: var(--mw-code-editor-literal, #0000ff);
+}
+
+.code-editor .lua-built-in {
+    color: var(--mw-code-editor-built-in, #795e26);
+}
+
+.code-editor .lua-constant {
+    color: var(--mw-code-editor-constant, #0070c1);
+    font-weight: 500;
+}
+
+.code-editor .lua-function {
+    color: var(--mw-code-editor-function, #795e26);
+}
+
+.code-editor .lua-property {
+    color: var(--mw-code-editor-property, #001080);
+}
+
+.code-editor .lua-variable {
+    color: var(--mw-code-editor-variable, #267f99);
+}