From e4b0cf4c4a3ae5ca270f6883be7e2e868fe37f94 Mon Sep 17 00:00:00 2001
From: Gabriel Arazas <foodogsquared@foodogsquared.one>
Date: Mon, 27 Feb 2023 13:18:09 +0800
Subject: [PATCH] Add site-wide components selection style

This is different from removing the overridden style for CSS
`::selection` where it affects the accessibility. This one is for
components with selection.
---
 assets/scss/base.scss   | 2 ++
 assets/scss/layout.scss | 5 +++--
 assets/scss/main.scss   | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/assets/scss/base.scss b/assets/scss/base.scss
index ae1a059..1f9ea0b 100644
--- a/assets/scss/base.scss
+++ b/assets/scss/base.scss
@@ -129,6 +129,8 @@ table {
 
   tbody {
     tr + tr, tr:first-child { border-top: var(--border-style); }
+
+    tr:hover { background: var(--selection-color); }
   }
 
   th, td { padding: 0.5em; }
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index f461457..9d7ae16 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -105,14 +105,15 @@ footer[aria-label="Site footer"] {
   &[data-theme-system] { order: -2; }
 
   .site__theme-dropdown &:hover {
-    background: var(--accent-color);
-    color: var(--background);
+    background: var(--selection-color);
     cursor: pointer;
   }
 
   &--selected {
     background: var(--base05);
     color: var(--background);
+
+    &:hover { color: var(--base05); }
   };
 }
 
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 84370cb..37438e2 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -15,6 +15,7 @@
   --background: var(--base00);
   --foreground: var(--base05);
   --accent-color: var(--base0C);
+  --selection-color: var(--base02);
 }
 
 $mobile-breakpoint: 600px;