From 8e3637c0596f544d2e32b8f9608fb37226265a4d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 14:57:19 +0200
Subject: [PATCH] improve scrollbars, add avatar to menu-item since it appears
 in autocomplete, add wallpaper color

---
 src/App.scss                              | 37 +++++++++++++++++------
 src/components/menu_item.style.js         |  3 +-
 src/components/root.style.js              |  4 ++-
 src/components/scrollbar.style.js         |  2 +-
 src/services/style_setter/style_setter.js |  2 ++
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 2476791c..36415ddc 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -41,12 +41,31 @@ body {
 // have a cursor/pointer to operate them
 @media (any-pointer: fine) {
   * {
-    scrollbar-color: var(--btn) transparent;
+    scrollbar-color: var(--fg) transparent;
 
     &::-webkit-scrollbar {
       background: transparent;
     }
 
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    &::-webkit-resizer {
+      /* stylelint-disable-next-line declaration-no-important */
+      background-color: transparent !important;
+      background-image:
+        linear-gradient(
+          135deg,
+          transparent calc(50% - 1px),
+          var(--textFaint) 50%,
+          transparent calc(50% + 1px),
+          transparent calc(75% - 1px),
+          var(--textFaint) 75%,
+          transparent calc(75% + 1px),
+        );
+    }
+
     &::-webkit-scrollbar-button,
     &::-webkit-scrollbar-thumb {
       box-shadow: var(--shadow);
@@ -67,15 +86,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
+            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px)),
+            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px));
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
+            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px));
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -85,15 +104,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(45deg, transparent 50%, var(--text) 51%);
+            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px)),
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px));
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(45deg, var(--text) 50%, transparent 51%);
+            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px)),
+            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px));
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 3812f894..29376e5e 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -7,7 +7,8 @@ export default {
     'Input',
     'Border',
     'ButtonUnstyled',
-    'Badge'
+    'Badge',
+    'Avatar'
   ],
   states: {
     hover: ':hover',
diff --git a/src/components/root.style.js b/src/components/root.style.js
index e4d33051..53777a4b 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -16,7 +16,9 @@ export default {
     {
       directives: {
         '--font': 'generic | sans-serif',
-        '--monoFont': 'generic | monospace'
+        '--monoFont': 'generic | monospace',
+        '--bg': 'color | #000000', // just to establish order
+        '--wallpaper': 'color | --bg, -2'
       }
     }
   ]
diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js
index 76053d6f..94e6135d 100644
--- a/src/components/scrollbar.style.js
+++ b/src/components/scrollbar.style.js
@@ -4,7 +4,7 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg'
+        background: '--wallpaper'
       }
     }
   ]
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1e16d3b5..69619a50 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -33,6 +33,8 @@ export const applyTheme = async (input) => {
         parts[0],
         ', ',
         parts[0].replace(/button/, 'thumb'),
+        ', ',
+        parts[0].replace(/scrollbar-button/, 'resizer'),
         ' {',
         parts[1],
         '}'