wip: nodejs 22

.env.development

@@ -1 +1 @@
-VITE_API_URL=http://localhost:8888
+VITE_API_URL=http://127.0.0.1:8888

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20 AS builder
+FROM node:22 AS builder
 
 COPY ./ /app
 

src/components/core/Toast/Toast.module.scss

@@ -2,8 +2,13 @@
     display: flex;
     align-items: center;
     gap: 15px;
-    background-color: var(--bg-2nd-color);
-    border: 2.75px solid var(--toast-border-color);
+    background-color: color-mix(
+        in srgb,
+        var(--toast-color) 20%,
+        transparent 80%
+    );
+    border: 2.75px dotted
+        color-mix(in srgb, var(--toast-color) 50%, transparent 50%); // darken(1.75)
     border-radius: 16px;
     padding: 10px 20px;
     min-width: 20vw;
@@ -13,7 +18,10 @@
 .icon {
     width: 2rem;
     height: 2rem;
-    color: light-dark(var(--toast-text-color), #ffffff);
+    color: light-dark(
+        color-mix(in srgb, var(--toast-color) 80%, black 20%),
+        #ffffff
+    );
     border-radius: 50%;
 }
 
@@ -27,11 +35,17 @@
 .title {
     font-size: 1rem;
     line-height: 1.5rem;
-    color: light-dark(var(--toast-text-color), #ffffff);
+    color: light-dark(
+        color-mix(in srgb, var(--toast-color) 80%, black 20%),
+        #ffffff
+    );
 }
 
 .description {
     font-size: 0.75rem;
     line-height: 1.125rem;
-    color: light-dark(var(--toast-text-color), #ffffff);
+    color: light-dark(
+        color-mix(in srgb, var(--toast-color) 80%, black 20%),
+        #ffffff
+    );
 }

src/components/core/Toast/Toast.tsx

@@ -26,12 +26,10 @@ export function Toast(props: ToastProps) {
         ...rest
     } = props;
 
-    const baseColor = useThemeColor(color);
-
     const variables = {
-        "--toast-bg-color": chroma(baseColor).alpha(0.5).hex(),
-        "--toast-text-color": chroma(baseColor).darken(1.75).hex(),
-        "--toast-border-color": baseColor,
+        // "--toast-color": chroma(baseColor).alpha(0.5).hex(),
+        // "--toast-text-color": chroma(baseColor).darken(1.75).hex(),
+        "--toast-color": `var(--color-${color})`,
     } as CSSProperties;
 
     return (

src/pages/_games/Default/Default.module.scss

@@ -23,6 +23,9 @@
     display: flex;
     justify-content: center;
     width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
     .info {
         position: absolute;

src/pages/_games/Default/Tip/Tip.tsx

@@ -0,0 +1,5 @@
+import { Box } from "@/components/core";
+
+export function Tip() {
+    return <Box></Box>;
+}