fix issue with text component and adjust layer selections some more

K Simmons created 3 years ago

Change summary

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(-)

Detailed changes

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,

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,

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: {