@usefragments/ui 1.6.0 → 1.7.0

package/src/components/Header/Header.module.scss

@@ -1,9 +1,9 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
-@use '../../recipes/action' as action;
-@use '../../recipes/layout' as layout;
-@use '../../recipes/navigation' as navigation;
-@use '../../recipes/popup' as popup;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/navigation" as navigation;
+@use "../../recipes/popup" as popup;
 
 // ============================================
 // Header Root
@@ -16,9 +16,12 @@
 
   display: flex;
   align-items: center;
+  // A header always spans its container. Without this it collapses to
+  // min-content when placed inside a flex/grid parent that centers its items.
+  width: 100%;
   height: var(--header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
   min-height: var(--header-height, var(--fui-appshell-header-height, $fui-appshell-header-height));
-  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  background-color: var(--fui-app-main-bg, var(--fui-main-bg, #{$fui-main-bg}));
   padding: 0 var(--fui-space-4, $fui-space-4);
   z-index: var(--fui-header-z-index, $fui-header-z-index);
 }
@@ -36,7 +39,7 @@
 }
 
 .elevatedOnScroll {
-  border-bottom: var(--fui-space-px, $fui-space-px) solid transparent;
+  border-bottom: var(--fui-stroke-hairline, 1px) solid transparent;
   transition: border-color var(--fui-transition-fast, $fui-transition-fast);
 }
 
@@ -152,14 +155,16 @@
 }
 
 .navItemActive {
-  // Match sidebar active state: secondary surface + primary text
+  // Persistent navigation selection shares the same neutral role as Sidebar
+  // and Tabs. Do not use --fui-bg-active here: that token is for the brief
+  // pointer-down state.
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
 
   &.navItem:hover,
   &.navItem:active {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+    background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
     color: var(--fui-text-primary, $fui-text-primary);
   }
 }
@@ -236,13 +241,13 @@
 }
 
 .navMenuItemActive {
-  // Match active nav item treatment in both light and dark themes
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  // Match the persistent navigation treatment in both light and dark themes.
+  background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
   &[data-highlighted] {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+    background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
     color: var(--fui-text-primary, $fui-text-primary);
   }
 }
@@ -269,6 +274,8 @@
 
 .search {
   display: none;
+  background-color: var(--fui-header-search-bg, var(--fui-bg-subtle, #{$fui-bg-subtle}));
+  border-radius: var(--fui-button-radius, var(--fui-radius-lg, #{$fui-radius-lg}));
 
   // Show search when header has enough space
   @include container-min($fui-breakpoint-md, fui-header) {
@@ -335,7 +342,7 @@
   inset: 0;
   z-index: 98;
   background: var(--fui-backdrop, $fui-backdrop);
-  animation: mobileNavFadeIn var(--fui-transition-normal, $fui-transition-normal) ease;
+  animation: mobileNavFadeIn var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .mobileNavDrawer {
@@ -349,7 +356,7 @@
   border-left: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   display: flex;
   flex-direction: column;
-  animation: mobileNavSlideIn var(--fui-transition-normal, $fui-transition-normal) ease;
+  animation: mobileNavSlideIn var(--fui-transition-normal, $fui-transition-normal);
 }
 
 .mobileNavHeader {
@@ -404,7 +411,7 @@
 
 .mobileNavLinkActive {
   color: var(--fui-text-primary, $fui-text-primary);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  background-color: var(--fui-control-selected-bg, var(--fui-bg-active, $fui-bg-active));
 }
 
 .mobileNavActions {
@@ -415,13 +422,21 @@
 }
 
 @keyframes mobileNavFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes mobileNavSlideIn {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {