mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Saxon FletcherandClaude Opus 4.8
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 <noreply@anthropic.com>
77 lines
2.2 KiB
CSS
77 lines
2.2 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: var(--background);
|
|
}
|
|
|
|
/*
|
|
* 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 */
|
|
}
|
|
}
|