Customize ANSI colors for terminal views

frontend/ansi-colors.css

@@ -0,0 +1,139 @@
+/* ANSI color classes */
+
+:root {
+    --ansi-black: rgb(0, 0, 0);
+    --ansi-red: rgb(187, 0, 0);
+    --ansi-green: rgb(0, 187, 0);
+    --ansi-yellow: rgb(187, 187, 0);
+    --ansi-blue: rgb(0, 0, 187);
+    --ansi-magenta: rgb(187, 0, 187);
+    --ansi-cyan: rgb(0, 187, 187);
+    --ansi-white: rgb(255, 255, 255);
+    --ansi-bright-black: rgb(85, 85, 85);
+    --ansi-bright-red: rgb(255, 85, 85);
+    --ansi-bright-green: rgb(0, 255, 0);
+    --ansi-bright-yellow: rgb(255, 255, 85);
+    --ansi-bright-blue: rgb(85, 85, 255);
+    --ansi-bright-magenta: rgb(255, 85, 255);
+    --ansi-bright-cyan: rgb(85, 255, 255);
+    --ansi-bright-white: rgb(255, 255, 255);
+}
+
+/* Foreground colors */
+.ansi-black-fg {
+    color: var(--ansi-black);
+}
+.ansi-red-fg {
+    color: var(--ansi-red);
+}
+.ansi-green-fg {
+    color: var(--ansi-green);
+}
+.ansi-yellow-fg {
+    color: var(--ansi-yellow);
+}
+.ansi-blue-fg {
+    color: var(--ansi-blue);
+}
+.ansi-magenta-fg {
+    color: var(--ansi-magenta);
+}
+.ansi-cyan-fg {
+    color: var(--ansi-cyan);
+}
+.ansi-white-fg {
+    color: var(--ansi-white);
+}
+
+.ansi-bright-black-fg {
+    color: var(--ansi-bright-black);
+}
+.ansi-bright-red-fg {
+    color: var(--ansi-bright-red);
+}
+.ansi-bright-green-fg {
+    color: var(--ansi-bright-green);
+}
+.ansi-bright-yellow-fg {
+    color: var(--ansi-bright-yellow);
+}
+.ansi-bright-blue-fg {
+    color: var(--ansi-bright-blue);
+}
+.ansi-bright-magenta-fg {
+    color: var(--ansi-bright-magenta);
+}
+.ansi-bright-cyan-fg {
+    color: var(--ansi-bright-cyan);
+}
+.ansi-bright-white-fg {
+    color: var(--ansi-bright-white);
+}
+
+/* Background colors */
+.ansi-black-bg {
+    background-color: var(--ansi-black);
+}
+.ansi-red-bg {
+    background-color: var(--ansi-red);
+}
+.ansi-green-bg {
+    background-color: var(--ansi-green);
+}
+.ansi-yellow-bg {
+    background-color: var(--ansi-yellow);
+}
+.ansi-blue-bg {
+    background-color: var(--ansi-blue);
+}
+.ansi-magenta-bg {
+    background-color: var(--ansi-magenta);
+}
+.ansi-cyan-bg {
+    background-color: var(--ansi-cyan);
+}
+.ansi-white-bg {
+    background-color: var(--ansi-white);
+}
+
+.ansi-bright-black-bg {
+    background-color: var(--ansi-bright-black);
+}
+.ansi-bright-red-bg {
+    background-color: var(--ansi-bright-red);
+}
+.ansi-bright-green-bg {
+    background-color: var(--ansi-bright-green);
+}
+.ansi-bright-yellow-bg {
+    background-color: var(--ansi-bright-yellow);
+}
+.ansi-bright-blue-bg {
+    background-color: var(--ansi-bright-blue);
+}
+.ansi-bright-magenta-bg {
+    background-color: var(--ansi-bright-magenta);
+}
+.ansi-bright-cyan-bg {
+    background-color: var(--ansi-bright-cyan);
+}
+.ansi-bright-white-bg {
+    background-color: var(--ansi-bright-white);
+}
+
+/* Some custom styles for stdout to improve contrast and readability */
+pluto-log-dot.Stdout {
+    --ansi-red: rgb(220, 0, 0);
+    --ansi-magenta: rgb(200, 0, 200);
+    --ansi-white: rgb(220, 220, 220);
+    --ansi-bright-black: rgb(50, 50, 50);
+    --ansi-bright-yellow: rgb(240, 240, 50);
+    --ansi-bright-blue: rgb(110, 110, 255);
+    --ansi-bright-white: rgb(240, 240, 240);
+    --ansi-bright-black: rgb(183 183 183);
+}
+
+pluto-log-dot.Stdout .ansi-bright-black-fg:is(.ansi-white-bg, .ansi-bright-white-bg) {
+    text-shadow: none;
+    color: black;
+}

frontend/components/ErrorMessage.js

@@ -298,7 +298,9 @@ const AnsiUpLine = (/** @type {{value: string}} */ { value }) => {
 
     useLayoutEffect(() => {
         if (!node_ref.current) return
-        node_ref.current.innerHTML = new AnsiUp().ansi_to_html(value)
+        const ansi_up = new AnsiUp();
+        ansi_up.use_classes = true;
+        node_ref.current.innerHTML = ansi_up.ansi_to_html(value)
         did_ansi_up.current = true
     }, [node_ref.current, value])
 

frontend/components/Logs.js

@@ -181,7 +181,9 @@ const LogViewAnsiUp = (/** @type {{value: string}} */ { value }) => {
 
     useEffect(() => {
         if (!node_ref.current) return
-        node_ref.current.innerHTML = new AnsiUp().ansi_to_html(value)
+        const ansi_up = new AnsiUp();
+        ansi_up.use_classes = true;
+        node_ref.current.innerHTML = ansi_up.ansi_to_html(value)
     }, [node_ref.current, value])
 
     return html`<pre ref=${node_ref}></pre>`

frontend/components/PkgTerminalView.js

@@ -11,7 +11,9 @@ const TerminalViewAnsiUp = ({ value }) => {
     useEffect(() => {
         if (!node_ref.current) return
         node_ref.current.style.cssText = `--animation-delay: -${(Date.now() - start_time.current) % 1000}ms`
-        node_ref.current.innerHTML = make_spinner_spin(new AnsiUp().ansi_to_html(value))
+        const ansi_up = new AnsiUp();
+        ansi_up.use_classes = true;
+        node_ref.current.innerHTML = make_spinner_spin(ansi_up.ansi_to_html(value))
         const parent = node_ref.current.parentElement
         if (parent) parent.scrollTop = 1e5
     }, [node_ref.current, value])

frontend/editor.css

@@ -25,6 +25,7 @@
 
 @import url("./themes/light.css");
 @import url("./themes/dark.css");
+@import url("./ansi-colors.css");
 
 @import url("./featured-card.css");