From e39cc5b2a5f26ba6b21b584cdc9a3ab4fda02eab Mon Sep 17 00:00:00 2001
From: Daniel Han <danielhanchen@gmail.com>
Date: Sun, 26 Jul 2026 04:54:00 -0700
Subject: [PATCH] Studio: use the UI font scale tokens in the Agents settings
 tab (#7462)

The Agents tab landed with three raw px text utilities, so its avatar initials
and the two status pills ignore the UI font size preference and stay fixed while
the rest of the dialog scales.

Swap them for the existing text-ui-11 / text-ui-10 tokens, which is what the rest
of the frontend already uses (149 and 128 call sites respectively).

This is what test_no_raw_pixel_text_utilities guards, so Repo tests (CPU) has been
red on main since the tab was added, and every open PR inherits the failure.

Co-authored-by: danielhanchen <unslothai@gmail.com>
---
 studio/frontend/src/features/settings/tabs/agents-tab.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/studio/frontend/src/features/settings/tabs/agents-tab.tsx b/studio/frontend/src/features/settings/tabs/agents-tab.tsx
index 55cfc8b31e..2ccd867c02 100644
--- a/studio/frontend/src/features/settings/tabs/agents-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/agents-tab.tsx
@@ -104,7 +104,7 @@ function AgentIcon({
     <span
       aria-hidden={true}
       style={{ backgroundColor: color }}
-      className="flex size-7 shrink-0 items-center justify-center rounded-md font-heading text-[11px] font-semibold text-white"
+      className="flex size-7 shrink-0 items-center justify-center rounded-md font-heading text-ui-11 font-semibold text-white"
     >
       {mark}
     </span>
@@ -371,12 +371,12 @@ export function AgentsTab() {
                   {agent.name}
                 </span>
                 {detected.has(agent.id) ? (
-                  <span className="shrink-0 rounded-full bg-control-accent/10 px-2 py-1 text-[10px] leading-none font-semibold text-control-accent">
+                  <span className="shrink-0 rounded-full bg-control-accent/10 px-2 py-1 text-ui-10 leading-none font-semibold text-control-accent">
                     {t("settings.agents.quickstart.installed")}
                   </span>
                 ) : null}
                 {agent.id === "codex" && !isGguf ? (
-                  <span className="shrink-0 rounded-full bg-muted px-2 py-1 text-[10px] leading-none font-semibold text-muted-foreground">
+                  <span className="shrink-0 rounded-full bg-muted px-2 py-1 text-ui-10 leading-none font-semibold text-muted-foreground">
                     {t("settings.agents.supportedAgents.requiresGguf")}
                   </span>
                 ) : null}