Add git to project panel in theme, use different values for dark and light

Nate Butler created 2 years ago

Change summary

styles/src/styleTree/editor.ts       | 15 +++++++++++----
styles/src/styleTree/projectPanel.ts | 13 ++++++++++++-
2 files changed, 23 insertions(+), 5 deletions(-)

Detailed changes

styles/src/styleTree/editor.ts

@@ -3,9 +3,10 @@ import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
-import { SyntaxHighlightStyle, buildSyntax } from "../themes/common/syntax"
+import { buildSyntax } from "../themes/common/syntax"
 
 export default function editor(colorScheme: ColorScheme) {
+    const { isLight } = colorScheme
     let layer = colorScheme.highest
 
     const autocompleteItem = {
@@ -97,9 +98,15 @@ export default function editor(colorScheme: ColorScheme) {
             foldBackground: foreground(layer, "variant"),
         },
         diff: {
-            deleted: foreground(layer, "negative"),
-            modified: foreground(layer, "warning"),
-            inserted: foreground(layer, "positive"),
+            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(),
             removedWidthEm: 0.275,
             widthEm: 0.22,
             cornerRadius: 0.2,

styles/src/styleTree/projectPanel.ts

@@ -3,6 +3,7 @@ import { withOpacity } from "../utils/color"
 import { background, border, foreground, text } from "./components"
 
 export default function projectPanel(colorScheme: ColorScheme) {
+    const { isLight } = colorScheme
     let layer = colorScheme.middle
 
     let baseEntry = {
@@ -28,6 +29,16 @@ export default function projectPanel(colorScheme: ColorScheme) {
             background: background(layer, "active"),
             text: text(layer, "mono", "active", { size: "sm" }),
         },
+        status: {
+            git: {
+                modified: isLight
+                    ? colorScheme.ramps.yellow(0.6).hex()
+                    : colorScheme.ramps.yellow(0.5).hex(),
+                inserted: isLight
+                    ? colorScheme.ramps.green(0.4).hex()
+                    : colorScheme.ramps.green(0.5).hex(),
+            }
+        }
     }
 
     return {
@@ -79,6 +90,6 @@ export default function projectPanel(colorScheme: ColorScheme) {
             background: background(layer, "on"),
             text: text(layer, "mono", "on", { size: "sm" }),
             selection: colorScheme.players[0],
-        },
+        }
     }
 }