More tweaks and add variant to theme testbench

styles/src/styleTree/app.ts

@@ -16,9 +16,9 @@ import tooltip from "./tooltip";
 import terminal from "./terminal";
 import { ColorScheme } from "../themes/common/colorScheme";
 
-export const panel = {
-  padding: { top: 12, bottom: 12 },
-};
+// export const panel = {
+//   padding: { top: 12, bottom: 12 },
+// };
 
 export default function app(colorScheme: ColorScheme): Object {
   return {
@@ -38,7 +38,7 @@ export default function app(colorScheme: ColorScheme): Object {
     contactFinder: contactFinder(colorScheme),
     search: search(colorScheme),
     breadcrumbs: {
-      ...text(colorScheme.lowest.top, "sans", "base", "variant"),
+      ...text(colorScheme.lowest.top, "sans"),
       padding: {
         left: 6,
       },

styles/src/styleTree/contactsPanel.ts

@@ -1,5 +1,4 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import { panel } from "./app";
 import {
   background,
   border,
@@ -49,8 +48,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
   };
 
   return {
-    ...panel,
-    padding: { top: panel.padding.top, bottom: 0 },
+    background: background(layer),
+    padding: { top: 12, bottom: 0 },
     userQueryEditor: {
       background: background(layer, "on"),
       cornerRadius: 6,

styles/src/styleTree/projectPanel.ts

@@ -1,11 +1,10 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import { panel } from "./app";
 import { background, foreground, text } from "./components";
 
 export default function projectPanel(colorScheme: ColorScheme) {
   let layer = colorScheme.lowest.middle;
   return {
-    ...panel,
+    background: background(layer),
     padding: { left: 12, right: 12, top: 6, bottom: 6 },
     indentWidth: 8,
     entry: {

styles/src/styleTree/tabBar.ts

@@ -12,7 +12,7 @@ export default function tabBar(colorScheme: ColorScheme) {
     height,
     background: background(layer),
     border: border(layer, {
-      left: true,
+      right: true,
       bottom: true,
       overlay: true,
     }),
@@ -22,7 +22,7 @@ export default function tabBar(colorScheme: ColorScheme) {
     iconDirty: foreground(layer, "info"),
     iconWidth: 8,
     spacing: 8,
-    text: text(layer, "sans", { size: "sm" }),
+    text: text(layer, "sans", "base", "variant", { size: "sm" }),
     padding: {
       left: 8,
       right: 8,
@@ -46,13 +46,13 @@ export default function tabBar(colorScheme: ColorScheme) {
   const inactivePaneInactiveTab = {
     ...tab,
     background: background(layer),
-    text: text(layer, "sans", { size: "sm" }),
+    text: text(layer, "sans", "base", "variant", { size: "sm" }),
   };
 
   const inactivePaneActiveTab = {
     ...tab,
-    background: background(layer),
-    text: text(layer, "sans", "base", "variant", { size: "sm" }),
+    background: background(elevation.top),
+    text: text(elevation.top, "sans", "base", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -70,11 +70,6 @@ export default function tabBar(colorScheme: ColorScheme) {
     height,
     background: background(layer),
     dropTargetOverlayColor: withOpacity(foreground(layer), 0.6),
-    border: border(layer, {
-      left: true,
-      bottom: true,
-      overlay: true,
-    }),
     activePane: {
       activeTab: activePaneActiveTab,
       inactiveTab: tab,

styles/src/styleTree/workspace.ts

@@ -12,7 +12,7 @@ import tabBar from "./tabBar";
 
 export default function workspace(colorScheme: ColorScheme) {
   const elevation = colorScheme.lowest;
-  const layer = elevation.middle;
+  const layer = elevation.bottom;
   const titlebarPadding = 6;
 
   return {
@@ -117,20 +117,20 @@ export default function workspace(colorScheme: ColorScheme) {
     },
     toolbar: {
       height: 34,
-      background: background(layer),
-      border: border(layer, "base", "variant", { bottom: true }),
+      background: background(elevation.top),
+      border: border(elevation.top, "base", "variant", { bottom: true }),
       itemSpacing: 8,
       navButton: {
-        color: foreground(layer, "on"),
+        color: foreground(elevation.top, "on"),
         iconWidth: 12,
         buttonWidth: 24,
         cornerRadius: 6,
         hover: {
-          color: foreground(layer, "on", "hovered"),
-          background: background(layer, "on", "hovered"),
+          color: foreground(elevation.top, "on", "hovered"),
+          background: background(elevation.top, "on", "hovered"),
         },
         disabled: {
-          color: foreground(layer, "on", "disabled"),
+          color: foreground(elevation.top, "on", "disabled"),
         },
       },
       padding: { left: 8, right: 8, top: 4, bottom: 4 },

styles/src/themes/common/ramps.ts

@@ -143,7 +143,7 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
   return {
     ramps,
 
-    bottom: topLayer(ramps, isLight),
+    bottom: bottomLayer(ramps, isLight),
     middle: middleLayer(ramps, isLight),
     top: topLayer(ramps, isLight),
 
@@ -151,6 +151,62 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
   };
 }
 
+function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
+  let defaultStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
+
+  let variantStyle: Style = {
+    background: ramps.neutral(0.3).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(0.8).hex(),
+  };
+
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.4).hex(),
+    border: ramps.neutral(1.0).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let pressedStyle: Style = {
+    background: ramps.neutral(0.55).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let activeStyle: Style = {
+    background: ramps.neutral(0.8).hex(),
+    border: ramps.neutral(0.8).hex(),
+    foreground: ramps.neutral(0.1).hex(),
+  };
+
+  let disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    variant: variantStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
+
+  return {
+    base: styleSet,
+    on: styleSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
+}
+
 function middleLayer(ramps: RampSet, isLight: boolean): Layer {
   let defaultStyle: Style = {
     background: ramps.neutral(0.2).hex(),