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>
36 lines
1.4 KiB
Markdown
36 lines
1.4 KiB
Markdown
# `packages/ui`
|
|
|
|
Supabase's shared React component library. Built on [Radix UI](https://www.radix-ui.com/) primitives and [shadcn/ui](https://ui.shadcn.com/), styled with Tailwind CSS, and used across all Supabase apps.
|
|
|
|
## Usage
|
|
|
|
Import from the `'ui'` package alias:
|
|
|
|
```tsx
|
|
import { Badge, Button, Input } from 'ui'
|
|
```
|
|
|
|
Some of the components have the `_Shadcn_` suffix. These components should be preferred, they're in a process of replacing the other ones.
|
|
|
|
### Utilities
|
|
|
|
```tsx
|
|
// deep object merge (used for themes)
|
|
import { clipboard, cn, mergeDeep } from 'ui' // clsx + tailwind-merge
|
|
|
|
// copy-to-clipboard helper
|
|
```
|
|
|
|
## Styling conventions
|
|
|
|
- Tailwind only — no inline styles or CSS modules.
|
|
- Use shadcn semantic pairs (`bg-card text-card-foreground`, `bg-muted text-muted-foreground`,
|
|
`bg-tertiary text-tertiary-foreground`) rather than hardcoded colors. Legacy utilities such as
|
|
`text-foreground-light` and `border-default` are compatibility aliases only.
|
|
- Themes set the core `--hue` (or the split `--surface-hue` / `--primary-hue`), `--chroma`,
|
|
`--surface`, `--foreground-lightness`, and `--contrast` inputs, plus their
|
|
`--muted-foreground-level` and `--tertiary-foreground-level` hierarchy.
|
|
Semantic colors are derived from them in OKLCH; `--contrast: 1` is the baseline and the supported
|
|
adjustment range is `0.75` to `1.25`.
|
|
- The workspace root owns the actual `tailwind.config.js`. The file in this package is a stub for IntelliSense only.
|