Border color of tabs is incorrect

[gsmet]

If you have a look at https://quarkus.io/guides/validation , you will see that for the tabs, sometimes the border color is not consistent between the tab and the block.

Not fixing myself as I'm not sure what needs fixing (if the border should be the bright one or the dark one):

[gsmet]

@insectengine could you have a look at this one? Not sure if it's related to the work on the dark theme but I don't remember having seen this issue before.

[insectengine]

@gsmet - This actually brings up a different issue. The way we mix the uses of the tabs and content is problematic. Normally, the active tab is the color of the enclosed content and while the off states are grey/toned down but we have opposite.

I think it was done this way because we're mixing out usages. We have two conflicting usages.

1. Tabset connected with div with page background full of content with pre content with a tinted background.
2. Tabset connected directly to the pre content with a tinted background.

We could inclose the pre content inside another div to replicate the first usage but that means changing ALL of the usages across the guides/site. This is a non-starter as it doesn't prevent someone from doing it the old way in a new guide.

The second/and cleanest solution would be to change the div background color to match the pre background. This way, the tabset looks connected across both usages. the downside is we don't have a visual difference between the two types.

I've worked up the second solution and will attach screen grabs in both light and dark mode.

[insectengine]

changes added to the color mode updates: https://github.com/quarkusio/quarkusio.github.io/pull/1962/commits/871065bca236c3bb0bd46807aeb1629693f8c776