supabase

38,871 Commits 1,787 Branches 62 Tags

2 Commits

Include renames

Author	SHA1	Message	Date
Danny White	d067e81a69	fix(ui): align primary colours across text, buttons, and controls (#50697 ) ## Problem Primary colour serves readable text and selected controls, but those uses need different shades. Light mode needs darker text, while dark mode needs a deeper button fill. Fixed brand green on interactive chrome also prevents a custom primary hue from carrying through the interface. Some slider tracks and selected text are hard to read. ## Solution - Keep `--primary` for accessible text and small selected indicators. Use `--primary-solid` for button fills, which need a deeper shade in dark mode. - Add `--primary-bright` for focus rings, selected control chrome, chart accents, and other interactive highlights. It follows `--primary-hue`; `brand-*` stays fixed for Supabase identity. - Make slider troughs clearer and text selection translucent with theme foreground text. - Document the split in the design-system colour guide. \| Before \| After \| \| --- \| --- \| \| <img width="980" height="244" alt="Before: light mode primary controls" src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793" /> \| <img width="982" height="204" alt="After: light mode primary controls" src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20" /> \| \| <img width="610" height="120" alt="Before: slider track" src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122" /> \| <img width="622" height="126" alt="After: slider track" src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42" /> \| \| <img width="652" height="512" alt="Before: dark mode controls" src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a" /> \| <img width="658" height="498" alt="After: dark mode controls" src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22" /> \| ## Review instructions 1. Compare light and dark mode in the [colour usage guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors). Check primary ink, primary-solid, primary-bright, and fixed brand swatches. 2. In Studio, open the ‘new table’ sheet in [Table Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor). Tab through the new table sheet's fields and toggles. Check the focus rings, selected controls, and the sheet's edges in both themes. You do not need to save a table. 3. Select text in Studio in both themes, including a link or primary-coloured label. The selection and text should remain legible. 4. Check the [Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field) Price Range slider: the unused track should remain visible in both themes. The selected field card border should follow primary-bright. 5. Check the [Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button) and [Radio Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group) previews. In dark mode, `primary` button fill should be deeper than primary [text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text); selected radios should remain readable.	2026-09-24 09:56:31 +10:00
Saxon FletcherandAlaister Young	b455d871e5	Add compute and disk usage charts (#48369 ) ## Summary This is the second step towards merging compute and disk with infrastructure. There are some usage charts on the current infrastructure page that are useful to have in the context of compute and disk settings. This branch adds two charts which give a general sense of usage and whether an upgrade needs to happen. Other data points in infrastructure can be found within observability and organisation usage. - Adds rolling seven-day Compute and Disk charts to the existing Compute and Disk page. - Shows CPU, memory, optional burstable disk IO, and disk usage split into database, WAL, and system data. - Covers loading, error, empty, warning, and critical states, retaining the 75% warning and 90% critical thresholds. - Uses a dedicated PageSection and keeps the charts in two columns from 680px. - Uses the concise primary labels Compute and Disk, removes the database report link, and removes tooltip icons from secondary metrics. - Adds transformation, summary, and component tests covering dedicated IO behavior, legacy anchors, responsive layout, rolling refetch, and tooltip behavior. ## Stack 1. #48368 2. #48369 (this PR) 3. #48370 ## How to test 1. Check out `chore/infra-compute-2-charts` and start Studio with `pnpm dev:studio`. 2. Open `/project/<ref>/settings/compute-and-disk` on a project with recent metrics. 3. Confirm the charts are in their own page section with standard spacing below the page header. 4. Confirm the Compute chart shows CPU and memory, plus disk IO when applicable, and the Disk chart splits usage into database, WAL, and system data. 5. Confirm the primary labels are Compute and Disk, secondary metrics do not show tooltip icons, and there is no Database Observability/report link. 6. Resize across 680px. The charts should remain in two columns at and above the breakpoint and stack into two rows below it. 7. Exercise loading, error, empty, warning, and critical responses with the metrics mocks or response overrides. Confirm warning styling begins at 75%, critical styling begins at 90%, and an error or empty response does not break the configuration form. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * New Features * Added compute and disk usage charts to the disk management interface, including metric cards for CPU, memory, disk I/O, database, WAL, and system. * Added usage status indicators, peak calculations, tooltips, and a detailed disk breakdown with placeholders when data is missing. * Added special handling for dedicated-I/O instances to hide burst-only disk I/O. * Style * Simplified the disk space display by removing supplemental explanatory text. * Tests * Added comprehensive test coverage for chart rendering, loading/error/empty states, status/peak calculations, and rolling 7-day data window behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>	2026-07-29 17:57:10 +08:00

Author

SHA1

Message

Date

Danny White

d067e81a69

fix(ui): align primary colours across text, buttons, and controls (#50697 )

## Problem

Primary colour serves readable text and selected controls, but those
uses need different shades. Light mode needs darker text, while dark
mode needs a deeper button fill. Fixed brand green on interactive chrome
also prevents a custom primary hue from carrying through the interface.
Some slider tracks and selected text are hard to read.

## Solution

- Keep `--primary` for accessible text and small selected indicators.
Use `--primary-solid` for button fills, which need a deeper shade in
dark mode.
- Add `--primary-bright` for focus rings, selected control chrome, chart
accents, and other interactive highlights. It follows `--primary-hue`;
`brand-*` stays fixed for Supabase identity.
- Make slider troughs clearer and text selection translucent with theme
foreground text.
- Document the split in the design-system colour guide.

| Before | After |
| --- | --- |
| <img width="980" height="244" alt="Before: light mode primary
controls"
src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793"
/> | <img width="982" height="204" alt="After: light mode primary
controls"
src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20"
/> |
| <img width="610" height="120" alt="Before: slider track"
src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122"
/> | <img width="622" height="126" alt="After: slider track"
src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42"
/> |
| <img width="652" height="512" alt="Before: dark mode controls"
src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a"
/> | <img width="658" height="498" alt="After: dark mode controls"
src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22"
/> |

## Review instructions

1. Compare light and dark mode in the [colour usage
guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors).
Check primary ink, primary-solid, primary-bright, and fixed brand
swatches.
2. In Studio, open the ‘new table’ sheet in [Table
Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor).
Tab through the new table sheet's fields and toggles. Check the focus
rings, selected controls, and the sheet's edges in both themes. You do
not need to save a table.
3. Select text in Studio in both themes, including a link or
primary-coloured label. The selection and text should remain legible.
4. Check the
[Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field)
Price Range slider: the unused track should remain visible in both
themes. The selected field card border should follow primary-bright.
5. Check the
[Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button)
and [Radio
Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group)
previews. In dark mode, `primary` button fill should be deeper than
primary
[text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text);
selected radios should remain readable.

2026-09-24 09:56:31 +10:00

Saxon FletcherandAlaister Young

b455d871e5

Add compute and disk usage charts (#48369 )

## Summary

This is the second step towards merging compute and disk with
infrastructure. There are some usage charts on the current
infrastructure page that are useful to have in the context of compute
and disk settings. This branch adds two charts which give a general
sense of usage and whether an upgrade needs to happen. Other data points
in infrastructure can be found within observability and organisation
usage.

- Adds rolling seven-day Compute and Disk charts to the existing Compute
and Disk page.
- Shows CPU, memory, optional burstable disk IO, and disk usage split
into database, WAL, and system data.
- Covers loading, error, empty, warning, and critical states, retaining
the 75% warning and 90% critical thresholds.
- Uses a dedicated PageSection and keeps the charts in two columns from
680px.
- Uses the concise primary labels Compute and Disk, removes the database
report link, and removes tooltip icons from secondary metrics.
- Adds transformation, summary, and component tests covering dedicated
IO behavior, legacy anchors, responsive layout, rolling refetch, and
tooltip behavior.

## Stack

1. #48368
2. #48369 (this PR)
3. #48370

## How to test

1. Check out `chore/infra-compute-2-charts` and start Studio with `pnpm
dev:studio`.
2. Open `/project/<ref>/settings/compute-and-disk` on a project with
recent metrics.
3. Confirm the charts are in their own page section with standard
spacing below the page header.
4. Confirm the Compute chart shows CPU and memory, plus disk IO when
applicable, and the Disk chart splits usage into database, WAL, and
system data.
5. Confirm the primary labels are Compute and Disk, secondary metrics do
not show tooltip icons, and there is no Database Observability/report
link.
6. Resize across 680px. The charts should remain in two columns at and
above the breakpoint and stack into two rows below it.
7. Exercise loading, error, empty, warning, and critical responses with
the metrics mocks or response overrides. Confirm warning styling begins
at 75%, critical styling begins at 90%, and an error or empty response
does not break the configuration form.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added compute and disk usage charts to the disk management interface,
including metric cards for CPU, memory, disk I/O, database, WAL, and
system.
* Added usage status indicators, peak calculations, tooltips, and a
detailed disk breakdown with placeholders when data is missing.
* Added special handling for dedicated-I/O instances to hide burst-only
disk I/O.
* **Style**
* Simplified the disk space display by removing supplemental explanatory
text.
* **Tests**
* Added comprehensive test coverage for chart rendering,
loading/error/empty states, status/peak calculations, and rolling 7-day
data window behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>

2026-07-29 17:57:10 +08:00