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)
69 lines
2.8 KiB
CSS
69 lines
2.8 KiB
CSS
/*
|
|
* Backwards-compatibility aliases.
|
|
*
|
|
* These map the old token names onto the semantic system in semantic.css so
|
|
* components can migrate gradually. Nothing new should reference them — they
|
|
* exist only so un-migrated call sites keep resolving. Delete entries as their
|
|
* consumers move to the semantic tokens; the file goes away once it is empty.
|
|
*
|
|
* Kept separate from semantic.css so the core model reads as just inputs →
|
|
* derivations. Must be imported after semantic.css (see tailwind.config.css).
|
|
*/
|
|
|
|
:root {
|
|
/* Legacy foreground aliases */
|
|
--foreground-default: var(--foreground);
|
|
--foreground-light: var(--muted-foreground);
|
|
--foreground-lighter: var(--tertiary-foreground);
|
|
--foreground-muted: var(--tertiary-foreground);
|
|
/* --foreground-contrast lives in semantic.css — do not remap to --primary-foreground */
|
|
|
|
/* Legacy background aliases */
|
|
--background-default: var(--background);
|
|
--background-200: var(--card);
|
|
--background-alternative-default: var(--background);
|
|
--background-alternative-200: var(--card);
|
|
--background-selection: var(--accent);
|
|
--background-control: var(--accent);
|
|
--background-surface-75: var(--card);
|
|
--background-surface-100: var(--card);
|
|
--background-surface-200: var(--muted);
|
|
--background-surface-300: var(--secondary);
|
|
--background-surface-400: var(--tertiary);
|
|
--background-overlay-default: var(--secondary);
|
|
--background-overlay-hover: var(--accent);
|
|
--background-muted: var(--muted);
|
|
--background-button-default: var(--secondary);
|
|
--background-dialog-default: var(--popover);
|
|
--background-dash-sidebar: var(--background);
|
|
--background-dash-canvas: var(--background);
|
|
|
|
/* Legacy border aliases */
|
|
--border-default: var(--border);
|
|
--border-muted: var(--border);
|
|
--border-secondary: var(--border-muted);
|
|
--border-overlay: oklch(
|
|
from var(--foreground) l calc(c * 0.5) h / calc(4% + 34% * var(--contrast-border))
|
|
);
|
|
--border-control: var(--input);
|
|
--border-alternative: var(--border);
|
|
--border-strong: var(--input);
|
|
--border-stronger: oklch(
|
|
from var(--foreground) l calc(c * 0.5) h / calc(5% + 45% * var(--contrast-border))
|
|
);
|
|
--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);
|
|
}
|