mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Danny White
6c0439ace8
## What kind of change does this PR introduce? Bug fix for translucent default Button (and related control) fills that show through stacked content on hover. Resolves [DEPR-636](https://linear.app/supabase/issue/DEPR-636/report-snippet-cell-expand-button-becomes-transparent-on-hover). ## What is the current behavior? Default `Button` hover uses `bg-selection`, and dark-mode rest uses `bg-muted`. After the colour system migration those legacy aliases point at translucent `--accent` / `--muted`, so hover punches through whatever sits behind the button (SQL Editor / Reports cell expand, sticky columns, skip-to-content, etc.). | Before: Light | Before: Dark | | --- | --- | | <img width="491" height="75" alt="CleanShot 2026-08-03 at 09 12 26@2x" src="https://github.com/user-attachments/assets/20e33ba9-74c5-47eb-aced-ac932a0059fa" /> | <img width="205" height="54" alt="21257" src="https://github.com/user-attachments/assets/a2c9f092-18a7-4a4d-a49b-6e019e50895f" /> | ## What is the new behavior? Default Button, Select, MultiSelect, and the CommandMenu trigger use opaque elevation tokens (`bg-background dark:bg-card`, `hover:bg-popover`). SkipToContent drops its opaque-plate workaround. No global `compat.css` alias remaps. | After: Light | After: Dark | | --- | --- | | <img width="466" height="110" alt="CleanShot 2026-08-07 at 16 09 59@2x" src="https://github.com/user-attachments/assets/6410cb58-b37c-427f-a0ff-7b223a7f3f51" /> | <img width="474" height="132" alt="CleanShot 2026-08-07 at 16 08 53@2x" src="https://github.com/user-attachments/assets/575c56d1-8ee5-4eb5-8f08-e4b5af8520f0" /> | ## Additional context - Overlay tokens (`--muted` / `--accent` / `--tertiary`) stay intentional for washes on solid surfaces. Controls that can sit over content should use solid elevation tokens (`card` / `popover`) instead. - Same root cause as the workarounds in #47996 and #48314. - The “View full cell content” control lives in SQL Editor results / Report `QueryBlock` (`ResultCell`), not Table Editor. It only renders when the value is an object/array, contains a newline, or is longer than 60 characters, and it stays `opacity-0` until you hover the cell. ## To test Short path in Studio (light and dark): 1. **Expand button over cell text (clearest repro)** – SQL Editor, run: ```sql select repeat('x', 80) as name; ``` Hover the result cell. The expand control should appear over the text; hover the button itself and confirm the fill is solid (no `x`s showing through). Same control is what Report snippets use. 2. **Any default Button** – Top nav **Connect** (or any bordered default button). Hover: solid fill. 3. **Select** – Project picker or a Settings form select. Trigger hover / open fill stays opaque. 4. **Command menu trigger** – Hover the header search / Cmd-K control; match default Button. 5. **Skip to content** – Tab once on Studio. Skip link hover stays solid over the page behind it. 6. **Editor tabs regression** – SQL / Table Editor tab strip should still look grey in light mode (not washed white).