refactor: update tailwind configure contant

app/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-background-primary h-screen">
+  <div class="bg-bg-primary h-screen">
     <!-- route outlet -->
     <!-- component matched by the route will render here -->
     <router-view></router-view>

app/src/components/AuthForm.vue

@@ -86,14 +86,14 @@ const handleChange = () => {
 <template>
   <!-- login page -->
   <div
-    class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
+    class="bg-bg border-8 border-bg-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
     <h1 class="text-text-primary text-3xl font-black mb-2">{{ title }}</h1>
     <form @submit.prevent="handleSubmit()" class="w-full">
       <div v-if="socialLogin && hasSocialLogins">
         <a
           v-if="availableMethods.google"
-          class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-background-primary text-text-secondary w-full border-text-secondary border-2"
+          class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-bg-primary text-text-secondary w-full border-text-secondary border-2"
           href="/api/v1/auth/google"
         >
           <font-awesome-icon
@@ -104,7 +104,7 @@ const handleChange = () => {
         </a>
         <a
           v-if="availableMethods.github"
-          class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-background-primary text-text-secondary w-full border-text-secondary border-2"
+          class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-bg-primary text-text-secondary w-full border-text-secondary border-2"
           href="/api/v1/auth/github"
         >
           <font-awesome-icon
@@ -125,7 +125,7 @@ const handleChange = () => {
           type="text"
           id="username"
           ref="usernameInput"
-          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
           :placeholder="type === 'login' ? 'Email / Username' : 'Username'"
           v-model="username"
           required
@@ -145,7 +145,7 @@ const handleChange = () => {
           type="email"
           id="email"
           ref="emailInput"
-          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
           placeholder="Email"
           v-model="email"
           required
@@ -157,7 +157,7 @@ const handleChange = () => {
         <input
           type="password"
           id="password"
-          class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
+          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
           placeholder="Password"
           v-model="password"
           required
@@ -168,7 +168,7 @@ const handleChange = () => {
         {{ errorMessage }}
       </p>
       <button
-        class="inline-flex justify-center rounded-lg font-black py-2 bg-text-primary text-background w-full"
+        class="inline-flex justify-center rounded-lg font-black py-2 bg-text-primary text-bg w-full"
         type="submit"
       >
         <span v-if="type === 'login'">Log In</span>

app/src/components/CompleteModal.vue

@@ -17,7 +17,7 @@ setTimeout(() => {
 
 <template>
   <div v-if="showModal" class="modal">
-    <div class="modal-content bg-background-secondary rounded-lg">
+    <div class="modal-content bg-bg-secondary rounded-lg">
       <span class="close text-text" @click="closeModal">&times;</span>
       <h2 class="text-2xl text-text mb-5 w-full inline-flex justify-center">
         Quest Completed!

app/src/components/ControlPalette.vue

@@ -1,29 +1,25 @@
 <template>
   <section class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between">
-    <button id="solution" class="bg-disabled-background rounded-lg p-2">
+    <button id="solution" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
-        class="text-disabled-text"
+        class="text-text-disabled"
       />
-      <p class="text-disabled-text inline">Solution</p>
+      <p class="text-text-disabled inline">Solution</p>
     </button>
-    <button
+    <button id="reset" class="bg-bg-secondary rounded-lg p-2" @click="reset">
-      id="reset"
-      class="bg-background-secondary rounded-lg p-2"
-      @click="reset"
-    >
       <font-awesome-icon
         :icon="['fas', 'arrow-rotate-left']"
         class="text-text-primary"
       />
       <p class="text-text-primary inline">Reset</p>
     </button>
-    <button id="continue" class="bg-disabled-background rounded-lg p-2">
+    <button id="continue" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-right']"
-        class="text-disabled-text"
+        class="text-text-disabled"
       />
-      <p class="text-disabled-text inline">Continue</p>
+      <p class="text-text-disabled inline">Continue</p>
     </button>
   </section>
 </template>

app/src/components/GameHeaderPart.vue

@@ -25,22 +25,19 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div
+  <div id="header" class="bg-bg-secondary content-center h-full w-full p-1">
-    id="header"
-    class="bg-background-secondary content-center h-full w-full p-1"
-  >
     <div class="h-full flex items-center justify-center mx-3">
       <div class="flex items-center gap-3">
-        <!-- <button id="stream" class="flex items-center">
+        <!-- <button id="stream" class="flex items-center h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'bars']"
-            class="text-text-primary h-5 w-5"
+            class="text-text-primary h-full w-full"
           />
         </button>
-        <button id="backward" class="flex items-center">
+        <button id="backward" class="flex items-center h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'arrow-left']"
-            class="text-text-tertiary h-5 w-5"
+            class="text-text-tertiary h-full w-full"
           />
         </button> -->
         <button>
@@ -53,28 +50,28 @@ onMounted(async () => {
         </button>
       </div>
       <div class="h-full w-full flex gap-3 items-center justify-end">
-        <!-- <button id="warning" class="flex items-center">
+        <!-- <button id="warning" class="flex items-center h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'triangle-exclamation']"
-            class="text-text-primary h-5 w-5"
+            class="text-text-primary h-full w-full"
           />
         </button>
-        <button id="setting" class="flex items-center">
+        <button id="setting" class="flex items-center h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'gear']"
-            class="text-text-primary h-5 w-5"
+            class="text-text-primary h-full w-full"
           />
         </button>
-        <button id="fullscreen" class="flex items-center">
+        <button id="fullscreen" class="flex items-center h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'expand']"
-            class="text-text-primary h-5 w-5"
+            class="text-text-primary h-full w-full"
           />
         </button> -->
-        <button @click="handleLogout">
+        <button class="h-5 w-5" @click="handleLogout">
           <font-awesome-icon
             :icon="['fas', 'arrow-right-from-bracket']"
-            class="text-text-primary h-5 w-5"
+            class="text-text-primary h-full w-full"
           />
         </button>
       </div>

app/src/components/HintPart.vue

@@ -55,8 +55,8 @@ const right = () => {
       </button>
     </div>
   </div>
-  <div id="hint" class="bg-background flex flex-wrap">
+  <div id="hint" class="bg-bg flex flex-wrap">
-    <div class="bg-background h-full rounded-lg p-8 m-1">
+    <div class="bg-bg h-full rounded-lg p-8 m-1">
       <p class="inline text-text font-xl font-xl">
         {{ sessionManager.hints.value[current] }}
       </p>

app/src/components/TerminalPart.vue

@@ -4,7 +4,7 @@
   <div
     id="terminal"
     ref="terminal"
-    class="bg-background-secondary h-[calc(100%-5%)] p-0.5"
+    class="bg-bg-secondary h-[calc(100%-5%)] p-0.5"
   ></div>
 </template>
 

app/src/views/GamePage.vue

@@ -21,7 +21,7 @@ onMounted(async () => {
 
 <template>
   <!-- game header -->
-  <div class="h-[5vh] w-full">
+  <div class="h-[6vh] w-full">
     <GameHeaderPart />
   </div>
   <!-- current status indicator -->
@@ -31,9 +31,9 @@ onMounted(async () => {
     :value="sessionManager.status.value"
   />
   <!-- main -->
-  <div id="main" class="h-[95vh] w-full flex p-3 space-x-3">
+  <div id="main" class="h-[94vh] w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
-    <div class="bg-background-secondary h-full w-1/3 rounded-lg">
+    <div class="bg-bg-secondary h-full w-1/3 rounded-lg">
       <section id="quest" class="h-2/3 p-3">
         <QuestPart />
       </section>
@@ -43,7 +43,7 @@ onMounted(async () => {
       </section>
     </div>
     <!-- Terminal and Hint -->
-    <div class="bg-background h-full w-1/3 rounded-lg">
+    <div class="bg-bg h-full w-1/3 rounded-lg">
       <section id="terminal" class="h-3/5">
         <TerminalPart />
       </section>
@@ -54,11 +54,8 @@ onMounted(async () => {
     <!-- Visualization -->
     <div class="h-full w-1/3">
       <div class="bg-border rounded-xl h-[90%] p-2">
-        <div class="bg-background rounded-lg h-full p-2">
+        <div class="bg-bg rounded-lg h-full p-2">
-          <section
+          <section id="visualization" class="bg-bg-primary h-full rounded-md">
-            id="visualization"
-            class="bg-background-primary h-full rounded-md"
-          >
             <VisualizationPart />
           </section>
         </div>

app/tailwind.config.js

@@ -4,21 +4,19 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: {
+        bg: {
           primary: '#282A33',
           secondary: '#131313',
+          disabled: '#454552',
           DEFAULT: '#000000',
         },
         text: {
           primary: '#00FF00',
           secondary: '#ADADB5',
           tertiary: '#4A4B63',
+          disabled: '#6A6B8C',
           DEFAULT: '#FFFFFF',
         },
-        disabled: {
-          background: '#454552',
-          text: '#6A6B8C',
-        },
         border: {
           DEFAULT: '#526B4E',
         },