Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Border color of tabs is incorrect #1965

Open
gsmet opened this issue Apr 29, 2024 · 3 comments
Open

Border color of tabs is incorrect #1965

gsmet opened this issue Apr 29, 2024 · 3 comments

Comments

@gsmet
Copy link
Member

gsmet commented Apr 29, 2024

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):

Screenshot 2024-04-29 at 17-28-49 Validation with Hibernate Validator

@gsmet
Copy link
Member Author

gsmet commented Apr 29, 2024

@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
Copy link
Collaborator

insectengine commented Apr 30, 2024

@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.
tabs_lightmode
tabs_darkmode

@insectengine
Copy link
Collaborator

changes added to the color mode updates:
871065b

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants