fix(desktop): tooltip colors

packages/app/src/components/prompt-input.tsx

@@ -1367,20 +1367,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     variant="ghost"
                   />
                 </TooltipKeybind>
-                <Tooltip
-                  placement="top"
-                  value={
-                    <div class="flex flex-col gap-1">
-                      <div class="flex items-center gap-2">
-                        <span>Choose model</span>
-                        <span class="text-icon-base text-12-medium">{command.keybind("model.choose")}</span>
-                      </div>
-                      <Show when={local.model.current()?.provider.name}>
-                        <span class="text-text-weak">{local.model.current()?.provider.name}</span>
-                      </Show>
-                    </div>
-                  }
-                >
+                <TooltipKeybind placement="top" title="Choose model" keybind={command.keybind("model.choose")}>
                   <Button
                     as="div"
                     variant="ghost"
@@ -1393,7 +1380,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     {local.model.current()?.name ?? "Select model"}
                     <Icon name="chevron-down" size="small" />
                   </Button>
-                </Tooltip>
+                </TooltipKeybind>
                 <Show when={local.model.variant.list().length > 0}>
                   <TooltipKeybind
                     placement="top"

packages/app/src/components/session-context-usage.tsx

@@ -38,15 +38,15 @@ export function SessionContextUsage() {
             <div class="">
               <div class="flex items-center gap-2">
                 <span class="text-text-invert-strong">{ctx().tokens}</span>
-                <span class="text-text-invert-weak">Tokens</span>
+                <span class="text-text-invert-base">Tokens</span>
               </div>
               <div class="flex items-center gap-2">
                 <span class="text-text-invert-strong">{ctx().percentage ?? 0}%</span>
-                <span class="text-text-invert-weak">Usage</span>
+                <span class="text-text-invert-base">Usage</span>
               </div>
               <div class="flex items-center gap-2">
                 <span class="text-text-invert-strong">{cost()}</span>
-                <span class="text-text-invert-weak">Cost</span>
+                <span class="text-text-invert-base">Cost</span>
               </div>
             </div>
           }

packages/ui/src/components/tooltip.css

@@ -9,7 +9,7 @@
 }
 
 [data-slot="tooltip-keybind-key"] {
-  color: var(--icon-base);
+  color: var(--text-invert-base);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-large);
@@ -20,7 +20,7 @@
   max-width: 320px;
   border-radius: var(--radius-md);
   background-color: var(--surface-float-base);
-  color: var(--text-inverted-base);
+  color: var(--text-invert-strong);
   background: var(--surface-float-base);
   padding: 6px 12px;
   border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));