@cbnventures/docusaurus-preset-nova 0.17.0 → 0.18.0

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

@@ -1,5 +1,9 @@
 /**
- * Signal — Navbar (Canopy) variant visual styling.
+ * Signal - `Navbar/Canopy` theme overlay.
+ *
+ * Sticky two-row bar on a flat white surface with the brand centered above
+ * and mono uppercase navigation labels flowing below. Action buttons float
+ * right at desktop; sharp neutral hairline, no shadows.
  *
  * @since 0.15.0
  */
@@ -9,29 +13,23 @@
  * ============================ */
 
 .navbar {
-  background-color: var(--nova-color-neutral-50);
+  background-color: var(--nova-color-surface-raised);
   border-top: 2px solid var(--nova-color-primary-600);
-  border-bottom: 1px solid var(--nova-color-neutral-200);
-  padding: 0;
+  border-bottom: 1px solid var(--nova-color-border);
   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);
+  border-bottom-color: var(--nova-color-border);
 }
 
 /* ============================
  * 2. Canopy Inner
  * ============================ */
 
-.nova-navbar-canopy {
-  padding-block: 0.5rem;
-}
-
 .nova-navbar-canopy-brand a {
   display: flex;
   align-items: center;
@@ -40,18 +38,18 @@
   text-decoration: none;
   font-family: var(--nova-font-display);
   font-weight: 700;
-  font-size: 0.875rem;
-  color: var(--nova-color-neutral-900);
+  font-size: 1.125rem;
+  color: var(--nova-signal-text);
   text-transform: uppercase;
   letter-spacing: -0.01em;
 }
 
 [data-theme="dark"] .nova-navbar-canopy-brand a {
-  color: var(--nova-color-neutral-50);
+  color: var(--nova-color-text);
 }
 
 .nova-navbar-canopy-brand img {
-  height: 20px;
+  height: 1.5rem;
   width: auto;
 }
 
@@ -63,64 +61,76 @@
   display: none;
 }
 
-.nova-navbar-canopy-items a {
+.nova-navbar-canopy-items a,
+.nova-navbar-canopy-items .nova-navbar-more-summary {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.25rem;
   font-family: var(--nova-font-code);
   font-size: 0.75rem;
   font-weight: 500;
-  color: var(--nova-color-neutral-600);
+  color: var(--nova-signal-text-muted);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.375rem 0.75rem;
-  transition: color var(--nova-motion-duration) ease;
+  transition: color var(--nova-motion-duration) ease,
+              background-color var(--nova-motion-duration) ease;
 }
 
-.nova-navbar-canopy-items a:hover,
-.nova-navbar-canopy-items a:focus-visible {
+.nova-navbar-canopy-items a:not(.navbar__link--active):not([aria-current="page"]):hover,
+.nova-navbar-canopy-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
+.nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
+.nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
+.nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
   color: var(--nova-color-primary-600);
+  background-color: var(--nova-color-surface-raised);
   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,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more-summary {
+  color: var(--nova-color-text-muted);
 }
 
-[data-theme="dark"] .nova-navbar-canopy-items a:hover,
-[data-theme="dark"] .nova-navbar-canopy-items a:focus-visible {
+[data-theme="dark"] .nova-navbar-canopy-items a:not(.navbar__link--active):not([aria-current="page"]):hover,
+[data-theme="dark"] .nova-navbar-canopy-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
   color: var(--nova-color-primary-400);
+  background-color: var(--nova-color-text);
 }
 
+/* Active navbar link - matches `.nova-locale-dropdown-item--active` chrome
+   so the navbar items, More popover, and locale popover all read the same
+   on hover/active. `:has()` promotes the More trigger when an item inside
+   is the current page. */
 .nova-navbar-canopy-items a[aria-current="page"],
-.nova-navbar-canopy-items a.active {
+.nova-navbar-canopy-items a.navbar__link--active,
+.nova-navbar-canopy-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
+.nova-navbar-canopy-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
+  font-weight: 600;
   color: var(--nova-color-primary-600);
+  background-color: var(--nova-color-primary-50);
 }
 
 [data-theme="dark"] .nova-navbar-canopy-items a[aria-current="page"],
-[data-theme="dark"] .nova-navbar-canopy-items a.active {
+[data-theme="dark"] .nova-navbar-canopy-items a.navbar__link--active,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-canopy-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
   color: var(--nova-color-primary-400);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
 }
 
 /* ============================
  * 4. Responsive
  * ============================ */
 
-@media (min-width: 768px) {
-  .nova-navbar-canopy {
-    flex-direction: column;
-    justify-content: center;
-  }
-
+@media (min-width: 1024px) {
   .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%);
+    margin-top: 0.5rem;
   }
 }
 
@@ -132,7 +142,7 @@
   padding: 0.375rem;
   background: none;
   border: none;
-  color: var(--nova-color-neutral-500);
+  color: var(--nova-color-text-muted);
   cursor: pointer;
   transition: color var(--nova-motion-duration) ease;
 }
@@ -142,10 +152,6 @@
   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);
@@ -156,10 +162,9 @@
  * ============================ */
 
 .nova-navbar-canopy .nova-hamburger-toggle {
-  padding: 0.375rem;
   background: none;
   border: none;
-  color: var(--nova-color-neutral-500);
+  color: var(--nova-color-text-muted);
   cursor: pointer;
   transition: color var(--nova-motion-duration) ease;
 }
@@ -170,7 +175,7 @@
 }
 
 [data-theme="dark"] .nova-navbar-canopy .nova-hamburger-toggle {
-  color: var(--nova-color-neutral-500);
+  color: var(--nova-color-text-muted);
 }
 
 [data-theme="dark"] .nova-navbar-canopy .nova-hamburger-toggle:hover,
@@ -178,65 +183,61 @@
   color: var(--nova-color-primary-400);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
   .nova-navbar-canopy .nova-hamburger-toggle {
     display: none;
   }
 }
 
 /* ============================
- * 7. Mobile Menu — Overlay
+ * 7. Mobile Menu - Overlay
  * ============================ */
 
 .nova-navbar-canopy-menu-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: color-mix(in srgb, #000000, transparent 60%);
   backdrop-filter: url(#nova-pixelate);
   -webkit-backdrop-filter: url(#nova-pixelate);
 }
 
 /* ============================
- * 8. Mobile Menu — Panel
+ * 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);
+  background-color: var(--nova-color-surface-raised);
+  border: 1px solid var(--nova-color-border);
   border-top: 2px solid var(--nova-color-primary-600);
-  border-radius: 0;
+  border-radius: var(--nova-signal-radius-sharp);
 }
 
 [data-theme="dark"] .nova-navbar-canopy-menu-panel {
-  background-color: var(--nova-color-neutral-950);
-  border-color: var(--nova-color-neutral-800);
+  border-color: var(--nova-color-border);
   border-top-color: var(--nova-color-primary-500);
 }
 
 /* ============================
- * 9. Mobile Menu — Brand
+ * 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);
+  color: var(--nova-signal-text);
   text-transform: uppercase;
   letter-spacing: -0.01em;
 }
 
 [data-theme="dark"] .nova-navbar-canopy-menu-brand a {
-  color: var(--nova-color-neutral-50);
+  color: var(--nova-color-text);
 }
 
 /* ============================
- * 10. Mobile Menu — Close
+ * 10. Mobile Menu - Close
  * ============================ */
 
 .nova-navbar-canopy-menu-close {
-  color: var(--nova-color-neutral-500);
+  color: var(--nova-color-text-muted);
   transition: color var(--nova-motion-duration) ease;
 }
 
@@ -245,23 +246,32 @@
   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)
+ * 11. Mobile Menu - Items (2-Column Grid)
  * ============================ */
 
 .nova-navbar-canopy-menu-items {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0;
+
+  /* Outer border-top + border-left so the grid is fully enclosed.
+     Items carry only border-right + border-bottom, so cell hairlines
+     form a unified 1px grid (no negative-margin overlap trick - the
+     panel's `overflow-y: auto` silently sets `overflow-x: auto` too,
+     which would clip outward-shifted item borders). */
+  border-top: 1px solid var(--nova-color-border);
+  border-left: 1px solid var(--nova-color-border);
+}
+
+[data-theme="dark"] .nova-navbar-canopy-menu-items {
+  border-top-color: var(--nova-color-border);
+  border-left-color: var(--nova-color-border);
 }
 
 .nova-navbar-canopy-menu-item {
@@ -271,13 +281,12 @@
   font-family: var(--nova-font-code);
   font-size: 0.6875rem;
   font-weight: 500;
-  color: var(--nova-color-neutral-600);
+  color: var(--nova-signal-text-muted);
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  border: 1px solid var(--nova-color-neutral-200);
-  margin-top: -1px;
-  margin-left: -1px;
+  border-right: 1px solid var(--nova-color-border);
+  border-bottom: 1px solid var(--nova-color-border);
   transition: color var(--nova-motion-duration) ease,
               background-color var(--nova-motion-duration) ease;
 }
@@ -289,8 +298,9 @@
 }
 
 [data-theme="dark"] .nova-navbar-canopy-menu-item {
-  color: var(--nova-color-neutral-400);
-  border-color: var(--nova-color-neutral-800);
+  color: var(--nova-color-text-muted);
+  border-right-color: var(--nova-color-border);
+  border-bottom-color: var(--nova-color-border);
 }
 
 [data-theme="dark"] .nova-navbar-canopy-menu-item:hover,
@@ -299,7 +309,7 @@
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
 }
 
-/* Active mobile menu item — current page indicator. */
+/* Active mobile menu item - current page indicator. */
 .nova-navbar-canopy-menu-item[aria-current="page"] {
   color: var(--nova-color-primary-600);
   font-weight: 600;
@@ -310,21 +320,33 @@
 }
 
 /* ============================
- * 12. Mobile Menu — Snappy Fade
+ * 12. Mobile Menu - Snappy Fade
  * ============================ */
 
-@keyframes nova-navbar-canopy-menu-snap {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
+/* ============================
+ * Mobile Menu - Snappy Panel + Items (Unison)
+ *
+ * Reuses preset-level `signal-snap` for panel and items. Signal declares
+ * `motion.staggeredReveals: false` so items snap together.
+ * ============================ */
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.nova-navbar-canopy-menu-panel {
+  animation: signal-snap 150ms ease;
 }
 
-.nova-navbar-canopy-menu-panel {
-  animation: nova-navbar-canopy-menu-snap 150ms ease;
+.nova-navbar-canopy-menu-item {
+  opacity: 0;
+
+  animation: signal-snap 150ms ease forwards;
+}
+
+/* Brand sizes scale up on tablet+. */
+@media (min-width: 768px) {
+  .nova-navbar-canopy-brand img {
+    height: 1.75rem;
+  }
+
+  .nova-navbar-canopy-brand a {
+    font-size: 1.25rem;
+  }
 }