diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 3062a73130cb1a9641086af32bc3b49221e9538d..7776c4f14fe272cdc6c0d2ea571be93572194f2c 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 440ef5b439d60a035c5822a7be55ba2baca4b4ac..49f3a3b472537ce50a0200ddd6f0ed2ced0d2e4d 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 dc3744415967c923848a9b68390dcf4fe6012ae5..aced6d2a2ff4578bf2a1c7f593f22eb4f9f6f0cd 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: {