From c2dc8534790ef0f91ebc607d727742522a41306d Mon Sep 17 00:00:00 2001 From: Giuseppina Crimi Date: Wed, 5 Aug 2026 09:28:57 +0200 Subject: [PATCH 1/6] chore: ignore mkdocs-document-dates cache files docs/.dates_cache.jsonl and docs/.gitattributes are generated locally by the mkdocs-document-dates git hook and don't belong in the repo. --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index 4b73cde..e893185 100644 --- a/.gitignore +++ b/.gitignore @@ -17,3 +17,7 @@ wheels/ node_modules/ .DS_Store + +# mkdocs-document-dates cache +docs/.dates_cache.jsonl +docs/.gitattributes From 0d7a3f0ec94afc4d85f80488e94900a8d70fe720 Mon Sep 17 00:00:00 2001 From: Giuseppina Crimi Date: Wed, 5 Aug 2026 09:29:13 +0200 Subject: [PATCH 2/6] fix: force-close ToC tooltip on click Clicking the toggle focuses it, and focus pinned the tooltip open via shouldKeepTooltipVisible. The auto-hide timer then declined to hide it and never rescheduled, so it stayed open until focus moved elsewhere. UCD-180 --- .../assets/javascripts/toc-collapse-toggle.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/mkdocs_doubleslash_theme/assets/javascripts/toc-collapse-toggle.js b/mkdocs_doubleslash_theme/assets/javascripts/toc-collapse-toggle.js index cbeeef6..7c37092 100644 --- a/mkdocs_doubleslash_theme/assets/javascripts/toc-collapse-toggle.js +++ b/mkdocs_doubleslash_theme/assets/javascripts/toc-collapse-toggle.js @@ -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")); }); From eee6c905b9d9db85b0df4fe709a9f5beaa69a0ba Mon Sep 17 00:00:00 2001 From: Giuseppina Crimi Date: Wed, 5 Aug 2026 09:29:40 +0200 Subject: [PATCH 3/6] fix: cap reading measure to stop text reflow during sidebar transitions .md-content__inner is a flex item that keeps resizing while the ToC or nav sidebar collapses/expands, so paragraphs re-wrap continuously for the whole 300ms transition. Capping the reading width also improves it as a fixed baseline, independent of the animation. UCD-180 --- .../assets/stylesheets/mkdocs-doubleslash-theme.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css index ccb892b..863ca53 100644 --- a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css +++ b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css @@ -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, From 86ade327c029a149182d907828fc1b3d2da40c85 Mon Sep 17 00:00:00 2001 From: Giuseppina Crimi Date: Wed, 5 Aug 2026 09:29:55 +0200 Subject: [PATCH 4/6] fix: hide ToC toggle wrapper below 60em All layout rules for .ds-toc-toggle-wrapper (including hiding the tooltip) lived inside the >= 60em media query. Below that breakpoint the tooltip text had no display:none and rendered as unstyled, always-visible text in the mobile page flow. UCD-180 --- .../assets/stylesheets/mkdocs-doubleslash-theme.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css index 863ca53..32975a7 100644 --- a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css +++ b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css @@ -554,9 +554,20 @@ max-width: min(1800px, 100% - 4rem); } +/* 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; +} + /* 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, From fc1f857d95f3d32ac11f4c84312ecb64f60526ca Mon Sep 17 00:00:00 2001 From: Giuseppina Crimi Date: Wed, 5 Aug 2026 09:30:12 +0200 Subject: [PATCH 5/6] fix: don't transition left on content-width toggle button JS repositions the button via left on every ResizeObserver tick while the sidebar collapses, and --ds-motion-transition covers all properties. Each JS update restarted a fresh 300ms interpolation on left. Chrome fires ResizeObserver on nearly every frame so this was invisible there, but Firefox/Safari batch fewer callbacks, making the button visibly lag behind the sidebar animation. UCD-180 --- .../assets/stylesheets/mkdocs-doubleslash-theme.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css index 32975a7..c0ccb71 100644 --- a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css +++ b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css @@ -772,7 +772,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 { From 995e9037dfe512b44e90803b8e73844ffbec1f73 Mon Sep 17 00:00:00 2001 From: Giuseppina Crimi Date: Wed, 5 Aug 2026 09:30:58 +0200 Subject: [PATCH 6/6] revert: restore single-button theme cycle toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Jonas preferred the original toggle over the segmented pill switcher introduced with the collapsible sidebars (UCD-180 review feedback). Deleting the override partial falls back to Material's stock palette.html; the palette order/icons/labels and the now-unused circle-half icon go back to their pre-pill state. sun-moon.svg was never removed by the pill design, only left unused — restored from before the pill switch existed. UCD-180 --- .../stylesheets/mkdocs-doubleslash-theme.css | 156 +----------------- .../overrides/.icons/circle-half.svg | 1 - .../overrides/.icons/lucide/sun-moon.svg | 1 + .../overrides/partials/palette.html | 56 ------- mkdocs_doubleslash_theme/plugin.py | 26 +-- 5 files changed, 15 insertions(+), 225 deletions(-) delete mode 100644 mkdocs_doubleslash_theme/overrides/.icons/circle-half.svg create mode 100644 mkdocs_doubleslash_theme/overrides/.icons/lucide/sun-moon.svg delete mode 100644 mkdocs_doubleslash_theme/overrides/partials/palette.html diff --git a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css index c0ccb71..cf70df5 100644 --- a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css +++ b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css @@ -397,159 +397,6 @@ 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; -} - -.ds-switch-wrapper .switch__icon { - 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); } @@ -832,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; } } diff --git a/mkdocs_doubleslash_theme/overrides/.icons/circle-half.svg b/mkdocs_doubleslash_theme/overrides/.icons/circle-half.svg deleted file mode 100644 index f2cb835..0000000 --- a/mkdocs_doubleslash_theme/overrides/.icons/circle-half.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/mkdocs_doubleslash_theme/overrides/.icons/lucide/sun-moon.svg b/mkdocs_doubleslash_theme/overrides/.icons/lucide/sun-moon.svg new file mode 100644 index 0000000..d085551 --- /dev/null +++ b/mkdocs_doubleslash_theme/overrides/.icons/lucide/sun-moon.svg @@ -0,0 +1 @@ + diff --git a/mkdocs_doubleslash_theme/overrides/partials/palette.html b/mkdocs_doubleslash_theme/overrides/partials/palette.html deleted file mode 100644 index b8d94b7..0000000 --- a/mkdocs_doubleslash_theme/overrides/partials/palette.html +++ /dev/null @@ -1,56 +0,0 @@ - - -
-
-
- - - {% for option in config.theme.palette %} - {% set scheme = option.scheme | d("default", true) %} - {% set primary = option.primary | d("indigo", true) %} - {% set accent = option.accent | d("indigo", true) %} - - {% if option.toggle %} - - {% endif %} - {% endfor %} -
-
-
\ No newline at end of file diff --git a/mkdocs_doubleslash_theme/plugin.py b/mkdocs_doubleslash_theme/plugin.py index f0c084f..9a43e72 100644 --- a/mkdocs_doubleslash_theme/plugin.py +++ b/mkdocs_doubleslash_theme/plugin.py @@ -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", }, }, { @@ -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", }, }, ]