mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Danny White
4381e1290c
## What kind of change does this PR introduce? Bug fix / a11y cleanup ([DEPR-629](https://linear.app/supabase/issue/DEPR-629)). ## What is the current behavior? `apps/studio/styles/globals.css` still styles `.form-group` / `.form-control` inputs with a legacy soft green focus glow (`box-shadow: … rgba(62, 207, 142, …)` plus `ring-current`). That can fight modern focus rings if those classes are ever present. ## What is the new behavior? Those legacy focus rules are removed. Matching inputs use `@apply focus-ring` instead. | Before | After | | --- | --- | | <img width="882" height="246" alt="CleanShot 2026-07-31 at 13 28 42@2x" src="https://github.com/user-attachments/assets/3aa00e2f-918f-4e72-9db0-4ad75864cc58" /> | <img width="864" height="244" alt="CleanShot 2026-07-31 at 13 28 57@2x" src="https://github.com/user-attachments/assets/4a96439d-16de-4ebb-ab07-2ae7cbf46c0b" /> | ## To test These CSS selectors are legacy. Easiest before/after is a one-line probe in the browser. 1. Open the **Studio preview** for this PR (and, for comparison, production Studio or `master`). 2. Go to any project (any page is fine). 3. Open DevTools → Console and paste: ```js document.body.insertAdjacentHTML( 'beforeend', `<div class="form-group" style="position:fixed;right:16px;bottom:16px;z-index:9999;padding:12px;background:var(--background);border:1px solid var(--border);border-radius:8px"> <label style="display:block;margin-bottom:8px">Legacy form-group probe</label> <input type="text" value="Tab to me" /> </div>` ) ``` 4. Click the injected input (or Tab to it). | | Focus look | | --- | --- | | **Before** (production / `master`) | Soft **green** halo | | **After** (this PR) | Shared **`focus-ring`** only (no green glow, no double stack) | Optional smoke (no visual change expected): **Project Settings → General → Project name** — Tab into the field; normal shared focus ring still works. ## Additional context - Related: #41575, DEPR-628
Styles
When to write custom styles
Tailwind should be sufficient to cover the majority of styling needs. We typically only write custom styles here in the event where we're working with an external library and we need to override some styles (e.g Monaco, or even our own UI library).
Ideally, keep custom styling here to a minimum, use tailwind directly in the pages and components where possible, so that we have less code to maintain.
If you're writing custom styles
Group custom styles into separate stylesheets based on their context. For styles which are generic and global, we can write them in main.scss.