This repository was archived by the owner on Apr 14, 2026. It is now read-only.
feat: migrate from boss-ui to Ghost UI foundation#125
Merged
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: bcbebecee0
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
tellaho
force-pushed
the
ghost-ui-migration
branch
from
e39fd2a to
938776d
Compare
Swap the design system foundation from boss-ui to Ghost UI, the open-source successor design language from block/ghost. Font swap: - Remove Cash Sans (CDN) and Cash Sans Wide (local) font faces - Add HK Grotesk (local woff2, 7 weights: 300–900) - Update --font-sans, --font-display to "HK Grotesk" - Update --font-mono to "Geist Mono" CSS tokens (globals.css): - Adopt Ghost's main.css as the token source of truth - Add hero-blur-in, fadeToFull, fadeToSubtle keyframes from Ghost - Add scrollbar hover styles from Ghost - Preserve all goose2-specific tokens: --color-brand, --density-spacing, --text-subtle, --radius-overlay, compat color scales for ai-elements - Preserve goose2 custom utilities: density spacing, page transitions, content-fade-in, prefers-reduced-motion, keyboard-nav focus, app shell lock UI primitives (47 of 49 files): - Copy Ghost UI components with import path adjustment (@/lib/utils → @/shared/lib/cn) and "use client" removal - Preserve goose2's button.tsx (leftIcon/rightIcon, forwardRef, ghost-light/toolbar variants, xs/icon-lg sizes, compound variants) - Preserve goose2's tabs.tsx (CVA variants: default, buttons) - Restore dialog.tsx showCloseButton prop (used by ImageLightbox) - Fix sonner.tsx useTheme import to @/shared/theme/ThemeProvider Not included (PR 2): - ai-elements migration (48 files, separate scope)
Ghost upstream omits type="button" on the SidebarRail <button>. Goose2 requires it on all button elements to prevent accidental form submission (AGENTS.md coding conventions). PR review feedback from Marge.
…onts' model Upstream block/ghost PRs #23 and #24 removed all HK Grotesk @font-face declarations and switched to a 'consumers bring their own fonts' model. Align our branch with this change: - Replace --font-sans and --font-display with system font stack - Remove all 7 @font-face declarations (300–900 weights) - Delete 7 HKGrotesk-*.woff2 font files from src/assets/fonts/ The system font stack (system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif) matches upstream Ghost's new defaults. 318/318 tests passing. Biome clean.
The migration commit incorrectly replaced rounded-overlay with rounded-dropdown on all popup/overlay components. Both tokens resolve to 20px currently, but rounded-overlay is the correct semantic token for overlay surfaces (popovers, hover cards, context menus, selects, dropdown menus, menubars). Restores 9 occurrences across 6 shared UI components.
Remove migration-specific context from globals.css comments that wouldn't make sense to future consumers of the design system: - Remove '(upstream Ghost PRs #23/#24)' from font comment - Replace redundant font narration with '@font-face — add your own here' - Remove '(from dsgn-playground)' from gray scale comment Comments should help the next person, not document our migration.
Step 2: Update components.json to consume from ghost-ui registry: - style: new-york → ghost - baseColor: zinc → neutral - Add registryUrl pointing to block.github.io/ghost/registry.json - Add iconLibrary: lucide Future `npx shadcn add <component>` commands will now pull ghost-styled components from the upstream registry. Step 3: Add ghost.config.ts for drift detection: - Points at ghost-ui registry for goose2's shared UI components - Enables value + structure scanning - Configures rules: hardcoded-color (error), token-override (warn), missing-token (warn), structural-divergence (error) Run `ghost scan` to detect drift from the parent design system.
The GitHub Pages deploy doesn't include registry.json in dist/ — it only serves the Vite SPA. The raw.githubusercontent.com URL points directly at the source file and resolves correctly. Long-term: ghost repo should copy registry.json to public/ so it's served at block.github.io/ghost/registry.json.
The raw.githubusercontent.com URL is a workaround for registry.json not being served on GitHub Pages. PR block/ghost#25 fixes the deploy workflow. Once merged and deployed, both ghost.config.ts and components.json should switch to: https://block.github.io/ghost/registry.json
The registry was already being served at /ghost/r/registry.json via shadcn build output in public/r/. Switch both components.json and ghost.config.ts from the raw.githubusercontent.com workaround to the proper GitHub Pages URL. Removes the TODO tracking block/ghost#25 — that PR is still useful for serving at the root path, but no longer blocking us.
Reverts Biome auto-sort import reordering and export alphabetizing across 39 shared/ui component files. These were formatting-only changes that added noise to the ghost-ui migration PR without any functional impact. 9 files fully reverted (pure formatting noise): - collapsible, hover-card, popover, tooltip, table, label, separator, progress, avatar 30 files surgically cleaned (import/export order restored, real ghost-ui class changes preserved): - accordion, alert, alert-dialog, badge, breadcrumb, button-group, calendar, carousel, chart, checkbox, command, context-menu, dialog, dropdown-menu, form, input-group, input-otp, menubar, navigation-menu, pagination, radio-group, resizable, scroll-area, select, sheet, sidebar, slider, switch, toggle, toggle-group
Missed 13 more files with alphabetized exports in the first pass. Restored original export order in: alert-dialog, card, carousel, command, context-menu, drawer, dropdown-menu, form, input-group, menubar, navigation-menu, pagination, sheet. card.tsx and drawer.tsx are now fully clean (zero diff vs main).
tellaho
force-pushed
the
ghost-ui-migration
branch
from
d960db1 to
4b9b8ac
Compare
Reverts ghost-ui registry's rounded-md back to rounded-full per design direction. The InputGroup container uses a fixed h-9 height, so pill radius renders correctly. Also restores rounded-[calc(var(--radius)-5px)] on the sm button variant for proper nested radius calculation.
The scan and rules blocks were added speculatively without explicit design decisions. Strip down to just the registry pointer until we decide on lint rules.
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
Migrate shared UI primitives from boss-ui to the Ghost UI design foundation. Updates design tokens, typography, and 21 component files to align with the Ghost registry.
Screen.Recording.2026-04-08.at.2.55.13.PM.mov
What changed
Design tokens (
globals.css)@font-facedeclarations and 5 woff2 files. Aligns with upstream Ghost's "no bundled fonts" model--radius-dropdown10px → 20px (parity with--radius-overlay)hero-blur-in,fadeToFull,fadeToSubtlefrom GhostUI primitives (21 files)
focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1px]to interactive primitives — accordion, badge, checkbox, radio, select, switch, slider, toggle, navigation-menu, resizable, scroll-area, sidebarfocus:text-muted-foregroundto item, checkbox-item, radio-itemsize-7/size-8from nav buttons (let Button handle sizing)border-border→border-border/50rounded-full→rounded-mduseThemeimport (next-themes→@/shared/theme/ThemeProvider)focus-visible:ring-2to group-label and mobile-close; removed hardcoded icon size on trigger; addedtype="button"to SidebarRailRegistry config (new files)
components.json: Updatedstyle→ghost,registryUrl→ Ghost Pages URLghost.config.ts: Points at Ghost registry forsrc/shared/ui+globals.cssFont assets removed
Preserved as-is
button.tsx,tabs.tsx,dialog.tsx,sheet.tsx,input-group.tsx— goose2 customizations kept, not overwritten by registryVerification
pnpm typecheck— cleanpnpm check(Biome + file sizes + i18n) — cleanpnpm test— 321 tests passing (38 suites)Refs: Ghost rollout plan · Ghost registry