From 1f52c3625af99265ead86bd166ec401b121ad540 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 9 Jun 2025 12:35:40 +0900
Subject: [PATCH] [Refactor] Adjust color variables. Add some comments.

---
 src-ui/app/_index_css/variables.css                    | 10 +++++++---
 .../SupportUsContainer.module.scss                     |  6 +++---
 .../supporters_wrapper/SupportersWrapper.module.scss   |  4 ++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src-ui/app/_index_css/variables.css b/src-ui/app/_index_css/variables.css
index 3ae80370..97a43d1c 100644
--- a/src-ui/app/_index_css/variables.css
+++ b/src-ui/app/_index_css/variables.css
@@ -18,12 +18,13 @@
 
     --primary_600_color_44: #36877744;
 
+    /* primary_300_color 61b4a7 as standard */
     --sent_400_color: #6197b4;
-    --sent_300_color: #6197b4;
     --received_300_color: #a861b4;
+
     --error_bc_color: #bb4448;
     --error_bc_active_color: #9c3938;
-    --success_bc_color: #368777;
+    --success_bc_color: --primary_600_color;
     --warning_color: #cb944f;
     --warning_bc_color: #cf7b1b;
 
@@ -60,6 +61,8 @@
     --dark_1000_color_aa: #151517aa;
     --dark_1000_color_dd: #151517dd;
 
+    /*sent_400_color + #000 10% = */
+    --supporters_color_fuwa: #5788a2;
 
     --title_bar_height: 2rem;
     --main_page_topbar_height: 4.8rem;
@@ -68,4 +71,5 @@
 
     --font_family: "Yu Gothic UI";
 }
-/* https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors */
\ No newline at end of file
+/* https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors */
+/* https://meyerweb.com/eric/tools/color-blend/#::1:hex */
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss
index ef7ef6fc..1ef360b4 100644
--- a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss
@@ -86,7 +86,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
 }
 
 .line_fuwa {
-    background-color: #5788a2;
+    background-color: var(--supporters_color_fuwa);
     animation: expandWidth 1s $progress_ease 0.6s forwards;
 }
 
@@ -150,8 +150,8 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
     box-shadow: 0 0 0.4rem 0 var(--dark_800_color);
 }
 .spiral_top::after {
-    background: #5788a2;
-    box-shadow: 0 0 0.4rem 0 #5788a2;
+    background: var(--supporters_color_fuwa);
+    box-shadow: 0 0 0.4rem 0 var(--supporters_color_fuwa);
 }
 .spiral_bottom::before {
     background: var(--received_300_color);
diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss
index 3d392642..73c28ea5 100644
--- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss
@@ -62,7 +62,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
     height: 4rem;
     aspect-ratio: 1 /1;
     border-radius: 50%;
-    background-color: #ffffff;
+    background-color: var(--dark_basic_text_color);
     overflow: hidden;
     position: relative;
     transition: transform 0.6s $progress_ease;
@@ -236,7 +236,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
         background-color: var(--received_300_color);
     }
     &.fuwa_bar {
-        background-color: #5788a2;
+        background-color: var(--supporters_color_fuwa);
     }
     &.basic_bar {
         background-color: var(--dark_800_color);