mirror of
https://github.com/supabase/supabase.git
synced 2026-06-28 11:33:52 -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]>
77 lines
2.3 KiB
CSS
77 lines
2.3 KiB
CSS
/*
|
|
* Custom Tailwind v4 utilities migrated from packages/config/ui.config.js
|
|
* (addUtilities + matchUtilities) and packages/config/tailwind.config.js
|
|
* (the .bg legacy shim).
|
|
*/
|
|
|
|
/*
|
|
* The `bg` class worked in Tailwind v3 but stopped working in v4. Restored as
|
|
* an alias for `bg-default` to avoid a wide rename across the codebase.
|
|
* Should be deprecated in favor of `bg-default`.
|
|
*/
|
|
@utility bg {
|
|
background-color: hsl(var(--background-default));
|
|
}
|
|
|
|
/*
|
|
* Soft shimmer gradient used by LoadingLine.
|
|
*/
|
|
@utility line-loading-bg {
|
|
background: rgb(0, 0, 0);
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(255, 255, 255, 0.65) 50%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
@utility line-loading-bg-light {
|
|
background: rgb(0, 0, 0);
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(33, 33, 33, 0.65) 50%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
|
|
/* may be unused — verify before pruning */
|
|
@utility mask-fadeout-right {
|
|
-webkit-mask-image: linear-gradient(to right, white 98%, transparent 100%);
|
|
mask-image: linear-gradient(to right, white 98%, transparent 100%);
|
|
}
|
|
/* may be unused — verify before pruning */
|
|
@utility mask-fadeout-left {
|
|
-webkit-mask-image: linear-gradient(to left, white 98%, transparent 100%);
|
|
mask-image: linear-gradient(to left, white 98%, transparent 100%);
|
|
}
|
|
|
|
/*
|
|
* Functional color utilities. The `--value(--color-*)` token accepts any
|
|
* registered --color-* design token (e.g. highlight-foreground-light).
|
|
*/
|
|
/* may be unused — verify before pruning */
|
|
@utility highlight-* {
|
|
box-shadow: inset 0 1px 0 0 --value(--color-*);
|
|
}
|
|
/* may be unused — verify before pruning */
|
|
@utility subhighlight-* {
|
|
box-shadow: inset 0 -1px 0 0 --value(--color-*);
|
|
}
|
|
|
|
/*
|
|
* Inline-SVG grid background. Used by ProjectLinker as bg-grid-black/5 and
|
|
* bg-grid-white/5 for the integrations onboarding visuals.
|
|
*/
|
|
@utility bg-grid-* {
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='--value(--color-*)'><path d='M0 .5H31.5V32'/></svg>");
|
|
}
|
|
|
|
@utility no-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
&::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
}
|