From 0eb507a977d93f5fd2ae6e324c504186bf757da0 Mon Sep 17 00:00:00 2001
From: Zsolt Tasnadi <rastasi@gmail.com>
Date: Tue, 4 Aug 2026 10:07:01 +0200
Subject: [PATCH] matrix colors

---
 .../src/page/builds/BuildsIndexPage.vue       | 88 ++++++++++++++++---
 1 file changed, 76 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/page/builds/BuildsIndexPage.vue b/apps/frontend/src/page/builds/BuildsIndexPage.vue
index 2eeab3b..3427ce1 100644
--- a/apps/frontend/src/page/builds/BuildsIndexPage.vue
+++ b/apps/frontend/src/page/builds/BuildsIndexPage.vue
@@ -18,14 +18,14 @@
           <thead>
             <tr>
               <th rowspan="2" class="builds-th-engine">Engine</th>
-              <th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" class="builds-th-group">
+              <th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" :class="['builds-th-group', group.color]">
                 <i :class="group.icon" class="builds-group-icon"></i>
                 <span class="builds-group-label">{{ group.label }}</span>
               </th>
             </tr>
             <tr>
               <template v-for="group in columnGroups" :key="group.label">
-                <th v-for="col in group.kinds" :key="col.kind" class="builds-th-sub">
+                <th v-for="(col, colIdx) in group.kinds" :key="col.kind" :class="['builds-th-sub', group.color, { 'builds-group-start': colIdx === 0 }]">
                   {{ col.sub }}
                 </th>
               </template>
@@ -35,7 +35,7 @@
             <tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
               <td class="builds-td-engine">{{ info.label }}</td>
               <template v-for="group in columnGroups" :key="group.label">
-                <td v-for="col in group.kinds" :key="col.kind" class="builds-td-kind">
+                <td v-for="(col, colIdx) in group.kinds" :key="col.kind" :class="['builds-td-kind', group.color, { 'builds-group-start': colIdx === 0 }]">
                   <i v-if="info.kinds.includes(col.kind)" class="fa-solid fa-check builds-check"></i>
                   <i v-else class="fa-solid fa-xmark builds-xmark"></i>
                 </td>
@@ -50,7 +50,7 @@
     <div v-if="data" class="builds-mobile">
       <div v-for="(info, platform) in data.platforms" :key="platform" class="builds-card">
         <h3 class="builds-card-title">{{ info.label }}</h3>
-        <div v-for="group in columnGroups" :key="group.label" class="builds-card-group">
+        <div v-for="group in columnGroups" :key="group.label" :class="['builds-card-group', group.color]">
           <div class="builds-card-group-header">
             <i :class="group.icon" class="builds-card-group-icon"></i>
             <span>{{ group.label }}</span>
@@ -89,6 +89,7 @@ const columnGroups = [
   {
     label: 'Windows',
     icon: 'fa-brands fa-windows',
+    color: 'group-blue',
     kinds: [
       { kind: 'win_x64', sub: '64 bit' },
       { kind: 'win_x86', sub: '32 bit' },
@@ -97,6 +98,7 @@ const columnGroups = [
   {
     label: 'Linux',
     icon: 'fa-brands fa-linux',
+    color: 'group-amber',
     kinds: [
       { kind: 'linux_x64', sub: '64 bit' },
     ],
@@ -104,6 +106,7 @@ const columnGroups = [
   {
     label: 'Mac',
     icon: 'fa-brands fa-apple',
+    color: 'group-slate',
     kinds: [
       { kind: 'mac_x64', sub: 'Intel' },
       { kind: 'mac_arm64', sub: 'ARM' },
@@ -113,6 +116,7 @@ const columnGroups = [
   {
     label: 'Web',
     icon: 'fa-solid fa-globe',
+    color: 'group-green',
     kinds: [
       { kind: 'html', sub: 'HTML5' },
     ],
@@ -120,6 +124,7 @@ const columnGroups = [
   {
     label: 'Cartridge',
     icon: 'fa-solid fa-gamepad',
+    color: 'group-purple',
     kinds: [
       { kind: 'cartridge', sub: 'Native' },
     ],
@@ -127,6 +132,7 @@ const columnGroups = [
   {
     label: 'Others',
     icon: 'fa-solid fa-folder-open',
+    color: 'group-gray',
     kinds: [
       { kind: 'source', sub: 'Source' },
       { kind: 'docs', sub: 'Docs' },
@@ -154,19 +160,70 @@ onMounted(() => store.fetch())
   @apply px-6 py-4 text-left text-xs font-bold text-gray-400 uppercase tracking-widest bg-gray-50 border-b border-gray-200;
 }
 .builds-th-group {
-  @apply px-2 py-3 text-center bg-gray-50 border-b border-gray-200 border-l border-gray-200;
+  @apply px-2 py-3 text-center border-b border-gray-200;
 }
 .builds-group-icon {
-  @apply text-gray-500 text-base;
+  @apply text-base;
 }
 .builds-group-label {
-  @apply ml-1.5 text-xs font-bold text-gray-500 uppercase tracking-wider;
+  @apply ml-1.5 text-xs font-bold uppercase tracking-wider;
 }
 .builds-th-sub {
-  @apply px-3 py-2 text-center text-[10px] font-bold text-gray-400 uppercase tracking-wider bg-gray-50/50;
+  @apply px-3 py-2 text-center text-[10px] font-bold uppercase tracking-wider;
 }
+.builds-group-start {
+  @apply border-l-2;
+}
+
+/* Group color themes */
+.group-blue .builds-group-icon,
+.group-blue .builds-group-label { @apply text-blue-500; }
+.th-group.group-blue, th.group-blue { background-color: rgb(239 246 255); }
+td.group-blue { background-color: rgb(239 246 255 / 0.4); }
+th.group-blue.builds-group-start, td.group-blue.builds-group-start { @apply border-l-blue-300; }
+
+.group-amber .builds-group-icon,
+.group-amber .builds-group-label { @apply text-amber-600; }
+th.group-amber { background-color: rgb(255 251 235); }
+td.group-amber { background-color: rgb(255 251 235 / 0.4); }
+th.group-amber.builds-group-start, td.group-amber.builds-group-start { @apply border-l-amber-300; }
+
+.group-slate .builds-group-icon,
+.group-slate .builds-group-label { @apply text-slate-500; }
+th.group-slate { background-color: rgb(248 250 252); }
+td.group-slate { background-color: rgb(248 250 252 / 0.4); }
+th.group-slate.builds-group-start, td.group-slate.builds-group-start { @apply border-l-slate-300; }
+
+.group-green .builds-group-icon,
+.group-green .builds-group-label { @apply text-emerald-500; }
+th.group-green { background-color: rgb(236 253 245); }
+td.group-green { background-color: rgb(236 253 245 / 0.4); }
+th.group-green.builds-group-start, td.group-green.builds-group-start { @apply border-l-emerald-300; }
+
+.group-purple .builds-group-icon,
+.group-purple .builds-group-label { @apply text-purple-500; }
+th.group-purple { background-color: rgb(250 245 255); }
+td.group-purple { background-color: rgb(250 245 255 / 0.4); }
+th.group-purple.builds-group-start, td.group-purple.builds-group-start { @apply border-l-purple-300; }
+
+.group-gray .builds-group-icon,
+.group-gray .builds-group-label { @apply text-gray-500; }
+th.group-gray { background-color: rgb(249 250 251); }
+td.group-gray { background-color: rgb(249 250 251 / 0.4); }
+th.group-gray.builds-group-start, td.group-gray.builds-group-start { @apply border-l-gray-300; }
+
+/* Sub-header inherits group tint */
+.builds-th-sub.group-blue { @apply text-blue-400; }
+.builds-th-sub.group-amber { @apply text-amber-500; }
+.builds-th-sub.group-slate { @apply text-slate-400; }
+.builds-th-sub.group-green { @apply text-emerald-400; }
+.builds-th-sub.group-purple { @apply text-purple-400; }
+.builds-th-sub.group-gray { @apply text-gray-400; }
 .builds-row {
-  @apply border-t border-gray-100 hover:bg-gray-50/50 transition-colors;
+  @apply border-t border-gray-100 transition-colors;
+}
+.builds-row:hover td {
+  filter: brightness(0.97);
 }
 .builds-td-engine {
   @apply px-6 py-4 font-bold text-gray-900 whitespace-nowrap;
@@ -196,13 +253,20 @@ onMounted(() => store.fetch())
   @apply text-lg font-bold text-gray-900 mb-4 pb-3 border-b border-gray-100;
 }
 .builds-card-group {
-  @apply py-2;
+  @apply py-2 px-3 rounded-lg my-1;
 }
+.builds-card-group.group-blue { background-color: rgb(239 246 255 / 0.5); }
+.builds-card-group.group-amber { background-color: rgb(255 251 235 / 0.5); }
+.builds-card-group.group-slate { background-color: rgb(248 250 252 / 0.5); }
+.builds-card-group.group-green { background-color: rgb(236 253 245 / 0.5); }
+.builds-card-group.group-purple { background-color: rgb(250 245 255 / 0.5); }
+.builds-card-group.group-gray { background-color: rgb(249 250 251 / 0.5); }
+
 .builds-card-group-header {
-  @apply flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-wider mb-2;
+  @apply flex items-center gap-2 text-xs font-bold uppercase tracking-wider mb-2;
 }
 .builds-card-group-icon {
-  @apply text-gray-400 text-sm;
+  @apply text-sm;
 }
 .builds-card-kinds {
   @apply flex flex-wrap gap-x-5 gap-y-1 pl-5 mb-2;