Adding tab borders

[matthewshaver]

What are you changing in this pull request and why?

Enhancing tabs:

• Places borders around individual tabs
• Sets a unique background color for clicked and hovered tabs
• Puts a border around the entire table area so it's clear where tabbed content ends

Closes #3889

Checklist

• I have reviewed the Content style guide so my content adheres to these guidelines.
• The topic I'm writing about is for specific dbt version(s) and I have versioned it according to the version a whole page and/or version a block of content guidelines.
• I have added checklist item(s) to this list for anything anything that needs to happen before this PR is merged, such as "needs technical review" or "change base branch."
• The content in this PR requires a dbt release note, so I added one to the release notes page.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs-getdbt-com	✅ Ready (Inspect)	Visit Preview	Dec 12, 2024 3:26pm

[mirnawong1]

looks good to me @matthewshaver !

[JKarlavige]

Thanks for taking this on Matt. Left some comments with some recommended adjustments. To try and summarize them i'll list them below:

• Swapping hard-coded hex values for available color variables at the top of this file
• Adjusting tab text color on hover
• Adjusting tab border color on hover
• Adjusting section border color in light mode

Let me know if you have any questions!

[JKarlavige]

Rather than using hard-coded hex values, can we choose from the existing variables available at the top of this custom.css file? That will help us stay within our brand colors, while also making it easier to update colors across the board if needed down the road.

[JKarlavige]

In an effort to reduce the amount of custom colors used, would we be able to swap this with the var(--color-white) variable. That color is close enough to white where it shouldn't be too noticeable.

[JKarlavige]

Same note about using available color variables here, can we swap all uses of #ccc with a similar color currently available as a variable?

[JKarlavige]

To avoid using black (not a brand color), can we swap this and anywhere #000 is used with --color-primary-blue, which is set to #262a38?

[JKarlavige]

#d95b3b is not an available brand color. Could we swap this with #DE5D43 or #ff694a? #ff694a has a variable already, but a new variable would need to be created for #DE5D43 if you go with that one.

[JKarlavige]

Also, on hover, the lighter text is still set on the tab while the orange background is applied. This doesn't pass the WCAG accessibility check for contrast link here. The text color may need to be updated on hover to match the color when the tab is active.

[JKarlavige]

And on hover, can we have the border color update to match the background color as well? Similar to how the border updates for the active tab.

[JKarlavige]

In light mode, can we use a lighter color for the border? The var(--ifm-toc-border-color) variable might be a good option, which is the current border color for the table of contents.