@cbnventures/docusaurus-preset-nova 0.0.0 → 0.15.0

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

@@ -0,0 +1,343 @@
+/**
+ * Sentinel — Typography: paragraphs, links, lists, inline code, blockquotes,
+ * admonitions, announcement bar, breadcrumbs, tabs, doc cards, TOC, tags,
+ * blog list, and doc content area.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Paragraphs and Inline Elements
+ * ============================ */
+
+strong {
+  font-weight: 700;
+  color: var(--nova-color-neutral-900);
+}
+
+[data-theme="dark"] strong {
+  color: var(--nova-color-neutral-100);
+}
+
+em {
+  font-style: italic;
+}
+
+small {
+  font-size: 0.875rem;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--nova-color-neutral-200);
+  margin: 2rem 0;
+}
+
+[data-theme="dark"] hr {
+  border-top-color: var(--nova-color-neutral-800);
+}
+
+/* ============================
+ * 2. Lists
+ * ============================ */
+
+ul,
+ol {
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+/* ============================
+ * 4. Inline Code
+ * ============================ */
+
+:not(pre) > code {
+  font-family: var(--nova-font-code);
+  font-size: 0.85em;
+  padding: 0.15em 0.4em;
+  border-radius: calc(var(--nova-shape-radius) * 0.5);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+  color: var(--nova-color-primary-700);
+  border: 1px solid color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+  word-break: break-word;
+}
+
+[data-theme="dark"] :not(pre) > code {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+  color: var(--nova-color-primary-300);
+  border-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 85%);
+}
+
+/* ============================
+ * 5. Blockquotes
+ * ============================ */
+
+blockquote {
+  margin: 1rem 0;
+  padding: 0.625rem 1rem;
+  border-left: 2px solid var(--nova-color-primary-500);
+  border-radius: 0;
+  color: var(--nova-color-neutral-600);
+  font-style: italic;
+}
+
+[data-theme="dark"] blockquote {
+  color: var(--nova-color-neutral-300);
+}
+
+@media (min-width: 768px) {
+  blockquote {
+    padding: 0.75rem 1.25rem;
+  }
+}
+
+/* ============================
+ * 6. Admonitions
+ * ============================ */
+
+.nova-admonition {
+  padding: var(--nova-shape-padding);
+  margin-bottom: 1.5rem;
+  border-left: 2px solid var(--nova-color-neutral-500);
+  border-radius: 0;
+  background-color: var(--nova-color-neutral-100);
+}
+
+[data-theme="dark"] .nova-admonition {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.nova-admonition-heading {
+  margin-bottom: 0.5rem;
+}
+
+.nova-admonition-heading strong {
+  font-family: var(--nova-font-display);
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.nova-admonition[data-admonition-type="note"] {
+  border-left-color: var(--nova-color-neutral-400);
+}
+
+.nova-admonition[data-admonition-type="tip"] {
+  border-left-color: var(--nova-color-primary-500);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
+}
+
+[data-theme="dark"] .nova-admonition[data-admonition-type="tip"] {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+}
+
+.nova-admonition[data-admonition-type="info"] {
+  border-left-color: var(--nova-color-accent-500);
+  background-color: var(--nova-color-info-bg);
+}
+
+[data-theme="dark"] .nova-admonition[data-admonition-type="info"] {
+  background-color: var(--nova-color-info-bg-dark);
+}
+
+.nova-admonition[data-admonition-type="warning"],
+.nova-admonition[data-admonition-type="caution"] {
+  border-left-color: var(--nova-color-warning-500);
+  background-color: var(--nova-color-warning-bg);
+}
+
+[data-theme="dark"] .nova-admonition[data-admonition-type="warning"],
+[data-theme="dark"] .nova-admonition[data-admonition-type="caution"] {
+  background-color: var(--nova-color-warning-bg-dark);
+}
+
+.nova-admonition[data-admonition-type="danger"] {
+  border-left-color: var(--nova-color-danger-500);
+  background-color: var(--nova-color-danger-bg);
+}
+
+[data-theme="dark"] .nova-admonition[data-admonition-type="danger"] {
+  background-color: var(--nova-color-danger-bg-dark);
+}
+
+@media (min-width: 768px) {
+  .nova-admonition {
+    padding: 1rem 1.25rem;
+  }
+}
+
+/* ============================
+ * 7. Breadcrumbs
+ * ============================ */
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+  font-size: 0.75rem;
+}
+
+.breadcrumbs a {
+  color: var(--nova-color-neutral-500);
+}
+
+.breadcrumbs a:hover,
+.breadcrumbs a:focus-visible {
+  color: var(--nova-color-primary-600);
+  text-decoration: none;
+}
+
+[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-600);
+}
+
+@media (min-width: 768px) {
+  .breadcrumbs {
+    margin-bottom: 1.5rem;
+    font-size: 0.8125rem;
+  }
+}
+
+/* ============================
+ * 10. Doc Cards
+ * ============================ */
+
+.nova-doc-card {
+  display: block;
+  padding: var(--nova-shape-padding);
+  border: var(--nova-depth-card-border);
+  border-left: 3px solid transparent;
+  border-radius: var(--nova-shape-radius);
+  backdrop-filter: var(--nova-depth-card-backdrop);
+  -webkit-backdrop-filter: var(--nova-depth-card-backdrop);
+  text-decoration: none;
+  border-color: var(--nova-color-neutral-200);
+  border-left-color: transparent;
+  transition:
+    border-left-color var(--nova-motion-duration) ease,
+    background-color var(--nova-motion-duration) ease;
+}
+
+.nova-doc-card:hover,
+.nova-doc-card:focus-visible {
+  border-left-color: var(--nova-color-primary-500);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 97%);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-doc-card:hover,
+[data-theme="dark"] .nova-doc-card:focus-visible {
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
+}
+
+@media (min-width: 768px) {
+  .nova-doc-card {
+    padding: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .nova-doc-card {
+    padding: 1.5rem;
+  }
+}
+
+/* ============================
+ * 13. Tags
+ * ============================ */
+
+.tag {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--nova-shape-radius);
+  background-color: var(--nova-color-accent-50);
+  color: var(--nova-color-accent-700);
+  text-decoration: none;
+  border: 1px solid var(--nova-color-accent-200);
+}
+
+.tag:hover,
+.tag:focus-visible {
+  background-color: var(--nova-color-primary-100);
+  color: var(--nova-color-primary-800);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .tag {
+  background-color: var(--nova-color-accent-900);
+  color: var(--nova-color-accent-300);
+  border-color: var(--nova-color-accent-800);
+}
+
+[data-theme="dark"] .tag:hover,
+[data-theme="dark"] .tag:focus-visible {
+  background-color: var(--nova-color-primary-800);
+  color: var(--nova-color-primary-200);
+}
+
+/* ============================
+ * 14. Blog List
+ * ============================ */
+
+.blog-list-item {
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--nova-color-neutral-200);
+}
+
+[data-theme="dark"] .blog-list-item {
+  border-bottom-color: var(--nova-color-neutral-800);
+}
+
+/* ============================
+ * 15. Card and Admonition Transitions
+ * ============================ */
+
+.nova-card,
+.pagination-nav a,
+[data-admonition-type] {
+  transition:
+    border-color var(--nova-motion-duration) ease,
+    border-left-color var(--nova-motion-duration) ease,
+    background-color var(--nova-motion-duration) ease;
+}
+
+@media (hover: hover) {
+  .nova-card:hover {
+    border-color: var(--nova-color-primary-700);
+  }
+}
+
+/* ============================
+ * 17. Tag Transitions
+ * ============================ */
+
+.tag {
+  transition:
+    background-color var(--nova-motion-duration) ease,
+    color var(--nova-motion-duration) ease;
+}
+
+/* ============================
+ * 18. Link Transitions
+ * ============================ */
+
+article a {
+  transition: color var(--nova-motion-duration) ease;
+}
+
+/* ============================
+ * 19. Focus Ring Transition
+ * ============================ */
+
+*:focus-visible {
+  transition: outline-offset 100ms ease;
+}

package/build/src/styles/presets/sentinel/theme/Navbar/Bridge/style.css

@@ -0,0 +1,329 @@
+/**
+ * Sentinel — Navbar (Bridge) variant visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Navbar Container
+ * ============================ */
+
+.navbar {
+  position: sticky;
+  top: 0;
+  background-color: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--nova-color-neutral-200);
+  z-index: 200;
+}
+
+[data-theme="dark"] .navbar {
+  background-color: rgba(3, 7, 10, 0.95);
+  border-bottom-color: var(--nova-color-neutral-800);
+}
+
+.nova-navbar-bridge {
+  height: 3.75rem;
+}
+
+/* ============================
+ * 2. Brand
+ * ============================ */
+
+.nova-navbar-bridge-brand a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.125rem;
+  font-family: var(--nova-font-display);
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--nova-color-neutral-900);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-navbar-bridge-brand a {
+  color: var(--nova-color-neutral-50);
+}
+
+.nova-navbar-bridge-brand img {
+  height: 1.75rem;
+  width: auto;
+}
+
+/* ============================
+ * 3. Nav Items
+ * ============================ */
+
+.nova-navbar-bridge-items {
+  display: none;
+  gap: 0.25rem;
+}
+
+@media (min-width: 1024px) {
+  .nova-navbar-bridge-items {
+    display: flex;
+  }
+}
+
+.nova-navbar-bridge-items a,
+.nova-navbar-bridge-items button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--nova-color-neutral-600);
+  text-decoration: none;
+  border-radius: var(--nova-shape-radius);
+  transition: color var(--nova-motion-duration) ease,
+              background-color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-bridge-items a:hover,
+.nova-navbar-bridge-items a:focus-visible,
+.nova-navbar-bridge-items button:hover,
+.nova-navbar-bridge-items button:focus-visible {
+  color: var(--nova-color-primary-700);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-navbar-bridge-items a,
+[data-theme="dark"] .nova-navbar-bridge-items button {
+  color: var(--nova-color-neutral-400);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-items a:hover,
+[data-theme="dark"] .nova-navbar-bridge-items a:focus-visible,
+[data-theme="dark"] .nova-navbar-bridge-items button:hover,
+[data-theme="dark"] .nova-navbar-bridge-items button:focus-visible {
+  color: var(--nova-color-primary-300);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+}
+
+.nova-navbar-bridge-items a[aria-current="page"],
+.nova-navbar-bridge-items a.navbar__link--active {
+  color: var(--nova-color-primary-700);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-items a[aria-current="page"],
+[data-theme="dark"] .nova-navbar-bridge-items a.navbar__link--active {
+  color: var(--nova-color-primary-400);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
+}
+
+/* ============================
+ * 4. Actions
+ * ============================ */
+
+.nova-navbar-bridge-actions {
+  gap: 0.5rem;
+}
+
+.nova-color-mode-toggle {
+  font-family: var(--nova-font-display);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--nova-color-neutral-600);
+  background: none;
+  border: 1px solid var(--nova-color-neutral-300);
+  border-radius: var(--nova-shape-radius);
+}
+
+.nova-color-mode-toggle:hover,
+.nova-color-mode-toggle:focus-visible {
+  color: var(--nova-color-primary-700);
+  border-color: var(--nova-color-primary-500);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
+}
+
+[data-theme="dark"] .nova-color-mode-toggle {
+  color: var(--nova-color-neutral-400);
+  border-color: var(--nova-color-neutral-700);
+}
+
+[data-theme="dark"] .nova-color-mode-toggle:hover,
+[data-theme="dark"] .nova-color-mode-toggle:focus-visible {
+  color: var(--nova-color-primary-400);
+  border-color: var(--nova-color-primary-600);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+}
+
+/* ============================
+ * 5. Hamburger Toggle
+ * ============================ */
+
+.nova-navbar-bridge .nova-hamburger-toggle {
+  font-family: var(--nova-font-display);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--nova-color-neutral-600);
+  background: none;
+  border: 1px solid var(--nova-color-neutral-300);
+  border-radius: var(--nova-shape-radius);
+}
+
+.nova-navbar-bridge .nova-hamburger-toggle:hover,
+.nova-navbar-bridge .nova-hamburger-toggle:focus-visible {
+  color: var(--nova-color-primary-700);
+  border-color: var(--nova-color-primary-500);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
+}
+
+[data-theme="dark"] .nova-navbar-bridge .nova-hamburger-toggle {
+  color: var(--nova-color-neutral-400);
+  border-color: var(--nova-color-neutral-700);
+}
+
+[data-theme="dark"] .nova-navbar-bridge .nova-hamburger-toggle:hover,
+[data-theme="dark"] .nova-navbar-bridge .nova-hamburger-toggle:focus-visible {
+  color: var(--nova-color-primary-400);
+  border-color: var(--nova-color-primary-600);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+}
+
+@media (min-width: 1024px) {
+  .nova-navbar-bridge .nova-hamburger-toggle {
+    display: none;
+  }
+}
+
+/* ============================
+ * 6. Mobile Menu — Overlay
+ * ============================ */
+
+.nova-navbar-bridge-menu-overlay {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* ============================
+ * 7. Mobile Menu — Panel
+ * ============================ */
+
+.nova-navbar-bridge-menu-panel {
+  background-color: rgba(255, 255, 255, 0.97);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+@media (min-width: 576px) {
+  .nova-navbar-bridge-menu-panel {
+    border: 1px solid var(--nova-color-neutral-200);
+    border-radius: var(--nova-shape-radius);
+  }
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-panel {
+  background-color: rgba(3, 7, 10, 0.97);
+  border-color: var(--nova-color-neutral-800);
+}
+
+/* ============================
+ * 8. Mobile Menu — Brand
+ * ============================ */
+
+.nova-navbar-bridge-menu-brand a {
+  font-family: var(--nova-font-display);
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--nova-color-neutral-900);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-brand a {
+  color: var(--nova-color-neutral-50);
+}
+
+/* ============================
+ * 9. Mobile Menu — Close
+ * ============================ */
+
+.nova-navbar-bridge-menu-close {
+  color: var(--nova-color-neutral-600);
+  border-radius: var(--nova-shape-radius);
+  transition: color var(--nova-motion-duration) ease,
+              background-color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-bridge-menu-close:hover,
+.nova-navbar-bridge-menu-close:focus-visible {
+  color: var(--nova-color-primary-700);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-close {
+  color: var(--nova-color-neutral-400);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-close:hover,
+[data-theme="dark"] .nova-navbar-bridge-menu-close:focus-visible {
+  color: var(--nova-color-primary-300);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+}
+
+/* ============================
+ * 10. Mobile Menu — Items
+ * ============================ */
+
+.nova-navbar-bridge-menu-items {
+  gap: 0.125rem;
+}
+
+.nova-navbar-bridge-menu-item {
+  gap: 0.75rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--nova-color-neutral-700);
+  border-radius: var(--nova-shape-radius);
+  transition: color var(--nova-motion-duration) ease,
+              background-color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-bridge-menu-item:hover,
+.nova-navbar-bridge-menu-item:focus-visible {
+  color: var(--nova-color-primary-700);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-item {
+  color: var(--nova-color-neutral-300);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-item:hover,
+[data-theme="dark"] .nova-navbar-bridge-menu-item:focus-visible {
+  color: var(--nova-color-primary-300);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
+}
+
+/* Active mobile menu item — current page indicator. */
+.nova-navbar-bridge-menu-item[aria-current="page"] {
+  color: var(--nova-color-primary-700);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-item[aria-current="page"] {
+  color: var(--nova-color-primary-300);
+}
+
+/* ============================
+ * 11. Mobile Menu — Fade
+ * ============================ */
+
+@keyframes nova-navbar-bridge-menu-reveal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.nova-navbar-bridge-menu-panel {
+  animation: nova-navbar-bridge-menu-reveal 200ms ease;
+}