mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Danny White
5f9ce727c0
## What kind of change does this PR introduce? Bug fix / design-system token hygiene for form and selector chrome. ## What is the current behavior? After opaque default-button fills, text fields, selects, and selector tiles drifted apart: inputs and selects mixed ad-hoc washes, hover borders bounced between `border-stronger` / `border-foreground-muted`, invalid fields had no hover step, and composites like InputGroup leaked inner hover borders. Follow-up to #48837 (opaque button fills) where Select rest still felt darker than Input on forms such as scoped access tokens. ## What is the new behavior? Named control roles and one interactive border: | Role | Fill | Rest border | Hover / focus / open | | --- | --- | --- | --- | | Field (sunk) | `bg-field` | `border-control` | `border-control-hover` | | Raised control | `bg-control-raised` | `border-strong` | `border-control-hover` | | Overlaying action | card → popover | `border-strong` | `border-control-hover` | | Invalid field | `bg-destructive-200` | `border-destructive-400` | `border-destructive` | - `--field` / `--control-raised` / `--border-control-hover` live in `semantic.css` (source of truth for roles; README points there) - Input / Textarea / InputGroup / legacy TextArea use the field ladder (incl. invalid hover) - Select and empty MultiSelect use raised; filled MultiSelect sinks to field - Default + dashed Button, CommandMenu trigger, and radio card/stacked/large use `border-control-hover` - Studio selector tiles aligned: Connect mode, role impersonation, DuckLake modes, compute “Contact us” | Before and After | | --- | | <img width="1576" height="759" alt="Access Tokens Account Supabase" src="https://github.com/user-attachments/assets/4bbe8b2b-a31a-4d63-80ba-04a1a8a5609d" /> | | <img width="1576" height="759" alt="Access Tokens Account Supabase" src="https://github.com/user-attachments/assets/92271223-4103-4cc6-a7c0-9e4ff71cce30" /> | ## Additional context `--control-raised` aliases `--card` today (role name so fill can diverge later). Rest `border-control` / `border-strong` both still map to `--input` via compat; the shared interactive step is `--border-control-hover`. ## To test 1. **[Account → Access Tokens](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/account/tokens)** Open Generate / New scoped token. Side-by-side Input, Select, RadioGroupStacked, MultiSelect. Confirm sunk vs raised fills, shared hover border, MultiSelect flips to sunk once a value is selected. Leave a required field empty to check invalid rest → hover → focus. 2. **[Org → Projects](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/org/_)** Hover the dashed Status filter. Hover default / filled filter buttons when active. Confirm hover/open borders match. 3. **[Project → Connect](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/project/_)** Open Connect from the header. Mode grid tiles: hover + selected borders match radio cards (no old muted-foreground ring). 4. **[Project → Compute](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/project/_/settings/infrastructure)** (optional) Compute size radios + “Contact us” tile hover.
39 lines
1.7 KiB
Markdown
39 lines
1.7 KiB
Markdown
# `packages/ui`
|
|
|
|
Supabase's shared React component library. Built on [Radix UI](https://www.radix-ui.com/) primitives and [shadcn/ui](https://ui.shadcn.com/), styled with Tailwind CSS, and used across all Supabase apps.
|
|
|
|
## Usage
|
|
|
|
Import from the `'ui'` package alias:
|
|
|
|
```tsx
|
|
import { Badge, Button, Input } from 'ui'
|
|
```
|
|
|
|
Some of the components have the `_Shadcn_` suffix. These components should be preferred, they're in a process of replacing the other ones.
|
|
|
|
### Utilities
|
|
|
|
```tsx
|
|
// deep object merge (used for themes)
|
|
import { clipboard, cn, mergeDeep } from 'ui' // clsx + tailwind-merge
|
|
|
|
// copy-to-clipboard helper
|
|
```
|
|
|
|
## Styling conventions
|
|
|
|
- Tailwind only — no inline styles or CSS modules.
|
|
- Prefer shadcn semantic pairs (`bg-card text-card-foreground`, `bg-muted text-muted-foreground`,
|
|
`bg-tertiary text-tertiary-foreground`) over hardcoded colors. Legacy utilities such as
|
|
`text-foreground-light` and `border-default` are compatibility aliases only.
|
|
- Control surface roles (`bg-field`, `bg-control-raised`, `border-control-hover`; CSS
|
|
`--control` aliases raised) live in [`build/css/source/semantic.css`](./build/css/source/semantic.css).
|
|
Prefer those over inventing fills. Legacy `bg-control` is still the accent wash alias.
|
|
- Themes set the core `--hue` (or the split `--surface-hue` / `--primary-hue`), `--chroma`,
|
|
`--surface`, `--foreground-lightness`, and `--contrast` inputs, plus their
|
|
`--muted-foreground-level` and `--tertiary-foreground-level` hierarchy.
|
|
Semantic colors are derived from them in OKLCH; `--contrast: 1` is the baseline and the supported
|
|
adjustment range is `0.75` to `1.25`.
|
|
- The workspace root owns the actual `tailwind.config.js`. The file in this package is a stub for IntelliSense only.
|