@cbnventures/docusaurus-preset-nova 0.16.2 → 0.18.0

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

@@ -1,5 +1,67 @@
 /**
- * Skip To Content — Shared structural styles.
+ * SkipToContent - Shared structural styles.
  *
- * @since 0.15.0
+ * Renders the Docusaurus accessibility skip-to-content link as a fixed,
+ * focusable button at the top-left of the viewport. Hidden off-screen by
+ * default; slides into view when keyboard-focused (`:focus-visible`).
+ *
+ * Visual identity (color, surface, border, shadow) lives in each preset.css.
+ * Shape, spacing, and timing tokens live in the per-preset SkipToContent
+ * overlay. Both layers can be overridden by consumers via docusaurus.config.ts
+ * custom CSS.
+ *
+ * @since 0.18.0
  */
+
+.nova-skip-to-content {
+  position: fixed;
+  top: var(--nova-skip-offset, 0.75rem);
+  left: var(--nova-skip-offset, 0.75rem);
+  z-index: 9999;
+
+  padding: var(--nova-skip-padding-y, 0.625rem) var(--nova-skip-padding-x, 1rem);
+
+  font-family: var(--nova-font-display);
+  font-size: 0.875rem;
+  font-weight: var(--nova-skip-font-weight, 600);
+  line-height: 1.2;
+  text-decoration: none;
+
+  color: var(--nova-skip-color, var(--nova-color-background));
+  background-color: var(--nova-skip-bg, var(--nova-color-primary-600));
+  border: var(--nova-skip-border, 1px solid transparent);
+  border-radius: var(--nova-skip-radius, 0.375rem);
+  box-shadow: var(--nova-skip-shadow, 0 4px 12px rgb(0 0 0 / 0.15));
+
+  opacity: 0;
+  pointer-events: none;
+  transform: var(--nova-skip-transform-hidden, translateY(-200%));
+  transition: var(--nova-skip-transition, transform var(--nova-motion-duration) var(--nova-motion-easing), opacity var(--nova-motion-duration) var(--nova-motion-easing));
+}
+
+/* Color guard against preset.css link rules - the `<a>` selectors at preset
+   level (`a:hover`, `a:focus-visible`, and their `[data-theme="dark"]`
+   variants up to specificity 0,2,1) otherwise clobber the bare-class color
+   rule for the skip link. Pin `--nova-skip-color` across every interaction
+   state with matching pseudo-class specificity. */
+.nova-skip-to-content:hover,
+.nova-skip-to-content:focus,
+.nova-skip-to-content:focus-visible {
+  color: var(--nova-skip-color, var(--nova-color-background));
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-skip-to-content,
+[data-theme="dark"] .nova-skip-to-content:hover,
+[data-theme="dark"] .nova-skip-to-content:focus,
+[data-theme="dark"] .nova-skip-to-content:focus-visible {
+  color: var(--nova-skip-color, var(--nova-color-background));
+}
+
+.nova-skip-to-content:focus,
+.nova-skip-to-content:focus-visible {
+  outline: none;
+  opacity: 1;
+  pointer-events: auto;
+  transform: var(--nova-skip-transform-shown, translateY(0));
+}

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

@@ -1,10 +1,10 @@
 /**
  * ============================
- * TOC — Container
+ * TOC - Container
  * ============================
  */
 
-/* Hidden on mobile — TOCCollapsible is shown instead. */
+/* Hidden on mobile - TOCCollapsible is shown instead. */
 .nova-toc {
   display: none;
 }
@@ -19,7 +19,7 @@
     max-height: calc(100vh - var(--nova-layout-sticky-top, 5rem) - calc(var(--nova-section-gap) / 4) - 1rem);
     padding-left: 1rem;
 
-    border-left: 1px solid var(--nova-color-neutral-200);
+    border-left: 1px solid var(--nova-color-border);
 
     overflow-y: auto;
     scrollbar-width: none;
@@ -29,15 +29,11 @@
     width: 0;
     height: 0;
   }
-
-  [data-theme="dark"] .nova-toc {
-    border-left-color: var(--nova-color-neutral-800);
-  }
 }
 
 /**
  * ============================
- * TOC — List
+ * TOC - List
  * ============================
  */
 
@@ -54,7 +50,7 @@
 
 /**
  * ============================
- * TOC — Link
+ * TOC - Link
  * ============================
  */
 

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

@@ -1,11 +1,11 @@
 /**
- * TOC Collapsible — Trigger, overlay, and panel structural styles.
+ * TOC Collapsible - Trigger, overlay, and panel structural styles.
  *
  * @since 0.15.0
  */
 
 /* ============================
- * Trigger — Mobile Only
+ * Trigger - Mobile Only
  * ============================ */
 
 .nova-toc-collapsible-trigger {
@@ -19,22 +19,15 @@
   font: inherit;
   font-size: 0.8125rem;
   text-align: left;
-  color: var(--nova-color-neutral-600);
+  color: var(--nova-color-text-muted);
 
-  background: var(--nova-color-neutral-50);
-  border: 1px solid var(--nova-color-neutral-200);
+  background: var(--nova-color-surface-raised);
+  border: 1px solid var(--nova-color-border);
   border-radius: 0.375rem;
 
   cursor: pointer;
 }
 
-[data-theme="dark"] .nova-toc-collapsible-trigger {
-  color: var(--nova-color-neutral-400);
-
-  background: var(--nova-color-neutral-900);
-  border-color: var(--nova-color-neutral-700);
-}
-
 @media (min-width: 1024px) {
   .nova-toc-collapsible-trigger {
     display: none;
@@ -62,7 +55,7 @@
 }
 
 /* ============================
- * Overlay — Open / Close Animation
+ * Overlay - Open / Close Animation
  * ============================ */
 
 @keyframes nova-toc-collapsible-open {
@@ -120,7 +113,7 @@
 }
 
 /* ============================
- * Panel — Header
+ * Panel - Header
  * ============================ */
 
 .nova-toc-collapsible-header {
@@ -130,25 +123,17 @@
 
   padding: 1rem;
 
-  border-bottom: 1px solid var(--nova-color-neutral-300);
-}
-
-[data-theme="dark"] .nova-toc-collapsible-header {
-  border-bottom-color: var(--nova-color-neutral-800);
+  border-bottom: 1px solid var(--nova-color-border);
 }
 
 .nova-toc-collapsible-header-title {
   font-weight: 600;
   font-size: 0.875rem;
-  color: var(--nova-color-neutral-900);
-}
-
-[data-theme="dark"] .nova-toc-collapsible-header-title {
-  color: var(--nova-color-neutral-100);
+  color: var(--nova-color-text);
 }
 
 /* ============================
- * Panel — Close Button
+ * Panel - Close Button
  * ============================ */
 
 .nova-toc-collapsible-close {
@@ -163,10 +148,10 @@
   height: 2.25rem;
   padding: 0;
 
-  color: var(--nova-color-neutral-500);
+  color: var(--nova-color-text-muted);
 
   background: none;
-  border: 1px solid var(--nova-color-neutral-300);
+  border: 1px solid var(--nova-color-border);
   border-radius: 0.375rem;
 
   cursor: pointer;
@@ -179,12 +164,8 @@
   inset: -4px;
 }
 
-[data-theme="dark"] .nova-toc-collapsible-close {
-  border-color: var(--nova-color-neutral-700);
-}
-
 /* ============================
- * Panel — Content
+ * Panel - Content
  * ============================ */
 
 .nova-toc-collapsible-content {

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

@@ -1,5 +1,13 @@
 /**
- * Tab Item — Shared structural styles.
+ * Tab Item - Shared structural styles.
  *
  * @since 0.15.0
  */
+
+/* ============================
+ * Tab Item - Panel padding
+ * ============================ */
+
+.nova-tabs-panel {
+  padding: 0.75rem 0;
+}

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

@@ -8,6 +8,14 @@
  * Tabs — Tab List
  * ============================ */
 
+/* Per-preset tabs paint the list hairline via `box-shadow: inset 0 -2px 0`
+ * (inside the content box) and the active marker via the tab's
+ * `border-bottom` at the same y. Both paint in the last 2px of the
+ * content box, so the marker overlays the hairline cleanly. Using
+ * `border-bottom` on the list with `margin-bottom: -Npx` on the tab
+ * would push the overlap into the border zone, which gets clipped:
+ * `overflow-x: auto` (needed for horizontal scroll on wide strips)
+ * auto-promotes `overflow-y` to `auto` per the CSS overflow spec. */
 .nova-tabs-list {
   display: flex;
   padding: 0;
@@ -16,7 +24,6 @@
   list-style: none;
 
   overflow-x: auto;
-  overflow-y: hidden;
   scrollbar-width: none;
 }
 
@@ -34,6 +41,13 @@
 
   cursor: pointer;
   user-select: none;
+
+  /* Override the MDXContent rhythm rule's `margin-block: 0.25rem` on the
+   * bottom edge. The tab's `border-bottom` (active marker) must land at
+   * the same y as the list's `box-shadow` hairline (last 2px inside the
+   * list content box). A 4px bottom margin would leave the tab 4px above
+   * the shadow, producing two stacked lines. */
+  margin-block-end: 0;
 }
 
 .nova-tabs-tab:active {

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

@@ -1,6 +1,6 @@
 /**
  * ============================
- * Tag — Base
+ * Tag - Base
  * ============================
  */
 
@@ -14,7 +14,7 @@
 
 /**
  * ============================
- * Tag — Count
+ * Tag - Count
  * ============================
  */
 

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

@@ -1,6 +1,41 @@
 /**
  * ============================
- * Tags List By Letter — List
+ * Tags List By Letter - Section
+ * ============================
+ */
+
+.nova-tags-list-by-letter {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+}
+
+@media (min-width: 1024px) {
+  .nova-tags-list-by-letter {
+    grid-template-columns: 1fr 1fr;
+    column-gap: 2.5rem;
+  }
+}
+
+/**
+ * ============================
+ * Tags List By Letter - Letter heading
+ * ============================
+ *
+ * Letter h2 is rendered through @theme/Heading (so it shares the
+ * `.nova-heading` baseline + hash-link anchor), but on this page it acts
+ * as an index divider rather than an in-article section heading. Reset
+ * the per-preset article-h2 margins so the parent grid `gap` governs
+ * spacing predictably.
+ */
+
+.nova-tags-list-by-letter-group .nova-heading {
+  margin-block: 0 0.5rem;
+}
+
+/**
+ * ============================
+ * Tags List By Letter - List
  * ============================
  */
 

package/build/src/styles/theme/ThemeProvider/TitleFormatter/style.css

@@ -1,5 +1,5 @@
 /**
- * Theme Provider Title Formatter — Shared structural styles.
+ * Theme Provider Title Formatter - Shared structural styles.
  *
  * @since 0.15.0
  */

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

@@ -1,5 +1,5 @@
 /**
- * Theme Provider — Shared structural styles.
+ * Theme Provider - Shared structural styles.
  *
  * @since 0.15.0
  */

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

@@ -1,5 +1,5 @@
 /**
- * Themed Image — Shared structural styles.
+ * Themed Image - Shared structural styles.
  *
  * @since 0.15.0
  */

package/build/src/styles/theme/error-surface/style.css

@@ -0,0 +1,141 @@
+/**
+ * Error Surface - Shared structural styles.
+ *
+ * Layout-only baseline for the umbrella scope shared by 404 / per-page-crash
+ * / top-level-error surfaces. Each surface composes this scope with its own
+ * per-surface scope (see theme/NotFound/Content/index.tsx, theme/Error/index.tsx,
+ * theme/ErrorPageContent/index.tsx). Presets paint identity in their per-preset
+ * overlay at presets/<preset>/theme/error-surface/style.css.
+ *
+ * @since 0.18.0
+ */
+
+/**
+ * ============================
+ * Error Surface - Container
+ * ============================
+ */
+
+.nova-error-surface {
+  padding-block: 4rem 5rem;
+}
+
+/**
+ * ============================
+ * Error Surface - Heading
+ * ============================
+ */
+
+.nova-error-surface h1 {
+  margin: 0 0 1rem;
+}
+
+/**
+ * ============================
+ * Error Surface - Paragraphs
+ * ============================
+ */
+
+.nova-error-surface p {
+  margin-block: 0 1rem;
+
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.nova-error-surface p:last-child {
+  margin-bottom: 0;
+}
+
+/**
+ * ============================
+ * Error Surface - Retry Button
+ * ============================
+ */
+
+.nova-error-surface button {
+  padding: 0.5rem 1rem;
+
+  /* 16px prevents iOS Safari auto-zoom on focus. */
+  font-size: 1rem;
+
+  cursor: pointer;
+  border: 1px solid var(--nova-color-border);
+  border-radius: var(--nova-shape-radius);
+  background: transparent;
+  color: inherit;
+
+  transition: border-color var(--nova-motion-duration) ease,
+              background-color var(--nova-motion-duration) ease;
+}
+
+.nova-error-surface button:hover {
+  border-color: var(--nova-color-primary-400);
+  background-color: var(--nova-color-surface-raised);
+}
+
+.nova-error-surface button:focus-visible {
+  outline: 2px solid var(--nova-color-primary-500);
+  outline-offset: 2px;
+}
+
+/**
+ * ============================
+ * Error Surface - Horizontal Rule
+ * ============================
+ */
+
+.nova-error-surface hr {
+  margin-block: 2rem;
+
+  border: 0;
+  border-top: 1px solid var(--nova-color-border);
+}
+
+/**
+ * ============================
+ * Not Found - Actions row + Primary CTA
+ * ============================
+ */
+
+.nova-not-found-actions {
+  margin-top: 1.5rem;
+}
+
+.nova-not-found-back-home {
+  display: inline-flex;
+  align-items: center;
+
+  padding: 0.625rem 1.25rem;
+
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+
+  color: var(--nova-color-background);
+  background-color: var(--nova-color-primary-500);
+  border-radius: var(--nova-shape-radius);
+
+  transition: background-color var(--nova-motion-duration) ease,
+              transform var(--nova-motion-duration) ease;
+}
+
+.nova-not-found-back-home:hover,
+.nova-not-found-back-home:focus-visible {
+  background-color: var(--nova-color-primary-600);
+  text-decoration: none;
+  color: var(--nova-color-background);
+}
+
+/**
+ * Dark-mode color override - required because each preset.css declares a
+ * `[data-theme="dark"] a` rule (specificity 0,1,1) that would otherwise
+ * clobber the bare class rule (specificity 0,1,0) and turn the CTA text
+ * into a primary-300 tint that blends into the primary-500 button fill.
+ * Specificity 0,2,0 wins.
+ */
+[data-theme="dark"] .nova-not-found-back-home,
+[data-theme="dark"] .nova-not-found-back-home:hover,
+[data-theme="dark"] .nova-not-found-back-home:focus-visible {
+  color: var(--nova-color-background);
+}

package/build/src/styles/utilities.css

@@ -1,12 +1,12 @@
 /**
- * Utilities — Shared structural patterns for reusable UI elements.
+ * Utilities - Shared structural patterns for reusable UI elements.
  *
  * @since 0.15.0
  */
 
 /**
  * ============================
- * CTA — Primary Button
+ * CTA - Primary Button
  * ============================
  */
 
@@ -28,7 +28,7 @@
 
 /**
  * ============================
- * CTA — Secondary Button
+ * CTA - Secondary Button
  * ============================
  */
 
@@ -48,7 +48,7 @@
 
 /**
  * ============================
- * Surface Alt — First/Last Child Reset
+ * Surface Alt - First/Last Child Reset
  * ============================
  */
 

package/build/src/tests/cascade-defensive.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cascade-defensive.test.d.ts.map

package/build/src/tests/cascade-defensive.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascade-defensive.test.d.ts","sourceRoot":"","sources":["../../../src/tests/cascade-defensive.test.ts"],"names":[],"mappings":""}