More tweaks and add variant to theme testbench

K Simmons created 3 years ago

Change summary

crates/theme_testbench/src/theme_testbench.rs | 198 +++++---------------
styles/src/styleTree/app.ts                   |   8 
styles/src/styleTree/contactsPanel.ts         |   5 
styles/src/styleTree/projectPanel.ts          |   3 
styles/src/styleTree/tabBar.ts                |  15 -
styles/src/styleTree/workspace.ts             |  14 
styles/src/themes/common/ramps.ts             |  58 ++++++
7 files changed, 124 insertions(+), 177 deletions(-)

Detailed changes

crates/theme_testbench/src/theme_testbench.rs

@@ -92,176 +92,32 @@ impl ThemeTestbench {
     ) -> Container {
         Flex::column()
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        0,
-                        layer_index,
-                        "base",
-                        &layer.base,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        1,
-                        layer_index,
-                        "active",
-                        &layer.base,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        2,
-                        layer_index,
-                        "disabled",
-                        &layer.base,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(0, layer_index, "base", &layer.base, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        3,
-                        layer_index,
-                        "on",
-                        &layer.on,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        4,
-                        layer_index,
-                        "active",
-                        &layer.on,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        5,
-                        layer_index,
-                        "disabled",
-                        &layer.on,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(1, layer_index, "on", &layer.on, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        6,
-                        layer_index,
-                        "info",
-                        &layer.info,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        7,
-                        layer_index,
-                        "active",
-                        &layer.info,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        8,
-                        layer_index,
-                        "disabled",
-                        &layer.info,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(2, layer_index, "info", &layer.info, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        9,
-                        layer_index,
-                        "positive",
-                        &layer.positive,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        10,
-                        layer_index,
-                        "active",
-                        &layer.positive,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        11,
-                        layer_index,
-                        "disabled",
-                        &layer.positive,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(3, layer_index, "positive", &layer.positive, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        12,
-                        layer_index,
-                        "warning",
-                        &layer.warning,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        13,
-                        layer_index,
-                        "active",
-                        &layer.warning,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        14,
-                        layer_index,
-                        "disabled",
-                        &layer.warning,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(4, layer_index, "warning", &layer.warning, cx)
                     .flex(1., false)
                     .boxed(),
             )
             .with_child(
-                Flex::row()
-                    .with_child(Self::render_button(
-                        15,
-                        layer_index,
-                        "negative",
-                        &layer.negative,
-                        None,
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        16,
-                        layer_index,
-                        "active",
-                        &layer.negative,
-                        Some(|style_set| &style_set.active),
-                        cx,
-                    ))
-                    .with_child(Self::render_button(
-                        17,
-                        layer_index,
-                        "disabled",
-                        &layer.negative,
-                        Some(|style_set| &style_set.disabled),
-                        cx,
-                    ))
+                Self::render_button_set(5, layer_index, "negative", &layer.negative, cx)
                     .flex(1., false)
                     .boxed(),
             )
@@ -278,6 +134,48 @@ impl ThemeTestbench {
             })
     }
 
+    fn render_button_set(
+        set_index: usize,
+        layer_index: usize,
+        set_name: &'static str,
+        style_set: &StyleSet,
+        cx: &mut RenderContext<'_, Self>,
+    ) -> Flex {
+        Flex::row()
+            .with_child(Self::render_button(
+                set_index * 4,
+                layer_index,
+                set_name,
+                &style_set,
+                None,
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 4 + 1,
+                layer_index,
+                "variant",
+                &style_set,
+                Some(|style_set| &style_set.variant),
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 4 + 2,
+                layer_index,
+                "active",
+                &style_set,
+                Some(|style_set| &style_set.active),
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 4 + 3,
+                layer_index,
+                "disabled",
+                &style_set,
+                Some(|style_set| &style_set.disabled),
+                cx,
+            ))
+    }
+
     fn render_button(
         button_index: usize,
         layer_index: usize,

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