Skip to content

Design system refresh: Tabs, Panel, neutral badges, squircles + blog polish #1171

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

Open
Abeuty wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Design system refresh: Tabs, Panel, neutral badges, squircles + blog polish #1171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c9768e2
feat(ds): tabs system, Panel rename, neutral status badges, squircles
Abeuty Aug 18, 2026
6c3c5e5
feat(docs): restyle docs tabs to the DS underline style; center DS ov…
Abeuty Aug 18, 2026
d47091e
feat(blog): unify search into one pill with in-field RSS + filter icons
Abeuty Aug 18, 2026
5ec3e58
feat(blog): 2-column story grid, larger featured title, settings-styl…
Abeuty Aug 18, 2026
d45c728
feat(blog): taller featured card (2/3 image, 1/3 text) + roomier header
Abeuty Aug 18, 2026
5a3b37a
feat(ds): carry the light-mode mono weight shift into .ds-mode-light
Abeuty Aug 18, 2026
3d1a2fc
feat(ds): sync navbar replica to live nav, merge anatomy+regions, add…
Abeuty Aug 19, 2026
93eb373
feat(ds): remove the Menu variants section from the Navbar page
Abeuty Aug 19, 2026
3351c34
chore: prettier reflow of ds.navbar.tsx
Abeuty Aug 19, 2026
66a53f0
Merge remote-tracking branch 'origin/main' into claude/grouped-button…
Abeuty Aug 19, 2026
3c3a87b
ci: apply automated fixes
autofix-ci[bot] Aug 19, 2026
ead6b84
fix(ButtonGroup): drop duplicate props spread from merge resolution
Abeuty Aug 19, 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
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@
"drizzle-orm": "^0.45.2",
"encoding-sniffer": "^0.2.1",
"esbuild-wasm": "0.27.4",
"figma-squircle": "^1.1.0",
"gifenc": "^1.0.3",
"gray-matter": "^4.0.3",
"iconv-lite": "^0.7.2",
Expand Down
8 changes: 8 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 18 additions & 22 deletions src/components/ApplicationStarter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,7 @@ import type {
ApplicationStarterContext,
ApplicationStarterResult,
} from '~/utils/application-starter'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '~/components/Collapsible'
import { Panel, PanelContent, PanelTrigger } from '~/components/Panel'
import {
GeneratedPromptPreviewBody,
GeneratedPromptPreviewHeader,
Expand Down Expand Up @@ -868,8 +864,8 @@ export function ApplicationStarter({
) : null}
</div>

<Collapsible open={showOptionsSection}>
<CollapsibleContent className="mt-3">
<Panel open={showOptionsSection}>
<PanelContent className="mt-3">
{showOptionsSection ? (
<StarterTooltipProvider>
<div className="space-y-2 rounded-lg border border-gray-200 bg-white px-3 py-3 dark:border-gray-800 dark:bg-gray-950">
Expand Down Expand Up @@ -946,8 +942,8 @@ export function ApplicationStarter({
</div>
</StarterTooltipProvider>
) : null}
</CollapsibleContent>
</Collapsible>
</PanelContent>
</Panel>
</>
) : (
<>
Expand Down Expand Up @@ -1170,8 +1166,8 @@ export function ApplicationStarter({
) : null}
</div>

<Collapsible open={showOptionsSection}>
<CollapsibleContent
<Panel open={showOptionsSection}>
<PanelContent
className={twMerge(
isHomeStarter &&
'duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
Expand Down Expand Up @@ -1317,11 +1313,11 @@ export function ApplicationStarter({
) : null}
</div>
) : null}
</CollapsibleContent>
</Collapsible>
</PanelContent>
</Panel>

<Collapsible open={showStagedActionSection}>
<CollapsibleContent
<Panel open={showStagedActionSection}>
<PanelContent
className={twMerge(
isHomeStarter &&
'duration-[350ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
Expand Down Expand Up @@ -1514,8 +1510,8 @@ export function ApplicationStarter({
</div>
</div>
) : null}
</CollapsibleContent>
</Collapsible>
</PanelContent>
</Panel>

{showPromptPreview && hasGeneratedPrompt ? (
<div className="border-t border-gray-200 dark:border-gray-800">
Expand Down Expand Up @@ -1571,9 +1567,9 @@ function StarterCustomizationSection({
title: string
}) {
return (
<Collapsible open={open} onOpenChange={onOpenChange}>
<Panel open={open} onOpenChange={onOpenChange}>
<div className={twMerge(compact ? 'pt-1' : 'pt-4')}>
<CollapsibleTrigger
<PanelTrigger
className={twMerge(
starterEyebrowClassName,
'inline-flex appearance-none items-center gap-1 border-0 bg-transparent p-0 text-left transition-colors hover:text-text-secondary',
Expand All @@ -1586,9 +1582,9 @@ function StarterCustomizationSection({
open && 'rotate-180',
)}
/>
</CollapsibleTrigger>
<CollapsibleContent>{open ? children : null}</CollapsibleContent>
</PanelTrigger>
<PanelContent>{open ? children : null}</PanelContent>
</div>
</Collapsible>
</Panel>
)
}
Loading
Loading