From 681adc1a75be50e5e1692d7ec41678ff8179aa1c Mon Sep 17 00:00:00 2001
From: PieterCK <pieterceka123@gmail.com>
Date: Mon, 17 Jun 2024 15:34:32 +0700
Subject: [PATCH] app_components: Refactor table-bordered border color rule.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This optional commit also fixes #30431. It refactors the CSS
for the .table-bordered class, which is used directly by the
tables in the info_overlay menus (keyboard_shortcuts,
search_operators, markdown_help). This approach differs from
PR #30431, where the CSS for .overlay_body—a wrapper div
around these tables—was edited instead.

This commit make the CSS rules for .table-bordered class
use a new CSS variable for its border color where appropriate.
This is aligns with how we organizes CSS in #29859 and in
cd63e8d93cb0f84ec1e4ead348a225cb798f9cf0.

Fixes #39431.
---
 web/styles/app_components.css | 6 +++---
 web/styles/app_variables.css  | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 3fe95cd246..843ffe58cb 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -799,7 +799,7 @@ div.overlay {
 }
 
 .table-bordered {
-    border: 1px solid hsl(0deg 0% 87%);
+    border: 1px solid var(--color-border-table-bordered);
     border-collapse: separate;
     border-left: 0;
     border-radius: 4px;
@@ -809,8 +809,8 @@ div.overlay {
 
     & th,
     td {
-        border-left: 1px solid hsl(0deg 0% 87%);
-        border-top: 1px solid hsl(0deg 0% 87%);
+        border-left: 1px solid var(--color-border-table-bordered);
+        border-top: 1px solid var(--color-border-table-bordered);
         padding: 4px 5px;
         text-align: left;
     }
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 239f3bc511..a41493bd4b 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -389,6 +389,7 @@
 
     /* Settings table colors */
     --color-border-table-striped: hsl(0deg 0% 87%);
+    --color-border-table-bordered: hsl(0deg 0% 87%);
 
     /* Markdown code colors */
     --color-markdown-code-text: hsl(0deg 0% 0%);
@@ -747,6 +748,7 @@
 
     /* Settings table colors */
     --color-border-table-striped: hsl(0deg 0% 0% / 20%);
+    --color-border-table-bordered: hsl(0deg 0% 0% / 20%);
 
     /* Markdown code colors */
     /* Note that Markdown code-link colors are identical