## 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
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
This fixes the following:
- Our `<MetricCard />` and `<LogsBarChart />` which use `<ChartTitle />`
were rendering the wrong font style for the title. The `font-mono` class
being overwritten by recent changes, this helps sort cascade so it
renders correct.
- In our design system, the warning variable for charts was rendering
black, this should be fixed to be our warning yellow.
- There was an odd padding on `<MetricsCard />` content area, meaning
our line chart wasn't flush to the edges, this required a small
extension to `twMerge` so it could resolve.
Please have a look around studio in places we have charts to double
check nothing is broken. Also compare live design system vs. this branch
by checking Logs Bar Chart, Charts and Metrics Card pages.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined heading typography for more consistent font and weight
styling.
* Improved class merging for custom spacing utilities.
* **Bug Fixes**
* Adjusted composed chart Y-axis sizing for clearer layouts.
* Improved warning color fallbacks in log bar charts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
UI polish
## What is the current behavior?
Unified logs row chrome is slightly misaligned (checkbox vs filter
toggle, uneven gaps around the level dot), success grey is too dark and
doesn’t match the Level key, and log-type icons read a bit heavy.
## What is the new behavior?
- Aligns the row checkbox with the filter sidebar toggle and spaces the
level dot evenly between checkbox and timestamp
- Drops the checkbox `translate-y` nudge in favour of normal middle
alignment
- Introduces `--chart-success` so the chart and Level key/dots share a
lighter grey
- Softens log-type icon colour on each row
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="1293"
src="https://github.com/user-attachments/assets/af7ab83f-8917-41cb-99f3-1c1f92df769e"
/> | <img width="1024" height="759" alt="52159"
src="https://github.com/user-attachments/assets/9b859308-2101-4a02-bdc1-75e5750f84fa"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved Unified Logs table spacing and alignment, including narrower
selection and level columns.
* Refined checkbox and date-cell presentation for a cleaner layout.
* Updated log type icons to use muted foreground styling.
* **Bug Fixes**
* Success statuses and chart indicators now consistently use the
dedicated success color across light and dark themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Reverts a color override which seems to be causing issues in some edge
cases
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Adjusted the light theme so its surface color now uses the default
value instead of being overridden.
* Preserved the dark theme appearance while keeping theme styling
consistent across modes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Overrides bg on Studio just to give a bit more elevation
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated the light theme’s surface styling by introducing a new theme
value (`--surface`) to improve visual consistency across the app.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
UI bug fix
## What is the current behavior?
After the colour system migration (#47288), `--warning-default` was
removed in light mode in favour of the semantic `--warning` token.
Several studio call sites still referenced
`hsl(var(--warning-default))`, which resolves to an invalid colour in
light mode.
This caused warning segments in stacked bar charts (e.g. Realtime on
project overview v2) to render black instead of amber, with missing
tooltip swatches. The colour appeared to "fix itself" on hover because
the dimmed state used `--warning-500`, which is still defined.
## What is the new behaviour?
Studio consumers that referenced the removed token now point at tokens
that still resolve in light mode. Chart warnings use new app-level
`--chart-warning` / `--chart-warning-muted` variables (stepped scale,
theme-aware) rather than the removed `--warning-default`.
We only update **Studio app consumers** that were still calling the old
token:
- `LogsBarChart` → `--chart-warning` tokens
- `apps/studio/styles/globals.css` → defines those chart tokens + fixes
`--sidebar-primary-foreground`
- A handful of chart/tooltip call sites in Studio
(`EdgeFunctionOverview`, `UnifiedLogs`, etc.)
- Table editor dirty cell text → `--warning-600` (still on the stepped
scale)
## To test
Use a hosted project that already has warnings on project home (e.g.
Realtime with a non-zero warnings count). Switch Studio to **light
mode**.
1. Open **Project home** (`newHomepageUsageDeltas` flag enabled).
2. Find a service card with warnings in **Project usage**.
3. Confirm warning bar segments are amber/orange (not black), tooltip
swatches show amber, and hover does not flip them black.
4. Quick dark mode sanity check. Should look unchanged.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Standardized warning-series and highlight colors across charts, logs,
countdown timers, and interface indicators using the shared theme tokens
(`--chart-warning` / `--chart-warning-muted`).
* Refreshed warning-related theme wiring for both light and dark modes,
including sidebar foreground color.
* **Bug Fixes**
* Updated “dirty” table cell text color to align with the revised
warning palette.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes colour issue on some charts
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated studio chart color styling to improve consistency in light
mode.
* Refined dark theme chart color handling so the color token is applied
correctly without directly assigning a raw variable.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES/NO
## What kind of change does this PR introduce?
Bug fix, feature, docs update, ...
## What is the current behavior?
Please link any relevant issues here.
## What is the new behavior?
Feel free to include screenshots if it includes visual changes.
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Update studio fonts:
- Headings: Manrope
- Sans-serif: Inter
Slightly reduced font-sizes by 1px (or 2 for bigger font-sizes) and
increased base html font-weight to 450 for better rendering and
legibility.
- Marketplace index page
- update order of feature partner integrations in hero
- fix z-index on MarketplaceFilterBar in "list" view
<img width="275" height="104" alt="Screenshot 2026-06-02 at 17 07 29"
src="https://github.com/user-attachments/assets/5cef64f9-895e-4f8d-8f30-153ddd5c89dd"
/>
- Marketplace detail page
- use "prose" css styling on overview content for better text styling
(heading with top padding, etc)
- refine FilesView in overview tab to only show swipeable and zoomable
previews (so the big image doesn't occupy too much space) + lazy load
FilesView component
- improve page loading state
- improve overview side rail sticky-top and remove redundant "About"
label
<img width="1333" height="732" alt="Screenshot 2026-06-02 at 17 20 29"
src="https://github.com/user-attachments/assets/8f3dd4a0-c241-4b7f-b8c8-192e1d7a616d"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Interactive carousel with image zoom capability for viewing
integration preview images
* **Bug Fixes**
* Fixed z-index layering issue with marketplace filter bar
* **Refactor**
* Redesigned marketplace detail page header with breadcrumb navigation
* Updated integration image handling structure with enhanced metadata
* Optimized dynamic loading for integration file viewers
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Introducing a new Integrations Marketplace layout
- behind feature flag
- behind opt-out feature preview (default to true) to easily toggle
before and after
Doesn't introduce new functionality, only layout change behind ff.
## What changed
Nothing if `marketplaceIntegrations` flag is off.
### With flag
- New Marketplace index layout
- filter via text or by `category`, `integration type` and `source`
- Featured Partners Integrations hero (hidden when any filter is active)
- toggle between `grid` and `list` view
- new integration detail page layout
- with top action bar
- more consistent fullWidth or narrow content layouts
- can access Feature Preview toggle under Account Dropdown > Feature
Previews > Marketplace
## How to review and what to test
I recommend reviewing file changes from bottom to top in
https://github.com/supabase/supabase/pull/45856/changes because it makes
more sense from a pr-logic perspective.
- [ ] Visit
https://studio-staging-git-chore-integrations-ui-refine-fs-supabase.vercel.app/dashboard/project/_/integrations
- [ ] Check if new layout doesn't have big layout issues like weird
paddings or margins mostly. (We can iterate in upcoming PRs for
additional features/fixes)
- [ ] Toggle "Marketplace" feature preview to `FALSE` and check that the
Integrations layout looks like in prod
https://supabase.com/dashboard/project/_/integrations
- [ ] Also check individual integration pages and toggle the feature
preview on and off to see before and after and check if everything looks
good
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Full Marketplace experience: explorer with featured hero,
filters/search, list & grid views, cards, sidebar, detailed integration
pages, install flows, badges, and a preview toggle.
* **Bug Fixes**
* Prevented stale markdown from showing when switching integrations.
* **Style**
* Improved responsive layouts, loading placeholders, and header/nav
full-width behavior.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45856)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Raminder Singh <romi_ssk@yahoo.co.in>
This PR migrates all tailwind configs in the apps to be CSS configs.
They import a shared CSS Tailwind config from the `config` package
(which in turns imports the old JS config).
The shared JS config will be migrated to CSS in a followup PR.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Centralized Tailwind into a config-driven entrypoint and updated the
app build flow to use the new build step; many apps now import unified
global styles.
* **Style**
* Migrated global styles to a Tailwind v4-style setup, added
project-wide content scanning, consolidated theme imports, standardized
theme tokens (including new --container-site max-width), and added a
small prose utility to remove paragraph margins.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Danny White
