loading up the forgejo repo on tangled to test page performance
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>
authored by
silverwind
Giteabot
and committed by
GitHub
fdab4e3d
c0826894
+96
-21
+17
web_src/css/base.css
+17
web_src/css/base.css
···
137
137
--color-pink-dark-2: #c21e7b;
138
138
--color-brown-dark-2: #845232;
139
139
--color-black-dark-2: #161617;
140
+
/* ansi colors used for actions console and console files */
141
+
--color-ansi-black: var(--color-black);
142
+
--color-ansi-red: var(--color-red);
143
+
--color-ansi-green: var(--color-green);
144
+
--color-ansi-yellow: var(--color-yellow);
145
+
--color-ansi-blue: var(--color-blue);
146
+
--color-ansi-magenta: var(--color-pink);
147
+
--color-ansi-cyan: var(--color-teal);
148
+
--color-ansi-white: var(--color-console-fg-subtle);
149
+
--color-ansi-bright-black: var(--color-black-light);
150
+
--color-ansi-bright-red: var(--color-red-light);
151
+
--color-ansi-bright-green: var(--color-green-light);
152
+
--color-ansi-bright-yellow: var(--color-yellow-light);
153
+
--color-ansi-bright-blue: var(--color-blue-light);
154
+
--color-ansi-bright-magenta: var(--color-pink-light);
155
+
--color-ansi-bright-cyan: var(--color-teal-light);
156
+
--color-ansi-bright-white: var(--color-console-fg);
140
157
/* other colors */
141
158
--color-grey: #707070;
142
159
--color-grey-light: #838383;
+60
-20
web_src/css/features/console.css
+60
-20
web_src/css/features/console.css
···
24
24
}
25
25
}
26
26
27
-
.term-fg2 { color: #838887; } /* faint (decreased intensity) - same as gray really */
27
+
/* ansi_up colors used in actions */
28
+
29
+
.ansi-black-fg { color: var(--color-ansi-black); }
30
+
.ansi-red-fg { color: var(--color-ansi-red); }
31
+
.ansi-green-fg { color: var(--color-ansi-green); }
32
+
.ansi-yellow-fg { color: var(--color-ansi-yellow); }
33
+
.ansi-blue-fg { color: var(--color-ansi-blue); }
34
+
.ansi-magenta-fg { color: var(--color-ansi-magenta); }
35
+
.ansi-cyan-fg { color: var(--color-ansi-cyan); }
36
+
.ansi-white-fg { color: var(--color-ansi-white); }
37
+
38
+
.ansi-bright-black-fg { color: var(--color-ansi-bright-black); }
39
+
.ansi-bright-red-fg { color: var(--color-ansi-bright-red); }
40
+
.ansi-bright-green-fg { color: var(--color-ansi-bright-green); }
41
+
.ansi-bright-yellow-fg { color: var(--color-ansi-bright-yellow); }
42
+
.ansi-bright-blue-fg { color: var(--color-ansi-bright-blue); }
43
+
.ansi-bright-magenta-fg { color: var(--color-ansi-bright-magenta); }
44
+
.ansi-bright-cyan-fg { color: var(--color-ansi-bright-cyan); }
45
+
.ansi-bright-white-fg { color: var(--color-ansi-bright-white); }
46
+
47
+
.ansi-black-bg { background-color: var(--color-ansi-black); }
48
+
.ansi-red-bg { background-color: var(--color-ansi-red); }
49
+
.ansi-green-bg { background-color: var(--color-ansi-green); }
50
+
.ansi-yellow-bg { background-color: var(--color-ansi-yellow); }
51
+
.ansi-blue-bg { background-color: var(--color-ansi-blue); }
52
+
.ansi-magenta-bg { background-color: var(--color-ansi-magenta); }
53
+
.ansi-cyan-bg { background-color: var(--color-ansi-cyan); }
54
+
.ansi-white-bg { background-color: var(--color-ansi-white); }
55
+
56
+
.ansi-bright-black-bg { background-color: var(--color-ansi-bright-black); }
57
+
.ansi-bright-red-bg { background-color: var(--color-ansi-bright-red); }
58
+
.ansi-bright-green-bg { background-color: var(--color-ansi-bright-green); }
59
+
.ansi-bright-yellow-bg { background-color: var(--color-ansi-bright-yellow); }
60
+
.ansi-bright-blue-bg { background-color: var(--color-ansi-bright-blue); }
61
+
.ansi-bright-magenta-bg { background-color: var(--color-ansi-bright-magenta); }
62
+
.ansi-bright-cyan-bg { background-color: var(--color-ansi-bright-cyan); }
63
+
.ansi-bright-white-bg { background-color: var(--color-ansi-bright-white); }
64
+
65
+
/* term colors used in console rendering */
66
+
67
+
.term-fg2 { color: var(--color-ansi-bright-black); } /* faint (decreased intensity) - same as gray really */
28
68
.term-fg3 { font-style: italic; } /* italic */
29
69
.term-fg4 { text-decoration: underline; } /* underline */
30
70
.term-fg5 { animation: blink-animation 1s steps(3, start) infinite; } /* blink */
31
71
.term-fg9 { text-decoration: line-through; } /* crossed-out */
32
72
33
-
.term-fg30 { color: #666666; } /* black (but we can't use black, so a diff color) */
34
-
.term-fg31 { color: #ff7070; } /* red */
35
-
.term-fg32 { color: #b0f986; } /* green */
36
-
.term-fg33 { color: #c6c502; } /* yellow */
37
-
.term-fg34 { color: #8db7e0; } /* blue */
38
-
.term-fg35 { color: #f271fb; } /* magenta */
39
-
.term-fg36 { color: #6bf7ff; } /* cyan */
73
+
.term-fg30 { color: var(--color-ansi-black); } /* black (but we can't use black, so a diff color) */
74
+
.term-fg31 { color: var(--color-ansi-red); } /* red */
75
+
.term-fg32 { color: var(--color-ansi-green); } /* green */
76
+
.term-fg33 { color: var(--color-ansi-yellow); } /* yellow */
77
+
.term-fg34 { color: var(--color-ansi-blue); } /* blue */
78
+
.term-fg35 { color: var(--color-ansi-magenta); } /* magenta */
79
+
.term-fg36 { color: var(--color-ansi-cyan); } /* cyan */
40
80
41
81
/* high intense colors */
42
-
.term-fgi1 { color: #5ef765; }
43
-
.term-fgi90 { color: #838887; } /* grey */
44
-
.term-fgi91 { color: #ff3333; } /* red */
45
-
.term-fgi92 { color: #00ff00; } /* green */
46
-
.term-fgi93 { color: #fffc67; } /* yellow */
47
-
.term-fgi94 { color: #6871ff; } /* blue */
48
-
.term-fgi95 { color: #ff76ff; } /* magenta */
49
-
.term-fgi96 { color: #60fcff; } /* cyan */
82
+
.term-fgi1 { color: var(--color-ansi-bright-green); }
83
+
.term-fgi90 { color: var(--color-ansi-bright-black); } /* grey */
84
+
.term-fgi91 { color: var(--color-ansi-bright-red); } /* red */
85
+
.term-fgi92 { color: var(--color-ansi-bright-green); } /* green */
86
+
.term-fgi93 { color: var(--color-ansi-bright-yellow); } /* yellow */
87
+
.term-fgi94 { color: var(--color-ansi-bright-blue); } /* blue */
88
+
.term-fgi95 { color: var(--color-ansi-bright-magenta); } /* magenta */
89
+
.term-fgi96 { color: var(--color-ansi-bright-cyan); } /* cyan */
50
90
51
91
/* background colors */
52
-
.term-bg40 { background: #676767; } /* grey */
53
-
.term-bg41 { background: #ff4343; } /* red */
54
-
.term-bg42 { background: #99ff5f; } /* green */
92
+
.term-bg40 { background: var(--color-ansi-bright-black); } /* grey */
93
+
.term-bg41 { background: var(--color-ansi-red); } /* red */
94
+
.term-bg42 { background: var(--color-ansi-green); } /* green */
55
95
56
96
/* custom foreground/background combos for readability */
57
-
.term-fg31.term-bg40 { color: #f8a39f; }
97
+
.term-fg31.term-bg40 { color: var(--color-ansi-bright-red); }
58
98
59
99
/* xterm colors */
60
100
.term-fgx16 { color: #000000; }
+17
web_src/css/themes/theme-arc-green.css
+17
web_src/css/themes/theme-arc-green.css
···
122
122
--color-pink-dark-2: #a9246f;
123
123
--color-brown-dark-2: #835b42;
124
124
--color-black-dark-2: #252832;
125
+
/* ansi colors used for actions console and console files */
126
+
--color-ansi-black: var(--color-black);
127
+
--color-ansi-red: var(--color-red);
128
+
--color-ansi-green: var(--color-green);
129
+
--color-ansi-yellow: var(--color-yellow);
130
+
--color-ansi-blue: var(--color-blue);
131
+
--color-ansi-magenta: var(--color-pink);
132
+
--color-ansi-cyan: var(--color-teal);
133
+
--color-ansi-white: var(--color-console-fg-subtle);
134
+
--color-ansi-bright-black: var(--color-black-light);
135
+
--color-ansi-bright-red: var(--color-red-light);
136
+
--color-ansi-bright-green: var(--color-green-light);
137
+
--color-ansi-bright-yellow: var(--color-yellow-light);
138
+
--color-ansi-bright-blue: var(--color-blue-light);
139
+
--color-ansi-bright-magenta: var(--color-pink-light);
140
+
--color-ansi-bright-cyan: var(--color-teal-light);
141
+
--color-ansi-bright-white: var(--color-console-fg);
125
142
/* other colors */
126
143
--color-grey: #505665;
127
144
--color-grey-light: #a1a6b7;
+1
web_src/js/render/ansi.js
+1
web_src/js/render/ansi.js
···
11
11
// the output of future renders, because ansi_up is stateful and remembers things like
12
12
// unclosed opening tags for colors.
13
13
const ansi_up = new (AnsiUp.default || AnsiUp)();
14
+
ansi_up.use_classes = true;
14
15
15
16
if (line.endsWith('\r\n')) {
16
17
line = line.substring(0, line.length - 2);
+1
-1
web_src/js/render/ansi.test.js
+1
-1
web_src/js/render/ansi.test.js
···
8
8
expect(renderAnsi('\r')).toEqual('');
9
9
expect(renderAnsi('\rx\rabc')).toEqual('x\nabc');
10
10
expect(renderAnsi('\rabc\rx\r')).toEqual('abc\nx');
11
-
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
11
+
expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span class="ansi-black-fg">black</span><span class="ansi-white-fg">white</span>'); // unclosed
12
12
expect(renderAnsi('<script>')).toEqual('<script>');
13
13
expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
14
14
expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');