Files
supabase/packages/ui/build/css/source/compat.css
Saxon FletcherandClaude Opus 4.8 fb02182e86 Color system (#47288)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 15:00:43 +10:00

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: var(--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);
}