mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 18:35:07 +03:00
Danny White
d95ff5bda9
## 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)