Pull git indicator colors out of theme

Julia , Kay Simmons , and Mikayla Maki created 3 years ago

Co-Authored-By: Kay Simmons <[e-mail]>
Co-Authored-By: Mikayla Maki <[e-mail]>

Change summary

crates/editor/src/element.rs       | 15 ++++++++++++---
crates/theme/src/theme.rs          |  1 +
styles/src/styleTree/editor.ts     |  6 ++++--
styles/src/themes/common/base16.ts |  5 +++++
styles/src/themes/common/theme.ts  |  1 +
5 files changed, 23 insertions(+), 5 deletions(-)

Detailed changes

crates/editor/src/element.rs

@@ -545,10 +545,19 @@ impl EditorElement {
             }
         }
 
+        let (inserted_color, modified_color, deleted_color) = {
+            let editor = &cx.global::<Settings>().theme.editor;
+            (
+                editor.diff_background_inserted,
+                editor.diff_background_modified,
+                editor.diff_background_deleted,
+            )
+        };
+
         for hunk in &layout.diff_hunks {
             let color = match hunk.status() {
-                DiffHunkStatus::Added => Color::green(),
-                DiffHunkStatus::Modified => Color::blue(),
+                DiffHunkStatus::Added => inserted_color,
+                DiffHunkStatus::Modified => modified_color,
 
                 //TODO: This rendering is entirely a horrible hack
                 DiffHunkStatus::Removed => {
@@ -565,7 +574,7 @@ impl EditorElement {
 
                     cx.scene.push_quad(Quad {
                         bounds: highlight_bounds,
-                        background: Some(Color::red()),
+                        background: Some(deleted_color),
                         border: Border::new(0., Color::transparent_black()),
                         corner_radius: 1. * line_height,
                     });

crates/theme/src/theme.rs

@@ -490,6 +490,7 @@ pub struct Editor {
     pub document_highlight_write_background: Color,
     pub diff_background_deleted: Color,
     pub diff_background_inserted: Color,
+    pub diff_background_modified: Color,
     pub line_number: Color,
     pub line_number_active: Color,
     pub guest_selections: Vec<SelectionStyle>,

styles/src/styleTree/editor.ts

@@ -7,6 +7,7 @@ import {
   player,
   popoverShadow,
   text,
+  textColor,
   TextColor,
 } from "./components";
 import hoverPopover from "./hoverPopover";
@@ -59,8 +60,9 @@ export default function editor(theme: Theme) {
       indicator: iconColor(theme, "secondary"),
       verticalScale: 0.618
     },
-    diffBackgroundDeleted: backgroundColor(theme, "error"),
-    diffBackgroundInserted: backgroundColor(theme, "ok"),
+    diffBackgroundDeleted: theme.ramps.red(0.3).hex(),
+    diffBackgroundInserted: theme.ramps.green(0.3).hex(),
+    diffBackgroundModified: theme.ramps.blue(0.3).hex(),
     documentHighlightReadBackground: theme.editor.highlight.occurrence,
     documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence,
     errorColor: theme.textColor.error,

styles/src/themes/common/base16.ts

@@ -113,6 +113,11 @@ export function createTheme(
       hovered: sample(ramps.blue, 0.1),
       active: sample(ramps.blue, 0.15),
     },
+    on500Ok: {
+      base: sample(ramps.green, 0.05),
+      hovered: sample(ramps.green, 0.1),
+      active: sample(ramps.green, 0.15)
+    }
   };
 
   const borderColor = {

styles/src/themes/common/theme.ts

@@ -78,6 +78,7 @@ export default interface Theme {
     // Hacks for elements on top of the editor
     on500: BackgroundColorSet;
     ok: BackgroundColorSet;
+    on500Ok: BackgroundColorSet;
     error: BackgroundColorSet;
     on500Error: BackgroundColorSet;
     warning: BackgroundColorSet;