feat(app): adopt v3 design system tokens + transparent 3D viewport#220
Merged
Conversation
Apply the canonical vcad v3 design system from the design bundle —
Vercel-clean light (#FFFFFF chrome, #D4D4D4 hairlines, pure-black text),
tuned-warm Apple dark (#0E0E10 stage / #1A1A1D chrome / #3A3A40 border,
softer text scale, no pure-black voids). Brand pink #F92672 unchanged
and reserved for hot-spots (wordmark dot, primary actions, focus,
selection, heartbeat). Font stack now leads with SF Pro Display /
SF Pro Text on Apple platforms, Inter as the designed-identity
fallback. Adds --font-display, --hairline, --ease-spring, the full
--radius-* stack, --text-2/-tert, --fill/-strong, and selection
tokens. Tauri-mac vibrancy block retuned to the new palette.
The 3D viewport canvas is now alpha:true / transparent — the
underlying chrome (--bg) shows through so only the grid, part, and
lighting paint. The fallback <color attach="background"> is removed;
doc-defined Solid backgrounds still win.
Also fixes the preview dev-server port collision when a sibling
worktree owns 5173 by forwarding the launcher's $PORT to Vite via
--port ${PORT:-5173} --strictPort.
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
Sweep through the app removing hard corners, raw red destructives, over-loud
brand-pink usage, and Material-curve timing on chrome animations. Aligns
every user-visible surface with the v3 design system (Apple-like with brand
pink reserved for hot-spots).
Primitives (cascade across the app)
- ui/dialog.tsx, ui/button.tsx, ui/scrub-input.tsx, ui/expression-input.tsx
now ship with v3 radii (rounded-xl panel, rounded-md inputs/buttons),
ease-spring transitions on buttons.
Popovers
- Header menubar dropdowns (rounded-lg, padded list, hairline separator).
- ContextMenu content + submenus (rounded-lg, items now use rounded-sm with
bg-hover highlight instead of brand-pink wash).
- CommandPalette shell (rounded-xl + softer shadow); kbd hints now mono and
rounded.
Modals (one rounding pass across the cluster)
- AboutModal, FeedbackModal, ForkPromptModal, InputPreferencesDialog,
InlineOnboarding, ProductModal, ShareDialog, UsernamePickerModal,
WhatsNewPanel, UpgradeModal, VersionHistoryModal, DocumentPicker — all
rounded-xl with shadow-xl (down from shadow-2xl).
- DrawingToolbar floating dock → rounded-full capsule.
- QuotePanel → rounded-xl.
Chrome
- AppShell header underline + right-sidebar divider lifted from border/40
to full --border so the panels read as defined sheets on the new
Vercel-clean palette.
Brand pink demotions
- InlineProperties + FeatureTree rename inputs: neutral border with a brand
focus ring instead of a resting brand stroke.
- PropertyPanel workflow-entry buttons ("Edit Circuit", "Open Embroidery"):
fill-strong neutral instead of brand wash.
- ChatSidebar context pills: mono neutral chips instead of brand fills.
- ContextMenu items, FeatureTree primitive tiles, drag preview, destructive
raw-red button all softened to neutral hover / proper rounded variants.
Motion
- vcad-chip-in, changelog-tooltip, upgrade-content, vcad-success-in,
path-popover all moved off ease-out / (0.16, 1, 0.3, 1) to --ease-spring.
Tokens
- index.css @theme block now exposes --color-border-soft, --color-text-2,
--color-text-tert, --color-fill, --color-fill-strong so Tailwind picks up
the full v3 palette.
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Applies the canonical vcad v3 design system from the design bundle (
ui_kits/app/) to the running app, and removes the colored 3D viewport background so only the grid, part, and lighting paint.What changed
packages/app/src/index.css — design tokens
.light): Vercel-clean —#FFFFFFbg/surface,#D4D4D4hairlines, pure-black text,#666muted,#F4F4F5fills.#0E0E10stage,#1A1A1Dchrome,#3A3A40border,#F5F5F5 / #9C9CA3 / #6A6A70text scale,#26262Bhover. No more pure-black voids.--font-sansand new--font-displaylead with SF Pro Text / SF Pro Display on Apple platforms; Inter remains the designed-identity fallback. Berkeley Mono kept for code-shaped surfaces only.--hairline(0.5px),--ease-spring(AppKit cubic-bezier), full--radius-xs/sm/md/lg/xl/pillstack,--border-soft,--text-2/-tert,--fill/-strong,--selection-bg/-fg.#F92672unchanged — same hot-spot usage (wordmark dot, primary actions, focus, selection rail, footer heartbeat). Used sparingly so it earns its weight.Viewport.tsx + ViewportContent.tsx — transparent 3D viewport
<Canvas>now usesgl={{ alpha: true }}withstyle={{ background: "transparent" }}. The page bg (var(--bg)) shows through, leaving only grid + part + lighting visible.<color attach="background" args={[isDark ? BG_DARK : BG_LIGHT]} />—scene.backgroundstays null so the alpha clear takes over. Doc-defined Solid backgrounds still win.BG_DARK/BG_LIGHTexports retained as"transparent"for legacy callers; unused import dropped fromViewportContent..claude/launch.json — preview port fix
chrome-error://when another worktree owned:5173. Forwarding the launcher's$PORTto Vite (--port ${PORT:-5173} --strictPort) makes the preview work in any worktree.Why
The handoff bundle from
claude.ai/designlocks v3 (Vercel-clean light + warm-Apple dark + SF Pro / Berkeley Mono + pink reserved) as the canonical direction. This PR brings the running app in line with the bundle'sui_kits/app/chrome.cssandcolors_and_type.csstoken contract.Test plan
--bg,--surface,--border,--text,--hover).DialogTitlewarnings).🤖 Generated with Claude Code