mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 18:11:51 +08:00
fb02182e86
## 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 <[email protected]>
42 lines
1.6 KiB
CSS
42 lines
1.6 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* JS plugins. Tailwind v4 supports `@plugin` for both v3-style JS plugins and
|
|
* v4-native packages. */
|
|
@plugin "@tailwindcss/typography";
|
|
@plugin "@tailwindcss/forms";
|
|
@import 'tw-animate-css';
|
|
|
|
/* Define the semantic system first, then override its core inputs per theme.
|
|
* This order is significant because :root and a single class selector have
|
|
* equal specificity. Radix/scale/brand --color-* values are inlined directly
|
|
* in colors.css below. */
|
|
@import '../ui/build/css/source/global.css';
|
|
@import '../ui/build/css/source/semantic.css';
|
|
@import '../ui/build/css/source/compat.css';
|
|
@import '../ui/build/css/themes/dark.css';
|
|
@import '../ui/build/css/themes/light.css';
|
|
|
|
/* Reset Tailwind's built-in color tokens before re-defining our own, so e.g.
|
|
* --color-amber-* doesn't ship a default Tailwind value alongside the Radix
|
|
* one. */
|
|
@import './unset-tw-colors.css';
|
|
|
|
/* Theme tokens + utilities + variants + base layer. colors.css declares the
|
|
* Radix/scale/brand --color-* CSS variables with per-theme values; theme.css
|
|
* consumes them from @theme inline so Tailwind generates the utilities. */
|
|
@import './css/colors.css';
|
|
@import './css/theme.css';
|
|
@import './css/animations.css';
|
|
@import './css/utilities.css';
|
|
@import './tailwind-plugins/hit-area.css';
|
|
@import './css/variants.css';
|
|
@import './css/base.css';
|
|
|
|
/*
|
|
* Typography prose / prose-toc / prose-docs overrides live in a focused JS
|
|
* config because @tailwindcss/typography reads its theme.typography options
|
|
* from the JS config — not from CSS @theme tokens. See:
|
|
* https://github.com/tailwindlabs/tailwindcss-typography#customizing-the-css
|
|
*/
|
|
@config './typography.config.js';
|