Tweak scrollbar styling

Max Brunsfeld created 3 years ago

Change summary

styles/src/styleTree/editor.ts     | 8 ++++++--
styles/src/themes/common/base16.ts | 2 +-
2 files changed, 7 insertions(+), 3 deletions(-)

Detailed changes

styles/src/styleTree/editor.ts

@@ -172,7 +172,7 @@ export default function editor(theme: Theme) {
       },
     },
     scrollbar: {
-      width: 12,
+      width: 14,
       track: {
         border: {
           left: true,
@@ -181,7 +181,11 @@ export default function editor(theme: Theme) {
         },
       },
       thumb: {
-        background: borderColor(theme, "secondary"),
+        background: withOpacity(borderColor(theme, "secondary"), 0.5),
+        border: {
+          width: 1,
+          color: withOpacity(borderColor(theme, 'muted'), 0.5),
+        }
       }
     },
     compositionMark: {

styles/src/themes/common/base16.ts

@@ -123,7 +123,7 @@ export function createTheme(
   const borderColor = {
     primary: sample(ramps.neutral, isLight ? 1.5 : 0),
     secondary: sample(ramps.neutral, isLight ? 1.25 : 1),
-    muted: sample(ramps.neutral, isLight ? 1 : 3),
+    muted: sample(ramps.neutral, isLight ? 1.25 : 3),
     active: sample(ramps.neutral, isLight ? 4 : 3),
     onMedia: withOpacity(darkest, 0.1),
     ok: sample(ramps.green, 0.3),