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
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"));
});
diff --git a/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css b/mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash-theme.css
index ccb892b..cf70df5 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,
@@ -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,
@@ -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 {
@@ -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;
}
}
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 @@
-
-
-
\ 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",
},
},
]