mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +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.
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import { cn } from 'ui'
|
|
|
|
const BackgroundPattern = ({ className }: { className?: string }) => {
|
|
return (
|
|
<div className={cn('absolute inset-x-0 top-0 h-1/2 w-full', className)}>
|
|
<svg
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-x-0 top-0 h-1/2 w-full text-foreground/20 dark:text-foreground/30 [-webkit-mask-image:radial-gradient(ellipse_70%_90%_at_50%_0%,black,transparent_70%)] [mask-image:radial-gradient(ellipse_70%_90%_at_50%_0%,black,transparent_70%)]"
|
|
>
|
|
<defs>
|
|
<pattern id="partner-grid" width="30" height="30" patternUnits="userSpaceOnUse">
|
|
<path
|
|
d="M30 0V30M0 30H30"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
strokeDasharray="6 6"
|
|
/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#partner-grid)" />
|
|
</svg>
|
|
{/* Soft brand-green radial glow from the top */}
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none hidden dark:block absolute inset-x-0 top-0 h-[500px] bg-[radial-gradient(ellipse_60%_100%_at_50%_0%,hsl(var(--brand-400)/0.15),transparent_70%)]"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BackgroundPattern
|