magic_rb/forgejo
Template
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-11-22 09:54:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source 
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>
This commit is contained in:
silverwind 2023-06-28 15:38:55 +02:00 committed by GitHub
parent c082689471
commit fdab4e3d84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 96 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web_src/css/base.css
View file

@ -137,6 +137,23 @@
--color-pink-dark-2: #c21e7b;
--color-brown-dark-2: #845232;
--color-black-dark-2: #161617;
/* ansi colors used for actions console and console files */
--color-ansi-black: var(--color-black);
--color-ansi-red: var(--color-red);
--color-ansi-green: var(--color-green);
--color-ansi-yellow: var(--color-yellow);
--color-ansi-blue: var(--color-blue);
--color-ansi-magenta: var(--color-pink);
--color-ansi-cyan: var(--color-teal);
--color-ansi-white: var(--color-console-fg-subtle);
--color-ansi-bright-black: var(--color-black-light);
--color-ansi-bright-red: var(--color-red-light);
--color-ansi-bright-green: var(--color-green-light);
--color-ansi-bright-yellow: var(--color-yellow-light);
--color-ansi-bright-blue: var(--color-blue-light);
--color-ansi-bright-magenta: var(--color-pink-light);
--color-ansi-bright-cyan: var(--color-teal-light);
--color-ansi-bright-white: var(--color-console-fg);
/* other colors */
--color-grey: #707070;
--color-grey-light: #838383;

80
web_src/css/features/console.css
View file

@ -24,37 +24,77 @@
}
}
.term-fg2 { color: #838887; } /* faint (decreased intensity) - same as gray really */
/* ansi_up colors used in actions */
.ansi-black-fg { color: var(--color-ansi-black); }
.ansi-red-fg { color: var(--color-ansi-red); }
.ansi-green-fg { color: var(--color-ansi-green); }
.ansi-yellow-fg { color: var(--color-ansi-yellow); }
.ansi-blue-fg { color: var(--color-ansi-blue); }
.ansi-magenta-fg { color: var(--color-ansi-magenta); }
.ansi-cyan-fg { color: var(--color-ansi-cyan); }
.ansi-white-fg { color: var(--color-ansi-white); }
.ansi-bright-black-fg { color: var(--color-ansi-bright-black); }
.ansi-bright-red-fg { color: var(--color-ansi-bright-red); }
.ansi-bright-green-fg { color: var(--color-ansi-bright-green); }
.ansi-bright-yellow-fg { color: var(--color-ansi-bright-yellow); }
.ansi-bright-blue-fg { color: var(--color-ansi-bright-blue); }
.ansi-bright-magenta-fg { color: var(--color-ansi-bright-magenta); }
.ansi-bright-cyan-fg { color: var(--color-ansi-bright-cyan); }
.ansi-bright-white-fg { color: var(--color-ansi-bright-white); }
.ansi-black-bg { background-color: var(--color-ansi-black); }
.ansi-red-bg { background-color: var(--color-ansi-red); }
.ansi-green-bg { background-color: var(--color-ansi-green); }
.ansi-yellow-bg { background-color: var(--color-ansi-yellow); }
.ansi-blue-bg { background-color: var(--color-ansi-blue); }
.ansi-magenta-bg { background-color: var(--color-ansi-magenta); }
.ansi-cyan-bg { background-color: var(--color-ansi-cyan); }
.ansi-white-bg { background-color: var(--color-ansi-white); }
.ansi-bright-black-bg { background-color: var(--color-ansi-bright-black); }
.ansi-bright-red-bg { background-color: var(--color-ansi-bright-red); }
.ansi-bright-green-bg { background-color: var(--color-ansi-bright-green); }
.ansi-bright-yellow-bg { background-color: var(--color-ansi-bright-yellow); }
.ansi-bright-blue-bg { background-color: var(--color-ansi-bright-blue); }
.ansi-bright-magenta-bg { background-color: var(--color-ansi-bright-magenta); }
.ansi-bright-cyan-bg { background-color: var(--color-ansi-bright-cyan); }
.ansi-bright-white-bg { background-color: var(--color-ansi-bright-white); }
/* term colors used in console rendering */
.term-fg2 { color: var(--color-ansi-bright-black); } /* faint (decreased intensity) - same as gray really */
.term-fg3 { font-style: italic; } /* italic */
.term-fg4 { text-decoration: underline; } /* underline */
.term-fg5 { animation: blink-animation 1s steps(3, start) infinite; } /* blink */
.term-fg9 { text-decoration: line-through; } /* crossed-out */
.term-fg30 { color: #666666; } /* black (but we can't use black, so a diff color) */
.term-fg31 { color: #ff7070; } /* red */
.term-fg32 { color: #b0f986; } /* green */
.term-fg33 { color: #c6c502; } /* yellow */
.term-fg34 { color: #8db7e0; } /* blue */
.term-fg35 { color: #f271fb; } /* magenta */
.term-fg36 { color: #6bf7ff; } /* cyan */
.term-fg30 { color: var(--color-ansi-black); } /* black (but we can't use black, so a diff color) */
.term-fg31 { color: var(--color-ansi-red); } /* red */
.term-fg32 { color: var(--color-ansi-green); } /* green */
.term-fg33 { color: var(--color-ansi-yellow); } /* yellow */
.term-fg34 { color: var(--color-ansi-blue); } /* blue */
.term-fg35 { color: var(--color-ansi-magenta); } /* magenta */
.term-fg36 { color: var(--color-ansi-cyan); } /* cyan */
/* high intense colors */
.term-fgi1 { color: #5ef765; }
.term-fgi90 { color: #838887; } /* grey */
.term-fgi91 { color: #ff3333; } /* red */
.term-fgi92 { color: #00ff00; } /* green */
.term-fgi93 { color: #fffc67; } /* yellow */
.term-fgi94 { color: #6871ff; } /* blue */
.term-fgi95 { color: #ff76ff; } /* magenta */
.term-fgi96 { color: #60fcff; } /* cyan */
.term-fgi1 { color: var(--color-ansi-bright-green); }
.term-fgi90 { color: var(--color-ansi-bright-black); } /* grey */
.term-fgi91 { color: var(--color-ansi-bright-red); } /* red */
.term-fgi92 { color: var(--color-ansi-bright-green); } /* green */
.term-fgi93 { color: var(--color-ansi-bright-yellow); } /* yellow */
.term-fgi94 { color: var(--color-ansi-bright-blue); } /* blue */
.term-fgi95 { color: var(--color-ansi-bright-magenta); } /* magenta */
.term-fgi96 { color: var(--color-ansi-bright-cyan); } /* cyan */
/* background colors */
.term-bg40 { background: #676767; } /* grey */
.term-bg41 { background: #ff4343; } /* red */
.term-bg42 { background: #99ff5f; } /* green */
.term-bg40 { background: var(--color-ansi-bright-black); } /* grey */
.term-bg41 { background: var(--color-ansi-red); } /* red */
.term-bg42 { background: var(--color-ansi-green); } /* green */
/* custom foreground/background combos for readability */
.term-fg31.term-bg40 { color: #f8a39f; }
.term-fg31.term-bg40 { color: var(--color-ansi-bright-red); }
/* xterm colors */
.term-fgx16 { color: #000000; }

17
web_src/css/themes/theme-arc-green.css
View file

@ -122,6 +122,23 @@
--color-pink-dark-2: #a9246f;
--color-brown-dark-2: #835b42;
--color-black-dark-2: #252832;
/* ansi colors used for actions console and console files */
--color-ansi-black: var(--color-black);
--color-ansi-red: var(--color-red);
--color-ansi-green: var(--color-green);
--color-ansi-yellow: var(--color-yellow);
--color-ansi-blue: var(--color-blue);
--color-ansi-magenta: var(--color-pink);
--color-ansi-cyan: var(--color-teal);
--color-ansi-white: var(--color-console-fg-subtle);
--color-ansi-bright-black: var(--color-black-light);
--color-ansi-bright-red: var(--color-red-light);
--color-ansi-bright-green: var(--color-green-light);
--color-ansi-bright-yellow: var(--color-yellow-light);
--color-ansi-bright-blue: var(--color-blue-light);
--color-ansi-bright-magenta: var(--color-pink-light);
--color-ansi-bright-cyan: var(--color-teal-light);
--color-ansi-bright-white: var(--color-console-fg);
/* other colors */
--color-grey: #505665;
--color-grey-light: #a1a6b7;

1
web_src/js/render/ansi.js
View file

@ -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);

2
web_src/js/render/ansi.test.js
View file

@ -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');