From fdab4e3d84e5be616f695e9b2612084379197f28 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 28 Jun 2023 15:38:55 +0200 Subject: [PATCH] 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: Screenshot 2023-06-28 at 00 26 12 Screenshot 2023-06-28 at 00 28 24 --------- Co-authored-by: Giteabot --- web_src/css/base.css | 17 ++++++ web_src/css/features/console.css | 80 +++++++++++++++++++------- web_src/css/themes/theme-arc-green.css | 17 ++++++ web_src/js/render/ansi.js | 1 + web_src/js/render/ansi.test.js | 2 +- 5 files changed, 96 insertions(+), 21 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index ec37c123d..caa6cf5e1 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -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; diff --git a/web_src/css/features/console.css b/web_src/css/features/console.css index b2d8439f8..db187a48d 100644 --- a/web_src/css/features/console.css +++ b/web_src/css/features/console.css @@ -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; } diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 6fc3d0874..cdf493623 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -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; diff --git a/web_src/js/render/ansi.js b/web_src/js/render/ansi.js index 68e8f2c54..75b8cb4fd 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 7542ba0ed..b4793251d 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('blackwhite'); // unclosed + expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('blackwhite'); // unclosed expect(renderAnsi('