From 72426aef87276389364354bcb92e839c7c353acc Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 11 Apr 2024 14:17:17 +0700
Subject: [PATCH] refactor: color name

---
 src/components/FormDialog.vue |  6 +++---
 src/css/app.scss              | 30 ++++++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 09fc96f1..895f1199 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -300,12 +300,12 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .close-btn {
-  color: hsl(var(--negative));
-  background-color: hsla(var(--negative) / 0.1);
+  color: hsl(var(--negative-bg));
+  background-color: hsla(var(--negative-bg) / 0.1);
 
   &.dark {
     background-color: transparent;
-    border: 1px solid hsl(var(--negative));
+    border: 1px solid hsl(var(--negative-bg));
   }
 }
 
diff --git a/src/css/app.scss b/src/css/app.scss
index d787f14f..23cd0df9 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -14,12 +14,18 @@ html {
   --surface-1: white;
   --surface-2: var(--gray-1);
   --surface-3: var(--gray-2);
+
   --text-mute: var(--stone-4-hsl);
+
   --info-fg: 0 0% 100%;
   --info-bg: var(--blue-6-hsl);
-  --negative: var(--red-9-hsl);
+
+  --negative-fg: 0 0% 100%;
+  --negative-fg: var(--red-9-hsl);
+
   --gender-male: var(--blue-5-hsl);
   --gender-female: var(--pink-7-hsl);
+
   --shadow-color: 220 3% 15%;
   --shadow-strength: 5%;
   --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0, 0, 0, .067);
@@ -29,7 +35,7 @@ html {
 }
 
 :where(.dark, .body--dark) {
-  --brand-1: var(--blue-7);
+  --brand-1: var(--blue-5);
   --brand-2: #f50000;
   --border-color: var(--gray-8);
   --foreground: white;
@@ -38,7 +44,9 @@ html {
   --surface-1: var(--gray-11);
   --surface-2: var(--gray-10);
   --surface-3: var(--gray-9);
+
   --text-mute: var(--stone-8-hsl);
+
   --shadow-color: 220 0% 100%;
   --shadow-strength: 25%;
   --inner-shadow-highlight: inset 0 -.5px 0 0 hsla(0, 0%, 100%, .067), inset 0 .5px 0 0 rgba(0, 0, 0, .467);
@@ -101,3 +109,21 @@ html {
 .surface-3 {
   background-color: var(--surface-3) !important;
 }
+
+.app-text-info {
+  color: hsl(var(--info-bg));
+}
+
+.app-bg-info {
+  color: hsl(var(--info-fg));
+  background-color: hsl(var(--info-bg));
+}
+
+.app-text-danger {
+  color: hsl(var(--info-bg));
+}
+
+.app-bg-danger {
+  color: hsl(var(--negative-fg));
+  background-color: hsl(var(--negative-bg));
+}