Danny White 3d07613c2b fix(ui): restore text-contrast token (#48017) ...

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

Bug fix

## What is the current behavior?

`text-contrast` / `text-foreground-contrast` resolve to
`--primary-foreground`, which is always the darker of surface /
foreground lightness (text for the green primary fill).

In light mode that is near-black, so contrast text on inverted fills is
wrong: on true black (`bg-black`) it disappears; on dark fills like
`bg-red-900` it shows as a black icon instead of white. Visible
regression on the design-system colour usage page: the `text-contrast`
swatch only shows "Postgres" on hover.

Regression from the colour system rewrite (#47288), which aliased
`--foreground-contrast` → `--primary-foreground`.

## What is the new behavior?

`--foreground-contrast` is defined again as a surface-based inverse of
`--foreground` (light in light mode, dark in dark mode). Tailwind
utilities `text-contrast` and `text-foreground-contrast` map to it.

`--primary-foreground` is unchanged and still used for text on the
primary fill.

## Additional context

### Callsites to test (light mode especially)

| Where to look | What to check |
|---|---|
| [Design system → Colour
usage](https://design-system-git-fix-text-contrast-token-supabase.vercel.app/design-system/docs/color-usage)
| Under **Text**, the `text-contrast` swatch shows "Postgres" without
hovering |
| [Studio staging → Auth
Users](https://studio-staging-git-fix-text-contrast-token-supabase.vercel.app/project/_/auth/users)
→ open any user | Boolean fields (e.g. confirmed): check/X on the black
circle should be **white** (not missing) |
| [Studio staging → Support
new](https://studio-staging-git-fix-text-contrast-token-supabase.vercel.app/support/new)
→ upload a file | Red remove (`X`) badge should be a **white** X (prod
currently shows black) |
| [www →
Contribute](https://zone-www-dot-com-git-fix-text-contrast-token-supabase.vercel.app/contribute)
→ apply at least one filter | Filter count badge: **white** number on
black |
| [Studio staging → Support
link](https://studio-staging-git-fix-text-contrast-token-supabase.vercel.app/support/link)
success state (after linking a ticket) | Check on the brand badge should
use contrast text (light on brand in light mode) |

`Announcement` (`text-foreground-contrast` dismiss icon) is not
currently mounted in any app — covered by the design-system / token
check above.

2026-07-20 10:59:34 -04:00

2.2 KiB

Raw Permalink Blame History

View Raw