Extract colors

client/src/common/styles/colors.sass

@@ -1,6 +1,8 @@
 $background: rgba(255, 255, 255, 0.14)
 $border: rgba(255, 255, 255, 0.35)
-
 $white: #ECECEC
-
 $green: #26EE5E
+$black: #000
+$dark-gray: #1e1e1e
+$light-gray: #aaa
+$red: #ff0000

client/src/pages/Game/components/MusicSlider/styles.sass

@@ -1,3 +1,5 @@
+@import "@/common/styles/colors"
+
 .otamatone-container
   display: flex
   justify-content: center
@@ -41,7 +43,7 @@
   position: absolute
   top: -30px
   font-size: 24pt
-  color: #fff
+  color: $white
 
 .otamatone-face
   width: 100px

client/src/pages/Game/styles.sass

@@ -1,3 +1,5 @@
+@import "@/common/styles/colors"
+
 .game-page
   display: flex
   flex-direction: column
@@ -22,12 +24,12 @@
     justify-content: center
     width: 50%
     margin-right: 20px
-    color: #fff
+    color: $white
     text-align: center
 
     h2
       font-size: 36pt
-      color: #fff
+      color: $white
       margin-bottom: 20px
 
     .song-card
@@ -55,12 +57,12 @@
 
         .song-names
           font-size: 24pt
-          color: #fff
+          color: $white
           margin-bottom: 10px
 
         .song-description
           font-size: 14pt
-          color: #aaa
+          color: $border
 
   .chat-window
     width: 50%
@@ -84,13 +86,13 @@
       .chat-title
         margin-left: 10px
         font-size: 16pt
-        color: #fff
+        color: $white
 
     .chat-messages
       flex: 1
       padding: 10px
       overflow-y: auto
-      color: #fff
+      color: $white
 
       .message
         margin-bottom: 10px
@@ -113,8 +115,8 @@
         border: none
         border-radius: 5px
         outline: none
-        background: rgba(255, 255, 255, 0.2)
-        color: #fff
+        background: $background
+        color: $white
 
       button
         margin-left: 10px

client/src/pages/Home/components/ActionCard/styles.sass

@@ -1,4 +1,4 @@
-@use "@/common/styles/colors" as *
+@import "@/common/styles/colors"
 
 .action-card
   display: flex

client/src/pages/Home/styles.sass

@@ -1,3 +1,5 @@
+@import "@/common/styles/colors"
+
 .home-page
   display: flex
   flex-direction: column