## Problem
- We still use/maintain the legacy theming even though we moved to
Shadcn
- We have two themes list with similar code
## Solution
- Migrate some components to `cva` and `cn` instead of `styleHandler`
- Remove redundant `themes` in favor of `singleThemes`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized theme selection across the app so theme menus
consistently offer the same light/dark/system options, including
dropdowns, navigation menus, and command menus.
* **Refactor**
* Refreshed styling for multiple shared UI components (menus, tabs, side
panels, loading indicators, icons, and modal dialogs) to improve
consistency while preserving visual behavior.
* **Chores**
* Improved the UI patterns CI “validate exports” check for clearer
failure output when exports change unexpectedly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## 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?
Bug fix (accessibility improvement in LayoutHeader)
## What is the current behavior?
Icon-only buttons do not have explicit accessible names for screen
readers.
## What is the new behavior?
All icon-only buttons now have explicit accessible names using visually
hidden text (sr-only), ensuring proper screen reader support.
## Additional context
Tooltip text is preserved for visual users.
No visual changes were introduced.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility**
* Added hidden screen-reader labels to multiple toolbar and menu buttons
(Settings, Advisor Center, AI Assistant, SQL Editor, Help) so icons are
announced by assistive technologies, improving navigation and
discoverability across the studio interface.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45790)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## 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?
- Remove queue operations from feature preview into settings
- Refactor dashboard settings
- Resolves DEPR-434
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Dashboard settings panel in Account preferences with toggles for
Inline Editor and Queue Operations; “Dashboard” added to project
Configuration.
* **Removed**
* Old Inline Editor settings UI and the Queue Operations feature-preview
UI removed.
* **Refactor**
* Consolidated dashboard preferences into a single settings surface;
banners and actions now navigate to preferences; account/preferences
layouts and back-navigation behavior adjusted for platform vs
self-hosted.
* **Tests**
* Added tests for settings UI, menu generation, redirects, and
local-storage.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## 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?
Adds a tooltip for the account settings button
## What is the current behavior?
It has no tooltip
Closes#44524
## What is the new behavior?
Has Tooltip
## Additional context
<img width="552" height="167" alt="Screenshot 2026-04-03 at 22 21 35"
src="https://github.com/user-attachments/assets/e41caee7-e688-4bd9-8823-0c47133c5470"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved interface usability by adding descriptive tooltips to
dropdown menu triggers in the studio. The settings dropdown trigger now
displays a "Settings" tooltip, while the user account dropdown trigger
displays "Account settings" to provide clearer guidance, help users
navigate key interface controls, and enhance the overall user
experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
## 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?
Bug fix / UI Polish
## What is the current behavior?
Interactive menu items in the User Account dropdown (top right profile
picture) use the `default` (arrow) cursor. This makes it less intuitive
that these items are clickable.
Closes#42360
## What is the new behavior?
This PR adds `cursor-pointer` to all interactive menu items in both the
[UserDropdown](cci:1://file:///home/erik/Documents/supabase/apps/studio/components/interfaces/UserDropdown.tsx:27:0-140:1)
(platform) and
[LocalDropdown](cci:1://file:///home/erik/Documents/supabase/apps/studio/components/interfaces/LocalDropdown.tsx:21:0-68:1)
(local/self-hosted) components. This provides correct visual feedback to
users when hovering over:
- Account preferences
- Feature previews
- Command menu (local)
- Theme selections
- Logout
## Additional context
Verified the changes locally for both
[LocalDropdown](cci:1://file:///home/erik/Documents/supabase/apps/studio/components/interfaces/LocalDropdown.tsx:21:0-68:1)
and
[UserDropdown](cci:1://file:///home/erik/Documents/supabase/apps/studio/components/interfaces/UserDropdown.tsx:27:0-140:1).
### Screenshots
Before:
<img width="262" height="301" alt="image"
src="https://github.com/user-attachments/assets/0c985b1b-065c-49d4-94d4-8dd07fa0ff67"
/>
After:
<img width="262" height="301" alt="image"
src="https://github.com/user-attachments/assets/e2ade471-0a84-4405-8e2c-8f757f5dfaf4"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Cursor-pointer indicators added to interactive dropdown items across
the app (account settings, feature previews, command menu entries, theme
selection radios, logout), improving hover feedback and visual
consistency for menu interactions.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Gildas Garcia
