From a5d6c7ee4a1ff1b3cee68dd1cf1623eda4f1a60f Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 13 Dec 2024 12:43:47 +0100
Subject: [PATCH] Better visual selected state for table rows

---
 panel/src/components/Layout/Table.vue | 19 +++++++++++++++----
 panel/src/styles/config/colors.css    |  2 ++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/panel/src/components/Layout/Table.vue b/panel/src/components/Layout/Table.vue
index 3dfe76b4e3..46d569bc88 100644
--- a/panel/src/components/Layout/Table.vue
+++ b/panel/src/components/Layout/Table.vue
@@ -74,6 +74,8 @@
 						:class="{
 							'k-table-sortable-row': rowIsSortable(row)
 						}"
+						:data-selectable="rowIsSelectable(row)"
+						:data-sortable="rowIsSortable(row)"
 					>
 						<!-- Index & drag handle -->
 						<td
@@ -395,7 +397,7 @@ export default {
 :root {
 	--table-cell-padding: var(--spacing-3);
 	--table-color-back: light-dark(var(--color-white), var(--color-gray-850));
-	--table-color-border: var(--panel-color-back);
+	--table-color-border: light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.375));
 	--table-color-hover: light-dark(var(--color-gray-100), rgba(0, 0, 0, 0.1));
 	--table-color-th-back: light-dark(
 		var(--color-gray-100),
@@ -481,6 +483,9 @@ export default {
 }
 
 /* Table Body */
+.k-table tbody tr td {
+	background: var(--table-color-back);
+}
 .k-table tbody tr:hover td {
 	background: var(--table-color-hover);
 }
@@ -532,17 +537,23 @@ export default {
 }
 
 /* Table Index with sort handle */
-.k-table .k-table-index-column .k-sort-handle {
+.k-table tr[data-sortable="true"] .k-table-index-column .k-sort-handle {
 	--button-width: 100%;
 	display: none;
 }
-.k-table tr.k-table-sortable-row:hover .k-table-index-column .k-table-index {
+.k-table tr[data-sortable="true"]:hover .k-table-index-column .k-table-index {
 	display: none;
 }
-.k-table tr.k-table-sortable-row:hover .k-table-index-column .k-sort-handle {
+.k-table tr[data-sortable="true"]:hover .k-table-index-column .k-sort-handle {
 	display: flex;
 }
 
+/* Selectable rows */
+.k-table tr[data-selectable="true"]:has(.k-table-index-column input:checked) {
+	--table-color-back: light-dark(var(--color-blue-250), var(--color-blue-800));
+	--table-color-hover: var(--table-color-back);
+}
+
 /* Table Options */
 .k-table .k-table-options-column {
 	padding: 0;
diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index 9776e04fde..d6e1586856 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -150,6 +150,7 @@
 
 	--color-blue-l-100: calc(var(--color-l-100) + var(--color-blue-boost));
 	--color-blue-l-200: calc(var(--color-l-200) + var(--color-blue-boost));
+	--color-blue-l-250: calc(var(--color-l-250) + var(--color-blue-boost));
 	--color-blue-l-300: calc(var(--color-l-300) + var(--color-blue-boost));
 	--color-blue-l-400: calc(var(--color-l-400) + var(--color-blue-boost));
 	--color-blue-l-500: calc(var(--color-l-500) + var(--color-blue-boost));
@@ -160,6 +161,7 @@
 
 	--color-blue-100: hsl(var(--color-blue-hs), var(--color-blue-l-100));
 	--color-blue-200: hsl(var(--color-blue-hs), var(--color-blue-l-200));
+	--color-blue-250: hsl(var(--color-blue-hs), var(--color-blue-l-250));
 	--color-blue-300: hsl(var(--color-blue-hs), var(--color-blue-l-300));
 	--color-blue-400: hsl(var(--color-blue-hs), var(--color-blue-l-400));
 	--color-blue-500: hsl(var(--color-blue-hs), var(--color-blue-l-500));