mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Ivan Vasilov
9fbe5152d9
# Changes ## Removed unused themes - Deleted `concept-two.css` (unused) and `dark-combined.css` which was identical to `dark.css` - Removed the alias `deep-dark` to `dark` theme since it was unused ## Removed Figma token transform scripts - Deleted the entire `internals/transform/` directory (~700 lines of JS) — these scripts transformed Figma tokens into Tailwind variables but are no longer needed - Deleted `internals/tokens/cleanse-css-for-tailwind.js` and `extract-design-tokens.js` - Removed related dependencies from `package.json` ## Removed other unused files - Deleted `shadcn.css` (unused) - Deleted `tailwind-theming.md` (outdated doc), https://supabase.com/design-system/docs/color-usage is a better resource ## Refactoring - Extracted the `motion-safe-transition` Tailwind plugin into its own file (`packages/config/tailwind-plugins/motion-safe-transition.js`) - Renamed the tailwind class generation script for clarity - Added stub `tailwind.config.js` files in packages that were missing them, so VSCode IntelliSense works in those workspaces - Updated `packages/ui/README.md` to reflect current usage patterns (imports, styling conventions) instead of outdated Figma tokens workflow # Testing - Check all apps whether they have the correct themes with the correct colors [Linear task](https://linear.app/supabase/issue/FE-3059/clean-up-unused-ui-build-artifacts-themes-and-figma-token-scripts)
29 lines
932 B
Markdown
29 lines
932 B
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 semantic tokens (`bg-muted`, `text-foreground-light`, `border-default`) rather than hardcoded colors.
|
|
- The workspace root owns the actual `tailwind.config.js`. The file in this package is a stub for IntelliSense only.
|