mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
65b962e771
* Refactor Drawer component and add date-fns dependency Refactored the Drawer component for improved slot-based structure, updated styles, and added 'use client' directive. Added 'date-fns' as a dependency in design-system, updated tsconfig paths for icons, and marked ToggleGroup as a client component. * nit: add env for svg path * fix: instructions * accent color docs and basic tidy * copy value feature * improve color contrast * increase contrast on text-warning in light mode * update changelog * replace outdated text-warning utility classes * remove redundant warning-600 * minor design-system docs updates * docs updates * remove unused brand-button class * update docs * fix: restore brand default * update docs brand text color * low hanging branded text fruit * Nit refactor and clean up * re-add Kemal’s README instructions for hot reload --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
191 lines
6.0 KiB
Plaintext
191 lines
6.0 KiB
Plaintext
---
|
|
title: Tailwind Classes
|
|
description: Theming support for Tailwind classes.
|
|
---
|
|
|
|
Supabase uses Tailwind classes that in turn use CSS properties.
|
|
This is to support the concept of theming, so that:
|
|
|
|
1. We can update themes from one place.
|
|
2. We can offer custom or additional themes in the future.
|
|
|
|
## Primitives
|
|
|
|
We define primitive color values using these tokens:
|
|
|
|
- `background`
|
|
- `foreground`
|
|
- `border`
|
|
- `brand`
|
|
- `warning`
|
|
- `destructive`
|
|
|
|
These values are exported from Figma as a .json file and transformed into Tailwind utilities through some scripts under `packages/ui/internals/tokens`.
|
|
|
|
Any of these colors are available on any Tailwind utility that accepts color. For example:
|
|
|
|
```jsx
|
|
// this uses the default foreground color for this theme
|
|
<span className="text-foreground"></span>
|
|
|
|
// this uses the 'light' foreground color for this theme (one notch 'softer' than the default)
|
|
<span className="text-foreground-light"></span>
|
|
|
|
// this uses the default warning color for this theme
|
|
<span className="text-warning"></span>
|
|
|
|
// this uses the '500' warning color
|
|
<span className="text-warning-500"></span>
|
|
```
|
|
|
|
## Shorthands
|
|
|
|
We support shorthand classes for `background`, `foreground` and `border`. For example:
|
|
|
|
- `text-muted` is the same as `text-foreground-muted`
|
|
- `bg-surface` is the same as `bg-background-surface-100`
|
|
- `border-strong` is the same as `border-border-strong`
|
|
|
|
This will stop you from needing to 'double type' the same utility name.
|
|
|
|
You might notice we use `foreground` and `background` as prefixes, this is only because it is a Design Token standard, where as Tailwind uses `bg` and `text`.
|
|
|
|
## Mixing colors
|
|
|
|
Even with shorthands, remember you can use any color. For example, `foreground-light` can also be applied on borders and backgrounds as `border-foreground-light` and `bg-foreground-light`, if needed.
|
|
Similarly, background and border primitives can be used on other Tailwind utilities.
|
|
|
|
```jsx
|
|
// use the text light color for some text
|
|
<span className="text-light"></span>
|
|
|
|
// we can use the same color for a background
|
|
<div className="bg-foreground-light">
|
|
<span>I have the same background color as the above example</span>
|
|
</div>
|
|
```
|
|
|
|
## Opacity support
|
|
|
|
All colors are generated using Tailwind opacity, like `hsl(--background-default) / var(--tw-bg-opacity)`.
|
|
This means all the color options in our themes can support opacity rules. For example:
|
|
|
|
```jsx
|
|
<div className="flex gap-3">
|
|
<div className="w-4 h-4 rounded-full bg-surface-300"></div>
|
|
<div className="w-4 h-4 rounded-full bg-surface-300/90"></div>
|
|
<div className="w-4 h-4 rounded-full bg-surface-300/80"></div>
|
|
<div className="w-4 h-4 rounded-full bg-surface-300/75"></div>
|
|
<div className="w-4 h-4 rounded-full bg-surface-300/50"></div>
|
|
</div>
|
|
```
|
|
|
|
## Usage
|
|
|
|
The following Tailwind classes are a combination of Tailwind utilities and our primitives.
|
|
|
|
Note that the shade of the `DEFAULT` value on each scale pattern is variable. Sometimes it is fixed at a particular shade (such as `500` or `600`), but only when contrast is sufficient.
|
|
|
|
### Foreground (Text)
|
|
|
|
| Value | Usage |
|
|
| ---------------------- | -------------------------------------- |
|
|
| `foreground-{DEFAULT}` | Default text (**DEFAULT** is optional) |
|
|
| `foreground-light` | Light text |
|
|
| `foreground-lighter` | Lighter text |
|
|
| `foreground-muted` | Muted text |
|
|
|
|
Examples:
|
|
|
|
```jsx
|
|
<div className="text-foreground">/div>
|
|
<div className="text-foreground-light">/div>
|
|
<div className="text-foreground-lighter">/div>
|
|
<div className="text-foreground-muted">/div>
|
|
<div className="bg-foreground-light">/div>
|
|
```
|
|
|
|
---
|
|
|
|
### Background
|
|
|
|
| Value | Usage |
|
|
| ----------------------------- | ------------------------------------------------------------ |
|
|
| `background-{DEFAULT}` | Main body background (**DEFAULT** is optional) |
|
|
| `background-surface-100` | Panels and surfaces on the same level of the main background |
|
|
| `background-surface-200` | Surfaces that overlap the main content (ex. dropdowns) |
|
|
| `background-surface-300` | Surfaces that are stacked above background-surface-200 |
|
|
| `background-alternative` | Alternative background (inverted) |
|
|
| `background-overlay` | Overlays, Dropdowns, Popovers |
|
|
| `background-control` | Inputs, Radios, Checkboxes |
|
|
| `background-button-{DEFAULT}` | Button default |
|
|
|
|
The `background` part can be omitted when used on the `bg` Tailwind utility.
|
|
|
|
Examples:
|
|
|
|
```
|
|
bg-surface-100
|
|
bg-overlay
|
|
bg-alternative
|
|
text-background-surface-100
|
|
```
|
|
|
|
---
|
|
|
|
### Border
|
|
|
|
| Value | Usage |
|
|
| ------------------------- | ---------------------------------------- |
|
|
| `border-{DEFAULT}` | Default border (**DEFAULT** is optional) |
|
|
| `border-secondary` | Secondary border |
|
|
| `border-alternative` | Alternative border (inverted) |
|
|
| `border-overlay` | Overlays, Dropdowns, Popovers |
|
|
| `border-control` | Inputs, Radios, Checkboxes |
|
|
| `border-strong` | Hover, Focus |
|
|
| `border-stronger` | Highlighted border |
|
|
| `border-button-{DEFAULT}` | Button default border |
|
|
| `border-button-hover` | Button default border hover |
|
|
|
|
Examples:
|
|
|
|
```
|
|
border-overlay
|
|
border-alternative
|
|
text-border-control
|
|
```
|
|
|
|
### Brand
|
|
|
|
| Value |
|
|
| --------- |
|
|
| `200` |
|
|
| `300` |
|
|
| `400` |
|
|
| `500` |
|
|
| `DEFAULT` |
|
|
| `600` |
|
|
| `button` |
|
|
|
|
### Destructive
|
|
|
|
| Value |
|
|
| --------- |
|
|
| `200` |
|
|
| `300` |
|
|
| `400` |
|
|
| `500` |
|
|
| `DEFAULT` |
|
|
| `600` |
|
|
|
|
### Warning
|
|
|
|
| Value |
|
|
| --------- |
|
|
| `200` |
|
|
| `300` |
|
|
| `400` |
|
|
| `500` |
|
|
| `DEFAULT` |
|
|
| `600` |
|