tweak: use theme tokens for debug bar surface

Author: jayair

packages/app/src/components/debug-bar.tsx

@@ -55,7 +55,7 @@ function Cell(props: { bad?: boolean; dim?: boolean; label: string; tip: string;
     <Tooltip value={props.tip} placement="top">
       <div
         classList={{
-          "flex min-h-[42px] w-full min-w-0 flex-col items-center justify-center rounded-[8px] bg-white/5 px-0.5 py-1 text-center": true,
+          "flex min-h-[42px] w-full min-w-0 flex-col items-center justify-center rounded-[8px] px-0.5 py-1 text-center": true,
           "col-span-2": !!props.wide,
         }}
       >
@@ -363,11 +363,7 @@ export function DebugBar() {
   return (
     <aside
       aria-label={language.t("debugBar.ariaLabel")}
-      class="pointer-events-auto fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border p-0.5 text-text-on-interactive-base shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]"
-      style={{
-        "background-color": "color-mix(in srgb, var(--icon-interactive-base) 42%, black)",
-        "border-color": "color-mix(in srgb, white 14%, transparent)",
-      }}
+      class="pointer-events-auto fixed bottom-3 right-3 z-50 w-[308px] max-w-[calc(100vw-1.5rem)] overflow-hidden rounded-xl border border-border-base bg-surface-raised-stronger-non-alpha p-0.5 text-text-strong shadow-[var(--shadow-lg-border-base)] sm:bottom-4 sm:right-4 sm:w-[324px]"
     >
       <div class="grid grid-cols-5 gap-px font-mono">
         <Cell