Skip to content

Improve theme surface token coverage #30

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
Jay1 merged 6 commits into from
Jun 1, 2026
Merged

Improve theme surface token coverage #30

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eab19af
web: add theme surface tokens
Jay1 May 31, 2026
fc7a65f
web: theme app chrome controls
Jay1 May 31, 2026
56bfa72
web: theme chat work surfaces
Jay1 May 31, 2026
996f074
docs: document theme surface tokens
Jay1 May 31, 2026
fa1534e
docs: dedupe testing index
Jay1 May 31, 2026
009cf9d
test: update themed work row expectation
Jay1 May 31, 2026
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
55 changes: 27 additions & 28 deletions apps/web/src/components/BranchToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,16 +77,11 @@ export function RuntimeUsageControls({
className,
}: RuntimeUsageControlsProps) {
return (
<div
className={cn(
"flex items-center gap-1.5 text-[var(--color-text-foreground-secondary)]",
className,
)}
>
<div className={cn("flex items-center gap-1.5 text-(--app-metadata-muted-fg)", className)}>
{runtimeMode && onRuntimeModeChange ? (
<button
type="button"
className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[length:var(--app-font-size-ui-xs,10px)] font-normal transition-colors hover:text-[var(--color-text-foreground)]"
className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[length:var(--app-font-size-ui-xs,10px)] font-normal transition-colors hover:text-(--app-metadata-fg)"
onClick={() =>
onRuntimeModeChange(runtimeMode === "full-access" ? "approval-required" : "full-access")
}
Expand Down Expand Up @@ -284,7 +279,7 @@ export default function BranchToolbar({
<div className="flex items-center gap-2">
{showEnvPicker ? (
<Popover open={envPickerOpen} onOpenChange={setEnvPickerOpen}>
<PopoverTrigger className="inline-flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-[length:var(--app-font-size-ui-xs,10px)] font-normal text-[var(--color-text-foreground-secondary)] transition-colors hover:bg-[var(--color-background-elevated-secondary)] hover:text-[var(--color-text-foreground)]">
<PopoverTrigger className="inline-flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-[length:var(--app-font-size-ui-xs,10px)] font-normal text-(--app-metadata-muted-fg) transition-colors hover:bg-(--app-chrome-control-hover-bg) hover:text-(--app-metadata-fg)">
{environmentPresentation.mode === "local" ? (
<PiLaptop className="size-3.5" />
) : (
Expand All @@ -300,15 +295,17 @@ export default function BranchToolbar({
className="w-56 [&_[data-slot=popover-viewport]]:py-0 [&_[data-slot=popover-viewport]]:[--viewport-inline-padding:0px]"
>
<div className="py-1.5">
<p className="px-3 pb-1 pt-1 text-[11px] font-medium text-[var(--color-text-foreground-secondary)]">
<p className="px-3 pb-1 pt-1 text-[11px] font-medium text-(--app-metadata-muted-fg)">
Continue in
</p>
{environmentPresentation.mode === "local" ? (
<div className="flex w-full items-center gap-2 px-3 py-1.5 text-sm">
<PiLaptop className="size-4 text-[var(--color-text-foreground-secondary)]" />
<span>{environmentPresentation.localOptionLabel}</span>
<PiLaptop className="size-4 text-(--app-work-row-icon)" />
<span className="text-(--app-metadata-fg)">
{environmentPresentation.localOptionLabel}
</span>
<svg
className="ml-auto size-4 text-[var(--color-text-foreground)]"
className="ml-auto size-4 text-(--app-metadata-fg)"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
Expand All @@ -322,35 +319,37 @@ export default function BranchToolbar({
) : (
<button
type="button"
className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm text-[var(--color-text-foreground)] transition-colors hover:bg-[var(--color-background-elevated-secondary)]"
className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm text-(--app-metadata-fg) transition-colors hover:bg-(--app-work-row-hover-bg)"
onClick={() => {
setEnvPickerOpen(false);
onEnvModeChange("local");
}}
>
<PiLaptop className="size-4 text-[var(--color-text-foreground-secondary)]" />
<PiLaptop className="size-4 text-(--app-work-row-icon)" />
<span>{environmentPresentation.localOptionLabel}</span>
</button>
)}
{canSwitchToWorktree ? (
<button
type="button"
className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm text-[var(--color-text-foreground)] transition-colors hover:bg-[var(--color-background-elevated-secondary)]"
className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm text-(--app-metadata-fg) transition-colors hover:bg-(--app-work-row-hover-bg)"
onClick={() => {
setEnvPickerOpen(false);
onEnvModeChange("worktree");
}}
>
<WorktreeGlyph className="size-4 text-[var(--color-text-foreground-secondary)]" />
<WorktreeGlyph className="size-4 text-(--app-work-row-icon)" />
<span>New worktree</span>
</button>
) : null}
{effectiveEnvMode === "worktree" && !canHandoffToLocal ? (
<div className="flex w-full items-center gap-2 px-3 py-1.5 text-sm">
<WorktreeGlyph className="size-4 text-[var(--color-text-foreground-secondary)]" />
<span>{environmentPresentation.worktreeOptionLabel}</span>
<WorktreeGlyph className="size-4 text-(--app-work-row-icon)" />
<span className="text-(--app-metadata-fg)">
{environmentPresentation.worktreeOptionLabel}
</span>
<svg
className="ml-auto size-4 text-[var(--color-text-foreground)]"
className="ml-auto size-4 text-(--app-metadata-fg)"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
Expand All @@ -365,40 +364,40 @@ export default function BranchToolbar({
{canHandoffToWorktree && onHandoffToWorktree ? (
<button
type="button"
className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm text-[var(--color-text-foreground)] transition-colors hover:bg-[var(--color-background-elevated-secondary)] disabled:pointer-events-none disabled:opacity-50"
className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm text-(--app-metadata-fg) transition-colors hover:bg-(--app-work-row-hover-bg) disabled:pointer-events-none disabled:opacity-50"
disabled={handoffBusy}
onClick={() => {
setEnvPickerOpen(false);
onHandoffToWorktree();
}}
>
<WorktreeGlyph className="size-4 text-[var(--color-text-foreground-secondary)]" />
<WorktreeGlyph className="size-4 text-(--app-work-row-icon)" />
<span>Hand off to new worktree</span>
</button>
) : null}
{canHandoffToLocal && onHandoffToLocal ? (
<button
type="button"
className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm text-[var(--color-text-foreground)] transition-colors hover:bg-[var(--color-background-elevated-secondary)] disabled:pointer-events-none disabled:opacity-50"
className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm text-(--app-metadata-fg) transition-colors hover:bg-(--app-work-row-hover-bg) disabled:pointer-events-none disabled:opacity-50"
disabled={handoffBusy}
onClick={() => {
setEnvPickerOpen(false);
onHandoffToLocal();
}}
>
<HandoffIcon className="size-4 text-[var(--color-text-foreground-secondary)]" />
<HandoffIcon className="size-4 text-(--app-work-row-icon)" />
<span>Hand off to local</span>
</button>
) : null}
</div>

<div className="mx-3 border-t border-[color:var(--color-border-light)]" />
<div className="mx-3 border-t border-(--app-work-row-border)" />

<div className="py-1.5">
<Collapsible open={rateLimitsOpen} onOpenChange={setRateLimitsOpen}>
<CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm text-[var(--color-text-foreground)] transition-colors hover:bg-[var(--color-background-elevated-secondary)]">
<CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm text-(--app-metadata-fg) transition-colors hover:bg-(--app-work-row-hover-bg)">
<svg
className="size-4 text-[var(--color-text-foreground-secondary)]"
className="size-4 text-(--app-work-row-icon)"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
Expand All @@ -412,7 +411,7 @@ export default function BranchToolbar({
<span>Rate limits remaining</span>
<ChevronRightIcon
className={cn(
"ml-auto size-3.5 text-[var(--color-text-foreground-secondary)] transition-transform duration-150",
"ml-auto size-3.5 text-(--app-work-row-icon) transition-transform duration-150",
rateLimitsOpen && "rotate-90",
)}
/>
Expand All @@ -433,7 +432,7 @@ export default function BranchToolbar({
</PopoverPopup>
</Popover>
) : (
<span className="inline-flex items-center gap-1 px-1.5 text-[length:var(--app-font-size-ui-xs,10px)] font-normal text-[var(--color-text-foreground-secondary)]">
<span className="inline-flex items-center gap-1 px-1.5 text-[length:var(--app-font-size-ui-xs,10px)] font-normal text-(--app-metadata-muted-fg)">
<WorktreeGlyph className="size-3.5" />
{environmentPresentation.shortLabel}
</span>
Expand Down
12 changes: 6 additions & 6 deletions apps/web/src/components/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -768,7 +768,7 @@ function ComposerControlSkeleton(props: { widthClassName: string }) {
<div
aria-hidden="true"
className={cn(
"flex h-8 shrink-0 items-center rounded-md border border-border/50 px-2",
"flex h-8 shrink-0 items-center rounded-md border border-(--app-chrome-control-border) px-2",
props.widthClassName,
)}
>
Expand All @@ -782,7 +782,7 @@ function ComposerModelLoadingControl(props: { widthClassName: string }) {
<div
aria-label="Loading models"
className={cn(
"flex h-8 shrink-0 items-center gap-2 rounded-md border border-border/50 px-2 text-muted-foreground",
"flex h-8 shrink-0 items-center gap-2 rounded-md border border-(--app-chrome-control-border) px-2 text-(--app-chrome-control-fg)",
props.widthClassName,
)}
>
Expand Down Expand Up @@ -7471,7 +7471,7 @@ export default function ChatView({
</button>
<button
type="button"
className="inline-flex size-6 items-center justify-center rounded-lg text-[var(--color-text-foreground-secondary)] transition-colors hover:bg-[var(--app-state-hover)] hover:text-[var(--color-text-foreground)]"
className="inline-flex size-6 items-center justify-center rounded-lg text-(--app-chrome-control-fg) transition-colors hover:bg-(--app-chrome-control-hover-bg) hover:text-(--app-chrome-control-hover-fg)"
aria-label="Delete queued follow-up"
onClick={() => removeQueuedComposerTurn(queuedTurn.id)}
>
Expand All @@ -7482,7 +7482,7 @@ export default function ChatView({
render={
<button
type="button"
className="inline-flex size-6 items-center justify-center rounded-lg text-[var(--color-text-foreground-secondary)] transition-colors hover:bg-[var(--app-state-hover)] hover:text-[var(--color-text-foreground)]"
className="inline-flex size-6 items-center justify-center rounded-lg text-(--app-chrome-control-fg) transition-colors hover:bg-(--app-chrome-control-hover-bg) hover:text-(--app-chrome-control-hover-fg)"
aria-label="Queued follow-up actions"
/>
}
Expand Down Expand Up @@ -8204,7 +8204,7 @@ export default function ChatView({
</button>
<button
type="button"
className="inline-flex size-6 items-center justify-center rounded-lg text-[var(--color-text-foreground-secondary)] transition-colors hover:bg-[var(--app-state-hover)] hover:text-[var(--color-text-foreground)]"
className="inline-flex size-6 items-center justify-center rounded-lg text-(--app-chrome-control-fg) transition-colors hover:bg-(--app-chrome-control-hover-bg) hover:text-(--app-chrome-control-hover-fg)"
aria-label="Delete queued follow-up"
onClick={() => removeQueuedComposerTurn(queuedTurn.id)}
>
Expand All @@ -8215,7 +8215,7 @@ export default function ChatView({
render={
<button
type="button"
className="inline-flex size-6 items-center justify-center rounded-lg text-[var(--color-text-foreground-secondary)] transition-colors hover:bg-[var(--app-state-hover)] hover:text-[var(--color-text-foreground)]"
className="inline-flex size-6 items-center justify-center rounded-lg text-(--app-chrome-control-fg) transition-colors hover:bg-(--app-chrome-control-hover-bg) hover:text-(--app-chrome-control-hover-fg)"
aria-label="Queued follow-up actions"
/>
}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/GitActionsControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1205,7 +1205,7 @@ export default function GitActionsControl({
if (!gitCwd) return null;

const headerGhostClass =
"bg-transparent not-disabled:before:shadow-none dark:not-disabled:before:shadow-none [:hover,[data-pressed]]:bg-[var(--sidebar-accent)] dark:[:hover,[data-pressed]]:bg-[var(--sidebar-accent)]";
"border-(--app-chrome-control-border) bg-(--app-chrome-control-bg) text-(--app-chrome-control-fg) not-disabled:before:shadow-none dark:not-disabled:before:shadow-none [:hover,[data-pressed]]:bg-(--app-chrome-control-hover-bg) [:hover,[data-pressed]]:text-(--app-chrome-control-hover-fg) dark:[:hover,[data-pressed]]:bg-(--app-chrome-control-hover-bg) data-pressed:bg-(--app-chrome-control-active-bg)";

return (
<>
Expand Down Expand Up @@ -1286,7 +1286,7 @@ export default function GitActionsControl({
<MenuPopup
align="end"
side="bottom"
className="w-50 rounded-lg border-[color:var(--color-border)] bg-[var(--composer-surface)] shadow-lg"
className="w-50 rounded-lg border-(--app-chrome-control-border) bg-(--app-work-row-bg) shadow-lg"
>
<MenuGroup>
<MenuGroupLabel>Git actions</MenuGroupLabel>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4017,7 +4017,7 @@ export default function Sidebar() {
aria-label="Archive thread"
title="Archive thread"
className={cn(
"sidebar-icon-button inline-flex justify-center hover:text-foreground/89",
"sidebar-icon-button inline-flex justify-center",
compact ? "size-[18px]" : "size-5",
toneClassName,
)}
Expand Down Expand Up @@ -5682,7 +5682,7 @@ export default function Sidebar() {
)}
<button
type="button"
className="sidebar-icon-button ml-auto inline-flex size-5 shrink-0 text-muted-foreground/50 opacity-0 transition-opacity group-hover/ws:opacity-100"
className="sidebar-icon-button ml-auto inline-flex size-5 shrink-0 opacity-0 transition-opacity group-hover/ws:opacity-100"
aria-label="Delete workspace"
onClick={(event) => {
event.stopPropagation();
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/chat/ChatHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ export const ChatHeader = memo(function ChatHeader({
className={cn(
"flex min-w-0 items-center gap-2",
showSidechatTitleChip &&
"rounded-lg bg-secondary py-1 pl-2 pr-1 text-secondary-foreground",
"rounded-lg bg-(--app-chrome-control-bg) py-1 pl-2 pr-1 text-(--app-chrome-control-fg)",
)}
>
{threadIconKind === "none" ? null : (
Expand Down Expand Up @@ -282,7 +282,7 @@ export const ChatHeader = memo(function ChatHeader({
render={
<button
type="button"
className="inline-flex size-5 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-background/55 hover:text-foreground [-webkit-app-region:no-drag]"
className="inline-flex size-5 shrink-0 items-center justify-center rounded-md text-(--app-chrome-control-fg) transition-colors hover:bg-(--app-chrome-control-hover-bg) hover:text-(--app-chrome-control-hover-fg) [-webkit-app-region:no-drag]"
aria-label="Close selected sidechat"
onClick={(event) => {
event.stopPropagation();
Expand Down Expand Up @@ -335,7 +335,7 @@ export const ChatHeader = memo(function ChatHeader({
size="xs"
variant="outline"
className={cn(
"shrink-0 bg-transparent not-disabled:before:shadow-none dark:not-disabled:before:shadow-none [:hover,[data-pressed]]:bg-[var(--sidebar-accent)] dark:[:hover,[data-pressed]]:bg-[var(--sidebar-accent)]",
"shrink-0 border-(--app-chrome-control-border) bg-(--app-chrome-control-bg) text-(--app-chrome-control-fg) not-disabled:before:shadow-none dark:not-disabled:before:shadow-none [:hover,[data-pressed]]:bg-(--app-chrome-control-hover-bg) [:hover,[data-pressed]]:text-(--app-chrome-control-hover-fg) dark:[:hover,[data-pressed]]:bg-(--app-chrome-control-hover-bg) data-pressed:bg-(--app-chrome-control-active-bg)",
compact ? "gap-1" : "gap-1.5",
)}
aria-label={handoffActionLabel}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/chat/MessageActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { cn } from "~/lib/utils";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";

export const MESSAGE_ACTION_BUTTON_CLASS_NAME =
"sidebar-icon-button inline-flex size-5 cursor-pointer border border-transparent bg-transparent shadow-none disabled:cursor-default disabled:opacity-45";
"sidebar-icon-button inline-flex size-5 cursor-pointer border border-(--app-chrome-control-border) shadow-none disabled:cursor-default disabled:opacity-45";

type MessageActionButtonProps = Omit<
ComponentProps<"button">,
Expand Down
Loading
Loading