@vantagecompute/docusaurus-theme 0.5.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vantagecompute/docusaurus-theme",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Shared Vantage Compute Docusaurus theme: design system, brand assets, and common theme overrides for all vantagecompute documentation sites.",
   "license": "MIT",
   "main": "lib/index.cjs",

package/src/css/custom.css

@@ -763,7 +763,9 @@ html[data-theme='dark'] .provider-showcase-item {
 }
 
 .guide-step > h2,
-.guide-step > h3 {
+.guide-step > h3,
+.guide-step > h4,
+.guide-step > h5 {
   margin: 0;
   padding: 0;
   border-bottom: none;
@@ -773,7 +775,9 @@ html[data-theme='dark'] .provider-showcase-item {
 }
 
 .guide-step > h2 ~ *,
-.guide-step > h3 ~ * {
+.guide-step > h3 ~ *,
+.guide-step > h4 ~ *,
+.guide-step > h5 ~ * {
   grid-column: 1 / -1;
 }
 
@@ -873,7 +877,8 @@ html[data-theme='dark'] .provider-showcase-item {
 
 .navbar__title,
 .navbar__item,
-.navbar__link {
+.navbar__link,
+.navbar__toggle {
   color: var(--vantage-navbar-text);
 }
 
@@ -931,6 +936,12 @@ html[data-theme='dark'] .provider-showcase-item {
     margin: -7px 0;
   }
 
+  /* Infima strokes the hamburger at 2px. At phone size on the navy bar the
+     three lines read as faint, so give them a little more weight. */
+  .navbar__toggle svg path {
+    stroke-width: 2.5;
+  }
+
   .navbar-sidebar__close {
     padding: 12px;
     margin-right: -12px;
@@ -1185,8 +1196,17 @@ html[data-theme='dark'] .provider-showcase-item {
   background: var(--iris-50);
 }
 
+/* Infima draws the separator as a chevron background-image tinted by
+   --ifm-breadcrumb-separator-filter. Recolouring it through the `background`
+   shorthand also reset background-image, leaving a solid 7.5px square between
+   every crumb, so the trail read as a row of tags rather than a hierarchy.
+   Carry the chevron in a mask instead: background-color still sets the colour,
+   and the filter is no longer needed. */
 .breadcrumbs__item:not(:last-child)::after {
   background: var(--ink-300);
+  -webkit-mask: var(--ifm-breadcrumb-separator) center / contain no-repeat;
+  mask: var(--ifm-breadcrumb-separator) center / contain no-repeat;
+  filter: none;
   opacity: 0.5;
 }
 
@@ -2058,3 +2078,47 @@ article {
     margin-top: 1.5rem;
   }
 }
+
+/* ── Mermaid diagrams in dark mode ─────────────────────────────────── */
+
+/* Mermaid's dark theme fills nodes with #1f2020, which sits within about 2% of
+   the Docusaurus dark page background (#1b1b1d): a contrast ratio of 1.05:1.
+   Node borders and label text stay legible, but the shapes lose their surfaces
+   and read as bare wireframe outlines. Lifting the fill to #3a3d44 gives
+   1.58:1 against the page while keeping label contrast comfortably above
+   WCAG AA.
+
+   !important is required throughout: mermaid injects a stylesheet inside each
+   SVG whose selectors are ID-scoped (#mermaid-nnn .label-container), so an
+   author stylesheet cannot win on specificity alone. */
+[data-theme='dark'] .docusaurus-mermaid-container rect.label-container,
+[data-theme='dark'] .docusaurus-mermaid-container .node rect,
+[data-theme='dark'] .docusaurus-mermaid-container .node polygon,
+[data-theme='dark'] .docusaurus-mermaid-container .node circle,
+[data-theme='dark'] .docusaurus-mermaid-container .node path {
+  fill: #3a3d44 !important;
+}
+
+/* Sequence diagrams draw their participant boxes as .actor / .labelBox rather
+   than .node, so they need the same lift. State diagrams already use .node rect
+   and are covered above. Notes are left alone deliberately: their accent fill
+   is meaningful and does not collide with the page background.
+
+   These selectors MUST stay qualified to `rect`. Mermaid puts class="actor" on
+   both the participant box and its label <text>, so a bare `.actor` rule would
+   paint the label the same colour as the box. */
+[data-theme='dark'] .docusaurus-mermaid-container rect.actor,
+[data-theme='dark'] .docusaurus-mermaid-container rect.labelBox {
+  fill: #3a3d44 !important;
+}
+
+/* The participant label itself. Mermaid's own `.actor { fill: #1f2020 }` hits
+   the <text> as well as the box, and the rule meant to correct it,
+   `text.actor > tspan`, never matches: these labels put their text directly in
+   the <text> element with no tspan. So the name renders near-black, at 1.50:1
+   on the lifted box and 1.05:1 on the page, which is why participants looked
+   like empty rectangles. --ink-900 resolves to #f4f5fb here, giving 10:1. */
+[data-theme='dark'] .docusaurus-mermaid-container text.actor,
+[data-theme='dark'] .docusaurus-mermaid-container text.actor > tspan {
+  fill: var(--ink-900) !important;
+}

package/src/theme/ColorModeToggle/styles.module.css

@@ -13,21 +13,21 @@
   border: none;
   border-radius: 0;
   background: transparent;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--ifm-font-color-base);
   transition: color 0.15s;
 }
 
-.toggleButton:hover {
-  color: rgba(255, 255, 255, 1) !important;
-}
-
-[data-theme='dark'] .toggleButton {
-  background: transparent;
+/* The navbar is navy in both color modes, so the toggle is white there.
+   Anywhere else it follows the page text color. That matters in the mobile
+   drawer header, which is white in light mode and hid a white icon. The
+   drawer is a child of nav.navbar, so the scope is .navbar__inner (the bar
+   itself), not .navbar. */
+:global(.navbar__inner) .toggleButton {
   color: rgba(255, 255, 255, 0.85);
 }
 
-[data-theme='dark'] .toggleButton:hover {
-  color: rgba(255, 255, 255, 1) !important;
+:global(.navbar__inner) .toggleButton:hover {
+  color: rgba(255, 255, 255, 1);
 }
 
 [data-theme='light'] .lightToggleIcon,