@cbnventures/docusaurus-preset-nova 0.0.0 → 0.15.0

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

@@ -0,0 +1,102 @@
+/**
+ * Foundry — Search bar, dropdown, and results visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Search Bar Input
+ * ============================ */
+
+.nova-search-bar-input {
+  font-family: var(--nova-font-body);
+  border-radius: var(--nova-shape-radius);
+  background-color: var(--nova-color-neutral-50);
+  transition: border-color var(--nova-motion-duration) ease,
+              box-shadow var(--nova-motion-duration) ease;
+}
+
+[data-theme="dark"] .nova-search-bar-input {
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.nova-search-bar-input:focus {
+  border-color: var(--nova-color-primary-300);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-color-primary-500), transparent 85%);
+}
+
+[data-theme="dark"] .nova-search-bar-input:focus {
+  border-color: var(--nova-color-primary-700);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-color-primary-500), transparent 80%);
+}
+
+/* ============================
+ * 2. Search Dropdown
+ * ============================ */
+
+.nova-search-dropdown {
+  border-radius: var(--nova-shape-radius);
+  border-color: var(--nova-foundry-border);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
+  background-color: var(--nova-foundry-surface);
+  animation: foundry-scale-in calc(var(--nova-motion-duration) * 1.5) cubic-bezier(0.22, 1, 0.36, 1);
+  transform-origin: top right;
+}
+
+[data-theme="dark"] .nova-search-dropdown {
+  background-color: var(--nova-foundry-surface-raised);
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+/* ============================
+ * 3. Search Results
+ * ============================ */
+
+.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 95%);
+}
+
+[data-theme="dark"] .nova-search-result,
+[data-theme="dark"] .nova-search-count {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+[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 90%);
+}
+
+.nova-search-result-title {
+  font-family: var(--nova-font-body);
+}
+
+/* ============================
+ * 4. Mobile Menu Search
+ * ============================ */
+
+/* Mobile search input — full width with clean neutral surface. */
+.nova-mobile-menu-search .nova-search-bar-input {
+  width: 100%;
+  max-width: none;
+
+  background-color: var(--nova-color-neutral-50);
+  border-radius: var(--nova-shape-radius);
+}
+
+[data-theme="dark"] .nova-mobile-menu-search .nova-search-bar-input {
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Mobile dropdown results — inline without floating treatment. */
+.nova-mobile-menu-search .nova-search-dropdown {
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+  background: transparent;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Foundry — TOC visual styling.
+ *
+ * @since 0.15.0
+ */
+
+.nova-toc-link {
+  padding: 0.25rem 0;
+  font-size: 0.8125rem;
+  color: var(--nova-color-neutral-500);
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-toc-link:hover,
+.nova-toc-link:focus-visible {
+  color: var(--nova-color-primary-600);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-toc-link {
+  color: var(--nova-color-neutral-400);
+}
+
+[data-theme="dark"] .nova-toc-link:hover,
+[data-theme="dark"] .nova-toc-link:focus-visible {
+  color: var(--nova-color-primary-400);
+}

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

@@ -0,0 +1,134 @@
+/**
+ * Foundry — TOC Collapsible visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * Trigger Button
+ * ============================ */
+
+.nova-toc-collapsible-trigger {
+  color: var(--nova-color-neutral-600);
+
+  background: var(--nova-foundry-surface);
+  border: 1px solid var(--nova-foundry-border);
+  border-radius: var(--nova-shape-radius);
+
+  transition: border-color var(--nova-motion-duration) ease;
+}
+
+.nova-toc-collapsible-trigger:hover,
+.nova-toc-collapsible-trigger:focus-visible {
+  border-color: var(--nova-color-primary-300);
+}
+
+[data-theme="dark"] .nova-toc-collapsible-trigger {
+  color: var(--nova-color-neutral-400);
+
+  background: var(--nova-foundry-surface-raised);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-theme="dark"] .nova-toc-collapsible-trigger:hover,
+[data-theme="dark"] .nova-toc-collapsible-trigger:focus-visible {
+  border-color: var(--nova-color-primary-700);
+}
+
+/* ============================
+ * Overlay
+ * ============================ */
+
+.nova-toc-collapsible-overlay {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* ============================
+ * Panel
+ * ============================ */
+
+.nova-toc-collapsible-panel {
+  background: var(--nova-foundry-surface-overlay);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+}
+
+@media (min-width: 576px) {
+  .nova-toc-collapsible-panel {
+    border: 1px solid var(--nova-foundry-border-subtle);
+    border-radius: var(--nova-shape-radius);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  }
+}
+
+[data-theme="dark"] .nova-toc-collapsible-panel {
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+/* ============================
+ * Header
+ * ============================ */
+
+.nova-toc-collapsible-header-title {
+  font-family: var(--nova-font-display);
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--nova-color-neutral-900);
+  letter-spacing: -0.02em;
+}
+
+[data-theme="dark"] .nova-toc-collapsible-header-title {
+  color: var(--nova-color-neutral-50);
+}
+
+/* ============================
+ * Close Button
+ * ============================ */
+
+.nova-toc-collapsible-close {
+  color: var(--nova-color-neutral-500);
+  border-radius: var(--nova-shape-radius);
+
+  transition: color var(--nova-motion-duration) ease, background-color var(--nova-motion-duration) ease;
+}
+
+.nova-toc-collapsible-close:hover,
+.nova-toc-collapsible-close:focus-visible {
+  color: var(--nova-color-neutral-900);
+  background-color: var(--nova-color-neutral-50);
+}
+
+[data-theme="dark"] .nova-toc-collapsible-close {
+  color: var(--nova-color-neutral-400);
+}
+
+[data-theme="dark"] .nova-toc-collapsible-close:hover,
+[data-theme="dark"] .nova-toc-collapsible-close:focus-visible {
+  color: var(--nova-color-neutral-100);
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+/* ============================
+ * TOC Links
+ * ============================ */
+
+.nova-toc-collapsible-content .nova-toc-link {
+  font-size: 0.8125rem;
+  color: var(--nova-color-neutral-500);
+}
+
+.nova-toc-collapsible-content .nova-toc-link:hover,
+.nova-toc-collapsible-content .nova-toc-link:focus-visible {
+  color: var(--nova-color-primary-600);
+}
+
+[data-theme="dark"] .nova-toc-collapsible-content .nova-toc-link {
+  color: var(--nova-color-neutral-400);
+}
+
+[data-theme="dark"] .nova-toc-collapsible-content .nova-toc-link:hover,
+[data-theme="dark"] .nova-toc-collapsible-content .nova-toc-link:focus-visible {
+  color: var(--nova-color-primary-400);
+}

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

@@ -0,0 +1,77 @@
+/**
+ * Foundry — Tabs visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Tabs Container
+ * ============================ */
+
+.nova-tabs {
+  margin-bottom: 1.5rem;
+}
+
+/* ============================
+ * 2. Tab List
+ * ============================ */
+
+.nova-tabs-list {
+  border-bottom: 1px solid var(--nova-foundry-border);
+}
+
+[data-theme="dark"] .nova-tabs-list {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ============================
+ * 3. Tab Button
+ * ============================ */
+
+.nova-tabs-tab {
+  padding: 0.5rem 1rem;
+
+  font-family: var(--nova-font-body);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--nova-color-neutral-500);
+
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+
+  transition: color var(--nova-motion-duration) ease,
+              border-color var(--nova-motion-duration) ease;
+}
+
+.nova-tabs-tab:hover,
+.nova-tabs-tab:focus-visible {
+  color: var(--nova-color-neutral-900);
+}
+
+.nova-tabs-tab[data-selected="true"] {
+  color: var(--nova-color-primary-600);
+  border-bottom-color: var(--nova-color-primary-600);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .nova-tabs-tab {
+  color: var(--nova-color-neutral-400);
+}
+
+[data-theme="dark"] .nova-tabs-tab:hover,
+[data-theme="dark"] .nova-tabs-tab:focus-visible {
+  color: var(--nova-color-neutral-100);
+}
+
+[data-theme="dark"] .nova-tabs-tab[data-selected="true"] {
+  color: var(--nova-color-primary-400);
+  border-bottom-color: var(--nova-color-primary-400);
+}
+
+/* ============================
+ * 4. Tab Panel
+ * ============================ */
+
+.nova-tabs-panel {
+  padding: 1rem 0;
+}

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

@@ -0,0 +1,80 @@
+/**
+ * Foundry — Tag visual styling.
+ *
+ * @since 0.15.0
+ */
+
+.nova-tag {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.8125rem;
+  color: var(--nova-color-neutral-600);
+  background-color: var(--nova-color-neutral-100);
+  border: 1px solid var(--nova-color-neutral-200);
+  border-radius: var(--nova-shape-radius);
+  transition: border-color var(--nova-motion-duration) ease,
+              color var(--nova-motion-duration) ease;
+}
+
+.nova-tag:hover,
+.nova-tag:focus-visible {
+  color: var(--nova-color-primary-600);
+  border-color: var(--nova-color-primary-300);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-tag {
+  color: var(--nova-color-neutral-300);
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-theme="dark"] .nova-tag:hover,
+[data-theme="dark"] .nova-tag:focus-visible {
+  color: var(--nova-color-primary-400);
+  border-color: var(--nova-color-primary-700);
+}
+
+.nova-tag-count {
+  color: var(--nova-color-neutral-400);
+  font-size: 0.75rem;
+}
+
+.nova-blog-tags-list-link {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.8125rem;
+  color: var(--nova-color-neutral-600);
+  background-color: var(--nova-color-neutral-100);
+  border: 1px solid var(--nova-color-neutral-200);
+  border-radius: var(--nova-shape-radius);
+  text-decoration: none;
+  transition: border-color var(--nova-motion-duration) ease,
+              color var(--nova-motion-duration) ease;
+}
+
+.nova-blog-tags-list-link:hover,
+.nova-blog-tags-list-link:focus-visible {
+  color: var(--nova-color-primary-600);
+  border-color: var(--nova-color-primary-300);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-blog-tags-list-link {
+  color: var(--nova-color-neutral-300);
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-theme="dark"] .nova-blog-tags-list-link:hover,
+[data-theme="dark"] .nova-blog-tags-list-link:focus-visible {
+  color: var(--nova-color-primary-400);
+  border-color: var(--nova-color-primary-700);
+}
+
+.nova-blog-tags-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}

package/build/src/styles/presets/sentinel/components/app-market-download/style.css

@@ -0,0 +1,90 @@
+/**
+ * Sentinel — App market download visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Section
+ * ============================ */
+
+/* ============================
+ * 2. Label
+ * ============================ */
+
+.nova-app-market-download-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--nova-color-neutral-500);
+  margin-bottom: 1rem;
+}
+
+[data-theme="dark"] .nova-app-market-download-label {
+  color: var(--nova-color-neutral-400);
+}
+
+/* ============================
+ * 3. Button
+ * ============================ */
+
+.nova-app-market-download-button {
+  padding: 0.625rem 1.25rem;
+
+  color: var(--nova-color-neutral-50);
+
+  background-color: var(--nova-color-neutral-900);
+  border: none;
+  border-radius: var(--nova-shape-radius);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
+              0 1px 3px rgba(0, 0, 0, 0.1);
+
+  transition: box-shadow var(--nova-motion-duration) ease;
+}
+
+.nova-app-market-download-button:hover,
+.nova-app-market-download-button:focus-visible {
+  color: var(--nova-color-neutral-50);
+
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
+              0 0 0 3px color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
+
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-app-market-download-button {
+  color: var(--nova-color-neutral-50);
+
+  background-color: var(--nova-color-neutral-950);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+[data-theme="dark"] .nova-app-market-download-button:hover,
+[data-theme="dark"] .nova-app-market-download-button:focus-visible {
+  color: var(--nova-color-neutral-50);
+
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
+              0 0 0 3px color-mix(in srgb, var(--nova-color-primary-500), transparent 85%),
+              0 0 20px color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
+}
+
+/* ============================
+ * 4. Button Text
+ * ============================ */
+
+.nova-app-market-download-button-subtitle {
+  font-size: 0.5625rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  opacity: 0.85;
+}
+
+.nova-app-market-download-button-title {
+  font-family: var(--nova-font-display);
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}

package/build/src/styles/presets/sentinel/components/blog-preview/style.css

@@ -0,0 +1,187 @@
+/**
+ * Sentinel — Blog preview section visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Blog Preview Container
+ * ============================ */
+
+.nova-blog-preview-heading {
+  font-family: var(--nova-font-display);
+  font-size: 1.375rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+
+  color: var(--nova-color-neutral-900);
+
+}
+
+.nova-blog-preview-no-description .nova-blog-preview-heading {
+  margin-bottom: calc(var(--nova-shape-gap) * 4);
+}
+
+.nova-blog-preview-has-description .nova-blog-preview-heading {
+  margin-bottom: calc(var(--nova-shape-gap) * 2);
+}
+
+[data-theme="dark"] .nova-blog-preview-heading {
+  color: var(--nova-color-neutral-50);
+}
+
+.nova-blog-preview-description {
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--nova-color-neutral-500);
+  margin-bottom: calc(var(--nova-shape-gap) * 3);
+}
+
+[data-theme="dark"] .nova-blog-preview-description {
+  color: var(--nova-color-neutral-400);
+}
+
+/* ============================
+ * 2. Blog Preview Card
+ * ============================ */
+
+.nova-blog-preview-card {
+  padding: var(--nova-shape-padding);
+
+  border: 1px solid var(--nova-color-neutral-200);
+  border-left: 3px solid var(--nova-color-primary-500);
+  border-radius: var(--nova-shape-radius);
+  background-color: var(--nova-color-neutral-50);
+
+  transition:
+    border-color var(--nova-motion-duration) ease,
+    background-color var(--nova-motion-duration) ease;
+}
+
+.nova-blog-preview-card:hover {
+  border-color: var(--nova-color-primary-500);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 97%);
+}
+
+[data-theme="dark"] .nova-blog-preview-card {
+  border-color: var(--nova-color-neutral-800);
+  border-left-color: var(--nova-color-primary-600);
+  background-color: var(--nova-color-neutral-900);
+}
+
+[data-theme="dark"] .nova-blog-preview-card:hover {
+  border-color: var(--nova-color-primary-600);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
+}
+
+/* ============================
+ * 3. Blog Preview Card Content
+ * ============================ */
+
+.nova-blog-preview-card time {
+  display: block;
+
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+
+  color: var(--nova-color-primary-600);
+
+  margin-bottom: calc(var(--nova-shape-gap) * 0.5);
+}
+
+[data-theme="dark"] .nova-blog-preview-card time {
+  color: var(--nova-color-primary-400);
+}
+
+.nova-blog-preview-card h3 {
+  font-family: var(--nova-font-display);
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+
+  color: var(--nova-color-neutral-900);
+
+  margin-bottom: calc(var(--nova-shape-gap) * 0.5);
+}
+
+[data-theme="dark"] .nova-blog-preview-card h3 {
+  color: var(--nova-color-neutral-100);
+}
+
+.nova-blog-preview-card p {
+  font-size: 0.8125rem;
+  line-height: 1.65;
+
+  color: var(--nova-color-neutral-500);
+
+  margin: 0 0 calc(var(--nova-shape-gap) * 0.75) 0;
+}
+
+[data-theme="dark"] .nova-blog-preview-card p {
+  color: var(--nova-color-neutral-400);
+}
+
+.nova-blog-preview-card a {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+
+  color: var(--nova-color-primary-600);
+  text-decoration: none;
+
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-blog-preview-card a:hover,
+.nova-blog-preview-card a:focus-visible {
+  color: var(--nova-color-primary-700);
+}
+
+[data-theme="dark"] .nova-blog-preview-card a {
+  color: var(--nova-color-primary-400);
+}
+
+[data-theme="dark"] .nova-blog-preview-card a:hover,
+[data-theme="dark"] .nova-blog-preview-card a:focus-visible {
+  color: var(--nova-color-primary-300);
+}
+
+/* ============================
+ * 4. Responsive Blog Preview
+ * ============================ */
+
+@media (min-width: 640px) {
+  .nova-blog-preview-heading {
+    font-size: 1.5rem;
+    margin-bottom: calc(var(--nova-shape-gap) * 2.5);
+  }
+
+  .nova-blog-preview-card {
+    padding: calc(var(--nova-shape-padding) * 1.25);
+  }
+
+  .nova-blog-preview-card h3 {
+    font-size: 1.0625rem;
+  }
+
+  .nova-blog-preview-card p {
+    font-size: 0.875rem;
+  }
+
+  .nova-blog-preview-card a {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .nova-blog-preview-heading {
+    font-size: 1.75rem;
+    margin-bottom: calc(var(--nova-shape-gap) * 3);
+  }
+
+  .nova-blog-preview-card {
+    padding: calc(var(--nova-shape-padding) * 1.5);
+  }
+}