mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
## What kind of change does this PR introduce? Bug fix and design-system update. Resolves DEPR-316. Follow-up rename (`text-brand` → `text-primary`) is in a dedicated PR (https://github.com/supabase/supabase/pull/50564) stacked on this one. ## What is the current behavior? `text-brand` resolves to the canonical bright brand green in places that need readable text, which fails WCAG AA on light surfaces. A separate `text-brand-display` token adds another green for large type. ## What is the new behavior? - `text-brand` maps to accessible `--primary` (light mode darkened to meet ~4.5:1 AA) - `--hue` / `--primary-hue` aligned to 157.5 - `text-brand-display` removed; former display callsites use `text-brand` - Bright fills/borders stay on `brand-default` - Design-system colour and typography docs updated | Before | After | | --- | --- | | <img width="514" height="112" alt="CleanShot 2026-09-02 at 11 13 09@2x" src="https://github.com/user-attachments/assets/4e0138a9-a32d-4e4c-a426-90736706e1e7" /> | <img width="512" height="138" alt="CleanShot 2026-09-21 at 11 42 05@2x" src="https://github.com/user-attachments/assets/164cc5b1-a0c5-4e93-95f1-80016641a114" /> | | <img width="864" height="266" alt="CleanShot 2026-09-02 at 11 13 53@2x" src="https://github.com/user-attachments/assets/3c1ca53f-bf9e-431e-bc15-816b4a275b8e" /> | <img width="882" height="248" alt="CleanShot 2026-09-21 at 11 41 37@2x" src="https://github.com/user-attachments/assets/24828e7b-ed6b-44cb-b9dc-becc3398bdfc" /> | | <img width="782" height="692" alt="CleanShot 2026-09-02 at 11 16 30@2x" src="https://github.com/user-attachments/assets/fc871977-77bc-47fb-9e0e-9284e0ecd5cc" /> | <img width="730" height="690" alt="CleanShot 2026-09-21 at 11 42 52@2x" src="https://github.com/user-attachments/assets/bf479515-d5f9-471e-b82d-f097c0f4b56c" /> | | <img width="480" height="306" alt="CleanShot 2026-09-02 at 11 18 53@2x" src="https://github.com/user-attachments/assets/03f341f4-f02e-44f8-a2b2-8c31670d0427" /> | <img width="470" height="300" alt="CleanShot 2026-09-21 at 11 43 19@2x" src="https://github.com/user-attachments/assets/9df18217-d5e6-48b8-ba0b-579d2664b94b" /> | | <img width="960" height="300" alt="CleanShot 2026-09-02 at 11 32 04@2x" src="https://github.com/user-attachments/assets/6b1d9373-7a71-4247-81ff-26441604b09d" /> | <img width="980" height="306" alt="CleanShot 2026-09-21 at 11 44 13@2x" src="https://github.com/user-attachments/assets/41ad4784-02ec-4b29-b860-32af9fa79aa8" /> | | <img width="924" height="214" alt="CleanShot 2026-09-02 at 11 34 44@2x" src="https://github.com/user-attachments/assets/1de661fe-c7b6-499b-a94f-e4737436ec79" /> | <img width="752" height="162" alt="CleanShot 2026-09-21 at 11 44 56@2x" src="https://github.com/user-attachments/assets/1811890f-0660-4445-84e9-447720954fa1" /> | ## To test Test each callsite **in light mode** (dark mode is largely unchanged). ### WWW - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): “Scale to millions” uses readable brand text (display token is gone) - [Careers](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/careers): small “Careers” eyebrow readable; green dividers stay bright `brand-default` - [Contact](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/contact-us): email / policy links use readable brand text - [Regions](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/regions): “Ask about early access to BYOC” readable ### Docs - [Docs homepage](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs): “DOCS” wordmark and resource links readable - [Database overview](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/guides/database/overview): nav / footer brand links readable - [JavaScript reference](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/reference/javascript/introduction): active sidebar treatment readable ### Design system - [Typography](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/typography): documents `text-brand` only (no display) - [Colour usage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/color-usage): `text-brand` vs `bg-brand-default` - [Design-system homepage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): brand text examples across themes ### Studio - [Auth providers](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright - [Database policies](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/database/policies?new=true): template hover text more legible - [Database connections](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/observability/connections): “Live” status readable; animated dot stays bright green --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
44 lines
1.4 KiB
CSS
44 lines
1.4 KiB
CSS
[data-theme='dark'],
|
|
.dark {
|
|
--helpers-os-appearance: Dark;
|
|
--hue: 157.5;
|
|
--chroma: 0.005;
|
|
--surface: 0.19;
|
|
--elevation-step: 0.025;
|
|
--contrast: 0.5;
|
|
--foreground-lightness: 0.95;
|
|
--muted-foreground-level: 0.8;
|
|
--tertiary-foreground-level: 0.65;
|
|
/* Light default --field-alpha (0.015) disappears on dark plates; dig harder. */
|
|
--field-alpha: 0.12;
|
|
|
|
--code-block-5: 13.8deg 89.7% 69.6%;
|
|
--code-block-4: 276.1deg 67.7% 74.5%;
|
|
--code-block-3: 83.8deg 61.7% 63.1%;
|
|
--code-block-2: 33.2deg 90.3% 75.7%;
|
|
--code-block-1: 170.8deg 43.1% 61.4%;
|
|
|
|
/* Stepped numeric scales (per-theme literals; mapped in theme.css) */
|
|
--secondary-default: 247.8deg 100% 70%;
|
|
--secondary-400: 248.3deg 54.5% 25.9%;
|
|
--secondary-200: 248deg 53.6% 11%;
|
|
--brand-default: 153.1deg 60.2% 52.7%;
|
|
--brand-600: 154.9deg 59.5% 70%;
|
|
--brand-500: 154.9deg 100% 19.2%;
|
|
--brand-400: 155.5deg 100% 9.6%;
|
|
--brand-300: 155.1deg 100% 8%;
|
|
--brand-200: 162deg 100% 2%;
|
|
--warning-default: 38.9deg 100% 42.9%;
|
|
--warning-600: 38.9deg 100% 42.9%;
|
|
--warning-500: 34.8deg 90.9% 21.6%;
|
|
--warning-400: 33.2deg 100% 14.5%;
|
|
--warning-300: 32.3deg 100% 10.2%;
|
|
--warning-200: 36.6deg 100% 8%;
|
|
--destructive-default: 10.2deg 77.9% 53.9%;
|
|
--destructive-600: 9.7deg 85.2% 62.9%;
|
|
--destructive-500: 7.9deg 71.6% 29%;
|
|
--destructive-400: 6.7deg 60% 20.6%;
|
|
--destructive-300: 7.5deg 51.3% 15.3%;
|
|
--destructive-200: 10.9deg 23.4% 9.2%;
|
|
}
|