Skip to content

Commit f26ee08

Browse files
juliusmarmingeclaude
juliusmarminge
and
claude
authored
fix(web): appearance classes use theme tokens and scale values (pingdotgg#13397)
Co-authored-by: Claude Opus 5.5 (1M context) <[email protected]>
1 parent 315fcca commit f26ee08

109 files changed

Lines changed: 464 additions & 433 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/web/src/browser/BrowserDeviceToolbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ export function BrowserDeviceToolbar({
175175
}}
176176
>
177177
{width >= 560 ? (
178-
<span className="mr-0.5 shrink-0 text-[11px] font-medium text-muted-foreground">
178+
<span className="mr-0.5 shrink-0 text-2xs font-medium text-muted-foreground">
179179
Dimensions
180180
</span>
181181
) : null}

‎apps/web/src/browser/HostedBrowserWebview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ export function HostedBrowserWebview(props: {
352352
/>
353353
{activeDrag ? (
354354
<div
355-
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"
355+
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"
356356
style={{
357357
left: layout.viewportX + layout.viewportWidth / 2,
358358
top: layout.viewportY + 10,

‎apps/web/src/components/AgentsPanel.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -162,12 +162,12 @@ function AgentRow({ agent }: { agent: RuntimeSubagent }) {
162162
<span className="col-start-2 row-start-1 flex min-w-0 items-baseline gap-2">
163163
<span className="min-w-0 truncate text-sm font-medium">{agent.title}</span>
164164
{role ? (
165-
<span className="max-w-28 shrink-0 truncate rounded-sm border border-border/60 px-1 font-mono text-[.65rem] text-muted-foreground">
165+
<span className="max-w-28 shrink-0 truncate rounded-sm border border-border/60 px-1 font-mono text-3xs text-muted-foreground">
166166
{role}
167167
</span>
168168
) : null}
169169
</span>
170-
<span className="col-start-3 row-start-1 min-w-14 text-right font-mono text-[.7rem] text-muted-foreground/80">
170+
<span className="col-start-3 row-start-1 min-w-14 text-right font-mono text-2xs text-muted-foreground/80">
171171
<span className="inline-flex items-center gap-1">
172172
<AgentElapsed agent={agent} />
173173
{agent.status === "completed" ? (
@@ -183,7 +183,7 @@ function AgentRow({ agent }: { agent: RuntimeSubagent }) {
183183
>
184184
{activity ?? statusLabel}
185185
</span>
186-
<span className="col-start-2 col-end-4 row-start-3 truncate font-mono text-[.7rem] tabular-nums text-muted-foreground/70">
186+
<span className="col-start-2 col-end-4 row-start-3 truncate font-mono text-2xs tabular-nums text-muted-foreground/70">
187187
{metadata.join(" · ")}
188188
</span>
189189
<span className="sr-only">{statusLabel}</span>
@@ -234,7 +234,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
234234
>
235235
<span
236236
className={cn(
237-
"font-mono text-[.65rem]",
237+
"font-mono text-3xs",
238238
phase.state === "running"
239239
? "text-info-foreground"
240240
: phase.state === "done"
@@ -247,7 +247,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
247247
</span>
248248
<span className="flex items-center gap-0.5">
249249
{phase.members.length === 0 ? (
250-
<span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
250+
<span className="font-mono text-3xs text-muted-foreground/50">–</span>
251251
) : (
252252
phase.members.map((member) => <StatusDot key={member.id} status={member.status} />)
253253
)}
@@ -281,7 +281,7 @@ function WorkflowScriptView({
281281
<div className="mx-1.5 mb-1 rounded-md border border-border/60 bg-background/60">
282282
<div className="flex items-center gap-2 border-b border-border/50 px-2 py-1">
283283
<Braces aria-hidden className="size-3 text-muted-foreground" />
284-
<span className="truncate font-mono text-[.65rem] text-muted-foreground">
284+
<span className="truncate font-mono text-3xs text-muted-foreground">
285285
{scriptPath.split("/").at(-1)}
286286
</span>
287287
<Button
@@ -296,7 +296,7 @@ function WorkflowScriptView({
296296
</div>
297297
<div className="max-h-72 overflow-auto p-2">
298298
{result._tag === "Success" ? (
299-
<pre className="whitespace-pre-wrap break-words font-mono text-[.7rem] leading-relaxed text-foreground/90">
299+
<pre className="whitespace-pre-wrap break-words font-mono text-2xs leading-relaxed text-foreground/90">
300300
{result.value.contents}
301301
{result.value.truncated ? "\n… (truncated)" : ""}
302302
</pre>
@@ -339,7 +339,7 @@ function PhaseSection({
339339
onClick={() => setOpen((value) => !value)}
340340
aria-expanded={open}
341341
className={cn(
342-
"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",
342+
"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",
343343
phase.state === "done"
344344
? "text-success-foreground"
345345
: phase.state === "running"
@@ -399,7 +399,7 @@ function ExpandedWorkflowSection({
399399
const canShowScript = scriptPath !== undefined && environmentId !== null && threadId !== null;
400400
return (
401401
<section className="rounded-lg border border-border/50 bg-card/30 p-1.5">
402-
<div className="flex items-center gap-2 px-1.5 pt-0.5 text-[.65rem] font-medium uppercase tracking-wider text-muted-foreground">
402+
<div className="flex items-center gap-2 px-1.5 pt-0.5 text-3xs font-medium uppercase tracking-wider text-muted-foreground">
403403
<StatusDot status={group.workflow.status} />
404404
<span className="min-w-0 truncate">
405405
{group.workflow.workflowName ?? group.workflow.title}
@@ -486,7 +486,7 @@ function CollapsedWorkflowSection({
486486
<span className="truncate text-sm">
487487
{group.workflow.workflowName ?? group.workflow.title}
488488
</span>
489-
<span className="ml-auto flex items-center gap-1.5 font-mono text-[.7rem] text-muted-foreground/80">
489+
<span className="ml-auto flex items-center gap-1.5 font-mono text-2xs text-muted-foreground/80">
490490
{failed > 0 ? <span className="text-destructive-foreground">{failed} failed</span> : null}
491491
<span>{members.length} agents</span>
492492
<span className="tabular-nums">· {formatSubagentTokenCount(totalTokens)} tok</span>
@@ -557,7 +557,7 @@ export function AgentsPanel({
557557
))}
558558
{model.directAgents.length > 0 ? (
559559
<section>
560-
<div className="px-1.5 pt-1 text-[.65rem] font-medium uppercase tracking-wider text-muted-foreground">
560+
<div className="px-1.5 pt-1 text-3xs font-medium uppercase tracking-wider text-muted-foreground">
561561
Direct spawns
562562
</div>
563563
{model.directAgents.map((agent) => (
@@ -567,7 +567,7 @@ export function AgentsPanel({
567567
) : null}
568568
</div>
569569
</ScrollArea>
570-
<footer className="flex items-center justify-between border-t border-border/60 px-3 py-1.5 font-mono text-[.7rem] text-muted-foreground">
570+
<footer className="flex items-center justify-between border-t border-border/60 px-3 py-1.5 font-mono text-2xs text-muted-foreground">
571571
<span className="flex items-center gap-2">
572572
{model.runningCount + model.waitingCount > 0 ? (
573573
<span className="text-info-foreground">

‎apps/web/src/components/BranchToolbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
185185
>
186186
<span
187187
data-composer-label-motion
188-
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"
188+
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"
189189
>
190190
{autoEnvironmentLabel ??
191191
(showEnvironmentIndicator ? (activeEnvironment?.label ?? "Run on") : workspaceLabel)}
@@ -197,7 +197,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
197197
if (isLocked) {
198198
return (
199199
<span
200-
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"
200+
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"
201201
data-composer-context-control
202202
>
203203
{triggerContent}

‎apps/web/src/components/BranchToolbarBranchSelector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -757,7 +757,7 @@ export function BranchToolbarBranchSelector({
757757
>
758758
<div className="flex w-full min-w-0 items-center justify-between gap-2">
759759
<MiddleTruncate value={itemValue} className="flex-1" />
760-
{badge && <span className="shrink-0 text-[10px] text-muted-foreground/45">{badge}</span>}
760+
{badge && <span className="shrink-0 text-3xs text-muted-foreground/45">{badge}</span>}
761761
</div>
762762
</ComboboxItem>
763763
);
@@ -819,7 +819,7 @@ export function BranchToolbarBranchSelector({
819819
>
820820
<span
821821
data-composer-label-motion
822-
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"
822+
className="flex w-full max-w-[240px] transition-opacity duration-180 ease-drawer group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
823823
>
824824
<MiddleTruncate value={triggerLabel} />
825825
</span>

‎apps/web/src/components/BranchToolbarEnvModeSelector.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
6161
<Tooltip>
6262
<TooltipTrigger
6363
render={<span />}
64-
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"
64+
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"
6565
data-composer-context-control
6666
>
6767
{forceNewWorktree ? (
@@ -77,7 +77,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
7777
>
7878
<span
7979
data-composer-label-motion
80-
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"
80+
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"
8181
>
8282
{forceNewWorktree
8383
? resolveEnvModeLabel("worktree")
@@ -133,7 +133,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
133133
>
134134
<span
135135
data-composer-label-motion
136-
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"
136+
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"
137137
>
138138
<SelectValue />
139139
</span>

‎apps/web/src/components/BranchToolbarEnvironmentSelector.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
6363
<Tooltip>
6464
<TooltipTrigger
6565
render={<span />}
66-
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"
66+
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"
6767
data-composer-context-control
6868
>
6969
<EnvironmentMachineIcon
@@ -76,7 +76,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
7676
>
7777
<span
7878
data-composer-label-motion
79-
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"
79+
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"
8080
>
8181
{activeEnvironment?.label ?? "Run on"}
8282
</span>
@@ -123,7 +123,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
123123
>
124124
<span
125125
data-composer-label-motion
126-
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"
126+
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"
127127
>
128128
<SelectValue />
129129
</span>

‎apps/web/src/components/ChatMarkdown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -974,12 +974,12 @@ function MarkdownCodeBlock({
974974

975975
return (
976976
<div
977-
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"
977+
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"
978978
data-language={language}
979979
data-wrap={wrapped ? "true" : "false"}
980980
>
981981
<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">
982-
<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]">
982+
<span className="inline-flex min-w-0 items-center gap-1.5 font-mono text-2xs">
983983
<MarkdownCodeBlockTitleContent
984984
fenceTitle={fenceTitle}
985985
language={language}
@@ -2201,7 +2201,7 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
22012201
<TooltipPopup side="top" variant="code">
22022202
{/* The full path: the chip already shows the shortened form, and a link
22032203
to the workspace root collapses to a bare label that repeats it. */}
2204-
<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">
2204+
<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">
22052205
{targetPath}
22062206
</div>
22072207
</TooltipPopup>

‎apps/web/src/components/ChatView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1220,7 +1220,7 @@ const PersistentThreadTerminalDrawer = memo(function PersistentThreadTerminalDra
12201220
"grid shrink-0 overflow-clip",
12211221
active ? (visible ? "grid-rows-[1fr]" : "grid-rows-[0fr]") : "hidden",
12221222
active &&
1223-
"[[data-panel-animations=true]_&]:transition-[grid-template-rows] [[data-panel-animations=true]_&]:[transition-duration:var(--panel-animation-duration)] [[data-panel-animations=true]_&]:ease-out",
1223+
"[[data-panel-animations=true]_&]:transition-[grid-template-rows] [[data-panel-animations=true]_&]:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:ease-out",
12241224
active && visible && "[[data-panel-animations=true]_&]:starting:grid-rows-[0fr]!",
12251225
)}
12261226
>
@@ -9588,7 +9588,7 @@ export default function ChatView(props: ChatViewProps) {
95889588
className={cn(
95899589
"flex shrink-0",
95909590
panelAnimationsActive &&
9591-
"motion-safe:transition-opacity motion-safe:[transition-duration:var(--panel-animation-duration)] motion-safe:ease-out",
9591+
"motion-safe:transition-opacity motion-safe:duration-(--panel-animation-duration) motion-safe:ease-out",
95929592
rightPanelOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
95939593
)}
95949594
inert={!rightPanelOpen}
@@ -10015,7 +10015,7 @@ export default function ChatView(props: ChatViewProps) {
1001510015
>
1001610016
<div
1001710017
ref={attachDraftHeroTransitionGroupRef}
10018-
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)]"
10018+
className="w-full ps-(--workspace-gutter-start) pe-(--workspace-gutter-end)"
1001910019
>
1002010020
<div
1002110021
data-chat-composer-stack="true"

‎apps/web/src/components/ComposerPromptEditorTiptap.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ function resolvedThemeFromDocument(): "light" | "dark" {
190190
* paints the editor's node selection over it.
191191
*/
192192
const CHIP_NODE_SELECTION_CLASS_NAME =
193-
"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-['']";
193+
"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-['']";
194194

195195
const ComposerMentionExtension = Node.create({
196196
name: "composer-mention",
@@ -1242,7 +1242,7 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
12421242
<ComposerCitationCommentContext value={citationCommentActions}>
12431243
<div
12441244
className={cn(
1245-
"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)]",
1245+
"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)",
12461246
containerClassName,
12471247
)}
12481248
>

0 commit comments

Comments
 (0)