organize tiles color css

src/routes/2048/+page.svelte

@@ -8,7 +8,7 @@
   import Restart from "~icons/mdi/restart";
   import type { KeyboardEventHandler } from "svelte/elements";
 
-  import "./2048_dark.css";
+  import "./2048_colors.css";
 
   const { m } = useI18nStores();
 
@@ -94,7 +94,7 @@
             transition:fade={{ duration: 200 }}
           >
             <span class="text-2xl font-bold">{$m.game_2048GameOver()}</span><br />
-            <span>{$m.game_2048GameOverMessage($score)}</span>
+            <span>{$m.game_2048GameOverMessage({ score: $score })}</span>
           </div>
         {/if}
       </div>
@@ -114,7 +114,12 @@
 
 <style>
   :global(span.tile) {
-    @apply absolute grid h-[var(--tile)] w-[var(--tile)] cursor-pointer place-items-center rounded-sm text-2xl transition-all;
+    @apply absolute grid cursor-pointer place-items-center rounded-sm text-2xl transition-all;
+
+    height: var(--tile);
+    width: var(--tile);
+    color: var(--color);
+    background-color: var(--bg-color);
 
     --stage: min(30rem, 100%);
     --gap: 0.5rem;
@@ -125,64 +130,4 @@
     top: calc(var(--gap) * (var(--row, 0) + 1) + var(--tile) * var(--row));
     left: calc(var(--gap) * (var(--cell, 0) + 1) + var(--tile) * var(--cell));
   }
-
-  :global(.num2) {
-    background: #eee4da;
-    color: #776e65;
-  }
-
-  :global(.num4) {
-    background: #ede0c8;
-    color: #776e65;
-  }
-
-  :global(.num8) {
-    background: #f2b179;
-    color: #f9f6f2;
-  }
-
-  :global(.num16) {
-    background: #f59563;
-    color: #f9f4e7;
-  }
-
-  :global(.num32) {
-    background: #f67c60;
-    color: #f9f6f2;
-  }
-
-  :global(.num64) {
-    background: #f65e3b;
-    color: #f9f6f2;
-  }
-
-  :global(.num128) {
-    background: #edcf73;
-    color: #f9f6f2;
-  }
-
-  :global(.num256) {
-    background: #edcc62;
-    color: #f9f6f2;
-  }
-
-  :global(.num512) {
-    background: #edc850;
-    color: #fb4e4e;
-  }
-
-  :global(.num1024) {
-    background: #6483b5;
-    color: #f9f6f2;
-  }
-
-  :global(.num2048) {
-    background: #edc53f;
-    color: #f9f6f2;
-  }
-
-  :global(.num4096) {
-    background: #edc22d;
-    color: #f9f6f2;
-  }
 </style>

src/routes/2048/2048_colors.css

@@ -0,0 +1,119 @@
+.num2 {
+  --bg-color: #eee4da;
+  --color: #776e65;
+}
+
+.num4 {
+  --bg-color: #ede0c8;
+  --color: #776e65;
+}
+
+.num8 {
+  --bg-color: #f2b179;
+  --color: #f9f6f2;
+}
+
+.num16 {
+  --bg-color: #f59563;
+  --color: #f9f4e7;
+}
+
+.num32 {
+  --bg-color: #f67c60;
+  --color: #f9f6f2;
+}
+
+.num64 {
+  --bg-color: #f65e3b;
+  --color: #f9f6f2;
+}
+
+.num128 {
+  --bg-color: #edcf73;
+  --color: #f9f6f2;
+}
+
+.num256 {
+  --bg-color: #edcc62;
+  --color: #f9f6f2;
+}
+
+.num512 {
+  --bg-color: #edc850;
+  --color: #fb4e4e;
+}
+
+.num1024 {
+  --bg-color: #6483b5;
+  --color: #f9f6f2;
+}
+
+.num2048 {
+  --bg-color: #edc53f;
+  --color: #f9f6f2;
+}
+
+.num4096 {
+  --bg-color: #edc22d;
+  --color: #f9f6f2;
+}
+
+.dark .num2 {
+  --bg-color: #cfe0e9;
+  --color: #284553;
+}
+
+.dark .num4 {
+  --bg-color: #abbfcf;
+  --color: #1c4554;
+}
+
+.dark .num8 {
+  --bg-color: #7c8d9c;
+  --color: #c0c6cc;
+}
+
+.dark .num16 {
+  --bg-color: #5a6570;
+  --color: #ffffff;
+}
+
+.dark .num32 {
+  --bg-color: #3a4d5c;
+  --color: #f9f6f2;
+}
+
+.dark .num64 {
+  --bg-color: #143441;
+  --color: #ffffff;
+}
+
+.dark .num128 {
+  --bg-color: #f2c09a;
+  --color: #000000;
+}
+
+.dark .num256 {
+  --bg-color: #e9937c;
+  --color: #f9f6f2;
+}
+
+.dark .num512 {
+  --bg-color: #e3646a;
+  --color: #f9f6f2;
+}
+
+.dark .num1024 {
+  --bg-color: #7fcbca;
+  --color: #ffffff;
+}
+
+.dark .num2048 {
+  --bg-color: #37b0ae;
+  --color: #ffffff;
+}
+
+.dark .num4096 {
+  --bg-color: #228993;
+  --color: #ffffff;
+}