mirror of https://github.com/supabase/supabase.git synced 2026-09-10 03:51:51 +08:00

Files

kemal.earth 67c983caef fix(design-system): small chart and metric card fixes (#48439 )

## 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 -->

2026-07-29 13:50:56 +01:00

code.css

…

fonts.css

…

globals.css

fix(design-system): small chart and metric card fixes (#48439 )

2026-07-29 13:50:56 +01:00

graphiql-base.css

…

grid.css

Fix some colors (#47996 )

2026-07-16 17:59:50 +08:00

markdown-preview.css

…

monaco.css

…

react-data-grid-logs.css

…

reactflow.css

…

README.md

…

storage.css

…

stripe.css

…

ui.css

…

README.md

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.