dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-06 01:45:10 +03:00
Code Issues Packages Projects Releases Wiki Activity
38,939 Commits 1,782 Branches 62 Tags
master
Commit Graph
7 Commits
Author SHA1 Message Date
Danny White b10511052d fix(ui): share raised styling across dropdown triggers (#50830) 
## Problem

Select, combobox and empty multi-select triggers use a flat border
treatment, while the default Button has a raised surface and shadow.
This makes dropdown controls look inconsistent when closed.

## Solution

Share the existing Button shadow variables and raised surface classes
with the select trigger CVA. SelectTrigger and ComboboxTrigger keep
their own layout, focus, and disabled behaviour.

The multi-select shares the raised surface when empty and keeps a sunk
field surface for selected chips. Static size classes keep its empty and
single-row selected states at the same height; wrapped badges can still
grow. The caret stays aligned as values are selected. Select, Combobox
and Multi-select share Button's size-specific corner radii. Button's
existing styling is preserved.

| Before | After |
| --- | --- |
| <img width="518" height="180" alt="CleanShot 2026-09-24 at 13 36
32@2x"
src="https://github.com/user-attachments/assets/3822e51f-b1c5-46a2-b268-0bf08a03ae06"
/> | <img width="534" height="224" alt="CleanShot 2026-09-24 at 13 36
41@2x"
src="https://github.com/user-attachments/assets/e553c973-3d21-4228-ae6f-d3c098d051d3"
/> |
| <img width="638" height="148" alt="CleanShot 2026-09-24 at 15 08
01@2x"
src="https://github.com/user-attachments/assets/6d0c3dfe-3392-4b76-ae61-b6aa7a09583d"
/> | <img width="658" height="148" alt="CleanShot 2026-09-24 at 15 08
17@2x"
src="https://github.com/user-attachments/assets/184c50c3-b951-410e-89d5-3b1c2ee8f3b8"
/> |
| <img width="482" height="162" alt="CleanShot 2026-09-24 at 15 07
22@2x"
src="https://github.com/user-attachments/assets/a088d832-d0a9-45c5-a272-9c84cc601d1d"
/> | <img width="490" height="168" alt="CleanShot 2026-09-24 at 14 59
52@2x"
src="https://github.com/user-attachments/assets/4df0ca29-53d8-4926-80db-1cafb705faad"
/> |

## Review instructions

1. Open the design system
[Select](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/components/select),
[Combobox](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/components/combobox)
and
[Multi-select](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/fragments/multi-select)
examples.
2. Compare the closed surfaces and corner radii with a default Button,
then check hover, focus and open states.
3. Select one or two multi-select items. Check that a single row remains
the same height as the empty control, the caret stays aligned and the
chip field remains distinct. Add enough items to check wrapping.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary

* **Style**
* Default buttons display a raised surface with a subtle shadow and
size-appropriate rounded corners.
* Select and combobox triggers share a raised, card-like appearance,
with consistent shadows and rounded corners at small sizes. Invalid
select triggers display a border.
* Empty multi-select controls use a raised surface, while controls with
selected values use a field-style surface.
* Small and tiny multi-select controls have updated spacing and sizing
in empty and selected states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-28 14:26:47 +10:00
Danny White 9f5b5ea6a7 fix(ui): standardise disclosure focus rings (#49660) 
## What kind of change does this PR introduce?

Bug fix and design-system accessibility update.

## What is the current behavior?

Accordion and collapsible triggers do not consistently use the shared
focus treatment. Accordion focus can animate from the browser outline,
while call sites need to manage radius and focus geometry themselves.

## What is the new behavior?

Bare accordion and collapsible triggers use the rounded `focus-inset`
treatment by default, positioned 2px inside the control. Interactive
children composed with `asChild`, such as a standard `Button`, retain
their own focus treatment. Accordion triggers include a small default
horizontal hit-area padding (`px-2`) and retain an explicit outer-ring
option for standalone controls. The focus indicator is not animated.

Focused tests cover the default and opt-out accordion variants.

| Before | After |
| --- | --- |
| <img width="1792" height="384" alt="CleanShot 2026-09-07 at 15 40
23@2x"
src="https://github.com/user-attachments/assets/8c8fd99a-3669-465a-a7b2-d272ec92dec7"
/> | <img width="1784" height="498" alt="CleanShot 2026-09-07 at 15 39
52@2x"
src="https://github.com/user-attachments/assets/7a0b7de1-a4bc-48cf-b9fc-3421618806b9"
/> |
| <img width="1564" height="360" alt="CleanShot 2026-09-07 at 15 35
11@2x"
src="https://github.com/user-attachments/assets/34945180-e671-4dc2-981a-4c683d08f221"
/> | <img width="1552" height="378" alt="CleanShot 2026-09-07 at 15 36
19@2x"
src="https://github.com/user-attachments/assets/09f2c030-9ffb-4fa5-bf63-5e172326e8ef"
/> |

## Visual impact

Most call sites should look the same at rest. The exceptions are
accordion triggers that did not already set their own horizontal
padding: they pick up the new default `px-2`, `rounded-md`, and lose the
old blanket `transition-all` on the trigger (chevron rotation is
unchanged).

| Resting layout change | Why |
| --- | --- |
| Accordion triggers without an explicit `px-*` | Inherit new default
`px-2` and `rounded-md` |
| Accordion triggers with their own `px-*` | Unchanged (call-site
padding wins) |
| Collapsible triggers | Focus ring only; spacing comes from the child
element |
| Direct `focus-inset` users (table rows, etc.) | Focus ring only |

## To test

Use Tab to focus each disclosure trigger. Confirm the focus outline is
rounded, sits 2px inside the trigger, and appears immediately without a
dark flash.

Previews:
[design-system](https://design-system-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app)
·
[studio-staging](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app)
·
[docs](https://docs-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app)
·
[www](https://zone-www-dot-com-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app)

### Design system

-
[Accordion](https://design-system-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/design-system/docs/components/accordion)
-
[Collapsible](https://design-system-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/design-system/docs/components/collapsible)

### Studio (focus-only unless noted)

- [Account → Access tokens → **New
token**](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/dashboard/account/tokens):
permission category accordions (already `px-4`)
- [Database →
Roles](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/dashboard/project/_/database/roles):
role row collapsibles
- [Observability → Query
performance](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/dashboard/project/_/observability/query-performance):
index suggestion accordions (already `px-4`)
- [Settings → JWT
(legacy)](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/dashboard/project/_/settings/jwt/legacy):
migration help collapsible

### Docs

- Docs mobile nav (narrow viewport): accordion sections **(resting
layout: +px-2)**

### WWW

- [Pricing →
FAQs](https://zone-www-dot-com-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/pricing):
FAQ accordions **(resting layout: +px-2)**
- WWW mobile nav (narrow viewport): menu accordions **(resting layout:
+px-2)**

### Not worth opening manually

Sheets, modals, error fallbacks, and replication/cron/integration
advanced-settings accordions inherit the focus fix but need specific
flows or failure states to reach. Error-state troubleshooting accordions
(`TroubleshootingSections`) also gain **+px-2** when visible.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## New Features
- Accordion triggers now use an inset focus style by default, with an
option to use the standard ring style.
- Accordion and collapsible trigger styling can be customized more
flexibly.

## Accessibility
- Focus indicators appear consistently without flashing browser
defaults.
- Focus transitions are limited to visual properties that preserve
immediate keyboard focus visibility.

## Documentation
- Updated accessibility guidance explains inset focus behavior and
transition considerations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-07 16:59:40 +10:00
Danny White c8aca8d3a0 chore(design-system): standardise keyboard focus rings (#41575) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

UI / design-system consistency (accessibility).

## What is the current behavior?

Keyboard focus rings are inconsistent across Studio and `packages/ui`:

- Custom Button uses thick `outline` with per-variant colours (brand /
grey / destructive / warning)
- Form controls use muted grey rings (`ring-background-control`)
- Tabs / NavMenu / Radio use soft brand `ring-ring`
- Studio `.inset-focus` uses dark green `outline-brand-600`

Related: [DEPR-354](https://linear.app/supabase/issue/DEPR-354).

## What is the new behavior?

One shared focus recipe, exposed as Tailwind `@utility` classes in
`packages/config/css/utilities.css`:

| Utility | Use when |
| --- | --- |
| `focus-ring` | Buttons, inputs, most controls (offset ring) |
| `focus-inset` | Dense/flush surfaces such as interactive table rows
(renamed from `inset-focus`) |

```txt
# focus-ring
outline-hidden
focus-visible:ring-2
focus-visible:ring-ring
focus-visible:ring-offset-2
focus-visible:ring-offset-background
```

Applied on Button, shadcn form controls, Menu/NavMenu, Command palette
trigger, Studio table rows, and related call sites. Documented in the
design-system accessibility docs. Variants do not change focus ring
colour.

When the ring must appear on a different element than the focused one
(e.g. Menu + ProductMenu `Link` via `group-focus-visible`, or InputGroup
via `:has()`), keep an explicit ring stack. The utilities bake in
`:focus-visible` on the same element.

## Additional context

**Out of scope**

- Full `packages/ui` / Studio / www sweep
- Legacy Studio form-group green box-shadow cleanup
- ESLint rule for bare `outline-none`

## Test plan

Prefer Safari (“hard mode” for `tabIndex`). Expect one soft brand ring
everywhere: not grey, not solid green outline.

### Design system

- [ ]
[Accessibility](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/accessibility):
recipe docs match what you see
- [ ]
[Button](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/button):
Tab primary / default / danger; same ring colour
- [ ] [Table → Row-level
navigation](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/table#row-level-navigation):
Tab an interactive row; inset outline (`focus-inset`) sits inside the
row

### Studio

- [ ] **Org home → table view** (`/organizations/_` or org projects):
switch to the table layout, Tab onto a project row; inset outline sits
inside the row (list/card view uses CardButton, not `focus-inset`)
- [ ] **Project sidebar** (Database, Auth, Storage, …): Tab the main
product nav links; ring follows the focused item (not the nested section
menus like Tables / Roles)
- [ ] **Storage → Files**: Tab a bucket row; same inset outline as org
table rows
- [ ] **Project Settings → General** (or Compute and Disk): Tab through
inputs, checkboxes, switches, selects; same offset ring, no ring on
mouse click
- [ ] **Header ⌘K** (desktop width): Tab to the search control after
Feedback; same soft brand `focus-ring` (was a thicker
`ring-border-strong` before)
- [ ] **Table Editor or SQL Editor tabs**: focus a tab, Tab to × if
active; close shows a ring
- [ ] **Light + dark**: ring stays visible against both backgrounds
 2026-07-22 12:10:07 -04:00
Saxon Fletcher 2d745edfb4 Landing page agent focus (#47989) 2026-07-21 14:30:36 +10:00
Saxon FletcherandClaude Opus 4.8 fb02182e86 Color system (#47288) 
## 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>
 2026-07-03 15:00:43 +10:00
Ivan VasilovandClaude Opus 4.7 640869da47 chore: Clean up remaining Tailwind code (#45925) 
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 -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](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) <noreply@anthropic.com>
 2026-05-15 13:26:42 +02:00
Ivan Vasilov 0abe792889 chore: Migrate the main Tailwind JS config to CSS (#45686) 
This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.

Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.

How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
  * Tweaked border, tab, and selection visuals across components.

* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.

* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-05-13 13:14:58 +02:00