@writedocs/generator 0.7.0 → 0.7.1

package/package.json

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

package/src/layout/BaseLayout.astro

@@ -220,19 +220,9 @@ const darkNavbarFgMuted = darkNavbarConfigured
 // design choice, unlike text color above), falling back to the sitewide
 // --wd-primary (today's exact behavior) when unset - a site that sets a
 // navbar background but no accent keeps its ordinary brand-colored
-// active-tab fill exactly as before.
+// active-tab underline.
 const lightNavbarAccent = navLight.accent ?? lightPrimary;
 const darkNavbarAccent = navDark.accent ?? darkPrimary;
-// --wd-navbar-accent-text: the active tab's own text color, painted on top
-// of --wd-navbar-accent above. Hardcoded to white before this feature
-// existed, which only ever looked right because every accent color in
-// practice (always --wd-primary until now) happened to be dark/saturated
-// enough for white text - contrastTextColor() (lib/config.ts) picks
-// black or white by actual luminance instead, so a light `accent` (e.g.
-// a pale one against a dark navbar) still gets legible active-tab text
-// rather than assuming white always works.
-const lightNavbarAccentText = contrastTextColor(lightNavbarAccent);
-const darkNavbarAccentText = contrastTextColor(darkNavbarAccent);
 // --wd-navbar-border: the switcher pills' (version/language/product) own
 // border. Never the flat --wd-border (a fixed neutral gray/slate tuned for
 // sitting on the page background) once navbar is configured - that reads
@@ -249,6 +239,14 @@ const lightNavbarBorder = lightNavbarConfigured
 const darkNavbarBorder = darkNavbarConfigured
   ? `color-mix(in srgb, ${darkNavbarFg} 25%, transparent)`
   : 'var(--wd-border)';
+// --wd-navbar-hover: a topbar tab's background on hover. On a navbar with
+// the page's own background, the sidebar's hover tint (NavTree.astro) -
+// the same 6% of --wd-primary. A configured navbar can *be* the primary
+// color, where that tint would vanish, so there it's a light tint of the
+// navbar's own contrast-correct text color instead, like --wd-navbar-border.
+const sidebarHover = 'color-mix(in srgb, var(--wd-primary) 6%, transparent)';
+const lightNavbarHover = lightNavbarConfigured ? `color-mix(in srgb, ${lightNavbarFg} 12%, transparent)` : sidebarHover;
+const darkNavbarHover = darkNavbarConfigured ? `color-mix(in srgb, ${darkNavbarFg} 12%, transparent)` : sidebarHover;
 // The <body> canvas's own paint - same color as --wd-background above
 // (there's only one background color to configure now), plus an optional
 // image layered on top. `images.light`/`.dark` are plain public/-relative
@@ -517,8 +515,8 @@ const fontExtraCss = [fontFaceCss, fontWeightCss].filter(Boolean).join('\n');
         wdNavbarFgLight: lightNavbarFg,
         wdNavbarFgMutedLight: lightNavbarFgMuted,
         wdNavbarAccentLight: lightNavbarAccent,
-        wdNavbarAccentTextLight: lightNavbarAccentText,
         wdNavbarBorderLight: lightNavbarBorder,
+        wdNavbarHoverLight: lightNavbarHover,
         wdPageBgColorLight: lightPageBgColor,
         wdPageBgImageLight: lightPageBgImage,
         wdFontFamily,
@@ -531,8 +529,8 @@ const fontExtraCss = [fontFaceCss, fontWeightCss].filter(Boolean).join('\n');
         wdNavbarFgDark: darkNavbarFg,
         wdNavbarFgMutedDark: darkNavbarFgMuted,
         wdNavbarAccentDark: darkNavbarAccent,
-        wdNavbarAccentTextDark: darkNavbarAccentText,
         wdNavbarBorderDark: darkNavbarBorder,
+        wdNavbarHoverDark: darkNavbarHover,
         wdPageBgColorDark: darkPageBgColor,
         wdPageBgImageDark: darkPageBgImage,
       }}
@@ -545,8 +543,8 @@ const fontExtraCss = [fontFaceCss, fontWeightCss].filter(Boolean).join('\n');
         --wd-navbar-foreground: var(--wdNavbarFgLight);
         --wd-navbar-foreground-muted: var(--wdNavbarFgMutedLight);
         --wd-navbar-accent: var(--wdNavbarAccentLight);
-        --wd-navbar-accent-text: var(--wdNavbarAccentTextLight);
         --wd-navbar-border: var(--wdNavbarBorderLight);
+        --wd-navbar-hover: var(--wdNavbarHoverLight);
         --wd-page-bg-color: var(--wdPageBgColorLight);
         --wd-page-bg-image: var(--wdPageBgImageLight);
         --wd-text-muted: #64748b;
@@ -572,8 +570,8 @@ const fontExtraCss = [fontFaceCss, fontWeightCss].filter(Boolean).join('\n');
         --wd-navbar-foreground: var(--wdNavbarFgDark);
         --wd-navbar-foreground-muted: var(--wdNavbarFgMutedDark);
         --wd-navbar-accent: var(--wdNavbarAccentDark);
-        --wd-navbar-accent-text: var(--wdNavbarAccentTextDark);
         --wd-navbar-border: var(--wdNavbarBorderDark);
+        --wd-navbar-hover: var(--wdNavbarHoverDark);
         --wd-page-bg-color: var(--wdPageBgColorDark);
         --wd-page-bg-image: var(--wdPageBgImageDark);
         --wd-text-muted: #94a3b8;

package/src/layout/styles/topbar.css

@@ -37,9 +37,8 @@
      (below) sits flush against this row's bottom edge (the outer
      .wd-topbar's own border-bottom, since this is the last row) rather
      than floating partway up inside a padded gap. That's what lets a
-     plain border-bottom color change read as a real underline on hover,
-     and what makes the active tab's own fill look like it's actually
-     attached to the row's bottom edge instead of a floating pill. */
+     plain border-bottom color change read as a real underline under the
+     active tab. */
   padding-bottom: 0;
 }
 .wd-topbar-brand {
@@ -139,47 +138,31 @@
   /* Rounded top corners, square bottom - reads as an actual "tab"
      attached to the row's bottom edge (see .wd-topbar-row-tabs
      .wd-topbar-inner's own comment) rather than a floating pill. Same
-     radius for every tab, active or not, so nothing needs to change
-     shape on top when a tab becomes active - only the fill/border-bottom
-     below do. */
+     radius for every tab, active or not - it also shapes the hover
+     background (below). */
   border-radius: 0.5rem 0.5rem 0 0;
-  /* Transparent by default - this is what a hover (below) or the active
-     state colors in, rather than a separate underline element. Sized to
-     land exactly on the row's own bottom edge now that this row's inner
-     wrapper has no bottom padding of its own. */
+  /* Transparent by default - the active state (below) colors it in,
+     rather than a separate underline element. Sized to land exactly on the
+     row's own bottom edge now that this row's inner wrapper has no bottom
+     padding of its own. */
   border-bottom: 2px solid transparent;
   text-decoration: none;
   color: var(--wd-navbar-foreground);
   font-size: 0.92rem;
   font-weight: 600;
 }
-/* The selected tab: a solid fill, not just a tinted background -
-   AppIcon's <svg> render mode already uses fill="currentColor" (astro-
-   icon's default), so its icon recolors along with the text; the
-   emoji/text <span> fallback inherits `color` the same way.
-   border-bottom-color matches the fill (rather than being reset to
-   transparent) so there's no 2px seam of the row's own background
-   showing between the fill and the row's bottom edge/border.
-   --wd-navbar-accent (falls back to --wd-primary - see BaseLayout.astro),
-   not a bare --wd-primary reference: without this, a site whose navbar
-   background *is* --wd-primary (a plausible "brand-colored navbar" choice
-   - the exact case that motivated this variable) would have its active
-   tab's own fill disappear into the row's background entirely. Text color
-   is --wd-navbar-accent-text (also BaseLayout.astro) rather than a
-   hardcoded #fff for the matching reason - a light accent color needs
-   dark text, not white, to stay legible on top of it. */
+/* The selected tab: just its border-bottom, in --wd-navbar-accent (falls
+   back to --wd-primary - see BaseLayout.astro), landing on the row's
+   bottom edge as an underline. No fill - the text keeps the navbar's own
+   color. */
 .wd-tab-link.active {
-  color: var(--wd-navbar-accent-text);
-  background: var(--wd-navbar-accent);
   border-bottom-color: var(--wd-navbar-accent);
 }
-/* Inactive tabs just get their border-bottom colored in on hover -
-   simpler than a separate underline element, and lines up naturally
-   with the active tab's own border-bottom above since both are the same
-   property. Text/icon color deliberately stays as-is on hover (only the
-   border appears), matching the reference this was built against. */
-.wd-tab-link:hover:not(.active) {
-  border-bottom-color: var(--wd-navbar-accent);
+/* Any tab on hover: a light background tint, the same as a sidebar item's
+   hover (see --wd-navbar-hover in BaseLayout.astro). The rounded top
+   corners above shape it. */
+.wd-tab-link:hover {
+  background: var(--wd-navbar-hover);
 }
 .wd-topbar-links {
   display: flex;

package/src/lib/config-schema.js

@@ -158,7 +158,7 @@ const stylesSchema = z.object({
   // Each side (`light`/`dark`) is either a bare string - just the
   // background color, exactly the original shape, kept for backwards
   // compatibility - or `{ background, accent? }`, for when a site also
-  // wants the navbar's own active-tab-fill/hover-underline color to
+  // wants the navbar's own active-tab underline color to
   // differ from the sitewide `styles.colors.primary` (`accent`'s only
   // job - see BaseLayout.astro's lightNavbarAccent). Deliberately no
   // text/icon color field here at all: BaseLayout.astro always resolves

package/src/lib/config-schema.ts

@@ -263,7 +263,7 @@ const logoSchema = z.union([
 // field's comment for what it now covers.
 // One side of `styles.navbar` (light or dark) - either a bare background
 // color (the original shape) or `{ background, accent? }` once a site
-// wants its own accent color (the active-tab fill / hover underline)
+// wants its own accent color (the active tab's underline)
 // inside the navbar specifically, independent of the sitewide
 // `styles.colors.primary`. Deliberately does NOT carry a text/icon color
 // field at all - see `navbar`'s own comment below (stylesSchema) for why
@@ -400,7 +400,7 @@ const stylesSchema = z
     // Each side (`light`/`dark`) is either a bare string - just the
     // background color, exactly the original shape, kept for backwards
     // compatibility - or `{ background, accent? }`, for when a site also
-    // wants the navbar's own active-tab-fill/hover-underline color to
+    // wants the navbar's own active-tab underline color to
     // differ from the sitewide `styles.colors.primary` (`accent`'s only
     // job - see BaseLayout.astro's lightNavbarAccent). Deliberately no
     // text/icon color field here at all: BaseLayout.astro always resolves

package/src/lib/json-schema-descriptions.js

@@ -111,10 +111,10 @@ export const DESCRIPTIONS = {
   'styles.navbar': 'The topbar\'s own background. Without it, the topbar matches the page background. Its text turns black or white automatically.',
   'styles.navbar.light': 'Topbar in light mode: a background color, or `{ background, accent }`.',
   'styles.navbar.light.background': 'Topbar background color in light mode.',
-  'styles.navbar.light.accent': 'Color of the active tab and hover states in the topbar, in place of `styles.colors.primary`.',
+  'styles.navbar.light.accent': 'Color of the underline under the active tab in the topbar, in place of `styles.colors.primary`.',
   'styles.navbar.dark': 'Topbar in dark mode: a background color, or `{ background, accent }`.',
   'styles.navbar.dark.background': 'Topbar background color in dark mode.',
-  'styles.navbar.dark.accent': 'Color of the active tab and hover states in the topbar, in dark mode.',
+  'styles.navbar.dark.accent': 'Color of the underline under the active tab in the topbar, in dark mode.',
   'styles.background': 'Background color of the site, and an optional background image.',
   'styles.background.colors': 'Background colors.',
   'styles.background.colors.light': 'Background color in light mode. Default "#ffffff".',

package/writedocs.schema.json

@@ -252,8 +252,8 @@
                     },
                     "accent": {
                       "type": "string",
-                      "description": "Color of the active tab and hover states in the topbar, in place of `styles.colors.primary`.",
-                      "markdownDescription": "Color of the active tab and hover states in the topbar, in place of `styles.colors.primary`."
+                      "description": "Color of the underline under the active tab in the topbar, in place of `styles.colors.primary`.",
+                      "markdownDescription": "Color of the underline under the active tab in the topbar, in place of `styles.colors.primary`."
                     }
                   },
                   "required": [
@@ -280,8 +280,8 @@
                     },
                     "accent": {
                       "type": "string",
-                      "description": "Color of the active tab and hover states in the topbar, in dark mode.",
-                      "markdownDescription": "Color of the active tab and hover states in the topbar, in dark mode."
+                      "description": "Color of the underline under the active tab in the topbar, in dark mode.",
+                      "markdownDescription": "Color of the underline under the active tab in the topbar, in dark mode."
                     }
                   },
                   "required": [