docs(design-system): rewrite sidebar page for monorepo tokens (#51165)

## Problem

The design-system Sidebar page was mostly an upstream shadcn paste:
first-person voice, a broken `/blocks` link, missing structure images,
CLI install steps that do not match this monorepo, and a long changelog
/ data-fetching tutorial that do not apply here.

Separately, it still taught classic shadcn **HSL channel** variables
plus `hsl(var(--sidebar-*))`. In this monorepo those tokens are **full
colours**. Mixing the two patterns produces invalid CSS.

Related call-site cleanup:
https://github.com/supabase/supabase/pull/51161

## Solution

- Rewrite the Sidebar docs as a shorter monorepo guide: import from
`'ui'`, structure, theming, provider / sidebar props, menu building
blocks, controlled mode, state styling.
- Move Studio’s `--sidebar-*` aliases into shared `packages/ui` compat
CSS so every app on the shared theme gets working `bg-sidebar`
utilities.
- Drop the duplicate definitions from Studio `globals.css`.

Left alone on purpose: brand / destructive channel tokens and docs that
correctly use `hsl(var(--brand-…))`.

## Review instructions

Design-system preview:
[design-system](https://design-system-git-dnywh-docssidebar-full-colour-tokens-supabase.vercel.app/)

1. [Live Sidebar
docs](https://supabase.com/design-system/docs/components/sidebar) ·
[Preview Sidebar
docs](https://design-system-git-dnywh-docssidebar-full-colour-tokens-supabase.vercel.app/design-system/docs/components/sidebar).
Confirm the page is no longer the upstream essay: no broken images, no
`/blocks` link, imports from `'ui'`, theming shows full-colour aliases.
2. Smoke Studio: left nav should look unchanged (same aliases, now from
compat.css).
3. Optional: in DevTools, confirm `--sidebar-background` resolves to a
full `oklch(...)` colour.

## Checklist

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [ ] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)

apps/design-system/components/component-preview.tsx

@@ -97,7 +97,7 @@ export function ComponentPreview({
       <div className={cn('@container mt-4 mb-12', wideClasses)}>
         <div
           className={cn(
-            'relative rounded-tl-md rounded-tr-md border-t border-l border-r bg-studio'
+            'relative overflow-hidden rounded-tl-md rounded-tr-md border-t border-l border-r bg-studio'
           )}
         >
           {showGrid && (
@@ -141,7 +141,7 @@ export function ComponentPreview({
   return (
     <div className={cn('mt-4 mb-12', wideClasses)}>
       <div
-        className={cn('relative bg-studio', {
+        className={cn('relative overflow-hidden bg-studio', {
           'rounded-tl-md rounded-tr-md border-t border-l border-r': !hideCode,
           'rounded-md border': hideCode,
         })}

apps/design-system/components/source-panel.tsx

@@ -10,6 +10,10 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
   ({ doc, children, ...props }, ref) => {
     const ShadcnPanel = () => {
       if (doc.source?.shadcn) {
+        const shadcnDocsUrl = doc.slugAsParams?.startsWith('components/')
+          ? `https://ui.shadcn.com/docs/${doc.slugAsParams}`
+          : 'https://ui.shadcn.com/'
+
         return (
           <div
             className={cn(
@@ -46,9 +50,19 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
               </svg>
               <span className="hidden font-bold sm:inline-block">shadcn/ui</span>
             </div>
-            <span className="text-foreground-light text-sm">
-              This component is based on ui.shadcn
-            </span>
+            <div className="flex flex-row items-center justify-between text-sm w-full">
+              <span className="text-foreground-light text-xs">This component uses shadcn/ui</span>
+              <Button
+                asChild
+                variant="outline"
+                className="rounded-full"
+                icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
+              >
+                <Link href={shadcnDocsUrl} target="_blank" rel="noreferrer">
+                  Docs
+                </Link>
+              </Button>
+            </div>
           </div>
         )
       }
@@ -299,11 +313,11 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
     return (
       <div className="flex flex-col -space-y-px">
         <RadixPanel />
+        <ShadcnPanel />
         <VaulPanel />
         <InputOtp />
         <ReactAccesibleTreeViewPanel />
         <RechartsPanel />
-        {/* <ShadcnPanel /> */}
       </div>
     )
   }

apps/design-system/registry/default/example/sidebar-demo.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { Calendar, Home, Inbox, Search, Settings } from 'lucide-react'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from 'ui'
+
+const items = [
+  { title: 'Home', url: '#', icon: Home },
+  { title: 'Inbox', url: '#', icon: Inbox },
+  { title: 'Calendar', url: '#', icon: Calendar },
+  { title: 'Search', url: '#', icon: Search },
+  { title: 'Settings', url: '#', icon: Settings },
+]
+
+const menuButtonClassName =
+  '[&>svg]:size-4 text-foreground-muted data-[active=true]:text-foreground'
+
+export default function SidebarDemo() {
+  return (
+    <div className="h-[480px] w-full">
+      <SidebarProvider defaultOpen className="h-full min-h-0!">
+        <Sidebar collapsible="icon">
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Application</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={item.title === 'Home'}
+                        tooltip={item.title}
+                        className={menuButtonClassName}
+                      >
+                        <a href={item.url}>
+                          <item.icon strokeWidth={1.5} />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset className="min-h-0">
+          <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger className="-ml-1 text-foreground-muted" />
+          </header>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  )
+}

apps/design-system/registry/examples.ts

@@ -880,6 +880,12 @@ export const examples: Registry = [
     registryDependencies: ['separator'],
     files: ['example/separator-demo.tsx'],
   },
+  {
+    name: 'sidebar-demo',
+    type: 'components:example',
+    registryDependencies: ['sidebar'],
+    files: ['example/sidebar-demo.tsx'],
+  },
   {
     name: 'sheet-confirm-on-close-demo',
     type: 'components:example',

apps/studio/styles/globals.css

@@ -148,29 +148,10 @@
 }
 
 :root {
-  --sidebar-background: var(--background-dash-sidebar);
-  --sidebar-foreground: var(--foreground-default);
-  --sidebar-primary: var(--foreground-default);
-  --sidebar-primary-foreground: var(--warning);
-  --sidebar-accent: var(--background-selection);
-  --sidebar-accent-foreground: var(--foreground-default);
-  --sidebar-border: var(--border-default);
-  --sidebar-ring: var(--ring);
+  /* --sidebar-* aliases live in packages/ui compat.css (shared with other apps). */
   --header-height: 3rem;
 }
 
-[data-theme='dark'],
-.dark {
-  --sidebar-background: var(--background-dash-sidebar);
-  --sidebar-foreground: var(--foreground-default);
-  --sidebar-primary: var(--foreground-default);
-  --sidebar-primary-foreground: var(--warning);
-  --sidebar-accent: var(--background-selection);
-  --sidebar-accent-foreground: var(--foreground-default);
-  --sidebar-border: var(--border-default);
-  --sidebar-ring: var(--ring);
-}
-
 @layer base {
   *,
   ::after,

packages/ui/build/css/source/compat.css

@@ -53,4 +53,16 @@
   );
   --border-button-default: var(--border);
   --border-button-hover: var(--border-stronger);
+
+  /* Sidebar aliases — full colours for bg-sidebar / text-sidebar-* utilities.
+   * Classic shadcn stores these as HSL channel lists and wraps them in hsl().
+   * In this monorepo they alias the semantic system (same as Studio). */
+  --sidebar-background: var(--background-dash-sidebar);
+  --sidebar-foreground: var(--foreground-default);
+  --sidebar-primary: var(--foreground-default);
+  --sidebar-primary-foreground: var(--warning);
+  --sidebar-accent: var(--background-selection);
+  --sidebar-accent-foreground: var(--foreground-default);
+  --sidebar-border: var(--border-default);
+  --sidebar-ring: var(--ring);
 }

packages/ui/src/components/shadcn/ui/sidebar.tsx

@@ -277,7 +277,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <PanelLeft />
+      <PanelLeft className="size-4" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )