mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 11:55:05 +03:00
Danny White
36364e7df3
## Problem Semantic colour tokens (`--border-*`, `--foreground-*`, `--background-*`) now resolve to full `oklch(...)` values. Call sites that still wrapped them in `hsl(var(--…))` are invalid CSS and drop the colour (Partners ambient grid was the clearest case). Brand / destructive / warning channel tokens still correctly use `hsl(var(--…))` and were left alone. Presence avatar stack polish is in https://github.com/supabase/supabase/pull/51164. ## Solution - Use bare `var(--…)`, `currentColor`, or Tailwind utilities for semantic tokens. Opacity cases use `oklch(from var(--…) l c h / …)`. - Partners grid: fix, and then use `text-foreground/20` in light, `text-foreground/30` in dark for optical correction. | Before | After | | --- | --- | | <img width="1860" height="1106" alt="CleanShot 2026-10-02 at 16 29 08@2x" src="https://github.com/user-attachments/assets/4554b0c9-22cf-4b06-bbe3-798e8b15304e" /> | <img width="1852" height="1112" alt="CleanShot 2026-10-02 at 16 28 44@2x" src="https://github.com/user-attachments/assets/20ccbc80-5eaa-49e6-8f94-48b99dc01474" /> | | <img width="1024" height="759" alt="20701" src="https://github.com/user-attachments/assets/a4e578cf-5adb-4f7a-a53b-870a51f5f948" /> | <img width="1024" height="759" alt="59176" src="https://github.com/user-attachments/assets/dda3fc2d-d86b-45a5-adca-403223cc5f33" /> | ## Review instructions 1. [Live /partners](https://supabase.com/partners) · [Preview /partners](https://zone-www-dot-com-git-dnywh-fixhsl-oklch-semanti-9bc03a-supabase.vercel.app/partners). Ambient dashed grid under the hero (light and dark). 2. [Live /database](https://supabase.com/database) · [Preview /database](https://zone-www-dot-com-git-dnywh-fixhsl-oklch-semanti-9bc03a-supabase.vercel.app/database). Postgres elephant idle outline should be muted grey, not black. Hover still brand green. 3. [Live /state-of-startups](https://supabase.com/state-of-startups) · [Preview /state-of-startups](https://zone-www-dot-com-git-dnywh-fixhsl-oklch-semanti-9bc03a-supabase.vercel.app/state-of-startups). Chart **More AI-generated code, less likely to be monetizing yet**: horizontal gridlines at 0/25/50/75/100% should render. 4. Storage / Edge Functions changes are correctness-only (shadows, idle borders, a top fade). Near-invisible to the naked eye; skip unless debugging.