style(app-shell): make sidebar a card with rounded top-left corner

claudfuen · claude · claudfuen · commit d63c1d7cc00b · 2026-01-08T13:24:14.000-05:00
- Change sidebar to bg-background to match content card
- Use rounded-tl-xl for prominent top-left corner

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/packages/design-system/src/components/organisms/app-shell.tsx b/packages/design-system/src/components/organisms/app-shell.tsx
@@ -47,7 +47,7 @@ const appShellNavbarVariants = cva(
 );
 
 const appShellSidebarVariants = cva(
-  'shrink-0 bg-muted p-2 h-full overflow-hidden hidden md:flex md:flex-col rounded-l-lg',
+  'shrink-0 bg-background p-2 h-full overflow-hidden hidden md:flex md:flex-col rounded-tl-xl',
   {
     variants: {
       width: {

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ const appShellNavbarVariants = cva(`
`47`	`47`	`);`
`48`	`48`
`49`	`49`	`const appShellSidebarVariants = cva(`
`50`		`- 'shrink-0 bg-muted p-2 h-full overflow-hidden hidden md:flex md:flex-col rounded-l-lg',`
	`50`	`+ 'shrink-0 bg-background p-2 h-full overflow-hidden hidden md:flex md:flex-col rounded-tl-xl',`
`51`	`51`	`{`
`52`	`52`	`variants: {`
`53`	`53`	`width: {`