Refine editor styles

Nate Butler created 3 years ago

- Update active line backgrounds and line numbers
- Add a higher contrast border between the dock and panes

Change summary

styles/src/styleTree/editor.ts    | 12 ++++++------
styles/src/styleTree/workspace.ts |  2 +-
2 files changed, 7 insertions(+), 7 deletions(-)

Detailed changes

styles/src/styleTree/editor.ts

@@ -137,7 +137,7 @@ export default function editor(colorScheme: ColorScheme) {
   return {
     textColor: syntax.primary.color,
     background: background(layer),
-    activeLineBackground: background(layer, "on"),
+    activeLineBackground: withOpacity(background(layer, "on"), 0.75),
     highlightedLineBackground: background(layer, "on"),
     codeActions: {
       indicator: foreground(layer, "variant"),
@@ -162,7 +162,7 @@ export default function editor(colorScheme: ColorScheme) {
     errorColor: background(layer, "negative"),
     gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
-    lineNumber: foreground(layer, "disabled"),
+    lineNumber: withOpacity(foreground(layer), 0.35),
     lineNumberActive: foreground(layer),
     renameFade: 0.6,
     unnecessaryCodeFade: 0.5,
@@ -261,17 +261,17 @@ export default function editor(colorScheme: ColorScheme) {
       },
     },
     scrollbar: {
-      width: 12,
+      width: 8,
       minHeightFactor: 1.0,
       track: {
         border: border(layer, "variant", { left: true }),
       },
       thumb: {
-        background: withOpacity(borderColor(layer, "variant"), 0.5),
+        background: withOpacity(background(layer, "inverted"), 0.4),
         border: {
           width: 1,
-          color: withOpacity(borderColor(layer, 'variant'), 0.5),
-        }
+          color: borderColor(layer, 'variant'),
+        },
       }
     },
     compositionMark: {

styles/src/styleTree/workspace.ts

@@ -219,7 +219,7 @@ export default function workspace(colorScheme: ColorScheme) {
       initialSizeBottom: 480,
       wash_color: withOpacity(background(colorScheme.highest), 0.5),
       panel: {
-        border: border(colorScheme.highest),
+        border: border(colorScheme.middle),
       },
       maximized: {
         margin: 32,