From 2aa2e5af7a80d6b54cd8e87b33801585b311c0a1 Mon Sep 17 00:00:00 2001
From: K Simmons <keith@zed.dev>
Date: Wed, 19 Oct 2022 13:45:00 -0700
Subject: [PATCH] fix issue with text component and adjust layer selections
 some more

---
 styles/src/styleTree/components.ts  |  3 ++-
 styles/src/styleTree/contextMenu.ts |  2 +-
 styles/src/styleTree/workspace.ts   | 10 +++++-----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 3062a73130..7776c4f14f 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -123,7 +123,6 @@ export function text(
   properties?: TextProperties
 ) {
   let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
-  let size = fontSizes[properties?.size || "sm"];
 
   if (typeof styleSetStyleOrProperties === "object") {
     properties = styleSetStyleOrProperties;
@@ -132,6 +131,8 @@ export function text(
     properties = styleOrProperties;
   }
 
+  let size = fontSizes[properties?.size || "sm"];
+
   return {
     family: fontFamilies[fontFamily],
     color: style.foreground,
diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts
index 440ef5b439..49f3a3b472 100644
--- a/styles/src/styleTree/contextMenu.ts
+++ b/styles/src/styleTree/contextMenu.ts
@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, borderColor, text } from "./components";
 
 export default function contextMenu(colorScheme: ColorScheme) {
-  let layer = colorScheme.lowest;
+  let layer = colorScheme.middle;
   return {
     background: background(layer),
     cornerRadius: 10,
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index dc37444159..aced6d2a2f 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -139,16 +139,16 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       toggleContactsButton: {
         cornerRadius: 6,
-        color: foreground(layer),
+        color: foreground(layer, "variant"),
         iconWidth: 8,
         buttonWidth: 20,
         active: {
-          background: background(layer, "active"),
-          color: foreground(layer, "active"),
+          background: background(layer, "variant", "active"),
+          color: foreground(layer, "variant", "active"),
         },
         hover: {
-          background: background(layer, "hovered"),
-          color: foreground(layer, "hovered"),
+          background: background(layer, "variant", "hovered"),
+          color: foreground(layer, "variant", "hovered"),
         },
       },
       toggleContactsBadge: {