add more states to the theme testbench

K Simmons created 3 years ago

Change summary

crates/theme_testbench/src/theme_testbench.rs |  22 +++
styles/src/styleTree/components.ts            |  15 +++
styles/src/styleTree/workspace.ts             |   2 
styles/src/themes/common/ramps.ts             | 101 ++++++++++++--------
4 files changed, 96 insertions(+), 44 deletions(-)

Detailed changes

crates/theme_testbench/src/theme_testbench.rs

@@ -148,7 +148,7 @@ impl ThemeTestbench {
     ) -> Flex {
         Flex::row()
             .with_child(Self::render_button(
-                set_index * 4,
+                set_index * 6,
                 layer_index,
                 set_name,
                 &style_set,
@@ -156,7 +156,23 @@ impl ThemeTestbench {
                 cx,
             ))
             .with_child(Self::render_button(
-                set_index * 4 + 1,
+                set_index * 6 + 1,
+                layer_index,
+                "hovered",
+                &style_set,
+                Some(|style_set| &style_set.hovered),
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 6 + 2,
+                layer_index,
+                "pressed",
+                &style_set,
+                Some(|style_set| &style_set.pressed),
+                cx,
+            ))
+            .with_child(Self::render_button(
+                set_index * 6 + 3,
                 layer_index,
                 "active",
                 &style_set,
@@ -164,7 +180,7 @@ impl ThemeTestbench {
                 cx,
             ))
             .with_child(Self::render_button(
-                set_index * 4 + 2,
+                set_index * 6 + 4,
                 layer_index,
                 "disabled",
                 &style_set,

styles/src/styleTree/components.ts

@@ -85,6 +85,14 @@ export function text(
 ) {
   let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
   let size = fontSizes[properties?.size || "sm"];
+
+  if (typeof styleSetStyleOrProperties === "object") {
+    properties = styleSetStyleOrProperties;
+  }
+  if (typeof styleOrProperties === "object") {
+    properties = styleOrProperties;
+  }
+
   return {
     family: fontFamilies[fontFamily],
     color: style.foreground,
@@ -141,6 +149,13 @@ export function border(
 ): Border {
   let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
 
+  if (typeof styleSetStyleOrProperties === "object") {
+    properties = styleSetStyleOrProperties;
+  }
+  if (typeof styleOrProperties === "object") {
+    properties = styleOrProperties;
+  }
+
   return {
     color: style.border,
     width: 1,

styles/src/styleTree/workspace.ts

@@ -118,7 +118,7 @@ export default function workspace(colorScheme: ColorScheme) {
     toolbar: {
       height: 34,
       background: background(elevation.top),
-      border: border(elevation.top, "variant", { bottom: true }),
+      border: border(elevation.top, { bottom: true }),
       itemSpacing: 8,
       navButton: {
         color: foreground(elevation.top, "on"),

styles/src/themes/common/ramps.ts

@@ -1,5 +1,5 @@
 import chroma, { Color, Scale } from "chroma-js";
-import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, StyleSet } from "./colorScheme";
+import { ColorScheme, Elevation, Layer, Player, RampSet, Shadow, Style, Styles, StyleSet } from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
   let hue = color.hsl()[0];
@@ -151,35 +151,68 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
   };
 }
 
-function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-  let baseSet: StyleSet = {
-    default: {
-      background: ramps.neutral(0.15).hex(),
-      border: ramps.neutral(0.2).hex(),
-      foreground: ramps.neutral(1).hex(),
-    },
-    hovered: {
-      background: ramps.neutral(0.25).hex(),
-      border: ramps.neutral(1.0).hex(),
-      foreground: ramps.neutral(0.9).hex(),
-    },
-    pressed: {
-      background: ramps.neutral(0.55).hex(),
-      border: ramps.neutral(0.9).hex(),
-      foreground: ramps.neutral(0.9).hex(),
-    },
-    active: {
-      background: ramps.neutral(0.8).hex(),
-      border: ramps.neutral(0.8).hex(),
-      foreground: ramps.neutral(0.1).hex(),
-    },
-    disabled: {
-      background: ramps.neutral(0.25).hex(),
-      border: ramps.neutral(1).hex(),
-      foreground: ramps.neutral(0.9).hex(),
-    },
+interface StyleColors {
+  default: number | Color,
+  hovered: number | Color,
+  pressed: number | Color,
+  active: number | Color,
+  disabled: number | Color,
+}
+function buildStyleSet(ramp: Scale, styleDefinitions: {
+  background: StyleColors,
+  border: StyleColors,
+  foreground: StyleColors,
+}): StyleSet {
+  function colorString(indexOrColor: number | Color): string {
+    if (typeof indexOrColor === "number") {
+      return ramp(indexOrColor).hex();
+    } else {
+      return indexOrColor.hex();
+    }
+  }
+
+  function buildStyle(style: Styles): Style {
+    return {
+      background: colorString(styleDefinitions.background[style]),
+      border: colorString(styleDefinitions.border[style]),
+      foreground: colorString(styleDefinitions.foreground[style]),
+    }
   }
 
+  return {
+    default: buildStyle("default"),
+    hovered: buildStyle("hovered"),
+    pressed: buildStyle("pressed"),
+    active: buildStyle("active"),
+    disabled: buildStyle("disabled"),
+  }
+}
+
+function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
+  let baseSet = buildStyleSet(ramps.neutral, {
+    background: {
+      default: 0.15,
+      hovered: 0.25,
+      pressed: 0.55,
+      active: 0.8,
+      disabled: 0.25,
+    },
+    border: {
+      default: 0.2,
+      hovered: 1.0,
+      pressed: 0.9,
+      active: 0.8,
+      disabled: 1,
+    },
+    foreground: {
+      default: 1,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.1,
+      disabled: 0.9,
+    },
+  });
+
   let onSet: StyleSet = {
     default: {
       background: ramps.neutral(0.15).hex(),
@@ -214,12 +247,6 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
     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.1).hex(),
     border: ramps.neutral(1.0).hex(),
@@ -270,12 +297,6 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
     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(),