@cbnventures/docusaurus-preset-nova 0.0.0 → 0.15.0

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

@@ -0,0 +1,326 @@
+/**
+ * Signal — Navbar (Bridge) variant visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Navbar Container
+ * ============================ */
+
+.navbar {
+  position: sticky;
+  top: 0;
+  background-color: var(--nova-color-neutral-50);
+  border-top: 2px solid var(--nova-color-primary-600);
+  border-bottom: 1px solid var(--nova-color-neutral-200);
+  z-index: 200;
+}
+
+[data-theme="dark"] .navbar {
+  background-color: var(--nova-color-neutral-950);
+  border-top-color: var(--nova-color-primary-500);
+  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: 1.375rem;
+  font-family: var(--nova-font-display);
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--nova-color-neutral-900);
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: -0.01em;
+}
+
+[data-theme="dark"] .nova-navbar-bridge-brand a {
+  color: var(--nova-color-neutral-50);
+}
+
+.nova-navbar-bridge-brand img {
+  height: 20px;
+  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-family: var(--nova-font-code);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--nova-color-neutral-600);
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: 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-600);
+  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-400);
+}
+
+.nova-navbar-bridge-items a[aria-current="page"],
+.nova-navbar-bridge-items a.navbar__link--active {
+  color: var(--nova-color-primary-600);
+}
+
+[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);
+}
+
+/* ============================
+ * 4. Actions
+ * ============================ */
+
+.nova-navbar-bridge-actions {
+  gap: 0.5rem;
+}
+
+.nova-color-mode-toggle {
+  padding: 0.375rem;
+  background: none;
+  border: none;
+  color: var(--nova-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-color-mode-toggle:hover,
+.nova-color-mode-toggle:focus-visible {
+  color: var(--nova-color-primary-600);
+}
+
+[data-theme="dark"] .nova-color-mode-toggle {
+  color: var(--nova-color-neutral-500);
+}
+
+[data-theme="dark"] .nova-color-mode-toggle:hover,
+[data-theme="dark"] .nova-color-mode-toggle:focus-visible {
+  color: var(--nova-color-primary-400);
+}
+
+/* ============================
+ * 5. Hamburger Toggle
+ * ============================ */
+
+.nova-navbar-bridge .nova-hamburger-toggle {
+  padding: 0.375rem;
+  background: none;
+  border: none;
+  color: var(--nova-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-bridge .nova-hamburger-toggle:hover,
+.nova-navbar-bridge .nova-hamburger-toggle:focus-visible {
+  color: var(--nova-color-primary-600);
+}
+
+[data-theme="dark"] .nova-navbar-bridge .nova-hamburger-toggle {
+  color: var(--nova-color-neutral-500);
+}
+
+[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);
+}
+
+@media (min-width: 1024px) {
+  .nova-navbar-bridge .nova-hamburger-toggle {
+    display: none;
+  }
+}
+
+/* ============================
+ * 6. Mobile Menu — Overlay
+ * ============================ */
+
+.nova-navbar-bridge-menu-overlay {
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: url(#nova-pixelate);
+  -webkit-backdrop-filter: url(#nova-pixelate);
+}
+
+/* ============================
+ * 7. Mobile Menu — Panel
+ * ============================ */
+
+.nova-navbar-bridge-menu-panel {
+  height: auto;
+  max-width: 320px;
+  margin-top: 3.5rem;
+  background-color: var(--nova-color-neutral-50);
+  border: 1px solid var(--nova-color-neutral-200);
+  border-top: 2px solid var(--nova-color-primary-600);
+  border-radius: 0;
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-panel {
+  background-color: var(--nova-color-neutral-950);
+  border-color: var(--nova-color-neutral-800);
+  border-top-color: var(--nova-color-primary-500);
+}
+
+/* ============================
+ * 8. Mobile Menu — Brand
+ * ============================ */
+
+.nova-navbar-bridge-menu-brand a {
+  font-family: var(--nova-font-display);
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--nova-color-neutral-900);
+  text-transform: uppercase;
+  letter-spacing: -0.01em;
+}
+
+[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-500);
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-bridge-menu-close:hover,
+.nova-navbar-bridge-menu-close:focus-visible {
+  color: var(--nova-color-primary-600);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-close {
+  color: var(--nova-color-neutral-500);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-close:hover,
+[data-theme="dark"] .nova-navbar-bridge-menu-close:focus-visible {
+  color: var(--nova-color-primary-400);
+}
+
+/* ============================
+ * 10. Mobile Menu — Items
+ * ============================ */
+
+.nova-navbar-bridge-menu-items {
+  gap: 0;
+}
+
+.nova-navbar-bridge-menu-item {
+  gap: 0.625rem;
+  padding: 0.625rem 0.75rem;
+  font-family: var(--nova-font-code);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--nova-color-neutral-600);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--nova-color-neutral-200);
+  transition: color var(--nova-motion-duration) ease,
+              background-color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-bridge-menu-item:last-child {
+  border-bottom: none;
+}
+
+.nova-navbar-bridge-menu-item:hover,
+.nova-navbar-bridge-menu-item:focus-visible {
+  color: var(--nova-color-primary-600);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-item {
+  color: var(--nova-color-neutral-400);
+  border-bottom-color: var(--nova-color-neutral-800);
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-item:last-child {
+  border-bottom: none;
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-item:hover,
+[data-theme="dark"] .nova-navbar-bridge-menu-item:focus-visible {
+  color: var(--nova-color-primary-400);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+}
+
+/* Active mobile menu item — current page indicator. */
+.nova-navbar-bridge-menu-item[aria-current="page"] {
+  color: var(--nova-color-primary-600);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .nova-navbar-bridge-menu-item[aria-current="page"] {
+  color: var(--nova-color-primary-400);
+}
+
+/* ============================
+ * 11. Mobile Menu — Snappy Fade
+ * ============================ */
+
+@keyframes nova-navbar-bridge-menu-snap {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.nova-navbar-bridge-menu-panel {
+  animation: nova-navbar-bridge-menu-snap 150ms ease;
+}

package/build/src/styles/presets/signal/theme/Navbar/Canopy/style.css

@@ -0,0 +1,330 @@
+/**
+ * Signal — Navbar (Canopy) variant visual styling.
+ *
+ * @since 0.15.0
+ */
+
+/* ============================
+ * 1. Navbar Container
+ * ============================ */
+
+.navbar {
+  background-color: var(--nova-color-neutral-50);
+  border-top: 2px solid var(--nova-color-primary-600);
+  border-bottom: 1px solid var(--nova-color-neutral-200);
+  padding: 0;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+}
+
+[data-theme="dark"] .navbar {
+  background-color: var(--nova-color-neutral-950);
+  border-top-color: var(--nova-color-primary-500);
+  border-bottom-color: var(--nova-color-neutral-800);
+}
+
+/* ============================
+ * 2. Canopy Inner
+ * ============================ */
+
+.nova-navbar-canopy {
+  padding-block: 0.5rem;
+}
+
+.nova-navbar-canopy-brand a {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 1.375rem;
+  text-decoration: none;
+  font-family: var(--nova-font-display);
+  font-weight: 700;
+  font-size: 0.875rem;
+  color: var(--nova-color-neutral-900);
+  text-transform: uppercase;
+  letter-spacing: -0.01em;
+}
+
+[data-theme="dark"] .nova-navbar-canopy-brand a {
+  color: var(--nova-color-neutral-50);
+}
+
+.nova-navbar-canopy-brand img {
+  height: 20px;
+  width: auto;
+}
+
+/* ============================
+ * 3. Canopy Nav Items
+ * ============================ */
+
+.nova-navbar-canopy-items {
+  display: none;
+}
+
+.nova-navbar-canopy-items a {
+  font-family: var(--nova-font-code);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--nova-color-neutral-600);
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.375rem 0.75rem;
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-canopy-items a:hover,
+.nova-navbar-canopy-items a:focus-visible {
+  color: var(--nova-color-primary-600);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .nova-navbar-canopy-items a {
+  color: var(--nova-color-neutral-400);
+}
+
+[data-theme="dark"] .nova-navbar-canopy-items a:hover,
+[data-theme="dark"] .nova-navbar-canopy-items a:focus-visible {
+  color: var(--nova-color-primary-400);
+}
+
+.nova-navbar-canopy-items a[aria-current="page"],
+.nova-navbar-canopy-items a.active {
+  color: var(--nova-color-primary-600);
+}
+
+[data-theme="dark"] .nova-navbar-canopy-items a[aria-current="page"],
+[data-theme="dark"] .nova-navbar-canopy-items a.active {
+  color: var(--nova-color-primary-400);
+}
+
+/* ============================
+ * 4. Responsive
+ * ============================ */
+
+@media (min-width: 768px) {
+  .nova-navbar-canopy {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .nova-navbar-canopy-items {
+    display: flex;
+    margin-top: 0.375rem;
+  }
+
+  .nova-navbar-canopy-actions {
+    position: absolute;
+    right: var(--nova-grid-padding);
+    top: 50%;
+
+    transform: translateY(-50%);
+  }
+}
+
+/* ============================
+ * 5. Color Mode Toggle
+ * ============================ */
+
+.nova-color-mode-toggle {
+  padding: 0.375rem;
+  background: none;
+  border: none;
+  color: var(--nova-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-color-mode-toggle:hover,
+.nova-color-mode-toggle:focus-visible {
+  color: var(--nova-color-primary-600);
+}
+
+[data-theme="dark"] .nova-color-mode-toggle {
+  color: var(--nova-color-neutral-500);
+}
+
+[data-theme="dark"] .nova-color-mode-toggle:hover,
+[data-theme="dark"] .nova-color-mode-toggle:focus-visible {
+  color: var(--nova-color-primary-400);
+}
+
+/* ============================
+ * 6. Hamburger Toggle
+ * ============================ */
+
+.nova-navbar-canopy .nova-hamburger-toggle {
+  padding: 0.375rem;
+  background: none;
+  border: none;
+  color: var(--nova-color-neutral-500);
+  cursor: pointer;
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-canopy .nova-hamburger-toggle:hover,
+.nova-navbar-canopy .nova-hamburger-toggle:focus-visible {
+  color: var(--nova-color-primary-600);
+}
+
+[data-theme="dark"] .nova-navbar-canopy .nova-hamburger-toggle {
+  color: var(--nova-color-neutral-500);
+}
+
+[data-theme="dark"] .nova-navbar-canopy .nova-hamburger-toggle:hover,
+[data-theme="dark"] .nova-navbar-canopy .nova-hamburger-toggle:focus-visible {
+  color: var(--nova-color-primary-400);
+}
+
+@media (min-width: 768px) {
+  .nova-navbar-canopy .nova-hamburger-toggle {
+    display: none;
+  }
+}
+
+/* ============================
+ * 7. Mobile Menu — Overlay
+ * ============================ */
+
+.nova-navbar-canopy-menu-overlay {
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: url(#nova-pixelate);
+  -webkit-backdrop-filter: url(#nova-pixelate);
+}
+
+/* ============================
+ * 8. Mobile Menu — Panel
+ * ============================ */
+
+.nova-navbar-canopy-menu-panel {
+  height: auto;
+  max-width: 320px;
+  margin-top: 3.5rem;
+  background-color: var(--nova-color-neutral-50);
+  border: 1px solid var(--nova-color-neutral-200);
+  border-top: 2px solid var(--nova-color-primary-600);
+  border-radius: 0;
+}
+
+[data-theme="dark"] .nova-navbar-canopy-menu-panel {
+  background-color: var(--nova-color-neutral-950);
+  border-color: var(--nova-color-neutral-800);
+  border-top-color: var(--nova-color-primary-500);
+}
+
+/* ============================
+ * 9. Mobile Menu — Brand
+ * ============================ */
+
+.nova-navbar-canopy-menu-brand a {
+  font-family: var(--nova-font-display);
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--nova-color-neutral-900);
+  text-transform: uppercase;
+  letter-spacing: -0.01em;
+}
+
+[data-theme="dark"] .nova-navbar-canopy-menu-brand a {
+  color: var(--nova-color-neutral-50);
+}
+
+/* ============================
+ * 10. Mobile Menu — Close
+ * ============================ */
+
+.nova-navbar-canopy-menu-close {
+  color: var(--nova-color-neutral-500);
+  transition: color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-canopy-menu-close:hover,
+.nova-navbar-canopy-menu-close:focus-visible {
+  color: var(--nova-color-primary-600);
+}
+
+[data-theme="dark"] .nova-navbar-canopy-menu-close {
+  color: var(--nova-color-neutral-500);
+}
+
+[data-theme="dark"] .nova-navbar-canopy-menu-close:hover,
+[data-theme="dark"] .nova-navbar-canopy-menu-close:focus-visible {
+  color: var(--nova-color-primary-400);
+}
+
+/* ============================
+ * 11. Mobile Menu — Items (2-Column Grid)
+ * ============================ */
+
+.nova-navbar-canopy-menu-items {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+}
+
+.nova-navbar-canopy-menu-item {
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem 0.75rem;
+  font-family: var(--nova-font-code);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--nova-color-neutral-600);
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border: 1px solid var(--nova-color-neutral-200);
+  margin-top: -1px;
+  margin-left: -1px;
+  transition: color var(--nova-motion-duration) ease,
+              background-color var(--nova-motion-duration) ease;
+}
+
+.nova-navbar-canopy-menu-item:hover,
+.nova-navbar-canopy-menu-item:focus-visible {
+  color: var(--nova-color-primary-600);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 96%);
+}
+
+[data-theme="dark"] .nova-navbar-canopy-menu-item {
+  color: var(--nova-color-neutral-400);
+  border-color: var(--nova-color-neutral-800);
+}
+
+[data-theme="dark"] .nova-navbar-canopy-menu-item:hover,
+[data-theme="dark"] .nova-navbar-canopy-menu-item:focus-visible {
+  color: var(--nova-color-primary-400);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+}
+
+/* Active mobile menu item — current page indicator. */
+.nova-navbar-canopy-menu-item[aria-current="page"] {
+  color: var(--nova-color-primary-600);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .nova-navbar-canopy-menu-item[aria-current="page"] {
+  color: var(--nova-color-primary-400);
+}
+
+/* ============================
+ * 12. Mobile Menu — Snappy Fade
+ * ============================ */
+
+@keyframes nova-navbar-canopy-menu-snap {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.nova-navbar-canopy-menu-panel {
+  animation: nova-navbar-canopy-menu-snap 150ms ease;
+}