mirror of
https://github.com/supabase/supabase.git
synced 2026-07-26 17:32:31 -04:00
Ivan Vasilov
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) <[email protected]>
145 lines
3.6 KiB
CSS
145 lines
3.6 KiB
CSS
@utility hit-area-debug {
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
@apply border border-dashed border-blue-500 bg-blue-500/10;
|
|
}
|
|
&:hover::before {
|
|
@apply border border-dashed border-green-500 bg-green-500/10;
|
|
}
|
|
}
|
|
|
|
@utility hit-area {
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
}
|
|
}
|
|
|
|
@utility hit-area-* {
|
|
position: relative;
|
|
--hit-area-t: --spacing(--value(number) * -1);
|
|
--hit-area-t: calc(--value([*]) * -1);
|
|
--hit-area-b: --spacing(--value(number) * -1);
|
|
--hit-area-b: calc(--value([*]) * -1);
|
|
--hit-area-l: --spacing(--value(number) * -1);
|
|
--hit-area-l: calc(--value([*]) * -1);
|
|
--hit-area-r: --spacing(--value(number) * -1);
|
|
--hit-area-r: calc(--value([*]) * -1);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
}
|
|
}
|
|
|
|
@utility hit-area-l-* {
|
|
position: relative;
|
|
--hit-area-l: --spacing(--value(number) * -1);
|
|
--hit-area-l: calc(--value([*]) * -1);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
}
|
|
}
|
|
|
|
@utility hit-area-r-* {
|
|
position: relative;
|
|
--hit-area-r: --spacing(--value(number) * -1);
|
|
--hit-area-r: calc(--value([*]) * -1);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
}
|
|
}
|
|
|
|
@utility hit-area-t-* {
|
|
position: relative;
|
|
--hit-area-t: --spacing(--value(number) * -1);
|
|
--hit-area-t: calc(--value([*]) * -1);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
}
|
|
}
|
|
|
|
@utility hit-area-b-* {
|
|
position: relative;
|
|
--hit-area-b: --spacing(--value(number) * -1);
|
|
--hit-area-b: calc(--value([*]) * -1);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
}
|
|
}
|
|
|
|
@utility hit-area-x-* {
|
|
position: relative;
|
|
--hit-area-l: --spacing(--value(number) * -1);
|
|
--hit-area-l: calc(--value([*]) * -1);
|
|
--hit-area-r: --spacing(--value(number) * -1);
|
|
--hit-area-r: calc(--value([*]) * -1);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
}
|
|
}
|
|
|
|
@utility hit-area-y-* {
|
|
position: relative;
|
|
--hit-area-t: --spacing(--value(number) * -1);
|
|
--hit-area-t: calc(--value([*]) * -1);
|
|
--hit-area-b: --spacing(--value(number) * -1);
|
|
--hit-area-b: calc(--value([*]) * -1);
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: var(--hit-area-t, 0px);
|
|
right: var(--hit-area-r, 0px);
|
|
bottom: var(--hit-area-b, 0px);
|
|
left: var(--hit-area-l, 0px);
|
|
pointer-events: inherit;
|
|
}
|
|
}
|