mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45: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.
45 lines
1.4 KiB
CSS
45 lines
1.4 KiB
CSS
[data-theme='dark'],
|
|
.dark {
|
|
--helpers-os-appearance: Dark;
|
|
--hue: 159;
|
|
--chroma: 0.005;
|
|
--surface: 0.19;
|
|
--elevation-step: 0.025;
|
|
--contrast: 0.5;
|
|
--foreground-lightness: 0.95;
|
|
--muted-foreground-level: 0.8;
|
|
--tertiary-foreground-level: 0.65;
|
|
/* Light default --field-alpha (0.015) disappears on dark plates; dig harder. */
|
|
--field-alpha: 0.12;
|
|
|
|
--code-block-5: 13.8deg 89.7% 69.6%;
|
|
--code-block-4: 276.1deg 67.7% 74.5%;
|
|
--code-block-3: 83.8deg 61.7% 63.1%;
|
|
--code-block-2: 33.2deg 90.3% 75.7%;
|
|
--code-block-1: 170.8deg 43.1% 61.4%;
|
|
|
|
/* Stepped numeric scales (per-theme literals; mapped in theme.css) */
|
|
--secondary-default: 247.8deg 100% 70%;
|
|
--secondary-400: 248.3deg 54.5% 25.9%;
|
|
--secondary-200: 248deg 53.6% 11%;
|
|
--brand-link: 155deg 100% 38.6%;
|
|
--brand-default: 153.1deg 60.2% 52.7%;
|
|
--brand-600: 154.9deg 59.5% 70%;
|
|
--brand-500: 154.9deg 100% 19.2%;
|
|
--brand-400: 155.5deg 100% 9.6%;
|
|
--brand-300: 155.1deg 100% 8%;
|
|
--brand-200: 162deg 100% 2%;
|
|
--warning-default: 38.9deg 100% 42.9%;
|
|
--warning-600: 38.9deg 100% 42.9%;
|
|
--warning-500: 34.8deg 90.9% 21.6%;
|
|
--warning-400: 33.2deg 100% 14.5%;
|
|
--warning-300: 32.3deg 100% 10.2%;
|
|
--warning-200: 36.6deg 100% 8%;
|
|
--destructive-default: 10.2deg 77.9% 53.9%;
|
|
--destructive-600: 9.7deg 85.2% 62.9%;
|
|
--destructive-500: 7.9deg 71.6% 29%;
|
|
--destructive-400: 6.7deg 60% 20.6%;
|
|
--destructive-300: 7.5deg 51.3% 15.3%;
|
|
--destructive-200: 10.9deg 23.4% 9.2%;
|
|
}
|