WIP Update style trees

Nate Butler created 3 years ago

Change summary

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

Detailed changes

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,
       },

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"),
       },
     },
   };

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

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,

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"),
       },
     },
   };