@writedocs/generator 0.9.2 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@writedocs/generator",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Static site generator for docs — a writedocs.json + MDX folder in, a static site out.",
   "type": "module",
   "bin": {

package/src/layout/BaseLayout.astro

@@ -566,6 +566,10 @@ const fontExtraCss = [fontFaceCss, fontWeightCss].filter(Boolean).join('\n');
         --wd-text-muted: #64748b;
         --wd-border: #e2e8f0;
         --wd-surface: #f8fafc;
+        /* The browser's own controls - the page's scrollbar, a code block's -
+           drawn for the theme on screen. Without it they stayed light in dark
+           mode. */
+        color-scheme: light;
         /* Not mode-dependent (a site's chosen font doesn't change between
            light/dark) - set once here rather than duplicated in the
            :root[data-theme='dark'] block below. */
@@ -594,6 +598,7 @@ const fontExtraCss = [fontFaceCss, fontWeightCss].filter(Boolean).join('\n');
         --wd-text-muted: #94a3b8;
         --wd-border: #1e293b;
         --wd-surface: #131a2b;
+        color-scheme: dark;
       }
     </style>
     {/* styles.fonts: local/externally-hosted font(s) (fontFaceRule() in

package/src/layout/styles/base.css

@@ -244,3 +244,47 @@ img.wd-icon-img {
   height: 1em;
   object-fit: contain;
 }
+
+/* Scrollbars of the columns beside the page - the sidebar, the table of
+   contents, the mobile menu and its option lists: a thin pill in the
+   site's muted text color on no track, faint while the pointer is
+   elsewhere, clearer over the column, strongest on the pill itself.
+   Chromium and Safari draw it from the ::-webkit-scrollbar rules (the
+   standard scrollbar-color/-width would switch those off in Chromium, and
+   can't make it this thin); Firefox, which has only the standard ones,
+   gets its thin scrollbar in the same colors. */
+:root {
+  --wd-scrollbar-thumb: color-mix(in srgb, var(--wd-text-muted) 22%, transparent);
+  --wd-scrollbar-thumb-near: color-mix(in srgb, var(--wd-text-muted) 45%, transparent);
+  --wd-scrollbar-thumb-active: color-mix(in srgb, var(--wd-text-muted) 70%, transparent);
+}
+:is(.wd-sidebar, .wd-toc, .wd-mobile-menu-scroll, .wd-mobile-accordion-options-panel)::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+:is(.wd-sidebar, .wd-toc, .wd-mobile-menu-scroll, .wd-mobile-accordion-options-panel)::-webkit-scrollbar-track {
+  background: transparent;
+}
+:is(.wd-sidebar, .wd-toc, .wd-mobile-menu-scroll, .wd-mobile-accordion-options-panel)::-webkit-scrollbar-thumb {
+  background: var(--wd-scrollbar-thumb);
+  /* A 6px pill with 2px of air on each side - off the column's border line. */
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: 999px;
+}
+:is(.wd-sidebar, .wd-toc, .wd-mobile-menu-scroll, .wd-mobile-accordion-options-panel):hover::-webkit-scrollbar-thumb {
+  background: var(--wd-scrollbar-thumb-near);
+}
+:is(.wd-sidebar, .wd-toc, .wd-mobile-menu-scroll, .wd-mobile-accordion-options-panel)::-webkit-scrollbar-thumb:hover,
+:is(.wd-sidebar, .wd-toc, .wd-mobile-menu-scroll, .wd-mobile-accordion-options-panel)::-webkit-scrollbar-thumb:active {
+  background: var(--wd-scrollbar-thumb-active);
+}
+@supports not selector(::-webkit-scrollbar) {
+  :is(.wd-sidebar, .wd-toc, .wd-mobile-menu-scroll, .wd-mobile-accordion-options-panel) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--wd-scrollbar-thumb) transparent;
+  }
+  :is(.wd-sidebar, .wd-toc, .wd-mobile-menu-scroll, .wd-mobile-accordion-options-panel):hover {
+    scrollbar-color: var(--wd-scrollbar-thumb-near) transparent;
+  }
+}