add theme testbench command

styles/src/styleTree/app.ts

@@ -47,5 +47,60 @@ export default function app(colorScheme: ColorScheme): Object {
     updateNotification: updateNotification(colorScheme),
     tooltip: tooltip(colorScheme),
     terminal: terminal(colorScheme.lowest),
+    colorScheme: {
+      ...colorScheme,
+      lowest: {
+        ...colorScheme.lowest,
+        ramps: {
+          neutral: colorScheme.lowest.ramps.neutral.colors(100, "hex"),
+          red: colorScheme.lowest.ramps.red.colors(100, "hex"),
+          orange: colorScheme.lowest.ramps.orange.colors(100, "hex"),
+          yellow: colorScheme.lowest.ramps.yellow.colors(100, "hex"),
+          green: colorScheme.lowest.ramps.green.colors(100, "hex"),
+          cyan: colorScheme.lowest.ramps.cyan.colors(100, "hex"),
+          blue: colorScheme.lowest.ramps.blue.colors(100, "hex"),
+          violet: colorScheme.lowest.ramps.violet.colors(100, "hex"),
+          magenta: colorScheme.lowest.ramps.magenta.colors(100, "hex"),
+        }
+      },
+      middle: {
+        ...colorScheme.middle,
+        ramps: {
+          neutral: colorScheme.middle.ramps.neutral.colors(100, "hex"),
+          red: colorScheme.middle.ramps.red.colors(100, "hex"),
+          orange: colorScheme.middle.ramps.orange.colors(100, "hex"),
+          yellow: colorScheme.middle.ramps.yellow.colors(100, "hex"),
+          green: colorScheme.middle.ramps.green.colors(100, "hex"),
+          cyan: colorScheme.middle.ramps.cyan.colors(100, "hex"),
+          blue: colorScheme.middle.ramps.blue.colors(100, "hex"),
+          violet: colorScheme.middle.ramps.violet.colors(100, "hex"),
+          magenta: colorScheme.middle.ramps.magenta.colors(100, "hex"),
+        }
+      },
+      highest: {
+        ...colorScheme.highest,
+        ramps: {
+          neutral: colorScheme.highest.ramps.neutral.colors(100, "hex"),
+          red: colorScheme.highest.ramps.red.colors(100, "hex"),
+          orange: colorScheme.highest.ramps.orange.colors(100, "hex"),
+          yellow: colorScheme.highest.ramps.yellow.colors(100, "hex"),
+          green: colorScheme.highest.ramps.green.colors(100, "hex"),
+          cyan: colorScheme.highest.ramps.cyan.colors(100, "hex"),
+          blue: colorScheme.highest.ramps.blue.colors(100, "hex"),
+          violet: colorScheme.highest.ramps.violet.colors(100, "hex"),
+          magenta: colorScheme.highest.ramps.magenta.colors(100, "hex"),
+        }
+      },
+      players: [
+        colorScheme.players["0"],
+        colorScheme.players["1"],
+        colorScheme.players["2"],
+        colorScheme.players["3"],
+        colorScheme.players["4"],
+        colorScheme.players["5"],
+        colorScheme.players["6"],
+        colorScheme.players["7"],
+      ]
+    }
   };
 }

styles/src/styleTree/editor.ts

@@ -133,8 +133,8 @@ export default function editor(colorScheme: ColorScheme) {
   return {
     textColor: syntax.primary.color,
     background: background(layer),
-    activeLineBackground: elevation.ramps.neutral(0.29).hex(),
-    highlightedLineBackground: elevation.ramps.neutral(0.18).hex(),
+    activeLineBackground: background(layer, "base", "variant"),
+    highlightedLineBackground: background(layer, "base", "variant"),
     codeActions: {
       indicator: foreground(layer, "base", "variant"),
       verticalScale: 0.618

styles/src/themes/common/ramps.ts

@@ -123,14 +123,14 @@ function evenSamples(min: number, max: number): number[] {
 function resampleSet(ramps: RampSet, samples: number[]): RampSet {
   return {
     neutral: resample(ramps.neutral, samples),
-    red: resample(ramps.neutral, samples),
-    orange: resample(ramps.neutral, samples),
-    yellow: resample(ramps.neutral, samples),
-    green: resample(ramps.neutral, samples),
-    cyan: resample(ramps.neutral, samples),
-    blue: resample(ramps.neutral, samples),
-    violet: resample(ramps.neutral, samples),
-    magenta: resample(ramps.neutral, samples),
+    red: resample(ramps.red, samples),
+    orange: resample(ramps.orange, samples),
+    yellow: resample(ramps.yellow, samples),
+    green: resample(ramps.green, samples),
+    cyan: resample(ramps.cyan, samples),
+    blue: resample(ramps.blue, samples),
+    violet: resample(ramps.violet, samples),
+    magenta: resample(ramps.magenta, samples),
   }
 }
 
@@ -140,22 +140,65 @@ function resample(scale: Scale, samples: number[]): Scale {
 }
 
 function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation {
-  let style: Style = {
-    background: ramps.neutral(0.25).hex(),
-    border: ramps.neutral(0.9).hex(),
+  return {
+    ramps,
+
+    bottom: topLayer(ramps, isLight),
+    middle: topLayer(ramps, isLight),
+    top: topLayer(ramps, isLight),
+
+    shadow,
+  };
+}
+
+function topLayer(ramps: RampSet, isLight: boolean): Layer {
+  let defaultStyle: Style = {
+    background: ramps.neutral(0).hex(),
+    border: ramps.neutral(0.7).hex(),
     foreground: ramps.neutral(1).hex(),
   };
 
-  let styleSet: StyleSet = {
-    default: style,
-    variant: style,
-    active: style,
-    disabled: style,
-    hovered: style,
-    pressed: style,
+  let variantStyle: Style = {
+    background: ramps.neutral(0.2).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(0.8).hex(),
   };
 
-  let layer: Layer = {
+
+  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,
@@ -163,14 +206,4 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
     warning: styleSet,
     negative: styleSet
   };
-
-  return {
-    ramps,
-
-    bottom: layer,
-    middle: layer,
-    top: layer,
-
-    shadow,
-  };
 }