Skip to content

fix(web): appearance classes use theme tokens and scale values #13397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 1 commit into from
Sep 24, 2026
Merged

fix(web): appearance classes use theme tokens and scale values #13397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/browser/BrowserDeviceToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export function BrowserDeviceToolbar({
}}
>
{width >= 560 ? (
<span className="mr-0.5 shrink-0 text-[11px] font-medium text-muted-foreground">
<span className="mr-0.5 shrink-0 text-2xs font-medium text-muted-foreground">
Dimensions
</span>
) : null}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/browser/HostedBrowserWebview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,7 +352,7 @@ export function HostedBrowserWebview(props: {
/>
{activeDrag ? (
<div
className="pointer-events-none absolute z-40 -translate-x-1/2 rounded-md border border-border/80 bg-background/95 px-2 py-1 text-[11px] font-medium tabular-nums text-foreground shadow-md backdrop-blur-sm"
className="pointer-events-none absolute z-40 -translate-x-1/2 rounded-md border border-border/80 bg-background/95 px-2 py-1 text-2xs font-medium tabular-nums text-foreground shadow-md backdrop-blur-sm"
style={{
left: layout.viewportX + layout.viewportWidth / 2,
top: layout.viewportY + 10,
Expand Down
24 changes: 12 additions & 12 deletions apps/web/src/components/AgentsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,12 +162,12 @@ function AgentRow({ agent }: { agent: RuntimeSubagent }) {
<span className="col-start-2 row-start-1 flex min-w-0 items-baseline gap-2">
<span className="min-w-0 truncate text-sm font-medium">{agent.title}</span>
{role ? (
<span className="max-w-28 shrink-0 truncate rounded-sm border border-border/60 px-1 font-mono text-[.65rem] text-muted-foreground">
<span className="max-w-28 shrink-0 truncate rounded-sm border border-border/60 px-1 font-mono text-3xs text-muted-foreground">
{role}
</span>
) : null}
</span>
<span className="col-start-3 row-start-1 min-w-14 text-right font-mono text-[.7rem] text-muted-foreground/80">
<span className="col-start-3 row-start-1 min-w-14 text-right font-mono text-2xs text-muted-foreground/80">
<span className="inline-flex items-center gap-1">
<AgentElapsed agent={agent} />
{agent.status === "completed" ? (
Expand All @@ -183,7 +183,7 @@ function AgentRow({ agent }: { agent: RuntimeSubagent }) {
>
{activity ?? statusLabel}
</span>
<span className="col-start-2 col-end-4 row-start-3 truncate font-mono text-[.7rem] tabular-nums text-muted-foreground/70">
<span className="col-start-2 col-end-4 row-start-3 truncate font-mono text-2xs tabular-nums text-muted-foreground/70">
{metadata.join(" · ")}
</span>
<span className="sr-only">{statusLabel}</span>
Expand Down Expand Up @@ -234,7 +234,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
>
<span
className={cn(
"font-mono text-[.65rem]",
"font-mono text-3xs",
phase.state === "running"
? "text-info-foreground"
: phase.state === "done"
Expand All @@ -247,7 +247,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
</span>
<span className="flex items-center gap-0.5">
{phase.members.length === 0 ? (
<span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
<span className="font-mono text-3xs text-muted-foreground/50">–</span>
) : (
phase.members.map((member) => <StatusDot key={member.id} status={member.status} />)
)}
Expand Down Expand Up @@ -281,7 +281,7 @@ function WorkflowScriptView({
<div className="mx-1.5 mb-1 rounded-md border border-border/60 bg-background/60">
<div className="flex items-center gap-2 border-b border-border/50 px-2 py-1">
<Braces aria-hidden className="size-3 text-muted-foreground" />
<span className="truncate font-mono text-[.65rem] text-muted-foreground">
<span className="truncate font-mono text-3xs text-muted-foreground">
{scriptPath.split("/").at(-1)}
</span>
<Button
Expand All @@ -296,7 +296,7 @@ function WorkflowScriptView({
</div>
<div className="max-h-72 overflow-auto p-2">
{result._tag === "Success" ? (
<pre className="whitespace-pre-wrap break-words font-mono text-[.7rem] leading-relaxed text-foreground/90">
<pre className="whitespace-pre-wrap break-words font-mono text-2xs leading-relaxed text-foreground/90">
{result.value.contents}
{result.value.truncated ? "\n… (truncated)" : ""}
</pre>
Expand Down Expand Up @@ -339,7 +339,7 @@ function PhaseSection({
onClick={() => setOpen((value) => !value)}
aria-expanded={open}
className={cn(
"mt-2 flex w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[.65rem] font-medium uppercase tracking-wider hover:bg-accent/40",
"mt-2 flex w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-3xs font-medium uppercase tracking-wider hover:bg-accent/40",
phase.state === "done"
? "text-success-foreground"
: phase.state === "running"
Expand Down Expand Up @@ -399,7 +399,7 @@ function ExpandedWorkflowSection({
const canShowScript = scriptPath !== undefined && environmentId !== null && threadId !== null;
return (
<section className="rounded-lg border border-border/50 bg-card/30 p-1.5">
<div className="flex items-center gap-2 px-1.5 pt-0.5 text-[.65rem] font-medium uppercase tracking-wider text-muted-foreground">
<div className="flex items-center gap-2 px-1.5 pt-0.5 text-3xs font-medium uppercase tracking-wider text-muted-foreground">
<StatusDot status={group.workflow.status} />
<span className="min-w-0 truncate">
{group.workflow.workflowName ?? group.workflow.title}
Expand Down Expand Up @@ -486,7 +486,7 @@ function CollapsedWorkflowSection({
<span className="truncate text-sm">
{group.workflow.workflowName ?? group.workflow.title}
</span>
<span className="ml-auto flex items-center gap-1.5 font-mono text-[.7rem] text-muted-foreground/80">
<span className="ml-auto flex items-center gap-1.5 font-mono text-2xs text-muted-foreground/80">
{failed > 0 ? <span className="text-destructive-foreground">{failed} failed</span> : null}
<span>{members.length} agents</span>
<span className="tabular-nums">· {formatSubagentTokenCount(totalTokens)} tok</span>
Expand Down Expand Up @@ -557,7 +557,7 @@ export function AgentsPanel({
))}
{model.directAgents.length > 0 ? (
<section>
<div className="px-1.5 pt-1 text-[.65rem] font-medium uppercase tracking-wider text-muted-foreground">
<div className="px-1.5 pt-1 text-3xs font-medium uppercase tracking-wider text-muted-foreground">
Direct spawns
</div>
{model.directAgents.map((agent) => (
Expand All @@ -567,7 +567,7 @@ export function AgentsPanel({
) : null}
</div>
</ScrollArea>
<footer className="flex items-center justify-between border-t border-border/60 px-3 py-1.5 font-mono text-[.7rem] text-muted-foreground">
<footer className="flex items-center justify-between border-t border-border/60 px-3 py-1.5 font-mono text-2xs text-muted-foreground">
<span className="flex items-center gap-2">
{model.runningCount + model.waitingCount > 0 ? (
<span className="text-info-foreground">
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/BranchToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
>
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-drawer group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
{autoEnvironmentLabel ??
(showEnvironmentIndicator ? (activeEnvironment?.label ?? "Run on") : workspaceLabel)}
Expand All @@ -197,7 +197,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
if (isLocked) {
return (
<span
className="inline-flex h-7 min-w-0 max-w-[48%] flex-initial items-center justify-start gap-1 rounded-md border border-transparent px-[calc(--spacing(2)-1px)] font-normal text-muted-foreground/70 text-xs sm:h-6"
className="inline-flex h-7 min-w-0 max-w-[48%] flex-initial items-center justify-start gap-1 rounded-md border border-transparent px-1.75 font-normal text-muted-foreground/70 text-xs sm:h-6"
data-composer-context-control
>
{triggerContent}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/BranchToolbarBranchSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,7 +757,7 @@ export function BranchToolbarBranchSelector({
>
<div className="flex w-full min-w-0 items-center justify-between gap-2">
<MiddleTruncate value={itemValue} className="flex-1" />
{badge && <span className="shrink-0 text-[10px] text-muted-foreground/45">{badge}</span>}
{badge && <span className="shrink-0 text-3xs text-muted-foreground/45">{badge}</span>}
</div>
</ComboboxItem>
);
Expand Down Expand Up @@ -819,7 +819,7 @@ export function BranchToolbarBranchSelector({
>
<span
data-composer-label-motion
className="flex w-full max-w-[240px] transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
className="flex w-full max-w-[240px] transition-opacity duration-180 ease-drawer group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
<MiddleTruncate value={triggerLabel} />
</span>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/BranchToolbarEnvModeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
<Tooltip>
<TooltipTrigger
render={<span />}
className="inline-flex h-7 min-w-0 items-center gap-1 border border-transparent px-[calc(--spacing(2)-1px)] font-normal text-muted-foreground/70 text-xs sm:h-6"
className="inline-flex h-7 min-w-0 items-center gap-1 border border-transparent px-1.75 font-normal text-muted-foreground/70 text-xs sm:h-6"
data-composer-context-control
>
{forceNewWorktree ? (
Expand All @@ -77,7 +77,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
>
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-drawer group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
{forceNewWorktree
? resolveEnvModeLabel("worktree")
Expand Down Expand Up @@ -133,7 +133,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
>
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-drawer group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
<SelectValue />
</span>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
<Tooltip>
<TooltipTrigger
render={<span />}
className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 border border-transparent px-[calc(--spacing(2)-1px)] font-normal text-muted-foreground/70 text-xs sm:h-6"
className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 border border-transparent px-1.75 font-normal text-muted-foreground/70 text-xs sm:h-6"
data-composer-context-control
>
<EnvironmentMachineIcon
Expand All @@ -76,7 +76,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
>
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-drawer group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
{activeEnvironment?.label ?? "Run on"}
</span>
Expand Down Expand Up @@ -123,7 +123,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
>
<span
data-composer-label-motion
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
className="block w-full min-w-0 max-w-[240px] truncate transition-opacity duration-180 ease-drawer group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
>
<SelectValue />
</span>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/ChatMarkdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -974,12 +974,12 @@ function MarkdownCodeBlock({

return (
<div
className="chat-markdown-codeblock my-[0.65rem] overflow-hidden rounded-[var(--radius)] border border-border/70 bg-secondary leading-snug dark:border-transparent dark:bg-input/32"
className="chat-markdown-codeblock my-[0.65rem] overflow-hidden rounded-lg border border-border/70 bg-secondary leading-snug dark:border-transparent dark:bg-input/32"
data-language={language}
data-wrap={wrapped ? "true" : "false"}
>
<div className="chat-markdown-codeblock-header flex items-center justify-between gap-2 pt-1.5 pr-1.5 pb-0 pl-3 select-none">
<span className="inline-flex min-w-0 items-center gap-[0.4rem] [font-family:var(--font-mono,ui-monospace,SFMono-Regular,monospace)] [font-size:0.6875rem]">
<span className="inline-flex min-w-0 items-center gap-1.5 font-mono text-2xs">
<MarkdownCodeBlockTitleContent
fenceTitle={fenceTitle}
language={language}
Expand Down Expand Up @@ -2201,7 +2201,7 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
<TooltipPopup side="top" variant="code">
{/* The full path: the chip already shows the shortened form, and a link
to the workspace root collapses to a bare label that repeats it. */}
<div className="overflow-x-auto whitespace-nowrap [scrollbar-color:color-mix(in_srgb,var(--contrast-border)_78%,transparent)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[color-mix(in_srgb,var(--contrast-border)_78%,transparent)] [&::-webkit-scrollbar-track]:bg-transparent">
<div className="overflow-x-auto whitespace-nowrap scrollbar-thumb-border/78 scrollbar-track-transparent [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/78 [&::-webkit-scrollbar-track]:bg-transparent">
{targetPath}
</div>
</TooltipPopup>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1220,7 +1220,7 @@ const PersistentThreadTerminalDrawer = memo(function PersistentThreadTerminalDra
"grid shrink-0 overflow-clip",
active ? (visible ? "grid-rows-[1fr]" : "grid-rows-[0fr]") : "hidden",
active &&
"[[data-panel-animations=true]_&]:transition-[grid-template-rows] [[data-panel-animations=true]_&]:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:ease-out",
"[[data-panel-animations=true]_&]:transition-[grid-template-rows] [[data-panel-animations=true]_&]:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:ease-out",
active && visible && "[[data-panel-animations=true]_&]:starting:grid-rows-[0fr]!",
)}
>
Expand Down Expand Up @@ -9588,7 +9588,7 @@ export default function ChatView(props: ChatViewProps) {
className={cn(
"flex shrink-0",
panelAnimationsActive &&
"motion-safe:transition-opacity motion-safe:[transition-duration:var(--panel-animation-duration)] motion-safe:ease-out",
"motion-safe:transition-opacity motion-safe:duration-(--panel-animation-duration) motion-safe:ease-out",
rightPanelOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
)}
inert={!rightPanelOpen}
Expand Down Expand Up @@ -10015,7 +10015,7 @@ export default function ChatView(props: ChatViewProps) {
>
<div
ref={attachDraftHeroTransitionGroupRef}
className="w-full ps-[calc(env(safe-area-inset-left)+0.75rem)] pe-[calc(env(safe-area-inset-right)+0.75rem)] sm:ps-[calc(env(safe-area-inset-left)+1.25rem)] sm:pe-[calc(env(safe-area-inset-right)+1.25rem)]"
className="w-full ps-(--workspace-gutter-start) pe-(--workspace-gutter-end)"
>
<div
data-chat-composer-stack="true"
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/ComposerPromptEditorTiptap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ function resolvedThemeFromDocument(): "light" | "dark" {
* paints the editor's node selection over it.
*/
const CHIP_NODE_SELECTION_CLASS_NAME =
"relative inline-flex select-none items-center align-middle leading-none data-[composer-chip-selected]:after:pointer-events-none data-[composer-chip-selected]:after:absolute data-[composer-chip-selected]:after:inset-0 data-[composer-chip-selected]:after:rounded-[6px] data-[composer-chip-selected]:after:bg-[Highlight] data-[composer-chip-selected]:after:opacity-30 data-[composer-chip-selected]:after:content-['']";
"relative inline-flex select-none items-center align-middle leading-none data-[composer-chip-selected]:after:pointer-events-none data-[composer-chip-selected]:after:absolute data-[composer-chip-selected]:after:inset-0 data-[composer-chip-selected]:after:rounded-sm data-[composer-chip-selected]:after:bg-[Highlight] data-[composer-chip-selected]:after:opacity-30 data-[composer-chip-selected]:after:content-['']";

const ComposerMentionExtension = Node.create({
name: "composer-mention",
Expand Down Expand Up @@ -1242,7 +1242,7 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
<ComposerCitationCommentContext value={citationCommentActions}>
<div
className={cn(
"relative flow-root [font-family:var(--font-composer,var(--font-sans))] [font-size:var(--font-size-prompt,0.875rem)] [@media(max-width:39.999rem)_and_(pointer:coarse)]:[font-size:max(var(--font-size-prompt,1rem),16px)]",
"relative flow-root font-(family-name:--font-composer,var(--font-sans)) text-(length:--font-size-prompt,var(--text-sm)) max-sm:pointer-coarse:text-(length:--font-size-prompt-touch)",
containerClassName,
)}
>
Expand Down
Loading
Loading