Add gradient color to Button Component

[lokeswaran-aj]

Description

1. What is this PR about (link the issue and add a short description)
   This PR contains the changes for the Gradient color for the button component

Here is an example of share button with gradient color:

Screen.Recording.2023-03-28.at.11.38.32.PM.mov

Steps for reproduction

1. Create a Button component
2. set color="gradient" in Button Component

Code Review

• hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 5de6)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env.example and the builder/env-check.js if mandatory

[vercel]

@lokeswaran-aj is attempting to deploy a commit to the webstudio-is Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
webstudio-builder	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 30, 2023 at 3:37PM (UTC)

[rpominov]

Please also add gradient here https://github.com/webstudio-is/webstudio-builder/blob/1163d2c8634cb588b0cb9393b7b2c48e031a42c9/packages/design-system/src/components/button.stories.tsx#L24-L31

[kof]

Problem is that if is with that specific color, kinda not very useful function, wouldn't use it at least in case of the gradient base

…

On Wed, Mar 29, 2023, 8:09 AM Roman Pominov ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In packages/design-system/src/components/button.tsx <#1316 (comment)> : > + if (base === "$colors$backgroundGradientPrimary") { + return `linear-gradient(${overlay}, ${overlay}), ${base}`; + } This solution seems ok to me, except we should replace base === "$colors$backgroundGradientPrimary" with base === theme.colors.backgroundGradientPrimary. Logic with this solution: - backgroundColors applies two colors as a background, and does it using a gradient hack - but if one of the colors is a gradient itself, it should put it as is ------------------------------ Alternative solution: in perColorStyle do something like: background: variant === "gradient" ? `linear-gradient(${overlay}, ${overlay}), ${base}` : backgroundColors( backgrounds[variant], theme.colors.backgroundButtonHover ) Not sure which one is better, both seem ok to me. — Reply to this email directly, view it on GitHub <#1316 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAM4WEBOEQB3U5RGPKTW4LW6PGZ3ANCNFSM6AAAAAAWK5KSAU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[rpominov]

Problem is that if is with that specific color, kinda not very useful
function, wouldn't use it at least in case of the gradient base

Yeah, let's do variant === "gradient" ? then

[kof]

merged, thank you!