@cbnventures/docusaurus-preset-nova 0.17.0 → 0.18.0

package/build/src/styles/presets/signal/theme/MDXContent/style.css

@@ -1,403 +1,194 @@
 /**
- * Signal — Typography: body, links, lists, inline code, blockquotes,
- * admonitions, horizontal rule, doc content area, TOC, announcement bar,
- * breadcrumbs, tags, tabs, cards, blog list, and responsive.
+ * Signal - `MDXContent` theme overlay.
+ *
+ * Article body styling - paragraphs, strong/small, horizontal rule,
+ * blockquote, lists, and MDX tables (dense, compact, spreadsheet-feel
+ * grid with explicit cell borders). Scoped to `.nova-mdx-content`, the
+ * wrapper class produced by `MDXContent`. Because `MDXContent` is mounted
+ * by `DocItem/Content` (docs), `BlogPostItem` (blog), and `MDXPage`
+ * (custom pages like `/manifesto`), the rules in this file apply to all
+ * three MDX surfaces - there is no parallel set in `DocItem/Content`.
+ * Inline code lives in `CodeInline`.
+ *
+ * Signal's "terminal density" identity wants the tightest article rhythm
+ * of any preset - paragraph + list-item bottom margins are roughly half
+ * the baseline, list padding-inline-start tightened, and the bullet
+ * sits in neutral-400 instead of an identity primary. Migrated `li`
+ * color from preset.css to the MDXContent overlay (Section 4) so it
+ * only applies inside article body.
  *
  * @since 0.15.0
  */
 
 /* ============================
- * 1. Body Text
+ * 0. Preset-owned rhythm tokens
  * ============================ */
 
-/* Monospace everywhere it matters. */
-code,
-pre,
-kbd,
-samp {
-  font-family: var(--nova-font-code);
-}
-
-/* Strong text — heavier, darker. */
-strong {
-  font-weight: 700;
-  color: var(--nova-color-neutral-900);
-}
-
-[data-theme="dark"] strong {
-  color: var(--nova-color-neutral-50);
-}
-
-/* Small text. */
-small {
-  font-size: 0.8125rem;
+:root {
+  --nova-signal-mdx-paragraph-margin-block-end: 0.625rem;
+  --nova-signal-mdx-list-padding-inline-start: 1.25rem;
+  --nova-signal-mdx-list-margin-block-end: 0.625rem;
+  --nova-signal-mdx-list-item-margin-block-end: 0.125rem;
 }
 
 /* ============================
- * 2. Lists
+ * 0b. Canonical aliases - consumed by shared theme/MDXContent
  * ============================ */
 
-ul,
-ol {
-  padding-left: 1.25rem;
-  margin-bottom: 0.75rem;
+:root {
+  --nova-mdx-paragraph-margin-block-end: var(--nova-signal-mdx-paragraph-margin-block-end);
+  --nova-mdx-list-padding-inline-start: var(--nova-signal-mdx-list-padding-inline-start);
+  --nova-mdx-list-margin-block-end: var(--nova-signal-mdx-list-margin-block-end);
+  --nova-mdx-list-item-margin-block-end: var(--nova-signal-mdx-list-item-margin-block-end);
 }
 
 /* ============================
- * 4. Inline Code
+ * 1. Paragraphs
+ *
+ * Block-margin flows from shared theme/MDXContent via the canonical
+ * `--nova-mdx-paragraph-margin-block-end` token (Section 0 above).
  * ============================ */
 
-/* Inline code — bordered, flat. */
-:not(pre) > code {
-  font-size: 0.8125rem;
-  padding: 0.0625rem 0.3125rem;
-  border: 1px solid var(--nova-color-neutral-200);
-  border-radius: var(--nova-shape-radius);
-  background-color: var(--nova-color-neutral-50);
-  color: var(--nova-color-primary-700);
+.nova-mdx-content p {
+  color: var(--nova-color-text);
 }
 
-[data-theme="dark"] :not(pre) > code {
-  border-color: var(--nova-color-neutral-700);
-  background-color: var(--nova-color-neutral-900);
-  color: var(--nova-color-primary-300);
-}
-
-/* Reset code inside pre. */
-pre code {
-  padding: 0;
-  border: none;
-  background: none;
-  color: inherit;
+[data-theme="dark"] .nova-mdx-content p {
+  color: var(--nova-color-text);
 }
 
 /* ============================
- * 5. Blockquotes & Admonitions
+ * 2. Inline emphasis
  * ============================ */
 
-/* Minimal, rose left border. */
-blockquote {
-  border-left: 2px solid var(--nova-color-primary-500);
-  margin: 0.5rem 0;
-  padding: 0.375rem 0.75rem;
-  color: var(--nova-color-neutral-500);
-  font-style: normal;
-  font-size: 0.875rem;
+.nova-mdx-content strong {
+  font-weight: 700;
+  color: var(--nova-color-text);
 }
 
-[data-theme="dark"] blockquote {
-  color: var(--nova-color-neutral-400);
-  border-left-color: var(--nova-color-primary-400);
+[data-theme="dark"] .nova-mdx-content strong {
+  color: var(--nova-color-text);
 }
 
-/* Sharp, bordered, compact. Left border only. */
-.nova-admonition {
-  border: none;
-  border-left: 2px solid var(--nova-color-neutral-400);
-  border-radius: var(--nova-shape-radius);
-  padding: var(--nova-shape-padding);
-  margin: 0.75rem 0;
+.nova-mdx-content small {
   font-size: 0.8125rem;
-  background-color: var(--nova-color-neutral-50);
-}
-
-[data-theme="dark"] .nova-admonition {
-  background-color: var(--nova-color-neutral-900);
-}
-
-/* Admonition label — uppercase, monospace. */
-.nova-admonition-heading strong {
-  font-family: var(--nova-font-code);
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.nova-admonition[data-admonition-type="tip"] {
-  border-left-color: var(--nova-color-primary-500);
-}
-
-.nova-admonition[data-admonition-type="warning"],
-.nova-admonition[data-admonition-type="caution"] {
-  border-left-color: var(--nova-color-accent-600);
-}
-
-.nova-admonition[data-admonition-type="danger"] {
-  border-left-color: var(--nova-color-primary-600);
-}
-
-.nova-admonition[data-admonition-type="info"] {
-  border-left-color: var(--nova-color-neutral-500);
 }
 
 /* ============================
- * 6. Horizontal Rule
+ * 3. Horizontal rule
  * ============================ */
 
-hr {
+.nova-mdx-content hr {
   border: none;
-  border-top: 1px solid var(--nova-color-neutral-200);
+  border-top: 1px solid var(--nova-color-border);
   margin: 1.25rem 0;
 }
 
-[data-theme="dark"] hr {
-  border-top-color: var(--nova-color-neutral-800);
+[data-theme="dark"] .nova-mdx-content hr {
+  border-top-color: var(--nova-color-border);
 }
 
 /* ============================
- * 7. Doc Content Area
+ * 4. Lists
+ *
+ * List padding-inline-start + block-margin + list-item margin flow from
+ * shared theme/MDXContent via canonical tokens (Section 0 above sets
+ * signal-specific tighter overrides). List-item color migrated from
+ * preset.css.
  * ============================ */
 
-/* Article inherits grid column width. No hardcoded max-width. */
-article p {
-  margin-bottom: 0.625rem;
-  color: var(--nova-color-neutral-700);
+.nova-mdx-content li {
+  color: var(--nova-color-text);
 }
 
-[data-theme="dark"] article p {
-  color: var(--nova-color-neutral-300);
+[data-theme="dark"] .nova-mdx-content li {
+  color: var(--nova-color-text);
 }
 
-article ul,
-article ol {
-  padding-left: 1.25rem;
-  margin-bottom: 0.625rem;
+.nova-mdx-content li::marker {
+  color: var(--nova-color-text-muted);
 }
 
-article li {
-  margin-bottom: 0.125rem;
+[data-theme="dark"] .nova-mdx-content li::marker {
+  color: var(--nova-color-text-muted);
 }
 
 /* ============================
- * 8. TOC (Table of Contents)
+ * 5. Blockquote
  * ============================ */
 
-/* Compact right-side TOC. Sticky within grid column. */
-nav[aria-label*="table of contents"] {
-  font-size: 0.6875rem;
-  line-height: 1.35;
-  position: static;
-  max-height: none;
-  overflow-y: auto;
-}
-
-nav[aria-label*="table of contents"] a {
-  color: var(--nova-color-neutral-400);
-  text-decoration: none;
-  padding: 0.0625rem 0;
-  display: block;
-}
-
-nav[aria-label*="table of contents"] a:hover,
-nav[aria-label*="table of contents"] a:focus-visible {
-  color: var(--nova-color-primary-600);
+.nova-mdx-content blockquote {
+  border-left: 2px solid var(--nova-color-primary-500);
+  margin: 0.5rem 0;
+  padding: 0.375rem 0.75rem;
+  color: var(--nova-color-text-muted);
+  font-style: normal;
+  font-size: 0.875rem;
 }
 
-[data-theme="dark"] nav[aria-label*="table of contents"] a:hover,
-[data-theme="dark"] nav[aria-label*="table of contents"] a:focus-visible {
-  color: var(--nova-color-primary-400);
+[data-theme="dark"] .nova-mdx-content blockquote {
+  color: var(--nova-color-text-muted);
+  border-left-color: var(--nova-color-primary-400);
 }
 
 /* ============================
- * 9. Breadcrumbs
+ * 6. Tables
  * ============================ */
 
-.breadcrumbs {
-  font-family: var(--nova-font-code);
-  font-size: 0.6875rem;
-  letter-spacing: 0.02em;
-  margin-bottom: 0.75rem;
-}
-
-.breadcrumbs a {
-  color: var(--nova-color-neutral-400);
-  text-decoration: none;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.breadcrumbs a:hover,
-.breadcrumbs a:focus-visible {
-  color: var(--nova-color-primary-600);
-}
-
-[data-theme="dark"] .breadcrumbs a:hover,
-[data-theme="dark"] .breadcrumbs a:focus-visible {
-  color: var(--nova-color-primary-400);
-}
-
-.breadcrumbs span {
-  color: var(--nova-color-neutral-300);
+.nova-mdx-content table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--nova-color-border);
+  min-width: 480px;
 }
 
-[data-theme="dark"] .breadcrumbs span {
-  color: var(--nova-color-neutral-600);
+[data-theme="dark"] .nova-mdx-content table {
+  border-color: var(--nova-color-border);
 }
 
-/* ============================
- * 11. Tags
- * ============================ */
-
-.tag {
-  display: inline-block;
-  padding: 0.0625rem 0.375rem;
-  font-family: var(--nova-font-code);
-  font-size: 0.625rem;
-  font-weight: 500;
+.nova-mdx-content th {
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  background-color: var(--nova-color-neutral-50);
-  color: var(--nova-color-neutral-600);
-  text-decoration: none;
-  border: 1px solid var(--nova-color-neutral-200);
-}
-
-.tag:hover,
-.tag:focus-visible {
-  border-color: var(--nova-color-primary-500);
-  color: var(--nova-color-primary-600);
-  text-decoration: none;
-}
-
-[data-theme="dark"] .tag {
-  background-color: var(--nova-color-neutral-900);
-  color: var(--nova-color-neutral-400);
-  border-color: var(--nova-color-neutral-800);
-}
-
-[data-theme="dark"] .tag:hover,
-[data-theme="dark"] .tag:focus-visible {
-  border-color: var(--nova-color-primary-400);
-  color: var(--nova-color-primary-400);
-}
-
-/* ============================
- * 12. Tabs
- * ============================ */
-
-/* Sharp tab indicators. */
-[role="tablist"] {
-  border-bottom: 1px solid var(--nova-color-neutral-200);
-}
-
-[data-theme="dark"] [role="tablist"] {
-  border-bottom-color: var(--nova-color-neutral-800);
-}
-
-[role="tab"] {
-  padding: 0.3125rem 0.75rem;
-  font-family: var(--nova-font-code);
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: transparent;
-  color: var(--nova-color-neutral-400);
-  cursor: pointer;
+  padding: 0.3125rem 0.5rem;
+  border-bottom: 2px solid var(--nova-color-border);
+  border-right: 1px solid var(--nova-color-border);
+  color: var(--nova-color-text-muted);
+  background-color: var(--nova-color-surface-raised);
+  white-space: nowrap;
 }
 
-[role="tab"]:hover,
-[role="tab"]:focus-visible {
-  color: var(--nova-color-neutral-700);
+.nova-mdx-content th:last-child {
+  border-right: none;
 }
 
-[data-theme="dark"] [role="tab"]:hover,
-[data-theme="dark"] [role="tab"]:focus-visible {
-  color: var(--nova-color-neutral-300);
+[data-theme="dark"] .nova-mdx-content th {
+  border-bottom-color: var(--nova-color-border);
+  border-right-color: var(--nova-color-border);
+  color: var(--nova-color-text-muted);
+  background-color: var(--nova-color-surface-raised);
 }
 
-[role="tab"][aria-selected="true"] {
-  color: var(--nova-color-primary-600);
-  border-bottom-color: var(--nova-color-primary-600);
+.nova-mdx-content td {
+  padding: 0.3125rem 0.5rem;
+  border-bottom: 1px solid var(--nova-color-border);
+  border-right: 1px solid var(--nova-color-border);
+  vertical-align: top;
 }
 
-[data-theme="dark"] [role="tab"][aria-selected="true"] {
-  color: var(--nova-color-primary-400);
-  border-bottom-color: var(--nova-color-primary-400);
-}
-
-/* ============================
- * 13. Cards
- * ============================ */
-
-/* Flat with 1px border. No shadow. Spreadsheet borders. */
-.nova-doc-card,
-article[class*="card"] {
-  border: var(--nova-depth-card-border);
-  border-radius: var(--nova-shape-radius);
-  box-shadow: var(--nova-depth-card-shadow);
-  backdrop-filter: var(--nova-depth-card-backdrop);
-  -webkit-backdrop-filter: var(--nova-depth-card-backdrop);
-  padding: var(--nova-shape-padding);
-  background-color: var(--nova-color-neutral-50);
-}
-
-[data-theme="dark"] .nova-doc-card,
-[data-theme="dark"] article[class*="card"] {
-  background-color: var(--nova-color-neutral-950);
-  border-color: var(--nova-color-neutral-800);
-}
-
-.nova-doc-card:hover,
-.nova-doc-card:focus-visible,
-article[class*="card"]:hover,
-article[class*="card"]:focus-visible {
-  border-color: var(--nova-color-primary-500);
-}
-
-[data-theme="dark"] .nova-doc-card:hover,
-[data-theme="dark"] .nova-doc-card:focus-visible,
-[data-theme="dark"] article[class*="card"]:hover,
-[data-theme="dark"] article[class*="card"]:focus-visible {
-  border-color: var(--nova-color-primary-400);
-}
-
-/* ============================
- * 14. Blog List
- * ============================ */
-
-.blog-list-item {
-  padding: 0.75rem 0;
-  border-bottom: 1px solid var(--nova-color-neutral-200);
-}
-
-[data-theme="dark"] .blog-list-item {
-  border-bottom-color: var(--nova-color-neutral-800);
-}
-
-/* ============================
- * 16. Responsive Typography
- * ============================ */
-
-/**
- * Signal compact padding scale:
- *   base/xs: 12px
- *   md (768px): 16px
- *   lg (1024px): 20px
- *
- * Breakpoints: xs(480), sm(640), md(768), lg(1024), xl(1280)
- * Minimum viewport: 320px
- */
-
-.pagination-nav {
-  flex-direction: column;
+.nova-mdx-content td:last-child {
+  border-right: none;
 }
 
-/* xs — 480px and above */
-@media (min-width: 480px) {
-  .pagination-nav {
-    flex-direction: row;
-  }
+[data-theme="dark"] .nova-mdx-content td {
+  border-bottom-color: var(--nova-color-border);
+  border-right-color: var(--nova-color-border);
 }
 
-/* sm — 640px and above */
-@media (min-width: 640px) {
-  /* TOC — sticky on desktop. */
-  nav[aria-label*="table of contents"] {
-    position: sticky;
-    top: calc(var(--nova-shape-padding) + 3rem);
-    max-height: calc(100vh - 6rem);
-  }
+.nova-mdx-content tr:last-child td {
+  border-bottom: none;
 }

package/build/src/styles/presets/signal/theme/MDXPage/style.css

@@ -0,0 +1,8 @@
+/**
+ * Signal - `MDXPage` theme overlay.
+ *
+ * Tiny-surface - custom MDX renderers and MDX page wrapper. Inherits
+ * typography + colors from preset.css and DocItem/Content.
+ *
+ * @since 0.18.0
+ */

package/build/src/styles/presets/signal/theme/Mermaid/style.css

@@ -0,0 +1,17 @@
+/**
+ * Signal - `Mermaid` theme overlay.
+ *
+ * Identity flows through tokens defined in signal/preset.css (light + dark)
+ * which lib/mermaid.ts reads at render time for Layer 1 themeVariables +
+ * Layer 2 themeCSS. This file holds residual decorations only - currently
+ * empty.
+ *
+ * Cluster titles previously used `var(--nova-font-code)` uppercase at 0.7rem
+ * for a terminal section-header voice, but mono fonts and uppercase render
+ * wider than the proportional display font mermaid measured the
+ * `<foreignObject>` width against at 13px - the title text overflowed the
+ * cluster border. The cluster title now inherits the themeCSS default
+ * (display font, 13px, weight 600) so the rendered text fits.
+ *
+ * @since 0.18.0
+ */