posit-dev / posit-dev/open-source-website
Review tabset styling
Open
@gregswinehart is already working on this.
Since Mar 18, 2026.
blog
- Dominant language
- HTML
- Stars
- 55
- Forks
- 24
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 17
Description
Styling tabsets is currently minimal and I didn't do anything to officially reflect theme.
I added this to main.css:
/* Tabsets */
.panel-tabset {
margin: 1.5rem 0;
}
.panel-tabset-tabby {
display: flex;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
border-bottom: 1px solid var(--color-gray-200);
}
.dark .panel-tabset-tabby {
border-bottom-color: var(--color-gray-700);
}
.panel-tabset-tabby li {
margin: 0;
padding: 0;
}
.panel-tabset-tabby li a {
display: block;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-500);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.panel-tabset-tabby li a:hover {
color: var(--color-gray-700);
}
.dark .panel-tabset-tabby li a {
color: var(--color-gray-400);
}
.dark .panel-tabset-tabby li a:hover {
color: var(--color-gray-200);
}
.panel-tabset-tabby li.active a,
.panel-tabset-tabby li a[aria-selected="true"] {
color: var(--color-blue-600);
border-bottom-color: var(--color-blue-600);
}
.dark .panel-tabset-tabby li.active a,
.dark .panel-tabset-tabby li a[aria-selected="true"] {
color: var(--color-blue-400);
border-bottom-color: var(--color-blue-400);
}
Some example posts that use tabsets:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.