Migrate to sass-embedded

client/package.json

@@ -19,7 +19,7 @@
     "react-router": "^7.1.5",
     "react-router-dom": "^7.1.5",
     "react-sound": "^1.2.0",
-    "sass": "^1.83.4",
+    "sass-embedded": "^1.85.0",
     "socket.io-client": "^4.8.1"
   },
   "devDependencies": {

client/src/pages/Create/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .create-page
   display: flex
@@ -16,11 +16,13 @@
     margin-bottom: 1rem
 
   .info-area span
+    padding: 0.1rem 0.3rem
     color: $primary
+    background-color: $text
     user-select: text
 
   .qr-area
-    background-color: $text
+    background-color: rgb(255,255,255)
     padding: 1rem
     border-radius: 1rem
   .qr-area svg

client/src/pages/End/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .end-page
   display: grid

client/src/pages/Game/states/Calculate/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .calculate-state
   display: flex

client/src/pages/Game/states/Waiting/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .waiting-state
   display: flex

client/src/pages/Game/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .game-page
   height: 100%

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

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .dialog-overlay
   position: fixed
@@ -6,7 +6,7 @@
   left: 0
   width: 100%
   height: 100%
-  background-color: rgba(0, 0, 0, 0.5)
+  background-color: rgba(211, 211, 211, 0.5)
   z-index: 10
   display: flex
   justify-content: center

client/src/pages/Home/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .home-page
   display: flex
@@ -43,8 +43,6 @@
 
   img
     width: 2.5rem
-    height: 2.5rem
-    border-radius: 50%
 
   h2
     margin: 0

client/src/pages/Imprint/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .legal-page
   display: flex

client/src/pages/Join/states/Code/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .error
   width: 16rem

client/src/pages/Join/styles.sass

@@ -1,4 +1,4 @@
-@import "@styles/colors"
+@use "@styles/colors" as *
 
 .join-page
   display: flex

client/vite.config.js

@@ -3,6 +3,13 @@ import react from "@vitejs/plugin-react";
 import * as path from "path";
 
 export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
   plugins: [react()],
   resolve: {
     alias: {