feat: add gradient color picker with full controller functionality

[Rish-it]

Add New Gradient Component with Unified Gradient Picker Functionality

Description

This PR implements a complete gradient color picker, allowing users to select and apply gradient colors. It adds a unified gradient component with full editing capabilities, preset gradients, and integration into the existing color picker.

Additionally, it resolves an unnecessary animation on the import project button that caused UI distractions.

Related Issues

Closes #2239 – [bug] Unable to select or apply a gradient color

Type of Change

• [x] Bug fix
• [x] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other

Features Added

Gradient Color Picker

• Gradient Tab: New tab added to the color picker UI.
• Preset Gradients: Includes a grid of 21 preset gradients.
• Editor Features:
  • Draggable gradient stops
  • Support for linear, radial, conic, angular, and diamond types
  • Flip and rotate controls
  • Add/delete gradient stops
  • Per-stop color picker integration
  • Real-time gradient preview and valid CSS output

Bug Fixes

• Removed unnecessary animation from the import button in the dropdown menu.

Technical Implementation

• New Gradient.tsx component in packages/ui
• Gradient updates handled via use-gradient-update.ts
• Integrated with backgroundImage in editor engine
• Fully typed with TypeScript
• Removed old gradient files and cleaned up imports

Screenshots (if applicable)

https://github.com/user-attachments/assets/15618208-cc8c-442a-adf7-c40f0885cb39

---

[!IMPORTANT] Adds a new gradient color picker with full functionality and fixes a UI animation bug.

• Gradient Color Picker:
  • Adds Gradient.tsx component for gradient color selection with draggable stops, type support, and real-time preview.
  • Integrates gradient picker into color-picker.tsx with a new "Gradient" tab and preset gradients.
  • Implements use-gradient-update.ts for handling gradient updates in the editor.
• Bug Fix:
  • Removes unnecessary animation from the import button in project-breadcrumb.tsx.

^{This description was created by for ca3837198783620ded488c28e5b99f0963044377. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[Rish-it]

Hey @drfarrell the implementation might not be an exact match with the mockups you shared, but I’ve done my best to get it as close as possible for now. I’ll keep refining it in future iterations. lmk you like it!

[Kitenite]

@drfarrell is this waiting for a review from my side?

[Rish-it]

@drfarrell made some changes drop your review

[drfarrell]

Hey @Rish-it sorry for the delay – been needing to tackle some other things but excited to check this out soon!

[Rish-it]

@Kitenite This PR is almost ready I just need to push two local commits. wasn't able to test things thoroughly, ran into some Docker issues earlier:

• [x] Focused gradient tab handling
• [x] Opacity testing

I'll also take a look at your concern and make the final changes by EOD.

[drfarrell]

@Rish-it do you need another review of this?

[Rish-it]

@Rish-it do you need another review of this?

I’ve made all the final changes you mentioned in the last review, as well as the checkpoint from @Kitenite regarding the gradient removal. I think we’re good to merge this for now I’ll keep an eye out and address any bugs that may come up.

[Kitenite]

@Rish-it , I tested this, while it simulates the gradient removal correctly in the DOM, it doesn't seems to write to code well. You can see after removing the gradient and refreshing, it seems to write bg- into code but leaves the gradient code alone.

Example to reproduce:

1. Apply gradient
2. Remove gradient
3. Refresh frame
4. Inspect code

[Kitenite]

Added custom twMerge functionality to overwrite bg- in general.