Skip to content

fix: sidebar and theme picker bugs (UCD-180) #51

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.

Sign up for GitHub

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

Merged
ds-giusy merged 6 commits into from
Aug 5, 2026
Merged

fix: sidebar and theme picker bugs (UCD-180) #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c2dc853
chore: ignore mkdocs-document-dates cache files
ds-giusy Aug 5, 2026
0d7a3f0
fix: force-close ToC tooltip on click
ds-giusy Aug 5, 2026
eee6c90
fix: cap reading measure to stop text reflow during sidebar transitions
ds-giusy Aug 5, 2026
86ade32
fix: hide ToC toggle wrapper below 60em
ds-giusy Aug 5, 2026
fc1f857
fix: don't transition left on content-width toggle button
ds-giusy Aug 5, 2026
995e903
revert: restore single-button theme cycle toggle
ds-giusy Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,7 @@ wheels/
node_modules/

.DS_Store

# mkdocs-document-dates cache
docs/.dates_cache.jsonl
docs/.gitattributes
2 changes: 2 additions & 0 deletions mkdocs_doubleslash_theme/assets/javascripts/toc-collapse-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,8 @@
button.addEventListener("click", function () {
setTocCollapsed(!isTocCollapsed());
updateButtonState(button);
tooltipControl.clearAutoHideTimer();
tooltipControl.hideIfUnpinned(true);
document.dispatchEvent(new CustomEvent("ds-toc-collapse-change"));
});

Expand Down
183 changes: 28 additions & 155 deletions mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,14 @@
transition: border-color var(--ds-motion-duration) ease;
}

/* Fixed reading measure: as the sidebars collapse/expand, .md-content__inner
is a flex item that keeps resizing, so the prose keeps re-wrapping for the
whole animation. Capping it stops the reflow and is a readability win on
wide screens either way — .md-grid stays wide for tables/diagrams. */
.md-content__inner {
max-width: 80ch;
}

.md-content .md-typeset h1,
.md-content .md-typeset h2,
.md-content .md-typeset h3,
Expand Down Expand Up @@ -389,166 +397,24 @@
width: 1rem;
}

/* switch-icon-3 — source: docs/components-html-css/Molecules/switch.md (Icon-3) */
.ds-switch-wrapper.md-header__option {
width: auto;
flex-shrink: 0;
overflow: visible;
}

.ds-switch-wrapper {
padding: 0;
margin: 0 var(--ds-spacing-md) 0 0;
}

.ds-switch-wrapper *,
.ds-switch-wrapper *::before,
.ds-switch-wrapper *::after {
box-sizing: border-box;
}

.ds-switch-wrapper .switch-field {
display: flex;
overflow: hidden;
position: relative;
border-radius: var(--ds-rounded-pill);
align-items: center;
user-select: none;
}

.ds-switch-wrapper .switch-field input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
height: 0.0625rem;
width: 0.0625rem;
border: 0;
overflow: hidden;
}

.ds-switch-wrapper .switch-field label.option {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 2rem;
width: 2rem;
min-width: 0;
background-color: var(--ds-color-primary);
color: var(--ds-color-on-primary);
font: normal normal 600 0.75rem/1.563rem Inter, Arial, Helvetica, sans-serif;
text-align: center;
padding: 0.25rem;
margin-right: -0.0625rem;
cursor: pointer;
transition: all 0.1s ease-in-out;
}

.ds-switch-wrapper .switch-field label.option:last-of-type {
margin-right: 0;
}

.ds-switch-wrapper .switch-field label.option:hover {
cursor: pointer;
}

.ds-switch-wrapper .switch {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.25rem;
padding: 0;
background-color: var(--ds-color-on-primary);
color: var(--ds-color-primary);
border-radius: var(--ds-rounded-pill);
position: absolute;
z-index: 2;
border: 0;
transition: 0.3s ease all;
left: 0.125rem;
pointer-events: none;
.md-grid {
max-width: min(1800px, 100% - 4rem);
}

.ds-switch-wrapper .switch__icon {
/* The wrapper (button + tooltip) has no layout below 60em, where the toggle
isn't offered — without this, the tooltip text renders as unstyled,
always-visible text in the mobile page flow. */
.ds-toc-toggle-wrapper {
display: none;
align-items: center;
justify-content: center;
}

.ds-switch-wrapper .switch__icon svg {
height: 0.875rem;
width: 0.875rem;
}

.ds-switch-wrapper svg.lucide-circle-half path {
fill: currentColor;
}

.ds-switch-wrapper .switch-field:hover .switch {
transform: translateX(0.125rem);
}

.ds-switch-wrapper:has(#__palette_1:checked) .switch-field:hover .switch {
transform: none;
}

.ds-switch-wrapper:has(#__palette_2:checked) .switch-field:hover .switch {
transform: translateX(-0.125rem);
}

.ds-switch-wrapper:has(#__palette_0:checked) .switch {
left: 0.125rem;
}

.ds-switch-wrapper:has(#__palette_1:checked) .switch {
left: 2.0625rem;
}

.ds-switch-wrapper:has(#__palette_2:checked) .switch {
left: 4rem;
}

.ds-switch-wrapper:has(#__palette_0:checked) .switch__icon--0,
.ds-switch-wrapper:has(#__palette_1:checked) .switch__icon--1,
.ds-switch-wrapper:has(#__palette_2:checked) .switch__icon--2 {
display: flex;
}

.ds-switch-wrapper .switch-field label.option:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--ds-color-on-primary),
0 0 0 4px var(--ds-color-primary);
border-radius: 2rem;
}

/* Dark mode: darker track distinct from header, rounded sliding pill for the active segment */
[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field {
background-color: var(--ds-color-dark-canvas);
}

[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field label.option {
background-color: var(--ds-color-dark-canvas);
color: var(--ds-color-dark-clickable);
}

[data-md-color-scheme="slate"] .ds-switch-wrapper .switch {
background-color: var(--ds-color-dark-container);
color: var(--ds-color-dark-clickable);
}

[data-md-color-scheme="slate"] .ds-switch-wrapper .switch-field label.option:focus-visible {
box-shadow:
0 0 0 2px var(--ds-color-dark-canvas),
0 0 0 4px var(--ds-color-dark-clickable);
}

.md-grid {
max-width: min(1800px, 100% - 4rem);
}

/* ToC collapse toggle: available wherever Material renders the secondary
sidebar (>= 60em), not just on the wide desktop layout (>= 76.25em). */
@media screen and (min-width: 60em) {
.ds-toc-toggle-wrapper {
display: block;
}

.md-sidebar--secondary {
transition:
width var(--ds-motion-duration) ease,
Expand Down Expand Up @@ -753,7 +619,15 @@
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
cursor: pointer;
transition: var(--ds-motion-transition);
/* Not `--ds-motion-transition` (transitions `all`): JS repositions this
button via `left` on every ResizeObserver tick to track the sidebar
collapse. Transitioning `left` too would restart a 300ms interpolation
on each tick — invisible in Chrome (fires ~every frame) but visible as
lag behind the sidebar in Firefox/Safari (fewer, batched ticks). */
transition:
color var(--ds-motion-duration) ease,
background-color var(--ds-motion-duration) ease,
border-color var(--ds-motion-duration) ease;
}

.ds-content-width-toggle:hover {
Expand Down Expand Up @@ -805,8 +679,7 @@
.md-main__inner,
.md-content,
.ds-content-width-toggle,
.ds-toc-toggle,
.ds-switch-wrapper .switch {
.ds-toc-toggle {
transition: none !important;
}
}
Expand Down
1 change: 0 additions & 1 deletion mkdocs_doubleslash_theme/overrides/.icons/circle-half.svg
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions mkdocs_doubleslash_theme/overrides/.icons/lucide/sun-moon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 0 additions & 56 deletions mkdocs_doubleslash_theme/overrides/partials/palette.html
View file
Open in desktop

This file was deleted.

26 changes: 13 additions & 13 deletions mkdocs_doubleslash_theme/plugin.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,11 @@ def on_config(self, config):
# Only set palette if user hasn't defined their own
if not theme.get("palette"):
theme["palette"] = [
{
"media": "(prefers-color-scheme: dark)",
"primary": "custom",
"accent": "custom",
"scheme": "slate",
"toggle": {
"icon": "lucide/moon-star",
"name": "Dark mode",
},
},
{
"media": "(prefers-color-scheme)",
"toggle": {
"icon": "circle-half",
"name": "System color scheme",
"icon": "lucide/sun-moon",
"name": "Switch to light mode",
},
},
{
Expand All @@ -62,7 +52,17 @@ def on_config(self, config):
"scheme": "default",
"toggle": {
"icon": "lucide/sun",
"name": "Light mode",
"name": "Switch to dark mode",
},
},
{
"media": "(prefers-color-scheme: dark)",
"primary": "custom",
"accent": "custom",
"scheme": "slate",
"toggle": {
"icon": "lucide/moon-star",
"name": "Switch to system preference",
},
},
]
Expand Down
Loading