mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08:00
3d07613c2b
## 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.
57 lines
2.2 KiB
CSS
57 lines
2.2 KiB
CSS
/*
|
|
* Backwards-compatibility aliases.
|
|
*
|
|
* These map the old token names onto the semantic system in semantic.css so
|
|
* components can migrate gradually. Nothing new should reference them — they
|
|
* exist only so un-migrated call sites keep resolving. Delete entries as their
|
|
* consumers move to the semantic tokens; the file goes away once it is empty.
|
|
*
|
|
* Kept separate from semantic.css so the core model reads as just inputs →
|
|
* derivations. Must be imported after semantic.css (see tailwind.config.css).
|
|
*/
|
|
|
|
:root {
|
|
/* Legacy foreground aliases */
|
|
--foreground-default: var(--foreground);
|
|
--foreground-light: var(--muted-foreground);
|
|
--foreground-lighter: var(--tertiary-foreground);
|
|
--foreground-muted: var(--tertiary-foreground);
|
|
/* --foreground-contrast lives in semantic.css — do not remap to --primary-foreground */
|
|
|
|
/* Legacy background aliases */
|
|
--background-default: var(--background);
|
|
--background-200: var(--card);
|
|
--background-alternative-default: var(--background);
|
|
--background-alternative-200: var(--card);
|
|
--background-selection: var(--accent);
|
|
--background-control: var(--accent);
|
|
--background-surface-75: var(--card);
|
|
--background-surface-100: var(--card);
|
|
--background-surface-200: var(--muted);
|
|
--background-surface-300: var(--secondary);
|
|
--background-surface-400: var(--tertiary);
|
|
--background-overlay-default: var(--secondary);
|
|
--background-overlay-hover: var(--accent);
|
|
--background-muted: var(--muted);
|
|
--background-button-default: var(--secondary);
|
|
--background-dialog-default: var(--popover);
|
|
--background-dash-sidebar: var(--background);
|
|
--background-dash-canvas: var(--background);
|
|
|
|
/* Legacy border aliases */
|
|
--border-default: var(--border);
|
|
--border-muted: var(--border);
|
|
--border-secondary: var(--border-muted);
|
|
--border-overlay: oklch(
|
|
from var(--foreground) l calc(c * 0.5) h / calc(4% + 34% * var(--contrast-border))
|
|
);
|
|
--border-control: var(--input);
|
|
--border-alternative: var(--border);
|
|
--border-strong: var(--input);
|
|
--border-stronger: oklch(
|
|
from var(--foreground) l calc(c * 0.5) h / calc(5% + 45% * var(--contrast-border))
|
|
);
|
|
--border-button-default: var(--border);
|
|
--border-button-hover: var(--border-stronger);
|
|
}
|