Customize ANSI colors for terminal views

[sethaxen]

This PR will use custom colors for all ANSI colors converted to HTML.

The following notebook is a useful test for the stdout terminal view and for cell output (see #3222):

### A Pluto.jl notebook ###
# v0.20.8

using Markdown
using InteractiveUtils

# ╔═╡ 963719bc-210b-4e6c-acf0-f2815a0bf001
using StyledStrings

# ╔═╡ 85affa46-d9d8-4152-87bb-6fc4619f75cb
function test_ansi_colors(io=stdout)
    colors = [:black, :red, :green, :yellow, :blue, :magenta, :cyan, :white]
	colors = reduce(vcat, [[c, Symbol("bright_$c")] for c in colors])
    
    println(io, "\n==== ANSI Color Test ====\n")
    
    # Standard foreground colors
    println(io, "Foreground colors:")
	for color in colors
		print(io, styled"{(fg=$color):■ $color} ")
	end
    println(io)
    
    # Bold standard colors
    println(io, "\nBold foreground colors:")
	for color in colors
		print(io, styled"{(fg=$color),bold:■ $color} ")
	end
    println(io)
    
    # Standard background colors
    println(io, "\nBackground colors:")
	for color in colors
		print(io, styled"{(bg=$color),bold:■ $color} ")
	end
    println(io)
    
    # Sample text for contrast checking
    println(io, "\nSample text in each color:")
    for color in colors
        print(io, styled"{(fg=$color):Lorem ipsum dolet}")
		println(io, styled" {(bg=$color):Lorem ipsum dolet}")
    end
    println(io)
end

# ╔═╡ eabe79aa-43d7-4db4-bfab-f61facd7cd4e
begin
	struct AnsiColorTest end;
	
	function Base.show(io::IO, ::MIME"text/plain", ::AnsiColorTest)
		test_ansi_colors(io)
		return nothing
	end

	AnsiColorTest()
end

# ╔═╡ 816bad99-3b6a-470c-bb8f-47b55e06c906
test_ansi_colors(stdout)

# ╔═╡ 00000000-0000-0000-0000-000000000001
PLUTO_PROJECT_TOML_CONTENTS = """
[deps]
StyledStrings = "f489334b-da3d-4c2e-b8f0-e476e12c162b"
"""

# ╔═╡ 00000000-0000-0000-0000-000000000002
PLUTO_MANIFEST_TOML_CONTENTS = """
# This file is machine-generated - editing it directly is not advised

julia_version = "1.11.5"
manifest_format = "2.0"
project_hash = "240133d36b01b970fdcaab6d49e90ccb1315cdea"

[[deps.StyledStrings]]
uuid = "f489334b-da3d-4c2e-b8f0-e476e12c162b"
version = "1.11.0"
"""

# ╔═╡ Cell order:
# ╠═963719bc-210b-4e6c-acf0-f2815a0bf001
# ╠═85affa46-d9d8-4152-87bb-6fc4619f75cb
# ╠═eabe79aa-43d7-4db4-bfab-f61facd7cd4e
# ╠═816bad99-3b6a-470c-bb8f-47b55e06c906
# ╟─00000000-0000-0000-0000-000000000001
# ╟─00000000-0000-0000-0000-000000000002

To-do

• Configure ansi_up to use CSS classes
• Instantiate all colors to the same defaults used by ansi_up
• Minimally modify colors to improve legibility of stdout terminal view in light and dark mode
• Further modify colors to improve legibility of cell output (not supported, to be completed in Convert plain-text output with ANSI codes to HTML #3222)

Try this Pull Request!

Open Julia and type:

julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/sethaxen/Pluto.jl", rev="ansiclasses")
julia> using Pluto

[sethaxen]

Probably should switch to using CSS variables.

[sethaxen]

@fonsp As far as I can tell, the only relevant background color variables are --pkg-terminal-bg-color, which is almost identical for both dark and light them and the --inner and --outer variables associated with pluto-log-dot.Stdout, which is identical for the two themes. So until #3222 is there really a need for light-theme and dark-theme customizations? Seems more that theme-independent shared customizations for the stdout terminal view are needed.

[fonsp]

Oh tricky... that means that we need auto-light-dark for cell output, and always-dark for pkg terminals and stdout. That probably means not using the light.css and dark.css files. Not sure atm!

[sethaxen]

Oh tricky... that means that we need auto-light-dark for cell output, and always-dark for pkg terminals and stdout. That probably means not using the light.css and dark.css files. Not sure atm!

auto-light-dark I can add directly to #894 since I can only test it there anyways. I'll modify this PR to just handle terminals and stdout then.

[sethaxen]

I've now adjusted the ANSI colors for the terminal stdout view. I'm not certain how to visualize the colors in the pkg terminal view, so I've left those colors to the defaults.

Here are the stdout colors using the example notebook given above:

The hardest to see are the ones with the default text color as foreground and ANSI color as background. This could be further improved by mapping the same ANSI color to different foreground and background colors (e.g. bright_white in the foreground is a different color than bright_white in the background), but I personally prefer to keep them the same. It could alternatively be improved by changing the default text color when paired with a background that makes it hard to read, but I also am not a big fan of this.

[fonsp]

Nice, thanks!

I notice that the accessibility issue is still there, e.g.

But let me look into how all of this styling works...

On the MacOS terminal app with default colors, it looks like:

The problematic color is "bright black" which was probably chosen to be a "faded color on either background".

And it looks like the terminal color thing is not meant to be readable in any combination of colors, e.g. "fg:black" is not readable in dark mode: