@cbnventures/docusaurus-preset-nova 0.17.0 → 0.18.0

package/build/src/styles/theme/Blog/Pages/BlogAuthorsListPage/style.css

@@ -1,74 +1,39 @@
 /**
- * Blog Authors List Page — Shared structural styles.
+ * Blog Authors List Page - Shared structural styles.
  *
- * @since 0.15.0
+ * Layout-only rules: 2-column responsive grid of Author cards. The page
+ * heading is rendered inside `nova-blog-header` via BlogLayout. The
+ * Author card itself is styled by `theme/Blog/Components/Author/style.css`.
+ *
+ * @since 0.18.0
  */
 
-/* Authors grid — responsive card layout. */
-.nova-blog-authors-grid {
+/* Authors list - single column on mobile, 2-column grid at desktop. */
+.nova-blog-authors-list {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 0.75rem;
+  gap: 2rem;
+
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
 }
 
 @media (min-width: 640px) {
-  .nova-blog-authors-grid {
+  .nova-blog-authors-list {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
-/* Author card — horizontal layout with avatar and info. */
-.nova-blog-author-card {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-
-  padding: 0.75rem;
-
-  border: 1px solid var(--nova-color-neutral-200);
-  border-radius: var(--nova-shape-radius);
-}
-
-[data-theme="dark"] .nova-blog-author-card {
-  border-color: var(--nova-color-neutral-800);
-}
-
-.nova-blog-author-card img {
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.nova-blog-author-card-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.nova-blog-author-card-info strong {
-  font-size: 0.875rem;
-}
-
-.nova-blog-author-card-title {
-  font-size: 0.75rem;
-  color: var(--nova-color-neutral-500);
-}
-
-[data-theme="dark"] .nova-blog-author-card-title {
-  color: var(--nova-color-neutral-400);
-}
-
-/* Author card as link — remove underline and add hover. */
-a.nova-blog-author-card {
-  text-decoration: none;
-  color: inherit;
-
-  transition: border-color var(--nova-motion-duration) ease;
-}
-
-a.nova-blog-author-card:hover {
-  border-color: var(--nova-color-primary-300);
+/* Authors list item - wraps a single Author card. */
+.nova-blog-authors-list-item {
+  margin: 0;
+  padding: 0;
 }
 
-[data-theme="dark"] a.nova-blog-author-card:hover {
-  border-color: var(--nova-color-primary-700);
+/* Card-context author name - override page-h2 typography for card sizing. */
+.nova-blog-authors-list-item .nova-blog-author-name {
+  font-size: 1.125rem;
+  line-height: 1.3;
 }

package/build/src/styles/theme/Blog/Pages/BlogAuthorsPostsPage/style.css

@@ -1,34 +1,123 @@
 /**
- * Blog Authors Posts Page — Shared structural styles.
+ * Blog Authors Posts Page - Shared structural styles.
+ *
+ * Page header (Author card + description + view-all link) is rendered
+ * inside `nova-blog-header` via BlogLayout. Below the header sits a
+ * hairline divider followed by the post list.
  *
  * @since 0.15.0
  */
 
-/* Author posts header — spacing and alignment. */
-.nova-blog-author-posts-header {
-  margin-bottom: 1.5rem;
-  padding-bottom: 0.75rem;
+/* On this page the header is a Showcase-style intro card containing the
+   Author component, the description (optional), and the view-all link.
+   Layout adapts based on whether description is present so empty grid
+   tracks don't leak vertical gap. */
+.nova-blog-header:has(> .nova-blog-author-posts-view-all) {
+  display: grid;
+  grid-template-areas:
+    "author"
+    "view-all";
+  gap: 0.75rem;
+  padding: 1.25rem 1.5rem;
 
-  border-bottom: 1px solid var(--nova-color-neutral-200);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
+  border: 1px solid color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+  border-radius: var(--nova-shape-radius);
 }
 
-[data-theme="dark"] .nova-blog-author-posts-header {
-  border-bottom-color: var(--nova-color-neutral-800);
+.nova-blog-header:has(> .nova-blog-author-posts-view-all):has(> .nova-blog-description) {
+  grid-template-areas:
+    "author"
+    "description"
+    "view-all";
 }
 
-.nova-blog-author-posts-header .nova-heading {
-  margin-bottom: 0.25rem;
-
-  font-size: 1.25rem;
+.nova-blog-header:has(> .nova-blog-author-posts-view-all) > .nova-blog-author {
+  grid-area: author;
 }
 
-.nova-blog-author-posts-header p {
+.nova-blog-header:has(> .nova-blog-author-posts-view-all) > .nova-blog-description {
+  grid-area: description;
   margin: 0;
+}
+
+.nova-blog-header:has(> .nova-blog-author-posts-view-all) > .nova-blog-author-posts-view-all {
+  grid-area: view-all;
+  justify-self: start;
+}
+
+@media (min-width: 768px) {
+  .nova-blog-header:has(> .nova-blog-author-posts-view-all) {
+    grid-template-areas: "author view-all";
+    grid-template-columns: 1fr auto;
+    align-items: start;
+    column-gap: 1rem;
+  }
+
+  .nova-blog-header:has(> .nova-blog-author-posts-view-all):has(> .nova-blog-description) {
+    grid-template-areas:
+      "author       view-all"
+      "description  description";
+  }
+
+  .nova-blog-header:has(> .nova-blog-author-posts-view-all) > .nova-blog-author-posts-view-all {
+    justify-self: end;
+  }
+}
+
+/* "View all authors" - small button sized for the intro card. Built locally
+   (no class reuse) so it doesn't inherit any large-CTA chrome. Token-driven,
+   so each preset gets its own primary tint automatically. */
+.nova-blog-author-posts-view-all {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  padding: 0.375rem 0.875rem;
 
   font-size: 0.8125rem;
-  color: var(--nova-color-neutral-500);
+  font-weight: 600;
+  line-height: 1.4;
+
+  color: var(--nova-color-primary-600);
+  text-decoration: none;
+
+  background-color: transparent;
+  border: 1px solid color-mix(in srgb, var(--nova-color-primary-500), transparent 70%);
+  border-radius: var(--nova-shape-radius);
+
+  transition:
+    background-color var(--nova-motion-duration) ease,
+    border-color var(--nova-motion-duration) ease,
+    color var(--nova-motion-duration) ease;
+}
+
+.nova-blog-author-posts-view-all:hover,
+.nova-blog-author-posts-view-all:focus-visible {
+  color: var(--nova-color-primary-700);
+  text-decoration: none;
+
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+  border-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 50%);
 }
 
-[data-theme="dark"] .nova-blog-author-posts-header p {
-  color: var(--nova-color-neutral-400);
+[data-theme="dark"] .nova-blog-author-posts-view-all {
+  color: var(--nova-color-primary-300);
+}
+
+[data-theme="dark"] .nova-blog-author-posts-view-all:hover,
+[data-theme="dark"] .nova-blog-author-posts-view-all:focus-visible {
+  color: var(--nova-color-primary-200);
+
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
+  border-color: color-mix(in srgb, var(--nova-color-primary-400), transparent 40%);
+}
+
+/* Divider - flat 1px hairline between header and post list. */
+.nova-blog-author-posts-divider {
+  height: 1px;
+  margin: 1.5rem 0;
+
+  background-color: var(--nova-color-border);
+  border: none;
 }

package/build/src/styles/theme/BlogArchivePage/style.css

@@ -1,5 +1,5 @@
 /**
- * Blog Archive Page — Shared structural styles.
+ * Blog Archive Page - Shared structural styles.
  *
  * @since 0.15.0
  */
@@ -8,23 +8,23 @@
  * 1. Archive Container
  * ============================ */
 
-/* Archive page has section gap matching blog layout. */
+/* Archive page padding - section-gap divided down so the page doesn't
+   feel hollow when content is short. */
 .nova-blog-archive {
-  padding-block: var(--nova-section-gap);
-}
-
-/* Page heading — display heading for the archive title. */
-.nova-blog-archive > .nova-heading {
-  margin-bottom: 1.5rem;
-
-  font-size: 1.5rem;
+  padding-block: calc(var(--nova-section-gap) / 2);
 }
 
 /* ============================
  * 2. Year Sections
  * ============================ */
 
-/* Year heading — section divider between archive groups. */
+/* Year heading - flush with the page header above the first section. */
+.nova-blog-archive section h3 {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+}
+
+/* Spacing between year groups. */
 .nova-blog-archive section {
   margin-bottom: 2rem;
 }
@@ -33,10 +33,6 @@
   margin-bottom: 0;
 }
 
-.nova-blog-archive section h3 {
-  margin-bottom: 0.75rem;
-}
-
 /* ============================
  * 3. Post Links
  * ============================ */
@@ -53,7 +49,7 @@
   margin-bottom: 0.25rem;
 }
 
-/* Archive links — block-level with padding for click target. */
+/* Archive links - block-level with padding for click target. */
 .nova-blog-archive a {
   display: inline-block;
   padding: 0.25rem 0;
@@ -63,3 +59,20 @@
 
   text-decoration: none;
 }
+
+/* Standardized hover across all 6 presets - color shift to primary +
+   soft primary bg tint. Preset identity comes through via the primary
+   color value (envoy=violet, foundry=orange, marshal=green, lantern=amber,
+   sentinel=navy, signal=coral). No underline, no border-left. */
+.nova-blog-archive a:hover,
+.nova-blog-archive a:focus-visible {
+  color: var(--nova-color-primary-600);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-blog-archive a:hover,
+[data-theme="dark"] .nova-blog-archive a:focus-visible {
+  color: var(--nova-color-primary-400);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+}

package/build/src/styles/theme/BlogLayout/style.css

@@ -1,5 +1,5 @@
 /**
- * Blog Layout — Shared structural styles.
+ * Blog Layout - Shared structural styles.
  *
  * @since 0.15.0
  */
@@ -21,7 +21,7 @@
   padding-bottom: calc(var(--nova-section-gap) / 4);
 }
 
-/* Hidden on mobile — mobile trigger provides navigation. */
+/* Hidden on mobile - mobile trigger provides navigation. */
 .nova-blog-root aside {
   display: none;
   min-width: 0;
@@ -37,39 +37,43 @@
  * 2. Blog Header
  * ============================ */
 
-/* Blog heading — editorial scale, not hero scale. */
+/* Blog header - breathing room before the content below.
+   Collapses with the description's `margin-bottom` on pages that have one
+   (BlogListPage), and provides the gap by itself on pages that don't
+   (BlogTagsListPage, BlogAuthorsListPage). */
+.nova-blog-header {
+  margin-bottom: 1.25rem;
+}
+
+/* Blog heading - editorial scale, not hero scale. */
 .nova-blog-header .nova-heading {
   margin-top: 0;
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--nova-blog-header-heading-spacing, 0.25rem);
 
-  font-size: 1.5rem;
+  font-size: var(--nova-blog-header-heading-size, 1.5rem);
 }
 
 @media (min-width: 768px) {
   .nova-blog-header .nova-heading {
-    font-size: 1.75rem;
+    font-size: var(--nova-blog-header-heading-size-md, 1.75rem);
   }
 }
 
-/* Blog description — muted subtitle below the heading. */
+/* Blog description - muted subtitle below the heading. */
 .nova-blog-description {
   margin-top: 0;
   margin-bottom: 1.25rem;
 
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--nova-color-neutral-500);
-}
-
-[data-theme="dark"] .nova-blog-description {
-  color: var(--nova-color-neutral-400);
+  font-size: var(--nova-blog-description-size, 0.875rem);
+  line-height: var(--nova-blog-description-line-height, 1.6);
+  color: var(--nova-blog-description-color, var(--nova-color-text-muted));
 }
 
 /* ============================
  * 3. TOC Column
  * ============================ */
 
-/* Hide TOC column on mobile — TOCCollapsible trigger handles mobile.
+/* Hide TOC column on mobile - TOCCollapsible trigger handles mobile.
    On desktop, the inner .nova-toc handles its own sticky, border,
    padding, max-height, and scroll. The column is just a grid cell. */
 .nova-blog-toc-column {
@@ -81,7 +85,3 @@
     display: block;
   }
 }
-
-/* ============================
- * 4. Post Page — Compact Header
- * ============================ */

package/build/src/styles/theme/BlogListPage/style.css

@@ -1,5 +1,5 @@
 /**
- * Blog List Page — Shared structural styles.
+ * Blog List Page - Shared structural styles.
  *
  * @since 0.15.0
  */

package/build/src/styles/theme/BlogListPaginator/style.css

@@ -1,6 +1,6 @@
 /**
  * ============================
- * Blog List Paginator — Layout
+ * Blog List Paginator - Layout
  * ============================
  */
 
@@ -14,16 +14,12 @@
   margin-top: 2rem;
   padding-top: 1rem;
 
-  border-top: 1px solid var(--nova-color-neutral-200);
-}
-
-[data-theme="dark"] .nova-blog-list-paginator {
-  border-top-color: var(--nova-color-neutral-800);
+  border-top: 1px solid var(--nova-color-border);
 }
 
 /**
  * ============================
- * Blog List Paginator — Nav
+ * Blog List Paginator - Nav
  * ============================
  */
 
@@ -37,7 +33,7 @@
 
 /**
  * ============================
- * Blog List Paginator — Pages
+ * Blog List Paginator - Pages
  * ============================
  */
 
@@ -49,9 +45,14 @@
   text-decoration: none;
 }
 
+.nova-blog-list-paginator-page:hover,
+.nova-blog-list-paginator-page:focus-visible {
+  text-decoration: none;
+}
+
 /**
  * ============================
- * Blog List Paginator — Ellipsis
+ * Blog List Paginator - Ellipsis
  * ============================
  */
 

package/build/src/styles/theme/BlogPostItem/style.css

@@ -1,5 +1,5 @@
 /**
- * Blog Post Item — Shared structural styles.
+ * Blog Post Item - Shared structural styles.
  *
  * @since 0.15.0
  */
@@ -36,7 +36,7 @@
 }
 
 /* ============================
- * 2. Post Page — Open Flow
+ * 2. Post Page - Open Flow
  * ============================ */
 
 /* Full blog post pages flow without card treatment. */
@@ -52,9 +52,9 @@
 
 .nova-blog-post-item.nova-blog-post-item-page:hover {
   transform: none;
-  box-shadow: none;
-  border: none;
   background: none;
+  border-color: transparent;
+  box-shadow: none;
 }
 
 [data-theme="dark"] .nova-blog-post-item.nova-blog-post-item-page {
@@ -69,13 +69,13 @@
 
 [data-theme="dark"] .nova-blog-post-item.nova-blog-post-item-page:hover {
   transform: none;
-  box-shadow: none;
-  border: none;
   background: none;
+  border-color: transparent;
+  box-shadow: none;
 }
 
 /* ============================
- * 3. Post Page — Header
+ * 3. Post Page - Header
  * ============================ */
 
 /* Post page header gets more spacing and a bottom border
@@ -85,22 +85,21 @@
   margin-bottom: 1.5rem;
   padding-bottom: 1.5rem;
 
-  border-bottom: 1px solid var(--nova-color-neutral-200);
-}
-
-[data-theme="dark"] .nova-blog-post-item-page .nova-blog-post-item-header {
-  border-bottom-color: var(--nova-color-neutral-800);
+  border-bottom: 1px solid var(--nova-color-border);
 }
 
-/* Post page title — larger than card title for editorial weight. */
+/* Post page title - larger than card title for editorial weight. Size flows
+   from per-preset BlogPostItem overlay tokens (--nova-blog-post-title-size +
+   -size-md); fallback values match the system default when no preset is
+   loaded. */
 .nova-blog-post-item-page .nova-blog-post-item-header h1 {
-  font-size: 1.75rem;
+  font-size: var(--nova-blog-post-title-size, 1.75rem);
   line-height: 1.25;
 }
 
 @media (min-width: 768px) {
   .nova-blog-post-item-page .nova-blog-post-item-header h1 {
-    font-size: 2.125rem;
+    font-size: var(--nova-blog-post-title-size-md, 2.125rem);
   }
 }
 
@@ -108,12 +107,12 @@
  * 4. Card Content Hierarchy
  * ============================ */
 
-/* Header spacing — breathing room between metadata and content. */
+/* Header spacing - breathing room between metadata and content. */
 .nova-blog-post-item-header {
   margin-bottom: 0.75rem;
 }
 
-/* Content section — clear separation from header. */
+/* Content section - clear separation from header. */
 .nova-blog-post-item-content > *:first-child {
   margin-top: 0;
 }
@@ -122,7 +121,7 @@
   margin-bottom: 0;
 }
 
-/* Footer — tags and read-more row. */
+/* Footer - tags and read-more row. */
 .nova-blog-post-item-footer {
   display: flex;
   flex-wrap: wrap;
@@ -131,12 +130,12 @@
   margin-top: 1rem;
 }
 
-/* Read more — push to end of footer row. */
+/* Read more - push to end of footer row. */
 .nova-blog-post-item-read-more {
   margin-left: auto;
 }
 
-/* Tags row — flex wrap with gap. */
+/* Tags row - flex wrap with gap. */
 .nova-blog-post-item-tags {
   display: flex;
   flex-wrap: wrap;
@@ -144,17 +143,37 @@
 }
 
 /* ============================
- * 5. Reading Time
+ * 5. Author Link Hover
+ * ============================ */
+
+/* Author name link - kill Infima underline-on-hover; shift to primary on
+   hover so the linked author has a clear interactive affordance. Resting
+   typography (font-size/weight/color) lives in per-preset overlays. */
+.nova-blog-post-item-author-link {
+  text-decoration: none;
+
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-blog-post-item-author-link:hover,
+.nova-blog-post-item-author-link:focus-visible {
+  color: var(--nova-color-primary-600);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-blog-post-item-author-link:hover,
+[data-theme="dark"] .nova-blog-post-item-author-link:focus-visible {
+  color: var(--nova-color-primary-300);
+}
+
+/* ============================
+ * 6. Reading Time
  * ============================ */
 
-/* Reading time — muted secondary label next to date. */
+/* Reading time - muted secondary label next to date. */
 .nova-blog-post-item-reading-time {
   margin-left: 0.5rem;
   padding-left: 0.5rem;
 
-  border-left: 1px solid var(--nova-color-neutral-300);
-}
-
-[data-theme="dark"] .nova-blog-post-item-reading-time {
-  border-left-color: var(--nova-color-neutral-700);
+  border-left: 1px solid var(--nova-color-border);
 }

package/build/src/styles/theme/BlogPostItems/style.css

@@ -1,5 +1,5 @@
 /**
- * Blog Post Items — Shared structural styles.
+ * Blog Post Items - Shared structural styles.
  *
  * @since 0.15.0
  */

package/build/src/styles/theme/BlogPostPage/style.css

@@ -1,5 +1,5 @@
 /**
- * Blog Post Page — Shared structural styles.
+ * Blog Post Page - Shared structural styles.
  *
  * @since 0.15.0
  */

package/build/src/styles/theme/BlogPostPaginator/style.css

@@ -1,5 +1,5 @@
 /**
- * Blog Post Paginator — Shared structural styles.
+ * Blog Post Paginator - Shared structural styles.
  *
  * @since 0.15.0
  */
@@ -20,7 +20,7 @@
 
 /**
  * ============================
- * Blog Post Paginator — Heading
+ * Blog Post Paginator - Heading
  * ============================
  */
 
@@ -32,7 +32,7 @@
 
 /**
  * ============================
- * Blog Post Paginator — Link
+ * Blog Post Paginator - Link
  * ============================
  */
 
@@ -47,7 +47,8 @@
   text-decoration: none;
 }
 
-.nova-blog-post-paginator-link:hover {
+.nova-blog-post-paginator-link:hover,
+.nova-blog-post-paginator-link:focus-visible {
   text-decoration: none;
 }
 
@@ -60,7 +61,7 @@
 
 /**
  * ============================
- * Blog Post Paginator — Title
+ * Blog Post Paginator - Title
  * ============================
  */
 
@@ -76,7 +77,7 @@
 
 /**
  * ============================
- * Blog Post Paginator — Label
+ * Blog Post Paginator - Label
  * ============================
  */
 
@@ -88,7 +89,7 @@
 
 /**
  * ============================
- * Blog Post Paginator — Excerpt
+ * Blog Post Paginator - Excerpt
  * ============================
  */