From 7c3e53e0f26ccb28ec76694118fd2e144396f509 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Tue, 19 Apr 2022 17:04:34 +0800
Subject: [PATCH] fix(console): button hover and pressed state colors

---
 .../src/components/Button/index.module.scss   | 22 +++++++++++--------
 packages/console/src/scss/_colors.scss        | 20 ++++++++---------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss
index 4ffc19bd4..d9605e1e6 100644
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@@ -78,7 +78,7 @@
       background: var(--color-pressed);
     }
 
-    &:not(:disabled):hover {
+    &:not(:disabled):not(:active):hover {
       background: var(--color-hover);
     }
   }
@@ -97,11 +97,11 @@
     }
 
     &:active {
-      background: var(--color-pressed_primary);
+      background: var(--color-primary-pressed);
     }
 
-    &:not(:disabled):hover {
-      background: var(--color-hover-primary);
+    &:not(:disabled):not(:active):hover {
+      background: var(--color-primary-hover);
     }
   }
 
@@ -115,11 +115,15 @@
     }
 
     &:focus {
-      outline: 3px solid var(--color-focused-error);
+      outline: 3px solid var(--color-danger-focused);
     }
 
-    &:not(:disabled):hover {
-      background: var(--color-error);
+    &:active {
+      background: var(--color-danger-pressed);
+    }
+
+    &:not(:disabled):not(:active):hover {
+      background: var(--color-danger-hover);
     }
   }
 
@@ -143,7 +147,7 @@
       background: var(--color-pressed-variant);
     }
 
-    &:not(:disabled):hover {
+    &:not(:disabled):not(:active):hover {
       background: var(--color-hover-variant);
     }
   }
@@ -166,7 +170,7 @@
       background: var(--color-pressed-variant);
     }
 
-    &:not(:disabled):hover {
+    &:not(:disabled):not(:active):hover {
       background: var(--color-hover-variant);
     }
   }
diff --git a/packages/console/src/scss/_colors.scss b/packages/console/src/scss/_colors.scss
index 4289c8185..29defcfb2 100644
--- a/packages/console/src/scss/_colors.scss
+++ b/packages/console/src/scss/_colors.scss
@@ -120,6 +120,10 @@
   --color-surface-variant: var(--color-neutral-variant-90);
   --color-on-surface-variant: var(--color-neutral-variant-30);
   --color-outline: var(--color-neutral-variant-50);
+  --color-primary-hover: var(--color-primary-50);
+  --color-primary-pressed: var(--color-primary-30);
+  --color-danger-hover: var(--color-error-50);
+  --color-danger-pressed: var(--color-error-30);
   --color-text: var(--color-neutral-10);
   --color-icon: var(--color-neutral-50);
   --color-caption: var(--color-neutral-50);
@@ -140,11 +144,7 @@
   --shadow-light-s3: 0 4px 16px rgba(66, 41, 159, 16%);
 
   // Client specific variables
-  --color-hover-primary: #5832e1; // P40 + 8% N10
-  --color-pressed_primary: #5531d8; // P40 + 12% N10
-  --color-hover-danger: #ad1b1b; // ER40 + 8% N10
-  --color-pressed_danger: #a71b1b; // ER40 + 12% N10
-  --color-focused-danger: rgba(186, 27, 27, 16%); // 16% ER40
+  --color-danger-focused: rgba(186, 27, 27, 16%); // 16% ER40
 }
 
 @mixin dark-theme {
@@ -269,6 +269,10 @@
   --color-surface-variant: var(--color-neutral-variant-90);
   --color-on-surface-variant: var(--color-neutral-variant-30);
   --color-outline: var(--color-neutral-variant-50);
+  --color-primary-hover: var(--color-primary-60);
+  --color-primary-pressed: var(--color-primary-80);
+  --color-danger-hover: var(--color-error-60);
+  --color-danger-pressed: var(--color-error-80);
   --color-text: var(--color-neutral-10);
   --color-icon: var(--color-neutral-50);
   --color-caption: var(--color-neutral-50);
@@ -289,9 +293,5 @@
   --shadow-light-s3: 0 4px 16px rgba(66, 41, 159, 16%);
 
   // Client specific variables
-  --color-hover-primary: #cec3fe; // P40 + 8% N10
-  --color-pressed_primary: #cfc5fe; // P40 + 12% N10
-  --color-hover-danger: #feb9af; // ER40 + 8% N10
-  --color-pressed_danger: #febcb2; // ER40 + 12% N10
-  --color-focused-danger: rgba(255, 180, 169, 16%); // 16% ER40
+  --color-danger-focused: rgba(255, 180, 169, 16%); // 16% ER40
 }