Colorful language breakdown

[spenserblack]

Just an idea that popped into my head. Making discussion to see if its worth doing.

I'm thinking that, like how GitHub uses linguist to have a colored bar of languages, we could do the same. Each of the languages currently has a "primary" color (the 1st defined color), and we already break down the percentages, so most of the work is already done. Like the current color bar, it would be a series of colored blocks.

For example, if a project is 50% JavaScript, 40% Html, and 10% Sh, then there would be 5 yellow blocks, 4 red blocks, and 1 green block.

The biggest downside that I can think of is that there could be some confusion/clutter with both a language breakdown colored bar and the neofetch-like color bar.

[o2sh]

That's a great idea!

Each of the languages currently has a "primary" color (the 1st defined color), and we already break down the percentages, so most of the work is already done. Like the current color bar, it would be a series of colored blocks.

We may have conflicts if multiple languages - present in the distribution - share the same primary color (especially if true color isn't supported). We could instead use the same set of colors every time 🤔

The biggest downside that I can think of is that there could be some confusion/clutter with both a language breakdown colored bar and the neofetch-like color bar.

We can hide it by default

[spenserblack]

We may have conflicts if multiple languages - present in the distribution - share the same primary color (especially if true color isn't supported). We could instead use the same set of colors every time

That's a good point 🤔 A project with a Rust backend and HTML + CoffeeScript frontend would just be red, red, and red 😆
The reason I initially leaned towards using the language's primary color is because I think it's what users might expect, since git clients like GitHub and GitLab break down languages by color. But our colors are very limited, as you pointed out. Much more limited than any git client's CSS 😅

We could possibly use the different opacities or heights of block elements to separate two languages that may be the same color. Maybe something like this.

▇▇▇▇▇▇▇▅▅▂
▇ TypeScript
▅ HTML
▂ JavaScript

Or a separator element could be used to separate languages that could have the same color.

If we have different block styles, we could use the primary language's primary color, to be congruous with the coloring of the labels.

I'd like to get thoughts on including a legend to help disambiguate the language breakdown, regardless of what colors/block styles we choose to use.

[o2sh]

You're right, we should add a legend to make it easier for the user to identify which colour corresponds to which language - in the same spirit of GitHub.

With a legend in place, maybe we could simplify and use true colors when available (low risk of conflicts) and fallback to a default 8 bit color palette otherwise.

[spenserblack]

Sounds good to me! I'll convert this discussion to an issue.