Skip to content

feat(app): adopt v3 design system tokens + transparent 3D viewport #220

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
ecto merged 2 commits into from
May 13, 2026
Merged

feat(app): adopt v3 design system tokens + transparent 3D viewport #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed32703
feat(app): adopt v3 design system tokens + transparent 3D viewport
ecto May 13, 2026
02f9d8d
refactor(app): comb out Borland-era UI patterns for v3 polish
ecto May 13, 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
2 changes: 1 addition & 1 deletion .claude/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"runtimeExecutable": "bash",
"runtimeArgs": [
"-c",
"if [ -f .env ]; then set -a && source .env && set +a; fi && CLAUDE_PREVIEW=1 npm run dev -w @vcad/app -- --host 0.0.0.0"
"if [ -f .env ]; then set -a && source .env && set +a; fi && CLAUDE_PREVIEW=1 npm run dev -w @vcad/app -- --host 0.0.0.0 --port ${PORT:-5173} --strictPort"
],
"port": 5173,
"autoPort": true
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/AboutModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export function AboutModal({
data-tauri-drag-region=""
className={cn(
"fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2",
"bg-surface p-8 shadow-2xl select-none",
"rounded-xl border border-border bg-surface p-8 shadow-xl select-none",
"focus:outline-none",
)}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/components/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export function AppShell({
return (
<div className="flex h-[100dvh] w-screen flex-col overflow-hidden bg-bg">
{header && (
<div className="shrink-0 border-b border-border/40">
<div className="shrink-0 border-b border-border">
{header}
</div>
)}
Expand All @@ -157,7 +157,7 @@ export function AppShell({
)}
{rightSidebar && (
<div
className="relative shrink-0 min-h-0 overflow-visible border-l border-border/40 bg-surface"
className="relative shrink-0 min-h-0 overflow-visible border-l border-border bg-surface"
style={{ width: `${rightWidth}px` }}
>
<ResizeHandle side="right" width={rightWidth} onResize={setRightWidth} />
Expand Down
6 changes: 3 additions & 3 deletions packages/app/src/components/ChatSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ function VcadMessage({ msg, userName }: { msg: ChatMessage; userName: string })
{msg.context.map((ctx) => (
<span
key={ctx.partId}
className="inline-flex items-center gap-1 rounded border border-brand/30 bg-brand/10 px-1.5 py-0.5 text-[9px] text-brand"
className="inline-flex items-center gap-1 rounded-sm border border-border bg-fill px-1.5 py-0.5 text-[10px] font-mono text-text-muted"
>
{ctx.partName}
</span>
Expand Down Expand Up @@ -848,12 +848,12 @@ export function ChatSidebar() {
{selectionContext.map((ctx) => (
<span
key={ctx.partId}
className="inline-flex items-center gap-1 rounded-full border border-brand/30 bg-brand/10 py-0.5 pl-2 pr-1 text-[9px] text-brand"
className="inline-flex items-center gap-1 rounded-full border border-border bg-fill py-0.5 pl-2 pr-1 text-[10px] font-mono text-text-muted"
>
{ctx.partName}
<button
onClick={() => removeContextPart(ctx.partId)}
className="flex h-3 w-3 items-center justify-center rounded-full hover:bg-brand/20 hover:text-brand/80 transition-colors"
className="flex h-3 w-3 items-center justify-center rounded-full hover:bg-hover hover:text-text transition-colors"
aria-label={`Remove ${ctx.partName}`}
>
<X size={8} />
Expand Down
10 changes: 5 additions & 5 deletions packages/app/src/components/CommandPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,7 @@ export function CommandPalette({ open, onOpenChange, onAboutOpen }: CommandPalet
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-40 bg-black/30" />
<Dialog.Content
className="fixed left-1/2 top-[20%] z-50 w-full max-w-md -translate-x-1/2 border border-border bg-surface shadow-2xl"
className="fixed left-1/2 top-[20%] z-50 w-full max-w-md -translate-x-1/2 rounded-xl border border-border bg-surface shadow-xl overflow-hidden"
onKeyDown={handleKeyDown}
aria-describedby={undefined}
>
Expand All @@ -460,7 +460,7 @@ export function CommandPalette({ open, onOpenChange, onAboutOpen }: CommandPalet
className="flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-muted"
autoFocus
/>
<kbd className=" bg-border/50 px-1.5 py-0.5 text-[10px] text-text-muted">esc</kbd>
<kbd className="rounded-sm bg-fill px-1.5 py-0.5 text-[10px] font-mono text-text-muted">esc</kbd>
</div>
{/* Hidden file input */}
<input
Expand Down Expand Up @@ -521,7 +521,7 @@ export function CommandPalette({ open, onOpenChange, onAboutOpen }: CommandPalet
>
<FolderOpen size={16} className="shrink-0 text-text-muted" />
<span className="flex-1">{t("palette.action.open_file")}</span>
<kbd className="bg-border/50 px-1.5 py-0.5 text-[10px] text-text-muted">⌘O</kbd>
<kbd className="rounded-sm bg-fill px-1.5 py-0.5 text-[10px] font-mono text-text-muted">⌘O</kbd>
</button>

{/* Examples */}
Expand Down Expand Up @@ -586,7 +586,7 @@ export function CommandPalette({ open, onOpenChange, onAboutOpen }: CommandPalet
<Icon size={16} className="shrink-0 text-text-muted" />
<span className="flex-1">{highlightMatch(cmd.label, query)}</span>
{cmd.shortcut && (
<kbd className="bg-border/50 px-1.5 py-0.5 text-[10px] text-text-muted">
<kbd className="rounded-sm bg-fill px-1.5 py-0.5 text-[10px] font-mono text-text-muted">
{cmd.shortcut}
</kbd>
)}
Expand Down Expand Up @@ -623,7 +623,7 @@ export function CommandPalette({ open, onOpenChange, onAboutOpen }: CommandPalet
<span className="flex-1">
{t("palette.generate_label")} <span className="text-brand">{aiPrompt}</span>
</span>
<kbd className="bg-border/50 px-1.5 py-0.5 text-[10px] text-text-muted">
<kbd className="rounded-sm bg-fill px-1.5 py-0.5 text-[10px] font-mono text-text-muted">
{t("palette.kbd_server")}
</kbd>
</button>
Expand Down
10 changes: 5 additions & 5 deletions packages/app/src/components/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function MenuItem({
}) {
return (
<RadixContextMenu.Item
className="group flex items-center gap-2 px-2 py-1.5 text-xs text-text outline-none cursor-pointer data-[disabled]:opacity-40 data-[disabled]:cursor-default data-[highlighted]:bg-brand/20 data-[highlighted]:text-brand"
className="group flex items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-text outline-none cursor-pointer data-[disabled]:opacity-40 data-[disabled]:cursor-default data-[highlighted]:bg-hover"
disabled={disabled}
onClick={onClick}
>
Expand Down Expand Up @@ -209,7 +209,7 @@ export function ContextMenu({ children }: { children: ReactNode }) {
<RadixContextMenu.Root>
<RadixContextMenu.Trigger asChild>{children}</RadixContextMenu.Trigger>
<RadixContextMenu.Portal>
<RadixContextMenu.Content className="z-50 min-w-[180px] border border-border bg-card p-1 shadow-xl">
<RadixContextMenu.Content className="z-50 min-w-[180px] rounded-lg border border-border bg-card p-1 shadow-md">
<MenuItem
icon={Copy}
label="Duplicate"
Expand All @@ -236,7 +236,7 @@ export function ContextMenu({ children }: { children: ReactNode }) {
<RadixContextMenu.Separator className="my-1 h-px bg-border" />

<RadixContextMenu.Sub>
<RadixContextMenu.SubTrigger className="group flex items-center gap-2 px-2 py-1.5 text-xs text-text outline-none cursor-pointer data-[highlighted]:bg-brand/20 data-[highlighted]:text-brand data-[state=open]:bg-brand/20 data-[state=open]:text-brand">
<RadixContextMenu.SubTrigger className="group flex items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-text outline-none cursor-pointer data-[highlighted]:bg-hover data-[state=open]:bg-hover">
<CrosshairSimple size={14} className="shrink-0" />
<span className="flex-1">Selection priority</span>
<span className="ml-4 text-[10px] text-text-muted uppercase tracking-wide">
Expand All @@ -245,7 +245,7 @@ export function ContextMenu({ children }: { children: ReactNode }) {
</RadixContextMenu.SubTrigger>
<RadixContextMenu.Portal>
<RadixContextMenu.SubContent
className="z-50 min-w-[200px] border border-border bg-card p-1 shadow-xl"
className="z-50 min-w-[200px] rounded-lg border border-border bg-card p-1 shadow-md"
sideOffset={2}
alignOffset={-4}
>
Expand All @@ -254,7 +254,7 @@ export function ContextMenu({ children }: { children: ReactNode }) {
return (
<RadixContextMenu.Item
key={value}
className="group flex items-center gap-2 px-2 py-1.5 text-xs text-text outline-none cursor-pointer data-[highlighted]:bg-brand/20 data-[highlighted]:text-brand"
className="group flex items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-text outline-none cursor-pointer data-[highlighted]:bg-hover"
onClick={() => setSelectionFilter(value)}
>
{active ? (
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/DocumentPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,7 @@ export function DocumentPicker({
<Dialog.Content
className={cn(
"fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2",
"border border-border bg-card shadow-2xl",
"rounded-xl border border-border bg-card shadow-xl overflow-hidden",
"max-h-[85vh] flex flex-col select-none",
"focus:outline-none"
)}
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/DrawingToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export function DrawingToolbar() {
isOrbiting && "opacity-0 pointer-events-none"
)}
>
<div className="relative flex items-center gap-1 border border-border bg-card px-2 py-1.5 shadow-2xl">
<div className="relative flex items-center gap-1 rounded-full border border-border bg-card px-2 py-1.5 shadow-md">
{/* View direction dropdown */}
<div className="relative">
<select
Expand Down
10 changes: 5 additions & 5 deletions packages/app/src/components/FeatureTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,14 +223,14 @@ function SketchTreeSection() {
confirmExit();
addToast(t("tree.sketch.discarded"), "info");
}}
className="flex-1 px-2 py-1 text-xs bg-red-600 hover:bg-red-700 text-white"
className="flex-1 rounded-md px-2 py-1.5 text-xs font-medium bg-red-600 hover:bg-red-700 text-white transition-colors"
>
{t("tree.sketch.discard")}
</button>
<button
type="button"
onClick={cancelExit}
className="flex-1 px-2 py-1 text-xs hover:bg-hover/60"
className="flex-1 rounded-md px-2 py-1.5 text-xs font-medium hover:bg-hover transition-colors"
>
{t("tree.sketch.keep_editing")}
</button>
Expand Down Expand Up @@ -365,7 +365,7 @@ function FeatureTreeEmptyState() {
<button
key={kind}
onClick={() => addPrimitive(kind)}
className="flex flex-col items-center justify-center gap-1 aspect-square border border-border bg-card hover:bg-hover hover:border-brand/50 transition-colors"
className="flex flex-col items-center justify-center gap-1 aspect-square rounded-md border border-border bg-card hover:bg-hover hover:border-text-muted transition-colors"
title={`Add ${label}`}
>
<Icon size={20} className="text-text-muted" />
Expand Down Expand Up @@ -407,7 +407,7 @@ function getPartIcon(part: PartInfo): typeof Cube {
function DragPreview({ part }: { part: PartInfo }) {
const Icon = getPartIcon(part);
return (
<div className="flex items-center gap-1.5 px-2 py-1 bg-surface border border-brand rounded shadow-lg text-xs text-text">
<div className="flex items-center gap-1.5 px-2 py-1 bg-surface border border-border rounded-md shadow-md text-xs text-text">
<Icon size={12} className="shrink-0 text-text-muted" />
<span className="truncate max-w-32">{part.name}</span>
</div>
Expand Down Expand Up @@ -450,7 +450,7 @@ function InlineRenameInput({
if (e.key === "Enter") commit();
if (e.key === "Escape") onDone();
}}
className="flex-1 border border-brand bg-surface px-1 py-0.5 text-xs text-text outline-none w-0"
className="flex-1 rounded-md border border-border bg-surface px-1.5 py-0.5 text-xs text-text outline-none w-0 focus:border-brand focus:ring-2 focus:ring-brand/30"
autoFocus
/>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/FeedbackModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function FeedbackModal({
<Dialog.Content
className={cn(
"fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2",
"bg-surface p-6 shadow-2xl",
"rounded-xl border border-border bg-surface p-6 shadow-xl",
"focus:outline-none",
)}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/ForkPromptModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function ForkPromptModal() {
data-tauri-drag-region=""
className={cn(
"fixed left-1/2 top-1/2 z-50 w-full max-w-sm -translate-x-1/2 -translate-y-1/2",
"bg-surface p-6 shadow-2xl select-none",
"rounded-xl border border-border bg-surface p-6 shadow-xl select-none",
"focus:outline-none",
)}
>
Expand Down
8 changes: 4 additions & 4 deletions packages/app/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@ const TRIGGER_CLASS = cn(
);

const CONTENT_CLASS =
"z-50 min-w-[200px] border border-border/80 bg-surface py-1 shadow-md";
"z-50 min-w-[200px] rounded-lg border border-border/80 bg-surface p-1 shadow-md";

const ITEM_CLASS = cn(
"flex w-full items-center gap-2 px-2.5 py-1 text-[11px] text-text outline-none cursor-default select-none",
"flex w-full items-center gap-2 rounded-sm px-2.5 py-1.5 text-[12px] text-text outline-none cursor-default select-none",
"data-[highlighted]:bg-hover data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed",
);

Expand Down Expand Up @@ -140,7 +140,7 @@ function MenuItem({
}

function MenuSeparator() {
return <Menubar.Separator className="my-1 border-t border-border/30" />;
return <Menubar.Separator className="my-1 mx-1.5 h-px bg-border-soft" />;
}

/** A submenu that opens on hover/right-arrow. Menubar.Sub handles all the
Expand Down Expand Up @@ -175,7 +175,7 @@ function Submenu({
sideOffset={0}
alignOffset={-5}
className={cn(
"z-50 min-w-[180px] border border-border/80 bg-surface py-1 shadow-md",
"z-50 min-w-[180px] rounded-lg border border-border/80 bg-surface p-1 shadow-md",
contentClassName,
)}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/InlineOnboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export function InlineOnboarding({ visible }: InlineOnboardingProps) {
<div
data-tauri-drag-region=""
className={cn(
"relative border border-border bg-surface/95 backdrop-blur-md shadow-2xl select-none",
"relative rounded-xl border border-border bg-surface/95 backdrop-blur-md shadow-xl select-none overflow-hidden",
"w-[560px] max-w-[92vw]",
"transition-all duration-300 ease-out",
visible ? "scale-100 translate-y-0 pointer-events-auto" : "scale-95 translate-y-2 pointer-events-none",
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/InlineProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function InlineRenameInput({
if (e.key === "Enter") commit();
if (e.key === "Escape") onDone();
}}
className="w-full border border-brand bg-surface px-1.5 py-0.5 text-xs text-text outline-none"
className="w-full rounded-md border border-border bg-surface px-1.5 py-0.5 text-xs text-text outline-none focus:border-brand focus:ring-2 focus:ring-brand/30"
autoFocus
/>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/InputPreferencesDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function InputPreferencesDialog({
className={cn(
"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
"w-[640px] max-w-[92vw] h-[560px] max-h-[88vh]",
"flex flex-col bg-surface shadow-2xl border border-border select-none",
"flex flex-col rounded-xl bg-surface shadow-xl border border-border select-none overflow-hidden",
"focus:outline-none",
)}
>
Expand Down
6 changes: 3 additions & 3 deletions packages/app/src/components/ParametersPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ function ParameterRow({
}
}}
spellCheck={false}
className="flex-1 min-w-0 bg-card border border-border text-text text-xs font-mono outline-none px-2 py-1 focus:border-brand"
className="flex-1 min-w-0 rounded-md bg-card border border-border text-text text-xs font-mono outline-none px-2 py-1 focus:border-brand focus:ring-2 focus:ring-brand/30 transition-colors"
aria-label="Parameter name"
/>
<button
Expand Down Expand Up @@ -174,8 +174,8 @@ function ParameterRow({
}}
spellCheck={false}
className={cn(
"flex-1 min-w-0 bg-card border text-text text-xs font-mono outline-none px-2 py-1 focus:border-brand",
error ? "border-red-500" : "border-border",
"flex-1 min-w-0 rounded-md bg-card border text-text text-xs font-mono outline-none px-2 py-1 focus:ring-2 focus:ring-brand/30 transition-colors",
error ? "border-red-500" : "border-border focus:border-brand",
)}
aria-label={`${name} value`}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/ProductModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export function ProductModal({
data-tauri-drag-region=""
className={cn(
"fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
"bg-surface shadow-2xl select-none",
"rounded-xl border border-border bg-surface shadow-xl select-none",
"focus:outline-none",
"max-h-[90vh] overflow-y-auto scrollbar-thin",
)}
Expand Down
14 changes: 7 additions & 7 deletions packages/app/src/components/PropertyPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@ function ReadOnlyParam({ label, value, tooltip }: { label: string; value: string
const content = (
<div className="flex items-center gap-1.5 text-xs">
<span className="shrink-0 text-[10px] w-4 text-text-muted font-medium">{label}</span>
<span className="flex-1 min-w-0 bg-card border border-border px-2 py-1 text-xs text-text-muted truncate opacity-60 cursor-not-allowed">
<span className="flex-1 min-w-0 rounded-md bg-card border border-border px-2 py-1 text-xs text-text-muted truncate opacity-60 cursor-not-allowed">
{value}
</span>
</div>
Expand Down Expand Up @@ -1717,9 +1717,9 @@ export function PropertyPanel() {
<button
type="button"
onClick={() => useElectronicsStore.getState().enter()}
className="w-full mt-2 px-3 py-2 text-xs font-medium rounded
bg-brand/10 text-brand border border-brand/30
hover:bg-brand/20 transition-colors"
className="w-full mt-2 px-3 py-2 text-xs font-medium rounded-md
bg-fill text-text border border-border
hover:bg-fill-strong hover:border-text-muted transition-colors"
>
{t("panel.edit_circuit")}
</button>
Expand All @@ -1733,9 +1733,9 @@ export function PropertyPanel() {
<button
type="button"
onClick={() => useEmbroideryStore.getState().openPanel()}
className="w-full mt-2 px-3 py-2 text-xs font-medium rounded
bg-brand/10 text-brand border border-brand/30
hover:bg-brand/20 transition-colors"
className="w-full mt-2 px-3 py-2 text-xs font-medium rounded-md
bg-fill text-text border border-border
hover:bg-fill-strong hover:border-text-muted transition-colors"
>
{t("panel.open_embroidery")}
</button>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/QuotePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ export function QuotePanel() {
<div
ref={panelRef}
className={cn(
"fixed z-50 bg-surface border border-border shadow-2xl",
"fixed z-50 rounded-xl bg-surface border border-border shadow-xl overflow-hidden",
"animate-in fade-in-0",
// Desktop: side panel
"sm:top-14 sm:right-3 sm:w-80 sm:slide-in-from-right-4",
Expand Down
Loading