From dbf88d82b73450e16fb78a74bf177eaed9cab113 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Fri, 20 Sep 2024 01:44:12 +0800
Subject: [PATCH] use css vars for button colors (#399)

---
 frontend/app/element/button.less | 70 ++++++++++++++++----------------
 frontend/app/theme.less          | 20 ++++-----
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/frontend/app/element/button.less b/frontend/app/element/button.less
index 96d2da031..dc383dbe2 100644
--- a/frontend/app/element/button.less
+++ b/frontend/app/element/button.less
@@ -1,5 +1,5 @@
-/* Copyright 2024, Command Line Inc. */
-/* SPDX-License-Identifier: Apache-2.0 */
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
 
 .button {
     // override default button appearance
@@ -26,41 +26,41 @@
 
     &.solid {
         &.green {
-            color: #000000;
+            color: var(--button-text-color);
             background-color: var(--accent-color);
-            border: 1px solid #29f200;
+            border: 1px solid var(--button-green-border-color);
             &:hover {
-                color: #000000;
-                background-color: #29f200;
+                color: var(--button-text-color);
+                background-color: var(--button-green-border-color);
             }
         }
 
         &.grey {
-            background-color: rgba(255, 255, 255, 0.04);
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            background-color: var(--button-grey-bg);
+            border: 1px solid var(--button-grey-bg);
             color: var(--main-text-color);
             &:hover {
                 color: var(--main-text-color);
-                background-color: rgba(255, 255, 255, 0.09);
+                background-color: var(--button-grey-hover-bg);
             }
         }
 
         &.red {
-            background-color: #cc0000;
-            border: 1px solid #fc3131;
+            background-color: var(--button-red-bg);
+            border: 1px solid var(--button-red-border-color);
             color: var(--main-text-color);
             &:hover {
-                background-color: #f93939;
+                background-color: var(--button-red-hover-bg);
             }
         }
 
         &.yellow {
-            color: #000000;
-            background-color: #c4a000;
-            border: 1px solid #fce94f;
+            color: var(--button-text-color);
+            background-color: var(--button-yellow-bg);
+            border: 1px solid var(--button-yellow-hover-bg);
             &:hover {
-                color: #000000;
-                background-color: #fce94f;
+                color: var(--button-text-color);
+                background-color: var(--button-yellow-hover-bg);
             }
         }
     }
@@ -71,14 +71,14 @@
             color: var(--accent-color);
             border: 1px solid var(--accent-color);
             &:hover {
-                color: #29f200;
-                border: 1px solid #29f200;
+                color: var(--button-green-border-color);
+                border: 1px solid var(--button-green-border-color);
             }
         }
 
         &.grey {
-            border: 1px solid rgba(255, 255, 255, 0.6);
-            color: rgba(255, 255, 255, 0.6);
+            border: 1px solid var(--button-grey-outlined-color);
+            color: var(--button-grey-outlined-color);
             &:hover {
                 color: var(--main-text-color);
                 border: 1px solid var(--main-text-color);
@@ -86,20 +86,20 @@
         }
 
         &.red {
-            border: 1px solid #cc0000;
-            color: #cc0000;
+            border: 1px solid var(--button-red-bg);
+            color: var(--button-red-bg);
             &:hover {
-                color: #ff3c3c;
-                border: 1px solid #ff3c3c;
+                color: var(--button-red-outlined-color);
+                border: 1px solid var(--button-red-outlined-color);
             }
         }
 
         &.yellow {
-            color: #c4a000;
-            border: 1px solid #c4a000;
+            color: var(--button-yellow-bg);
+            border: 1px solid var(--button-yellow-bg);
             &:hover {
-                color: #fce94f;
-                border: 1px solid #fce94f;
+                color: var(--button-yellow-hover-bg);
+                border: 1px solid var(--button-yellow-hover-bg);
             }
         }
     }
@@ -115,13 +115,13 @@
             border: none;
             color: var(--accent-color);
             &:hover {
-                color: #29f200;
+                color: var(--button-green-border-color);
             }
         }
 
         &.grey {
             border: none;
-            color: rgba(255, 255, 255, 0.6);
+            color: var(--button-grey-outlined-color);
             &:hover {
                 color: var(--main-text-color);
             }
@@ -129,17 +129,17 @@
 
         &.red {
             border: none;
-            color: #cc0000;
+            color: var(--button-red-bg);
             &:hover {
-                color: #fc3131;
+                color: var(--button-red-border-color);
             }
         }
 
         &.yellow {
             border: none;
-            color: #c4a000;
+            color: var(--button-yellow-bg);
             &:hover {
-                color: #fce94f;
+                color: var(--button-yellow-hover-bg);
             }
         }
     }
diff --git a/frontend/app/theme.less b/frontend/app/theme.less
index 87b61c6a8..9af1cf070 100644
--- a/frontend/app/theme.less
+++ b/frontend/app/theme.less
@@ -133,17 +133,17 @@
     --term-cursor-accent: #000000;
 
     // button colors
-    --button-focus-border-color: rgba(88, 193, 66, 0.5);
-    --button-green-text-color: var(--term-black);
+    --button-text-color: #000000;
     --button-green-bg: var(--term-green);
-    --button-green-border-color: rgb(26, 52, 21);
-    --button-grey-text-color: var(--main-text-color);
+    --button-green-border-color: #29f200;
     --button-grey-bg: rgba(255, 255, 255, 0.04);
+    --button-grey-hover-bg: rgba(255, 255, 255, 0.09);
     --button-grey-border-color: rgba(255, 255, 255, 0.1);
-    --button-red-text-color: var(--main-text-color);
-    --button-red-bg: var(--term-red);
-    --button-red-border-color: #ff1818;
-    --button-yellow-text-color: var(--term-black);
-    --button-yellow-bg: var(--term-yellow);
-    --button-yellow-border-color: #fbd93f;
+    --button-grey-outlined-color: rgba(255, 255, 255, 0.6);
+    --button-red-bg: #cc0000;
+    --button-red-hover-bg: #f93939;
+    --button-red-border-color: #fc3131;
+    --button-red-outlined-color: #ff3c3c;
+    --button-yellow-bg: #c4a000;
+    --button-yellow-hover-bg: #fce94f;
 }