From fbc401c4d4a1d311cb4e3da3136241c334440180 Mon Sep 17 00:00:00 2001
From: Lokeswaran Aruljothi <74011196+lokeswaran-aj@users.noreply.github.com>
Date: Thu, 30 Mar 2023 21:09:02 +0530
Subject: [PATCH] Add gradient color to Button Component (#1316)

## 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:


https://user-images.githubusercontent.com/74011196/228329202-54f1b143-cc99-47d5-bd17-decf170fbe82.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

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

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>
---
 .../app/builder/features/topbar/share.tsx     |  4 ++-
 .../src/components/button.stories.tsx         |  1 +
 .../design-system/src/components/button.tsx   | 26 +++++++++++++------
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/apps/builder/app/builder/features/topbar/share.tsx b/apps/builder/app/builder/features/topbar/share.tsx
index 07804a7987..0e8a6e821d 100644
--- a/apps/builder/app/builder/features/topbar/share.tsx
+++ b/apps/builder/app/builder/features/topbar/share.tsx
@@ -31,7 +31,9 @@ export const ShareButton = ({ projectId }: { projectId: Project["id"] }) => {
       <FloatingPanelAnchor>
         <Tooltip side="bottom" content={tooltipContent}>
           <FloatingPanelPopoverTrigger asChild>
-            <Button disabled={isShareDisabled}>Share</Button>
+            <Button disabled={isShareDisabled} color="gradient">
+              Share
+            </Button>
           </FloatingPanelPopoverTrigger>
         </Tooltip>
       </FloatingPanelAnchor>
diff --git a/packages/design-system/src/components/button.stories.tsx b/packages/design-system/src/components/button.stories.tsx
index 7f759584a7..88ae95fdc5 100644
--- a/packages/design-system/src/components/button.stories.tsx
+++ b/packages/design-system/src/components/button.stories.tsx
@@ -28,6 +28,7 @@ const colors: ReadonlyArray<ComponentProps<typeof ButtonComponent>["color"]> = [
   "positive",
   "ghost",
   "dark",
+  "gradient",
 ];
 
 const states: ReadonlyArray<ComponentProps<typeof ButtonComponent>["state"]> = [
diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx
index e3ae7940de..4d6964be32 100644
--- a/packages/design-system/src/components/button.tsx
+++ b/packages/design-system/src/components/button.tsx
@@ -19,6 +19,7 @@ const colors = [
   "neutral",
   "ghost",
   "dark",
+  "gradient",
 ] as const;
 
 type ButtonColor = (typeof colors)[number];
@@ -32,6 +33,7 @@ const backgrounds: Record<ButtonColor, string> = {
   positive: theme.colors.backgroundSuccessMain,
   ghost: theme.colors.backgroundHover,
   dark: theme.colors.backgroundTopbar,
+  gradient: theme.colors.backgroundGradientPrimary,
 };
 
 const foregrounds: Record<ButtonColor, string> = {
@@ -41,6 +43,7 @@ const foregrounds: Record<ButtonColor, string> = {
   neutral: theme.colors.foregroundMain,
   ghost: theme.colors.foregroundMain,
   dark: theme.colors.foregroundContrastMain,
+  gradient: theme.colors.foregroundContrastMain,
 };
 
 // CSS supports multiple gradients as backgrounds but not multiple colors
@@ -52,10 +55,13 @@ const perColorStyle = (variant: ButtonColor) => ({
   color: foregrounds[variant],
 
   "&[data-state=auto]:hover, &[data-state=hover]": {
-    background: backgroundColors(
-      backgrounds[variant],
-      theme.colors.backgroundButtonHover
-    ),
+    background:
+      variant === "gradient"
+        ? `linear-gradient(${theme.colors.backgroundButtonHover}, ${theme.colors.backgroundButtonHover}), ${backgrounds[variant]}`
+        : backgroundColors(
+            backgrounds[variant],
+            theme.colors.backgroundButtonHover
+          ),
   },
 
   "&[data-state=auto]:focus-visible, &[data-state=focus]": {
@@ -64,10 +70,13 @@ const perColorStyle = (variant: ButtonColor) => ({
   },
 
   "&[data-state=auto]:active, &[data-state=pressed]": {
-    background: backgroundColors(
-      backgrounds[variant],
-      theme.colors.backgroundButtonPressed
-    ),
+    background:
+      variant === "gradient"
+        ? `linear-gradient(${theme.colors.backgroundButtonPressed}, ${theme.colors.backgroundButtonPressed}), ${backgrounds[variant]}`
+        : backgroundColors(
+            backgrounds[variant],
+            theme.colors.backgroundButtonPressed
+          ),
   },
 
   "&[data-state=disabled]": {
@@ -101,6 +110,7 @@ const StyledButton = styled("button", {
       neutral: perColorStyle("neutral"),
       ghost: perColorStyle("ghost"),
       dark: perColorStyle("dark"),
+      gradient: perColorStyle("gradient"),
     },
   },