mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Ivan VasilovandClaude Opus 4.7
640869da47
This PR finishes the Tailwind migration by doing some minor fixes: - Remove `@radix-ui/colors` and inline the color values into the color definitions. The default Tailwind colors are unset and replaced by our own color set (both in light and dark variants). - Remove the `colorA` colors because they were used with alpha values. They were unused and Tailwind v4 supports alpha values natively. - Replace the `hit-area` JS config with the original CSS config from https://bazza.dev/craft/2026/hit-area. The original config was migrated to JS config to work with Tailwind v3. Now that we're on v4, we can just use the source format. - Remove the `motion-safe-transition` plugin since it's now [supported natively by Tailwind](https://tailwindcss.com/docs/transition-duration#supporting-reduced-motion) - Replace `tailwindcss-animate` with `tw-animate-css`. The old plugin was unmaintained and using JS config. The new one should be a drop-in replacement. - Remove all scripts for generating colors, they're not needed anymore, all values are hardcoded. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added hit-area debugging and sizing utilities for enhanced layout control. * **Refactor** * Restructured color system to use hand-edited CSS variables with inlined values for improved performance and maintainability. * Migrated animation utilities to a new framework. * **Style** * Enhanced motion-reduced animations with improved transition behavior. * Adjusted sidebar layout styling for better visual presentation. * **Chores** * Updated animation dependencies. * Removed legacy color generation scripts. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45925) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
39 lines
1.5 KiB
CSS
39 lines
1.5 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';
|
|
|
|
/* Per-theme overrides for semantic --background-/--foreground-/--brand-*
|
|
* tokens. Radix/scale/brand --color-* values are inlined directly in
|
|
* colors.css below. */
|
|
@import '../ui/build/css/source/global.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';
|