Commit Graph

5 Commits

Author SHA1 Message Date
Danny White
484726a45c fix(studio): warning colours broken in light mode after colour migration (#47660)
## 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 -->
2026-07-07 14:34:29 +10:00
Saxon Fletcher
fb02182e86 Color system (#47288)
## 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>
2026-07-03 15:00:43 +10:00
Ivan Vasilov
56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00
Charis
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
kemal.earth
7ed8ab83a8 feat(studio): query insights improvements (#43109)
## 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 introduces Query Insights. It's the first edition of possible
future updates. This takes our old prototype and builds upon it for a
more action driven insights view.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-03-13 15:09:26 +00:00