Merge pull request #1831 from zed-industries/theme-tweaks

Theme tweaks

styles/src/styleTree/components.ts

@@ -89,6 +89,7 @@ interface TextProperties {
   size?: keyof typeof fontSizes;
   weight?: FontWeight;
   underline?: boolean;
+  color?: string;
 }
 
 export function text(
@@ -132,11 +133,12 @@ export function text(
   }
 
   let size = fontSizes[properties?.size || "sm"];
+  let color = properties?.color || style.foreground;
 
   return {
     family: fontFamilies[fontFamily],
-    color: style.foreground,
     ...properties,
+    color,
     size,
   };
 }

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,
@@ -267,11 +267,11 @@ export default function editor(colorScheme: ColorScheme) {
         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/projectPanel.ts

@@ -3,30 +3,43 @@ import { background, foreground, text } from "./components";
 
 export default function projectPanel(colorScheme: ColorScheme) {
   let layer = colorScheme.middle;
+
+  let entry = {
+    height: 24,
+    iconColor: foreground(layer, "variant"),
+    iconSize: 8,
+    iconSpacing: 8,
+    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" }),
+    },
+  };
+
   return {
     background: background(layer),
     padding: { left: 12, right: 12, top: 6, bottom: 6 },
     indentWidth: 8,
-    entry: {
-      height: 24,
-      iconColor: foreground(layer, "variant"),
-      iconSize: 8,
-      iconSpacing: 8,
-      text: text(layer, "mono", "variant", { size: "sm" }),
-      hover: {
-        background: background(layer, "variant", "hovered"),
-      },
+    entry,
+    ignoredEntry: {
+      ...entry,
+      text: text(layer, "mono", "disabled"),
+    },
+    cutEntry: {
+      ...entry,
+      text: text(layer, "mono", "disabled"),
       active: {
         background: background(layer, "active"),
-        text: text(layer, "mono", "active", { size: "sm" }),
-      },
-      activeHover: {
-        background: background(layer, "active"),
-        text: text(layer, "mono", "active", { size: "sm" }),
+        text: text(layer, "mono", "disabled", { size: "sm" }),
       },
     },
-    cutEntryFade: 0.4,
-    ignoredEntryFade: 0.6,
     filenameEditor: {
       background: background(layer, "on"),
       text: text(layer, "mono", "on", { size: "sm" }),

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,