Improve contrast of project panel active state in light themes

Nate Butler created 2 years ago

Change summary

styles/src/styleTree/projectPanel.ts | 146 +++++++++++++++---------------
1 file changed, 73 insertions(+), 73 deletions(-)

Detailed changes

styles/src/styleTree/projectPanel.ts

@@ -3,80 +3,80 @@ import { withOpacity } from "../utils/color"
 import { background, border, foreground, text } from "./components"
 
 export default function projectPanel(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
+  let layer = colorScheme.middle
 
-    let baseEntry = {
-        height: 24,
-        iconColor: foreground(layer, "variant"),
-        iconSize: 8,
-        iconSpacing: 8,
-    }
+  let baseEntry = {
+    height: 24,
+    iconColor: foreground(layer, "variant"),
+    iconSize: 8,
+    iconSpacing: 8,
+  }
 
-    let entry = {
-        ...baseEntry,
-        text: text(layer, "mono", "variant", { size: "sm" }),
-        hover: {
-            background: background(layer, "variant", "hovered"),
-        },
-        active: {
-            background: background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
-        },
-        activeHover: {
-            background: background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
-        },
-    }
+  let entry = {
+    ...baseEntry,
+    text: text(layer, "mono", "variant", { size: "sm" }),
+    hover: {
+      background: background(layer, "variant", "hovered"),
+    },
+    active: {
+      background: colorScheme.isLight ? withOpacity(background(layer, "active"), 0.5) : background(layer, "active"),
+      text: text(layer, "mono", "active", { size: "sm" }),
+    },
+    activeHover: {
+      background: background(layer, "active"),
+      text: text(layer, "mono", "active", { size: "sm" }),
+    },
+  }
 
-    return {
-        openProjectButton: {
-            background: background(layer),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            margin: {
-                top: 16,
-                left: 16,
-                right: 16,
-            },
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
-            ...text(layer, "sans", "default", { size: "sm" }),
-            hover: {
-                ...text(layer, "sans", "default", { size: "sm" }),
-                background: background(layer, "hovered"),
-                border: border(layer, "active"),
-            },
-        },
-        background: background(layer),
-        padding: { left: 12, right: 12, top: 6, bottom: 6 },
-        indentWidth: 8,
-        entry,
-        draggedEntry: {
-            ...baseEntry,
-            text: text(layer, "mono", "on", { size: "sm" }),
-            background: withOpacity(background(layer, "on"), 0.9),
-            border: border(layer),
-        },
-        ignoredEntry: {
-            ...entry,
-            text: text(layer, "mono", "disabled"),
-        },
-        cutEntry: {
-            ...entry,
-            text: text(layer, "mono", "disabled"),
-            active: {
-                background: background(layer, "active"),
-                text: text(layer, "mono", "disabled", { size: "sm" }),
-            },
-        },
-        filenameEditor: {
-            background: background(layer, "on"),
-            text: text(layer, "mono", "on", { size: "sm" }),
-            selection: colorScheme.players[0],
-        },
-    }
+  return {
+    openProjectButton: {
+      background: background(layer),
+      border: border(layer, "active"),
+      cornerRadius: 4,
+      margin: {
+        top: 16,
+        left: 16,
+        right: 16,
+      },
+      padding: {
+        top: 3,
+        bottom: 3,
+        left: 7,
+        right: 7,
+      },
+      ...text(layer, "sans", "default", { size: "sm" }),
+      hover: {
+        ...text(layer, "sans", "default", { size: "sm" }),
+        background: background(layer, "hovered"),
+        border: border(layer, "active"),
+      },
+    },
+    background: background(layer),
+    padding: { left: 12, right: 12, top: 6, bottom: 6 },
+    indentWidth: 8,
+    entry,
+    draggedEntry: {
+      ...baseEntry,
+      text: text(layer, "mono", "on", { size: "sm" }),
+      background: withOpacity(background(layer, "on"), 0.9),
+      border: border(layer),
+    },
+    ignoredEntry: {
+      ...entry,
+      text: text(layer, "mono", "disabled"),
+    },
+    cutEntry: {
+      ...entry,
+      text: text(layer, "mono", "disabled"),
+      active: {
+        background: background(layer, "active"),
+        text: text(layer, "mono", "disabled", { size: "sm" }),
+      },
+    },
+    filenameEditor: {
+      background: background(layer, "on"),
+      text: text(layer, "mono", "on", { size: "sm" }),
+      selection: colorScheme.players[0],
+    },
+  }
 }