update: color system with tailwind theme

.tokeignore

@@ -3,4 +3,6 @@ data
 *.svg
 *.txt
 *.md
-*config*
+*config*
+Inter.css
+MiSans.css

packages/frontend/src/pages/login/index.astro

@@ -7,7 +7,7 @@ import Layout from "@layouts/Layout.astro";
 		<div class="md:w-[40rem] rounded-md md:p-8 md:bg-container md:dark:bg-dark-container">
 			<h1 class="text-5xl leading-[4rem] font-extralight">登录</h1>
 			<p class="mt-4 leading-8 font-medium">很抱歉，但您现在无法登录。</p>
-			<p class="text-sm text-[#534341] dark:text-[#d8c2be]">因为目前还没有写好啦~</p>
+			<p class="text-sm text-on-surface-variant dark:text-dark-on-surface-variant">因为目前还没有写好啦~</p>
 			<p class="mt-4"><a href="/">返回首页</a></p>
 		</div>
 	</main>

packages/frontend/src/pages/register/index.astro

@@ -23,7 +23,7 @@ import RightArrow from "@components/icon/RightArrow.astro";
 				</a>
 			</p>
 			<p class="mt-4 leading-8 font-medium">很抱歉，但您现在无法注册。</p>
-			<p class="text-sm text-[#534341] dark:text-[#d8c2be]">因为目前还没有写好啦~</p>
+			<p class="text-sm text-on-surface-variant dark:text-dark-on-surface-variant">因为目前还没有写好啦~</p>
 			<p class="mt-4"><a href="/">返回首页</a></p>
 		</div>
 	</main>

packages/frontend/src/styles/global.css

@@ -9,17 +9,23 @@
     --color-dark-surface-container-high: #322826;
     --color-dark-container: #271d1c;
     --color-container: #fceae7;
+    --color-on-surface: #231918;
+    --color-dark-on-surface: #f1dfdc;
+    --color-surface: #fff8f6;
+    --color-dark-surface: #1a1110;
+    --color-primary: #904b40;
+    --color-dark-primary: #ffb2b7;
 }
 
 a {
-    @apply text-[#904b40] dark:text-[#ffb2b7];
+    @apply text-primary dark:text-dark-primary;
 }
 
 
 :root {
     font-family: "MiSans", "Inter", sans-serif;
     font-weight: 400;
-    @apply bg-[#fff8f6] dark:bg-[#1a1110] text-[#231918] dark:text-[#f1dfdc]
+    @apply bg-surface dark:bg-dark-surface text-on-surface dark:text-dark-on-surface
 }
 
 @supports (font-variation-settings: normal) {
@@ -28,4 +34,4 @@ a {
         font-optical-sizing: auto;
         font-weight: 330;
     }
-}
+}