Add seperate scrollbar styling

Mikayla Maki created 2 years ago

Change summary

crates/editor/src/element.rs   |  2 +-
crates/theme/src/theme.rs      |  8 ++++++++
crates/theme/src/ui.rs         |  2 +-
styles/src/styleTree/editor.ts | 11 +++++++++++
4 files changed, 21 insertions(+), 2 deletions(-)

Detailed changes

crates/editor/src/element.rs

@@ -1052,7 +1052,7 @@ impl EditorElement {
                 ..Default::default()
             });
 
-            let diff_style = theme::current(cx).editor.diff.clone();
+            let diff_style = &theme::current(cx).editor.scrollbar.git;
             for hunk in layout
                 .position_map
                 .snapshot

crates/theme/src/theme.rs

@@ -682,6 +682,14 @@ pub struct Scrollbar {
     pub thumb: ContainerStyle,
     pub width: f32,
     pub min_height_factor: f32,
+    pub git: GitDiffColors
+}
+
+#[derive(Clone, Deserialize, Default)]
+pub struct GitDiffColors {
+    pub inserted: Color,
+    pub modified: Color,
+    pub deleted: Color
 }
 
 #[derive(Clone, Deserialize, Default)]

crates/theme/src/ui.rs

@@ -3,7 +3,7 @@ use std::borrow::Cow;
 use gpui::{
     color::Color,
     elements::{
-        ConstrainedBox, Container, ContainerStyle, Empty, Flex, KeystrokeLabel, Label, LabelStyle,
+        ConstrainedBox, Container, ContainerStyle, Empty, Flex, KeystrokeLabel, Label,
         MouseEventHandler, ParentElement, Stack, Svg,
     },
     fonts::TextStyle,

styles/src/styleTree/editor.ts

@@ -247,6 +247,17 @@ export default function editor(colorScheme: ColorScheme) {
                     color: borderColor(layer, "variant"),
                 },
             },
+            git: {
+                  deleted: isLight
+                      ? colorScheme.ramps.red(0.5).hex()
+                      : colorScheme.ramps.red(0.4).hex(),
+                  modified: isLight
+                      ? colorScheme.ramps.yellow(0.3).hex()
+                      : colorScheme.ramps.yellow(0.5).hex(),
+                  inserted: isLight
+                      ? colorScheme.ramps.green(0.4).hex()
+                      : colorScheme.ramps.green(0.5).hex(),
+            }
         },
         compositionMark: {
             underline: {