Add custom ansi colors and CSS variables for them (#25546)

Use our existing color palette to map to the 16 basic ansi colors. This
is backwards-compatible because it aliases the existing color names.

Side note: I think the colors in `console.css` for console file
rendering are incomplete, but fixing those is out of scope here imo.

Before and after:

<img width="542" alt="Screenshot 2023-06-28 at 00 26 12"
src="https://github.com/go-gitea/gitea/assets/115237/86d41884-bc47-4e85-8aec-621eb7320f0b">

<img width="546" alt="Screenshot 2023-06-28 at 00 28 24"
src="https://github.com/go-gitea/gitea/assets/115237/39fa3b37-d49e-49b1-b6bc-390ac8ca24b2">

---------

Co-authored-by: Giteabot <teabot@gitea.io>

2 files changed, 2 insertions, 1 deletions

diff --git a/web_src/js/render/ansi.js b/web_src/js/render/ansi.js
index 68e8f2c544..75b8cb4fd2 100644
--- a/web_src/js/render/ansi.js
+++ b/web_src/js/render/ansi.js
@@ -11,6 +11,7 @@ export function renderAnsi(line) {
   // the output of future renders, because ansi_up is stateful and remembers things like
   // unclosed opening tags for colors.
   const ansi_up = new (AnsiUp.default || AnsiUp)();
+  ansi_up.use_classes = true;
 
   if (line.endsWith('\r\n')) {
     line = line.substring(0, line.length - 2);
diff --git a/web_src/js/render/ansi.test.js b/web_src/js/render/ansi.test.js
index 7542ba0ede..b4793251df 100644
--- a/web_src/js/render/ansi.test.js
+++ b/web_src/js/render/ansi.test.js
@@ -8,7 +8,7 @@ test('renderAnsi', () => {
   expect(renderAnsi('\r')).toEqual('');
   expect(renderAnsi('\rx\rabc')).toEqual('x\nabc');
   expect(renderAnsi('\rabc\rx\r')).toEqual('abc\nx');
-  expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:rgb(0,0,0)">black</span><span style="color:rgb(255,255,255)">white</span>'); // unclosed
+  expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span class="ansi-black-fg">black</span><span class="ansi-white-fg">white</span>'); // unclosed
   expect(renderAnsi('<script>')).toEqual('&lt;script&gt;');
   expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
   expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');