From d0b35b5e195cf86519a566b3a9624c7152152611 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 26 Sep 2022 22:51:00 -0400
Subject: [PATCH] WIP Update style trees

---
 styles/src/styleTree/app.ts            | 2 +-
 styles/src/styleTree/commandPalette.ts | 6 +++---
 styles/src/styleTree/contactFinder.ts  | 8 ++++----
 styles/src/styleTree/picker.ts         | 2 +-
 styles/src/styleTree/statusBar.ts      | 6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts
index f6bff0414201782e160996c438a5bc3d86ca4e86..1a78de05879b63312b7762cfb2ca660c2f13dab8 100644
--- a/styles/src/styleTree/app.ts
+++ b/styles/src/styleTree/app.ts
@@ -38,7 +38,7 @@ export default function app(colorScheme: ColorScheme): Object {
     contactFinder: contactFinder(colorScheme),
     search: search(colorScheme),
     breadcrumbs: {
-      ...text(colorScheme.lowest.top, "sans"),
+      ...text(colorScheme.lowest.top, "sans", "variant"),
       padding: {
         left: 6,
       },
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index a9fbf98695a7d763dae0c0b1094bc5ae93a4de6d..70af97e8451578b3dafa5e1847bb6092a07154cf 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -2,14 +2,13 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { text, border, background } from "./components";
 
 export default function commandPalette(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest.bottom;
+  let layer = colorScheme.highest.top;
   return {
     keystrokeSpacing: 8,
     key: {
       text: text(layer, "mono", { size: "xs" }),
       cornerRadius: 4,
       background: background(layer, "on"),
-      border: border(layer),
       padding: {
         top: 2,
         bottom: 2,
@@ -20,7 +19,8 @@ export default function commandPalette(colorScheme: ColorScheme) {
         left: 2,
       },
       active: {
-        text: text(layer, "mono", "on", "active", { size: "xs" }),
+        text: text(layer, "mono", "active", { size: "xs" }),
+        background: background(layer, "on", "active"),
       },
     },
   };
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index 40ba6b3179faefec5ab5442bebd9e3e1855c6f22..2dc70918831f6922676b6ded873b01aed9f62099 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -3,10 +3,10 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, foreground } from "./components";
 
 export default function contactFinder(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle.bottom;
+  let layer = colorScheme.highest.top;
   const contactButton = {
-    background: background(layer),
-    color: foreground(layer),
+    background: background(layer, "variant"),
+    color: foreground(layer, "variant"),
     iconWidth: 8,
     buttonWidth: 16,
     cornerRadius: 8,
@@ -27,7 +27,7 @@ export default function contactFinder(colorScheme: ColorScheme) {
     contactButton: {
       ...contactButton,
       hover: {
-        background: background(layer, "hovered"),
+        background: background(layer, "variant", "hovered"),
       },
     },
     disabledContactButton: {
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 1c1e4495c390f2c939a4d882a0f7484f01eec07f..738824b16f162efe19ab77998fe07f7585238aad 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -7,7 +7,7 @@ import {
 
 export default function picker(colorScheme: ColorScheme) {
   let elevation = colorScheme.highest;
-  let layer = elevation.middle;
+  let layer = elevation.top;
   return {
     background: background(layer),
     cornerRadius: 8,
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 219b0081c21ff6571fe0fcb63f7836b324692028..c539b8a7fb201d8f43409ac3ee84b5450c204144 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -96,10 +96,10 @@ export default function statusBar(colorScheme: ColorScheme) {
       item: {
         ...statusContainer,
         iconSize: 16,
-        iconColor: foreground(layer),
+        iconColor: foreground(layer, "variant"),
         hover: {
           iconColor: foreground(layer, "hovered"),
-          background: background(layer, "hovered"),
+          background: background(layer, "variant"),
         },
         active: {
           iconColor: foreground(layer, "active"),
@@ -111,7 +111,7 @@ export default function statusBar(colorScheme: ColorScheme) {
         padding: 2,
         margin: { bottom: -1, right: -1 },
         border: border(layer),
-        background: background(layer),
+        background: background(layer, "info"),
       },
     },
   };