From b88cbc05128d9e288bd64665247d467044bb3be3 Mon Sep 17 00:00:00 2001
From: John Obelenus <jobelenus@systeminit.com>
Date: Thu, 22 Jan 2026 18:51:22 -0500
Subject: [PATCH] Fix: nav bar doesn't turn to light mode in light mode!

---
 .../src/newhotness/nav/NavbarPanelCenter.vue   | 10 +++++-----
 .../src/design-system/general/NewButton.vue    | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/web/src/newhotness/nav/NavbarPanelCenter.vue b/app/web/src/newhotness/nav/NavbarPanelCenter.vue
index fe659ad2f5..8b7d9f2708 100644
--- a/app/web/src/newhotness/nav/NavbarPanelCenter.vue
+++ b/app/web/src/newhotness/nav/NavbarPanelCenter.vue
@@ -3,7 +3,7 @@
   <template v-if="isConnected">
     <div v-if="ffStore.SHOW_POLICIES" class="flex flex-row items-end gap-xs p-xs">
       <NewButton
-        tone="flat"
+        tone="navFlat"
         @click="() => router.push(compositionLink)"
         class="py-3xs"
         :active="onSim"
@@ -11,7 +11,7 @@
       />
       <NewButton
         v-if="ffStore.SHOW_AUTHORING_NAV"
-        tone="flat"
+        tone="navFlat"
         class="py-3xs"
         :active="onAuthor"
         @click="
@@ -25,7 +25,7 @@
       />
       <NewButton
         v-if="onHead"
-        tone="flat"
+        tone="navFlat"
         class="py-3xs"
         :active="onAudit"
         @click="
@@ -39,7 +39,7 @@
       />
       <NewButton
         v-else
-        tone="flat"
+        tone="navFlat"
         class="py-3xs"
         :active="onReview"
         @click="
@@ -52,7 +52,7 @@
         label="Review"
       />
       <NewButton
-        tone="flat"
+        tone="navFlat"
         class="py-3xs"
         :active="onPolicy"
         @click="
diff --git a/lib/vue-lib/src/design-system/general/NewButton.vue b/lib/vue-lib/src/design-system/general/NewButton.vue
index ce99b4d869..4af2d4d880 100644
--- a/lib/vue-lib/src/design-system/general/NewButton.vue
+++ b/lib/vue-lib/src/design-system/general/NewButton.vue
@@ -17,9 +17,9 @@
           'flex flex-row items-center justify-center rounded-sm',
           size === '2xs' || size === 'xs' ? 'gap-2xs' : 'gap-xs',
           'transition-all whitespace-nowrap leading-none font-medium max-h-fit',
-          tone === 'toggle' ? 'px-2xs min-h-[28px]' : [
-            hasLabel ? 'px-xs py-2xs' : 'p-3xs m-3xs',
-          ],
+          tone === 'toggle'
+            ? 'px-2xs min-h-[28px]'
+            : [hasLabel ? 'px-xs py-2xs' : 'p-3xs m-3xs'],
           tone !== 'empty' && 'border',
           computedTextSize,
           truncateText && 'min-w-0',
@@ -44,6 +44,8 @@
                     'text-neutral-900 bg-100 border-neutral-400 hover:bg-neutral-200',
                     'text-white bg-neutral-800 border-neutral-600 hover:bg-neutral-700',
                   ),
+                  navFlat:
+                    'text-white bg-neutral-800 border-neutral-600 hover:bg-neutral-700',
                   toggle: clsx(
                     'font-mono text-left truncate relative',
                     themeClasses(
@@ -76,6 +78,7 @@
             {
               neutral: themeClasses('bg-neutral-100', 'bg-neutral-600'),
               flat: themeClasses('bg-neutral-200', 'bg-neutral-700'),
+              navFlat: 'bg-neutral-700',
               toggle: '',
               action: themeClasses('bg-[#2583EC]', 'bg-[#1D5BA0]'),
               warning: themeClasses('bg-white', 'bg-[#67452D]'),
@@ -129,10 +132,7 @@
         </slot>
         <slot v-else>{{ label }}</slot>
       </TruncateWithTooltip>
-      <span
-        v-else-if="hasLabel"
-        :class="labelClasses"
-      >
+      <span v-else-if="hasLabel" :class="labelClasses">
         <slot v-if="confirmClick && confirmFirstClickAt" name="confirm-click">
           |
           {{
@@ -161,6 +161,7 @@
               {
                 neutral: '',
                 flat: '',
+                navFlat: '',
                 toggle: '',
                 action: '',
                 warning: '',
@@ -414,7 +415,7 @@ const labelClasses = computed(() => {
     return tw`py-2xs text-[13px] font-normal`;
   }
 
-  return props.size === '2xs' || props.size === 'xs' ? tw`py-3xs` : tw`py-2xs`;
+  return props.size === "2xs" || props.size === "xs" ? tw`py-3xs` : tw`py-2xs`;
 });
 
 const tooltipObject = computed(() =>
@@ -442,6 +443,7 @@ export type ButtonSizes = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 export const BUTTON_TONES = [
   "neutral",
   "flat", // similar to neutral, but has the same bg as the content its sitting on top of
+  "navFlat", // flat, but for the nav where we dont have light mode styles
   "toggle", // alternative neutral style used for buttons in the same area as ExploreModeTile
   "action",
   "warning",