Improve code highlighting in web UI

[pat-s]

@woodpecker-ci/maintainers as this might be another controversial design decision, please vote on the initial post of this PR with 👍 and 👎

---

This introduces a custom color. However, I found no color of the current palette to be matching here and/or creating a good contrast.
In addition, I slightly tweaked the padding and rounding values.

Before

After

[xoxys]

Im not against changing the code block color but not this way. If we want a new one we should create a new color theme with --wp-code-{100,200,300}.

[xoxys]

Keep in mind its used in various other places as well.

[pat-s]

I don't think we need a full palette for a single light/dark code highlighting color.

I agree the naming is not optimal and doesn't fit into the current schema. Open for suggestions.

[xoxys]

We dont need a full pallete right now we only have 100 and 200 just change the color of these.

[pat-s]

100 and 200 are usually shades of bigger palette with 100 being the lightest value. We don't have a "real" palette for wp-code. Yes, two values exist

  --wp-code-100: theme('colors.int-wp-secondary.300');
  --wp-code-200: theme('colors.int-wp-secondary.600');

and yes, these again refer to another palette, but these values are also somewhat arbitrary and IMO not matching well in the UI. Hence I don't think that mimicking a palette is the best way forward here.

There should only be one color for wp-code ever IMO, for both light and dark. How about consolidating the two existing ones to one definition named wp-code? The two existing ones are only used in one instance in the code, respectively.

[xoxys]

We are getting lost in discussions again. At the end, I don't really care, and wp-code works for me as well.

[pat-s]

Hm, I think this was just a normal discussion? You brought up some reasons, I replied and shared my thoughts. It is not even about subjective UI but code syntax, so I'd say such discussions are normal (and needed and good).

[xoxys]

Sorry this was not meant to be offensive or rude :) The color is only used in one location. While I have some personal preferences, I don't care much enough to discuss further how it is done in detail. wp-code works for me we can still change it later on if there is any need for a color palette. Sorry if my last message was misleading.

[pat-s]

Consolidated all mixed wp-code definitions into wp-code-bg now, which aligns with the logic of wp-code-text.

@xoxys Is this acceptable in your view? Yes, the color is custom and not derived from the main colour palettes but I don't think that any value from these matches well here.

Need to run the PR image first to see in which places the changes trigger a change.

[xoxys]

Fine for me.

[pat-s]

OK, my recent changes also change the bg color of the main log container. More work needed.

[xoxys]

Ah yeah, I remember. That's why it's a bit questionable whether we really want to change the color, but I'm still fine if we want to change it only for real code blocks.

[pat-s]

@xoxys I've adjusted the color scheme ordering, which is why most bg classes are changed.

But yeah, as I don't need these colors for the code-box adjustments, it might be easier to revert them again to keep the changes smaller.

[pat-s]

Hm, something is still off with the prettier tailwind sorting in main and here even after merging main.

[pat-s]

Hm, something is still off with the prettier tailwind sorting in main and here even after merging main.

prettier tailwind sorting seems to be quite forgiving, e.g. it doesn't enforce within group-sorting and some other instances with overrides were also not accounted for in terms of being at the beginning or end of the class definition.

[pat-s]

@xoxys FYI you're still on block here.

[xoxys]

Yes would like to give it a final test but will unblock.

Unblock

[woodpecker-bot]

Tearing down https://woodpecker-ci-woodpecker-pr-4447.surge.sh