From 4529c1430bb1f520b0657e6cf9396de1f06be526 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 12 Dec 2024 12:37:44 +0000
Subject: [PATCH] fix: take transitioned gradient from legacy high priority
 button

---
 src/core/styles/buttons.css    |  4 ++--
 src/core/styles/properties.css | 11 +++++++++++
 tailwind.config.js             |  1 +
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css
index 44ea53918..d5177ae5f 100644
--- a/src/core/styles/buttons.css
+++ b/src/core/styles/buttons.css
@@ -28,11 +28,11 @@
   }
 
   .ui-button-priority-base {
-    @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base;
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right transition-[background-position] disabled:bg-none ui-button-disabled-base;
   }
 
   .ui-theme-dark .ui-button-priority-base {
-    @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base-dark;
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
   }
 
   .ui-button-primary-base {
diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css
index 0dbd6db0b..cca6e436c 100644
--- a/src/core/styles/properties.css
+++ b/src/core/styles/properties.css
@@ -155,6 +155,17 @@
       var(--color-red-orange) 92.73%
     );
 
+    --gradient-priority-button: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-orange-800) 50%
+    );
+
     /* Used for smooth transitions from gradient to non-gradient backgrounds */
     --gradient-transparent: linear-gradient(
       0deg,
diff --git a/tailwind.config.js b/tailwind.config.js
index f20345ab0..6a996529e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -285,6 +285,7 @@ module.exports = {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
         "gradient-hot-pink": "var(--gradient-hot-pink)",
+        "gradient-priority-button": "var(--gradient-priority-button)",
       },
       borderRadius: {
         md: "0.1875rem",