From 57b891000de6095eb648c447f3efce26dd3e7f9d Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Fri, 24 Jul 2026 23:12:21 +0200
Subject: [PATCH] fix(core): use color-base shortcut instead of text-base for
 dark-mode contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The command palette's search input and dialog surface used `text-base`
(UnoCSS's font-size utility) where `color-base` (the dark-aware text-color
shortcut) was clearly intended — `text-base` sets no color at all, so input
text fell back to the browser default (dark) on top of the dialog's own
dark-mode background, rendering it unreadable. Same typo also affected the
pin-toggle icons in the Docks settings view.

Also switch the palette dialog's opaque `bg-base` to `bg-glass:75`, matching
the translucent/blurred surface already used by the docked panels
(DockPanel.vue, DockEdge.vue) so the palette's look is consistent with the
rest of the floating dock chrome.
---
 .../components/command-palette/CommandPalette.vue             | 4 ++--
 .../webcomponents/components/views-builtin/SettingsDocks.vue  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/client/webcomponents/components/command-palette/CommandPalette.vue b/packages/core/src/client/webcomponents/components/command-palette/CommandPalette.vue
index a8db97b8..862e629e 100644
--- a/packages/core/src/client/webcomponents/components/command-palette/CommandPalette.vue
+++ b/packages/core/src/client/webcomponents/components/command-palette/CommandPalette.vue
@@ -265,7 +265,7 @@ function getKeybindings(id: string) {
       >
         <ViteDevToolsLogo class="absolute top--32px left-5px w-60 pointer-events-none" />
         <div
-          class="w-full w-lg bg-base border border-base rounded-lg shadow-xl pointer-events-auto of-hidden flex flex-col max-h-[60vh]"
+          class="w-full w-lg bg-glass:75 color-base border border-base rounded-lg shadow-xl pointer-events-auto of-hidden flex flex-col max-h-[60vh]"
         >
           <!-- Header -->
           <header class="border-b border-base flex items-center px-3">
@@ -284,7 +284,7 @@ function getKeybindings(id: string) {
             <input
               ref="searchInput"
               v-model="search"
-              class="flex-1 bg-transparent py-3 outline-none text-sm text-base"
+              class="flex-1 bg-transparent py-3 outline-none text-sm color-base"
               placeholder="Type a command..."
               @keydown="onKeyDown"
             >
diff --git a/packages/core/src/client/webcomponents/components/views-builtin/SettingsDocks.vue b/packages/core/src/client/webcomponents/components/views-builtin/SettingsDocks.vue
index 71a3fb1a..b83cf65f 100644
--- a/packages/core/src/client/webcomponents/components/views-builtin/SettingsDocks.vue
+++ b/packages/core/src/client/webcomponents/components/views-builtin/SettingsDocks.vue
@@ -418,7 +418,7 @@ function resetCustomOrderForContainer(container: string) {
               >
                 <div
                   :class="settings.docksPinned.includes(dock.id) ? 'i-ph-push-pin-fill rotate--45' : 'i-ph-push-pin'"
-                  class="text-base"
+                  class="color-base"
                 />
               </button>
             </div>
@@ -542,7 +542,7 @@ function resetCustomOrderForContainer(container: string) {
                     >
                       <div
                         :class="settings.docksPinned.includes(member.id) ? 'i-ph-push-pin-fill rotate--45' : 'i-ph-push-pin'"
-                        class="text-base"
+                        class="color-base"
                       />
                     </button>
                   </div>