From 9c548b8af1cfffe7579a8c3dc4a44dfd75b2819a Mon Sep 17 00:00:00 2001
From: Sarin Udompanish <sarin.udompanish@refinitiv.com>
Date: Tue, 14 Dec 2021 17:25:43 +0700
Subject: [PATCH] fix(solar-theme): add overrided active styles of button

---
 .../src/custom-elements/ef-button.less        | 25 +++++++++++++++++++
 .../src/variants/charcoal/variables.less      |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/solar-theme/src/custom-elements/ef-button.less b/packages/solar-theme/src/custom-elements/ef-button.less
index f61b037833..7339403774 100644
--- a/packages/solar-theme/src/custom-elements/ef-button.less
+++ b/packages/solar-theme/src/custom-elements/ef-button.less
@@ -20,4 +20,29 @@
       });
     }
   }
+
+  // WORKAROUND: Override styles from hover state that have the wrong orders.
+  &:not([readonly]):active {
+    background-color: @button-pressed-background-color;
+    color: @button-pressed-text-color;
+    box-shadow: @button-pressed-box-shadow;
+  }
+  &[cta] {
+    &:not([readonly]):active {
+      background-color: @button-cta-background-color;
+      color: @button-cta-text-color;
+    }
+  }
+  &[toggles] {
+    &:not([readonly]):active {
+      background-color: @button-toggle-background-color;
+      color: @button-toggle-text-color;
+    }
+  }
+  &[toggles][active] {
+    &:not([readonly]):active {
+      background-color: @button-toggle-active-background-color;
+      color: @button-toggle-active-text-color;
+    }
+  }
 }
diff --git a/packages/solar-theme/src/variants/charcoal/variables.less b/packages/solar-theme/src/variants/charcoal/variables.less
index ca23f9a7ac..af805f519b 100644
--- a/packages/solar-theme/src/variants/charcoal/variables.less
+++ b/packages/solar-theme/src/variants/charcoal/variables.less
@@ -24,7 +24,7 @@
 // Buttons
 @button-background-image                          : linear-gradient(fade(@color-white, 10%) 10%,fade(@color-white, 0%) 100%);
 @button-cta-background-image                      : @button-background-image;
-@button-cta-pressed-background-image              : @button-background-image;
+@button-cta-pressed-background-image              : linear-gradient(fade(@color-black, 30%) 0%,fade(@color-black, 0%) 100%);
 @button-cta-pressed-background-color              : @button-cta-background-color;
 @button-pressed-background-image                  : @button-background-image;
 @button-toggle-active-background-image            : linear-gradient(fade(@color-white, 0%) 0%,fade(@color-white, 10%) 90%);