Revert tab bar to pre-elevation style

Nate Butler created 3 years ago

Change summary

styles/src/styleTree/tabBar.ts    | 44 +++++++++++++++-----------------
styles/src/themes/common/ramps.ts |  4 +-
2 files changed, 23 insertions(+), 25 deletions(-)

Detailed changes

styles/src/styleTree/tabBar.ts

@@ -6,16 +6,14 @@ export default function tabBar(colorScheme: ColorScheme) {
   const height = 32;
 
   let elevation = colorScheme.lowest;
-  let activeLayerActiveTab = elevation.top;
-  let activeLayerInactiveTab = elevation.middle;
-  let inactiveLayerActiveTab = elevation.middle;
-  let inactiveLayerInactiveTab = elevation.bottom;
+  let activeLayer = elevation.top;
+  let layer = elevation.middle;
 
   const tab = {
     height,
-    text: text(activeLayerInactiveTab, "sans", "variant", { size: "sm" }),
-    background: background(activeLayerInactiveTab),
-    border: border(activeLayerInactiveTab, {
+    text: text(layer, "sans", "variant", { size: "sm" }),
+    background: background(layer),
+    border: border(layer, {
       right: true,
       bottom: true,
       overlay: true,
@@ -28,24 +26,24 @@ export default function tabBar(colorScheme: ColorScheme) {
 
     // Close icons
     iconWidth: 8,
-    iconClose: foreground(activeLayerInactiveTab, "variant"),
-    iconCloseActive: foreground(activeLayerInactiveTab),
+    iconClose: foreground(layer, "variant"),
+    iconCloseActive: foreground(layer),
 
     // Indicators
-    iconConflict: foreground(activeLayerInactiveTab, "warning"),
-    iconDirty: foreground(activeLayerInactiveTab, "info"),
+    iconConflict: foreground(layer, "warning"),
+    iconDirty: foreground(layer, "info"),
 
     // When two tabs of the same name are open, a label appears next to them
     description: {
       margin: { left: 8 },
-      ...text(activeLayerInactiveTab, "sans", "disabled", { size: "2xs" }),
+      ...text(layer, "sans", "disabled", { size: "2xs" }),
     },
   };
 
   const activePaneActiveTab = {
     ...tab,
-    background: background(activeLayerActiveTab),
-    text: text(activeLayerActiveTab, "sans", { size: "sm" }),
+    background: background(activeLayer),
+    text: text(activeLayer, "sans", "active", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false,
@@ -54,14 +52,14 @@ export default function tabBar(colorScheme: ColorScheme) {
 
   const inactivePaneInactiveTab = {
     ...tab,
-    background: background(inactiveLayerInactiveTab),
-    text: text(inactiveLayerInactiveTab, "sans", "variant", { size: "sm" }),
+    background: background(layer),
+    text: text(layer, "sans", "variant", { size: "sm" }),
   };
 
   const inactivePaneActiveTab = {
     ...tab,
-    background: background(inactiveLayerActiveTab),
-    text: text(inactiveLayerActiveTab, "sans", "variant", { size: "sm" }),
+    background: background(activeLayer),
+    text: text(layer, "sans", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false,
@@ -70,16 +68,16 @@ export default function tabBar(colorScheme: ColorScheme) {
 
   const draggedTab = {
     ...activePaneActiveTab,
-    background: withOpacity(tab.background, 0.8),
+    background: withOpacity(tab.background, 0.95),
     border: undefined as any,
     shadow: elevation.above.shadow,
   };
 
   return {
     height,
-    background: background(activeLayerInactiveTab),
+    background: background(layer),
     dropTargetOverlayColor: withOpacity(
-      foreground(activeLayerInactiveTab),
+      foreground(layer),
       0.6
     ),
     activePane: {
@@ -92,11 +90,11 @@ export default function tabBar(colorScheme: ColorScheme) {
     },
     draggedTab,
     paneButton: {
-      color: foreground(activeLayerInactiveTab, "variant"),
+      color: foreground(layer, "variant"),
       iconWidth: 12,
       buttonWidth: activePaneActiveTab.height,
       hover: {
-        color: foreground(activeLayerInactiveTab, "hovered"),
+        color: foreground(layer, "hovered"),
       },
     },
     paneButtonContainer: {

styles/src/themes/common/ramps.ts

@@ -211,8 +211,8 @@ function buildLayer(bgBase: number, fgBase: number, step: number) {
     },
     foreground: {
       default: fgBase,
-      hovered: fgBase - step,
-      pressed: fgBase - step,
+      hovered: fgBase,
+      pressed: fgBase,
       active: fgBase,
       disabled: bgBase + step * 4,
     },