fix: take transitioned gradient from legacy high priority button

ably · Dec 12, 2024 · 4529c14 · 4529c14
1 parent 3a84277
commit 4529c14
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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",