fix(ui): resolve undefined Control UI font tokens (#121320)

Control UI declares its typography tokens once, in ui/src/styles/base.css:
--mono and --font-body. Fifteen rules asked for --font-mono / --font-sans
instead, names that only exist in other documents (canvas widget host,
provider OAuth page, MCP Apps spec keys). Those references are invalid at
computed-value time, so the declarations were dropped: nine had no fallback
and silently inherited the body font, and the four `font:` shorthand sites
lost their size, weight, and line height along with the family.

Point every reference at the canonical token and drop the now-dead generic
fallbacks so ui/src has one spelling per font token.

ui/src/styles/base-theme-tokens.node.test.ts already guards this bug class
for color tokens (#113726, #113776) but never listed the font aliases; add
them so a re-introduction fails the existing lane instead of shipping.

ui/src/components/dock-layout-controller.ts

@@ -227,7 +227,7 @@ export const dockPanelStyles = css`
     position: fixed;
     z-index: 60;
     color: var(--text, #d7dae0);
-    font-family: var(--font-sans, system-ui, sans-serif);
+    font-family: var(--font-body);
   }
   :is(.bp, .tp) {
     position: fixed;

ui/src/styles/base-theme-tokens.node.test.ts

@@ -13,6 +13,11 @@ const undefinedTokenMappings = {
   "bg-subtle": "bg-muted",
   "border-subtle": "border",
   fg: "text",
+  // Font aliases arrive from surfaces that publish their own token names
+  // (canvas widgets, the MCP Apps spec keys in mcp-app-theme.ts); inside
+  // Control UI only --mono and --font-body exist.
+  "font-mono": "mono",
+  "font-sans": "font-body",
   foreground: "text",
   "panel-2": "panel-strong",
   success: "ok",

ui/src/styles/chat/grouped.css

@@ -908,7 +908,7 @@ details.msg-meta:not([open]) .msg-meta__details {
   background: var(--bg-hover, rgba(255, 255, 255, 0.06));
   padding: 1px 6px;
   border-radius: var(--radius-sm, 4px);
-  font-family: var(--font-mono, monospace);
+  font-family: var(--mono);
 }
 
 .msg-meta__cost {

ui/src/styles/chat/layout.css

@@ -1652,7 +1652,7 @@ openclaw-chat-video-player {
   border-radius: 6px;
   background: color-mix(in srgb, var(--bg) 70%, transparent);
   color: var(--text);
-  font: 11px/1.4 var(--font-mono);
+  font: 11px/1.4 var(--mono);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
@@ -1946,7 +1946,7 @@ openclaw-chat-video-player {
   min-width: 0;
   overflow: hidden;
   color: var(--muted);
-  font: 12px/1.4 var(--font-mono);
+  font: 12px/1.4 var(--mono);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1961,7 +1961,7 @@ openclaw-chat-video-player {
 .chat-pr__diff {
   display: inline-flex;
   gap: 5px;
-  font: 12px/1.4 var(--font-mono);
+  font: 12px/1.4 var(--mono);
 }
 
 .chat-pr__additions {
@@ -5293,7 +5293,7 @@ openclaw-chat-video-player {
   display: inline-block;
   padding: 1px 6px;
   font-size: 12px; /* was 11px */
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   background: var(--panel-strong);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);

ui/src/styles/components.css

@@ -290,7 +290,7 @@ openclaw-session-owner-chip {
   display: block;
   margin: 4px 0 2px;
   padding: 5px 10px;
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   font-size: 12px;
   background: var(--bg);
   border: 1px solid var(--border);
@@ -1018,7 +1018,7 @@ openclaw-session-owner-chip {
   align-items: center;
   padding: 0 12px;
   color: var(--text);
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   font-size: 13px;
   letter-spacing: 0.08em;
   line-height: 1;

ui/src/styles/custodian-panel.css

@@ -2,7 +2,7 @@ openclaw-custodian-panel {
   position: fixed;
   z-index: 60;
   color: var(--text);
-  font-family: var(--font-sans);
+  font-family: var(--font-body);
 }
 
 .cp {

ui/src/styles/layout.css

@@ -324,7 +324,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
   border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--card) 70%, transparent);
   color: var(--muted);
-  font-family: var(--font-mono, ui-monospace, monospace);
+  font-family: var(--mono);
   font-size: 10px;
   font-weight: 550;
   letter-spacing: 0.04em;
@@ -3472,7 +3472,7 @@ openclaw-tooltip.sidebar-hover-tooltip {
 }
 
 .sidebar-hover-card__metadata-value--mono {
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   font-size: 11px;
 }
 
@@ -3594,7 +3594,7 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
   min-width: 0;
   overflow: hidden;
   color: var(--muted);
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   font-size: 11px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3620,7 +3620,7 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
   border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--danger) 12%, transparent);
   font-size: 11px;
-  font-family: var(--font-mono);
+  font-family: var(--mono);
   color: var(--danger);
 }
 

ui/src/styles/settings.css

@@ -156,7 +156,7 @@
   border-radius: 50%;
   background: transparent;
   color: var(--muted);
-  font: 600 var(--control-ui-text-xs) / 1 var(--font-sans);
+  font: 600 var(--control-ui-text-xs) / 1 var(--font-body);
   cursor: var(--cursor-action);
 }