@cbnventures/docusaurus-preset-nova 0.17.0 → 0.18.0

package/build/src/styles/presets/lantern/theme/Navbar/style.css

@@ -0,0 +1,167 @@
+/**
+ * Lantern - `Navbar` theme overlay (entry-level wrapper).
+ *
+ * The variant root (`.nova-navbar-bridge` / `-canopy` / `-compass` /
+ * `-monolith`) carries its own bg / border / chrome in its sibling
+ * overlay; this file only carries cross-variant preset rules (e.g. the
+ * shared hamburger button padding) so wrapper-level styles cannot win
+ * specificity collisions against variant rules.
+ *
+ * @since 0.18.0
+ */
+
+/* Hamburger button padding - applied at preset level so all 4 variants share it. */
+.nova-hamburger-toggle {
+  padding: 0.375rem;
+}
+
+/* ============================
+ * Locale Dropdown - cream-tinted button + paper-card popover
+ *
+ * Trigger button + popover surface live at preset level so the actions
+ * cluster reads consistently across all 4 navbar variants. Each variant's
+ * navbar overlay can override individual properties if it needs a
+ * variant-specific treatment (variant rules ship later in the cascade).
+ * ============================ */
+
+/* Trigger - mirrors color-mode-toggle. Height + padding flow from shared
+   theme/Navbar. */
+.nova-locale-dropdown-summary {
+  font-family: var(--nova-font-body);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--nova-color-primary-700);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 92%);
+  border: 1px solid var(--nova-lantern-border);
+  border-radius: var(--nova-shape-radius);
+
+  transition:
+    color var(--nova-lantern-transition),
+    background-color var(--nova-lantern-transition),
+    border-color var(--nova-lantern-transition),
+    box-shadow var(--nova-lantern-transition),
+    transform var(--nova-lantern-transition);
+}
+
+.nova-locale-dropdown[open] > .nova-locale-dropdown-summary,
+.nova-locale-dropdown-summary:hover,
+.nova-locale-dropdown-summary:focus-visible {
+  color: var(--nova-color-primary-800);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 86%);
+  border-color: var(--nova-color-primary-500);
+  box-shadow: var(--nova-lantern-hover-glow);
+  transform: var(--nova-lantern-hover-lift);
+}
+
+[data-theme="dark"] .nova-locale-dropdown-summary {
+  color: var(--nova-color-primary-300);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 86%);
+  border-color: var(--nova-lantern-border);
+}
+
+[data-theme="dark"] .nova-locale-dropdown[open] > .nova-locale-dropdown-summary,
+[data-theme="dark"] .nova-locale-dropdown-summary:hover,
+[data-theme="dark"] .nova-locale-dropdown-summary:focus-visible {
+  color: var(--nova-color-primary-200);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 80%);
+  border-color: var(--nova-color-primary-400);
+}
+
+/* Popover menu - mirrors search-dropdown paper-card treatment. */
+.nova-locale-dropdown-menu,
+.nova-version-dropdown-menu,
+.nova-navbar-more-menu {
+  padding: 0.5rem 0;
+
+  background: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 94%);
+  border: 1px solid var(--nova-lantern-border);
+  border-radius: 10px;
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+}
+
+[data-theme="dark"] .nova-locale-dropdown-menu,
+[data-theme="dark"] .nova-version-dropdown-menu,
+[data-theme="dark"] .nova-navbar-more-menu {
+  background: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 88%);
+  border-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-border) 50%);
+  box-shadow: none;
+}
+
+/* Item link - italic Fraunces caption.
+   Explicit `display: block`, `border-radius: 0`, `text-transform: none`,
+   `letter-spacing: normal` defend the More popover items from the variant
+   nav-item cluster rule (`.nova-navbar-compass-items a`) which would
+   otherwise leak inline-flex, rounded corners, uppercase, and 0.12em
+   tracking onto items rendered inside the popover. No-op for
+   locale/version where no variant rule competes. */
+.nova-locale-dropdown-item-link,
+.nova-version-dropdown-item-link,
+.nova-navbar-more-menu .nova-navbar-more-item a {
+  display: block;
+  padding: 0.5rem 0.75rem;
+
+  font-family: var(--nova-font-display);
+  font-style: italic;
+  font-variation-settings: "opsz" 30;
+  font-weight: 500;
+  font-size: 0.95rem;
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--nova-lantern-ink);
+  text-decoration: none;
+
+  border-radius: 0;
+
+  transition:
+    color var(--nova-lantern-transition),
+    background-color var(--nova-lantern-transition);
+}
+
+.nova-locale-dropdown-item-link:hover,
+.nova-locale-dropdown-item-link:focus-visible,
+.nova-version-dropdown-item-link:hover,
+.nova-version-dropdown-item-link:focus-visible,
+.nova-navbar-more-menu .nova-navbar-more-item a:hover,
+.nova-navbar-more-menu .nova-navbar-more-item a:focus-visible {
+  text-decoration: none;
+}
+
+.nova-locale-dropdown-item:not(.nova-locale-dropdown-item--active) > .nova-locale-dropdown-item-link:hover,
+.nova-locale-dropdown-item:not(.nova-locale-dropdown-item--active) > .nova-locale-dropdown-item-link:focus-visible,
+.nova-version-dropdown-item:not(.nova-version-dropdown-item--active) > .nova-version-dropdown-item-link:hover,
+.nova-version-dropdown-item:not(.nova-version-dropdown-item--active) > .nova-version-dropdown-item-link:focus-visible,
+.nova-navbar-more-menu .nova-navbar-more-item a:not(.navbar__link--active):not([aria-current="page"]):hover,
+.nova-navbar-more-menu .nova-navbar-more-item a:not(.navbar__link--active):not([aria-current="page"]):focus-visible {
+  color: var(--nova-color-primary-700);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+  transform: none;
+}
+
+[data-theme="dark"] .nova-locale-dropdown-item:not(.nova-locale-dropdown-item--active) > .nova-locale-dropdown-item-link:hover,
+[data-theme="dark"] .nova-locale-dropdown-item:not(.nova-locale-dropdown-item--active) > .nova-locale-dropdown-item-link:focus-visible,
+[data-theme="dark"] .nova-version-dropdown-item:not(.nova-version-dropdown-item--active) > .nova-version-dropdown-item-link:hover,
+[data-theme="dark"] .nova-version-dropdown-item:not(.nova-version-dropdown-item--active) > .nova-version-dropdown-item-link:focus-visible,
+[data-theme="dark"] .nova-navbar-more-menu .nova-navbar-more-item a:not(.navbar__link--active):not([aria-current="page"]):hover,
+[data-theme="dark"] .nova-navbar-more-menu .nova-navbar-more-item a:not(.navbar__link--active):not([aria-current="page"]):focus-visible {
+  color: var(--nova-color-primary-300);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
+  transform: none;
+}
+
+/* Active item - amber pin (filled tint + ink color). */
+.nova-locale-dropdown-item--active > .nova-locale-dropdown-item-link,
+.nova-version-dropdown-item--active > .nova-version-dropdown-item-link,
+.nova-navbar-more-menu .nova-navbar-more-item a.navbar__link--active,
+.nova-navbar-more-menu .nova-navbar-more-item a[aria-current="page"] {
+  font-weight: 600;
+  color: var(--nova-color-primary-800);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 84%);
+}
+
+[data-theme="dark"] .nova-locale-dropdown-item--active > .nova-locale-dropdown-item-link,
+[data-theme="dark"] .nova-version-dropdown-item--active > .nova-version-dropdown-item-link,
+[data-theme="dark"] .nova-navbar-more-menu .nova-navbar-more-item a.navbar__link--active,
+[data-theme="dark"] .nova-navbar-more-menu .nova-navbar-more-item a[aria-current="page"] {
+  color: var(--nova-color-primary-200);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 76%);
+}

package/build/src/styles/presets/lantern/theme/NavbarItem/style.css

@@ -0,0 +1,26 @@
+/**
+ * Lantern - `NavbarItem` theme overlay (entry-level wrapper).
+ *
+ * Fallback link colors for the default `.navbar__link` class. Each variant
+ * overrides this with its own scoped Nova-prefixed selectors; this wrapper
+ * only matters if a downstream consumer mounts a Docusaurus default
+ * navbar item that bypasses the variant DOM. Amber on warm ink, no
+ * underline default.
+ *
+ * @since 0.18.0
+ */
+
+.navbar__link {
+  color: var(--nova-lantern-ink);
+  transition: color var(--nova-lantern-transition);
+}
+
+.navbar__link:hover,
+.navbar__link--active {
+  color: var(--nova-color-primary-700);
+}
+
+[data-theme="dark"] .navbar__link:hover,
+[data-theme="dark"] .navbar__link--active {
+  color: var(--nova-color-primary-300);
+}

package/build/src/styles/presets/lantern/theme/NotFound/Content/style.css

@@ -0,0 +1,10 @@
+/**
+ * Lantern - `NotFound/Content` theme overlay.
+ *
+ * Per-surface stub - cross-cutting identity for all error surfaces lives on
+ * the umbrella `.nova-error-surface` overlay at
+ * presets/lantern/theme/error-surface/style.css. Add per-surface deltas here
+ * only when this surface needs to differ from the umbrella.
+ *
+ * @since 0.18.0
+ */

package/build/src/styles/presets/lantern/theme/NotFound/style.css

@@ -0,0 +1,10 @@
+/**
+ * Lantern - `NotFound` theme overlay.
+ *
+ * Per-surface stub - cross-cutting identity for all error surfaces lives on
+ * the umbrella `.nova-error-surface` overlay at
+ * presets/lantern/theme/error-surface/style.css. Add per-surface deltas here
+ * only when this surface needs to differ from the umbrella.
+ *
+ * @since 0.18.0
+ */

package/build/src/styles/presets/lantern/theme/Root/style.css

@@ -0,0 +1,9 @@
+/**
+ * Lantern - `Root` theme overlay (stub).
+ *
+ * Empty until filled in. The shared structural CSS for this Docusaurus theme
+ * component lives at theme/Root/style.css. Add Lantern-specific identity rules here when the
+ * design calls for them; see preset.css for tokens and conventions.
+ *
+ * @since 0.18.0
+ */

package/build/src/styles/presets/lantern/theme/SearchBar/style.css

@@ -0,0 +1,163 @@
+/**
+ * Lantern - `SearchBar` theme overlay.
+ *
+ * Warm cream input with a soft amber focus ring. The dropdown reads as a
+ * paper card; result titles use italic Fraunces and amber wash on the active
+ * row. Search highlights warm to amber.
+ *
+ * @since 0.18.0
+ */
+
+/**
+ * ============================
+ * 1. Input - warm cream paper field
+ * ============================
+ */
+
+.nova-search-bar-input {
+  width: 100%;
+  max-width: 220px;
+
+  font-family: var(--nova-font-body);
+  color: var(--nova-lantern-ink);
+
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 96%);
+  border: 1px solid var(--nova-lantern-border);
+  border-radius: var(--nova-shape-radius);
+
+  transition: border-color var(--nova-lantern-transition), box-shadow var(--nova-lantern-transition);
+}
+
+.nova-search-bar-input::placeholder {
+  color: var(--nova-lantern-ink-muted);
+}
+
+.nova-search-bar-input:focus {
+  border-color: var(--nova-color-primary-500);
+  box-shadow: 0 0 0 var(--nova-lantern-focus-ring-width) color-mix(in srgb, var(--nova-color-primary-500), transparent 84%);
+}
+
+[data-theme="dark"] .nova-search-bar-input {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 90%);
+  border-color: var(--nova-lantern-border);
+}
+
+[data-theme="dark"] .nova-search-bar-input:focus {
+  border-color: var(--nova-color-primary-400);
+  box-shadow: 0 0 0 var(--nova-lantern-focus-ring-width) color-mix(in srgb, var(--nova-color-primary-500), transparent 78%);
+}
+
+/**
+ * ============================
+ * 2. Dropdown - paper card
+ * ============================
+ */
+
+.nova-search-dropdown {
+  background: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 94%);
+  border: 1px solid var(--nova-lantern-border);
+  border-radius: var(--nova-lantern-radius-card);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+}
+
+[data-theme="dark"] .nova-search-dropdown {
+  background: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 88%);
+  border-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-border) 50%);
+  box-shadow: none;
+}
+
+/**
+ * ============================
+ * 3. Result rows - amber wash on active
+ * ============================
+ */
+
+.nova-search-result {
+  border-bottom: 1px solid color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-border) 70%);
+
+  transition: background-color var(--nova-lantern-transition-fast);
+}
+
+.nova-search-result:hover,
+.nova-search-result:focus-visible,
+.nova-search-result--active {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+}
+
+[data-theme="dark"] .nova-search-result {
+  border-bottom-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-border) 60%);
+}
+
+[data-theme="dark"] .nova-search-result:hover,
+[data-theme="dark"] .nova-search-result:focus-visible,
+[data-theme="dark"] .nova-search-result--active {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
+}
+
+/**
+ * ============================
+ * 4. Result title - italic Fraunces caption
+ * ============================
+ */
+
+.nova-search-result-title {
+  font-family: var(--nova-font-display);
+  font-style: italic;
+  font-variation-settings: "opsz" 30;
+  font-weight: 500;
+  color: var(--nova-lantern-ink);
+}
+
+.nova-search-count {
+  font-family: var(--nova-font-code);
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--nova-lantern-ink-muted);
+}
+
+/**
+ * ============================
+ * 5. Search highlight - warm amber tag
+ * ============================
+ */
+
+mark {
+  padding: 0.05em 0.2em;
+
+  color: var(--nova-color-primary-800);
+
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 72%);
+  border-radius: calc(var(--nova-shape-radius) * 0.5);
+}
+
+[data-theme="dark"] mark {
+  color: var(--nova-color-primary-200);
+
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 60%);
+}
+
+/**
+ * ============================
+ * 6. Mobile menu search - fills the panel
+ * ============================
+ */
+
+.nova-mobile-menu-search .nova-search-bar-input {
+  width: 100%;
+  max-width: none;
+
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 94%);
+  border-color: var(--nova-lantern-border);
+}
+
+[data-theme="dark"] .nova-mobile-menu-search .nova-search-bar-input {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 86%);
+}
+
+.nova-mobile-menu-search .nova-search-dropdown {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}

package/build/src/styles/presets/lantern/theme/SearchMetadata/style.css

@@ -0,0 +1,8 @@
+/**
+ * Lantern - `SearchMetadata` theme overlay.
+ *
+ * Tiny-surface overlay. SearchMetadata renders search-related <head>
+ * metadata only - no visible DOM, no CSS impact. Tiny-surface exception.
+ *
+ * @since 0.18.0
+ */

package/build/src/styles/presets/lantern/theme/SearchPage/style.css

@@ -0,0 +1,127 @@
+/**
+ * Lantern - `SearchPage` theme overlay.
+ *
+ * Warm cream paper with amber dust. Page heading uses display Fraunces
+ * italic, results render as paper cards with a soft amber wash on hover, and
+ * snippets read as muted ink. Mirrors the SearchBar input chrome - same
+ * cream tint, same amber focus ring.
+ *
+ * @since 0.18.0
+ */
+
+/* ============================
+ * 1. Container & Header
+ * ============================ */
+
+.nova-search-page-header h1 {
+  font-family: var(--nova-font-display);
+  font-style: italic;
+  font-variation-settings: "opsz" 36;
+  font-weight: 500;
+  color: var(--nova-lantern-ink);
+}
+
+[data-theme="dark"] .nova-search-page-header h1 {
+  color: var(--nova-lantern-ink);
+}
+
+/* ============================
+ * 2. Search Input
+ * ============================ */
+
+.nova-search-page-input {
+  font-family: var(--nova-font-body);
+  color: var(--nova-lantern-ink);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 96%);
+  border-color: var(--nova-lantern-border);
+  border-radius: var(--nova-shape-radius);
+  transition: border-color var(--nova-lantern-transition),
+              box-shadow var(--nova-lantern-transition);
+}
+
+.nova-search-page-input::placeholder {
+  color: var(--nova-lantern-ink-muted);
+}
+
+[data-theme="dark"] .nova-search-page-input {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 90%);
+}
+
+.nova-search-page-input:focus {
+  border-color: var(--nova-color-primary-500);
+  box-shadow: 0 0 0 var(--nova-lantern-focus-ring-width) color-mix(in srgb, var(--nova-color-primary-500), transparent 84%);
+}
+
+[data-theme="dark"] .nova-search-page-input:focus {
+  border-color: var(--nova-color-primary-400);
+  box-shadow: 0 0 0 var(--nova-lantern-focus-ring-width) color-mix(in srgb, var(--nova-color-primary-500), transparent 78%);
+}
+
+/* ============================
+ * 3. Result Cards
+ * ============================ */
+
+.nova-search-page-item a {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 96%);
+  border-color: var(--nova-lantern-border);
+  border-radius: var(--nova-lantern-radius-card);
+  transition: background-color var(--nova-lantern-transition-fast),
+              border-color var(--nova-lantern-transition-fast);
+}
+
+[data-theme="dark"] .nova-search-page-item a {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-bg) 90%);
+  border-color: color-mix(in srgb, var(--nova-color-primary-500), var(--nova-lantern-border) 50%);
+}
+
+.nova-search-page-item a:hover,
+.nova-search-page-item a:focus-visible {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+  border-color: var(--nova-color-primary-500);
+}
+
+[data-theme="dark"] .nova-search-page-item a:hover,
+[data-theme="dark"] .nova-search-page-item a:focus-visible {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
+  border-color: var(--nova-color-primary-400);
+}
+
+.nova-search-page-item-title {
+  font-family: var(--nova-font-display);
+  font-style: italic;
+  font-variation-settings: "opsz" 30;
+  font-weight: 500;
+  color: var(--nova-lantern-ink);
+}
+
+.nova-search-page-item-snippet {
+  font-family: var(--nova-font-body);
+  color: var(--nova-lantern-ink-muted);
+}
+
+/* ============================
+ * 4. State Messages
+ * ============================ */
+
+.nova-search-page-loading,
+.nova-search-page-searching,
+.nova-search-page-empty {
+  font-family: var(--nova-font-display);
+  font-style: italic;
+  color: var(--nova-lantern-ink-muted);
+}
+
+[data-theme="dark"] .nova-search-page-loading,
+[data-theme="dark"] .nova-search-page-searching,
+[data-theme="dark"] .nova-search-page-empty {
+  color: var(--nova-lantern-ink-muted);
+}
+
+.nova-search-page-error {
+  font-family: var(--nova-font-body);
+  color: var(--nova-color-primary-700);
+}
+
+[data-theme="dark"] .nova-search-page-error {
+  color: var(--nova-color-primary-300);
+}

package/build/src/styles/presets/lantern/theme/Showcase/style.css

@@ -0,0 +1,5 @@
+/**
+ * Lantern - `Showcase` theme overlay.
+ *
+ * @since 0.18.0
+ */

package/build/src/styles/presets/lantern/theme/SiteMetadata/style.css

@@ -0,0 +1,8 @@
+/**
+ * Lantern - `SiteMetadata` theme overlay.
+ *
+ * Tiny-surface overlay. SiteMetadata renders site-wide <head>
+ * metadata only - no visible DOM, no CSS impact. Tiny-surface exception.
+ *
+ * @since 0.18.0
+ */

package/build/src/styles/presets/lantern/theme/SkipToContent/style.css

@@ -0,0 +1,18 @@
+/**
+ * Lantern - `SkipToContent` theme overlay.
+ *
+ * Defines per-preset shape, spacing, and timing tokens consumed by the shared
+ * theme/SkipToContent/style.css. Color tokens for the focus state live in
+ * preset.css.
+ *
+ * @since 0.18.0
+ */
+
+:root {
+  --nova-skip-radius: 999px;
+  --nova-skip-padding-y: 0.625rem;
+  --nova-skip-padding-x: 1.5rem;
+  --nova-skip-offset: 1rem;
+  --nova-skip-font-weight: 500;
+  --nova-skip-transition: transform var(--nova-lantern-transition), opacity var(--nova-lantern-transition);
+}

package/build/src/styles/presets/lantern/theme/TOC/style.css

@@ -0,0 +1,54 @@
+/**
+ * Lantern - `TOC` theme overlay.
+ *
+ * Right-rail table of contents - a quiet column of warm muted ink.
+ * Hover and focus warm to amber. The rail border that separates the TOC
+ * from the article is given a warm cream hairline to match the body.
+ *
+ * @since 0.18.0
+ */
+
+/**
+ * ============================
+ * 1. Rail - warm cream hairline overrides the neutral default
+ * ============================
+ */
+
+@media (min-width: 1024px) {
+  .nova-toc {
+    border-left-color: var(--nova-lantern-border);
+  }
+}
+
+/**
+ * ============================
+ * 2. Link - muted ink, amber on hover
+ * ============================
+ */
+
+.nova-toc-link {
+  padding: 0.25rem 0;
+
+  font-family: var(--nova-font-body);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--nova-lantern-ink-muted);
+
+  transition: color var(--nova-motion-duration) ease;
+}
+
+[data-theme="dark"] .nova-toc-link {
+  color: var(--nova-lantern-ink-muted);
+}
+
+.nova-toc-link:hover,
+.nova-toc-link:focus-visible {
+  color: var(--nova-color-primary-700);
+
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-toc-link:hover,
+[data-theme="dark"] .nova-toc-link:focus-visible {
+  color: var(--nova-color-primary-300);
+}